You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1017 lines
34 KiB
1017 lines
34 KiB
<template>
|
|
<div class="map-wrapper">
|
|
<div class="map-content">
|
|
<!-- 左边图书馆基本信息 -->
|
|
<div class="lib-info">
|
|
<div class="database-title">{{ libCurrent && libCurrent.name }}</div>
|
|
<div class="lib-content">
|
|
<div style="width: 5.175rem; height: 3rem; overflow: hidden;">
|
|
<swiper v-if="swiperOption" :key="swiperKey" ref="mySwiper" class="swiperLib" :options="swiperOption">
|
|
<swiper-slide v-for="(item,index) in displayedImages" :key="index">
|
|
<div class="book-img" style="width: 100%; height: 3rem;">
|
|
<img :src="item.cover" :onerror="defaultImg" style="width: 100%;">
|
|
</div>
|
|
</swiper-slide>
|
|
<!-- 标页码 -->
|
|
<div slot="pagination" class="swiper-pagination" />
|
|
</swiper>
|
|
</div>
|
|
<ul class="lib-cont-item lib-cont01">
|
|
<li>
|
|
<img src="@/assets/images/map_18.png" alt="">
|
|
<p>
|
|
<span>藏书量</span>
|
|
<span>{{ libCurrent && libCurrent.GCL }}<i>本</i></span>
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img src="@/assets/images/map_20.png" alt="">
|
|
<p>
|
|
<span>办证量</span>
|
|
<span>{{ libCurrent && (libCurrent.countCard ? libCurrent.countCard : libCurrent.readerIdNum) }}<i>人</i></span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
<ul class="lib-cont-item lib-cont02">
|
|
<li>
|
|
<img src="@/assets/images/map_28.png" alt="">
|
|
<p>
|
|
<span>占地面积</span>
|
|
<span>{{ libCurrent && libCurrent.occupationArea }}<i>平方米</i></span>
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
<div ref="scrollInfo" class="scroll-container">
|
|
<div ref="marquee" class="lib-text" v-html="libCurrent && libCurrent.explain" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- map -->
|
|
<div ref="chart" style="width: 920px; height: 924px; z-index: 999; border:1px solid rgba(0, 0, 0, 0);" />
|
|
<div class="map-hx-bg">
|
|
<div class="map-hx-small" />
|
|
<div class="map-hx-big" />
|
|
</div>
|
|
<!-- 右边排行榜 -->
|
|
<div class="read-num">
|
|
<div class="database-title">读者统计</div>
|
|
<div class="online">
|
|
<p>本年累计办证人数</p>
|
|
<p class="num"><span>{{ cardTotal }}</span><i>人</i></p>
|
|
</div>
|
|
<div class="lending-ranking">
|
|
<h5>借阅Top10</h5>
|
|
<div class="ranking-cont">
|
|
<ul class="ranking-title">
|
|
<li style="width: 0.8rem;">排名</li>
|
|
<li style="width: 1.25rem; text-align: left; ">姓名</li>
|
|
<li style="flex:1;" />
|
|
<li style="width: 1.75rem; text-align: right; padding-right: .25rem;">借阅次数</li>
|
|
</ul>
|
|
<ul class="ranking-list">
|
|
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }">
|
|
<div style="width: 1rem; color: #79B8FF;" :class="[{'ranking-num1':index===0},{'ranking-num2':index===1},{'ranking-num3':index===2}]">{{ index>=3 ? index+1 : null }}</div>
|
|
<div style="width: 1.25rem; text-align: left; ">{{ item.RDNAME }}</div>
|
|
<div class="ranking-progress" style="flex:1; align-self: center;">
|
|
<el-progress :percentage="item.percentage" :stroke-width="8" :show-text="false" color="#009afb" />
|
|
</div>
|
|
<div style="width: 1.75rem; text-align: right; padding-right: .25rem;">{{ item.TOTALNUM }}<i>次</i></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { FetchLibBookTotal, FetchUsertotal, FetchLibcodeDetails, FetchLibcodeResouceDetails, FetchReadRanking, FetchLendingTotal } from '@/api/library'
|
|
import mapJson from '@/assets/json/qy.json'
|
|
import libJson from '@/assets/json/lib.json'
|
|
import { debounce } from 'lodash' // js工具类,按需加载
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import 'swiper/dist/css/swiper.css'
|
|
|
|
export default {
|
|
name: 'Map',
|
|
components: {
|
|
swiper, swiperSlide
|
|
},
|
|
data() {
|
|
return {
|
|
currentHover: -1,
|
|
timeTicket: null,
|
|
defaultImg: 'this.src="' + require('@/assets/images/default-img.png') + '"',
|
|
count: 0,
|
|
len: 0, // 轮播数组的长度， 通过 count % len 可以得到[0, len-1] 数组下标
|
|
libALLNum: [],
|
|
libInfoData: [],
|
|
libIndex: 0,
|
|
libCurrent: null,
|
|
swiperKey: 1,
|
|
currentIndex: 0,
|
|
displayedImages: [],
|
|
libImg: [],
|
|
swiperOption: null,
|
|
seriesData: [],
|
|
mapImg: require('../../assets/images/map-bg2.png'),
|
|
cardTotal: 0,
|
|
rankingData: [],
|
|
rankingWithPercentage: [],
|
|
rankInterval: null,
|
|
timer: null,
|
|
position: 0,
|
|
speed: 2 // 滚动速度，可根据需要调整
|
|
}
|
|
},
|
|
computed: {
|
|
swiper() {
|
|
return this.$refs.mySwiper.swiper
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
this.destroy()
|
|
},
|
|
created() {
|
|
this.getLibBookTotal()
|
|
this.getReadRanking()
|
|
this.getLendingTotal()
|
|
},
|
|
activated() {
|
|
this.getLibBookTotal()
|
|
if (this.rankingData.length !== 0) {
|
|
this.currentHover = -1
|
|
this.rankInterval = setInterval(() => {
|
|
this.currentHover = (this.currentHover + 1) % this.rankingData.length
|
|
}, 1000)
|
|
}
|
|
this.$nextTick(() => {
|
|
window.addEventListener('resize', debounce(this.resize, 2000))
|
|
})
|
|
},
|
|
deactivated() {
|
|
this.destroy()
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
destroy() {
|
|
window.removeEventListener('resize', this.resize)
|
|
clearTimeout(this.timeTicket)
|
|
clearInterval(this.rankInterval)
|
|
clearInterval(this.timer)
|
|
// localStorage.setItem('libIndexItem', this.libIndex)
|
|
// localStorage.setItem('libCurrentItem', this.libCurrent)
|
|
localStorage.setItem('countItem', this.count)
|
|
|
|
this.rankInterval = null
|
|
this.timer = null
|
|
this.timeTicket = null
|
|
},
|
|
startScrolling() {
|
|
this.$nextTick(() => {
|
|
const containerHeight = this.$refs.scrollInfo.offsetHeight
|
|
const contentHeight = this.$refs.marquee.offsetHeight
|
|
// 设置 CSS 变量 --container-height，以便在 CSS 中使用
|
|
this.$refs.marquee.parentElement.style.setProperty('--container-height', `${contentHeight + 30}px`)
|
|
if (contentHeight > containerHeight) {
|
|
this.$refs.marquee.classList.add('lib-animation')
|
|
} else {
|
|
this.$refs.marquee.classList.remove('lib-animation')
|
|
}
|
|
})
|
|
},
|
|
getReadRanking() {
|
|
const params = {
|
|
'libcode': 'QYTSG,SJLFG,FXLFG,SEDSG,BZHFG',
|
|
'starttime': this.getFormattedDate(new Date(), -1),
|
|
'endtime': this.getFormattedDate(new Date()),
|
|
'rownum': 10,
|
|
'nordtype': 'QYTSG_E'
|
|
}
|
|
FetchReadRanking(params).then(res => {
|
|
const result = JSON.parse(res.data)
|
|
|
|
if (result.success && result.resultlist.length > 0) {
|
|
this.rankingData = result.resultlist.sort((a, b) => b.TOTALNUM - a.TOTALNUM).slice(0, 10)
|
|
this.rankingDataComputed()
|
|
|
|
this.rankInterval = setInterval(() => {
|
|
this.currentHover = (this.currentHover + 1) % this.rankingData.length
|
|
}, 1000)
|
|
} else {
|
|
throw new Error('Failed' + libcode)
|
|
}
|
|
}).catch(error => {
|
|
console.error('Error', error)
|
|
return null
|
|
})
|
|
},
|
|
rankingDataComputed() {
|
|
const firstPlaceNum = this.rankingData[0].TOTALNUM
|
|
this.rankingWithPercentage = this.rankingData.map(item => {
|
|
if (item.RDNAME.length === 2) {
|
|
// 截取name 字符串截取第一个字符，
|
|
item.RDNAME = item.RDNAME.substring(0, 1) + ' * '
|
|
} else if (item.RDNAME.length === 3) {
|
|
// 截取第一个和第三个字符
|
|
item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + item.RDNAME.substring(2, 3)
|
|
} else if (item.RDNAME.length > 3) {
|
|
// 截取第一个和大于第4个字符
|
|
item.RDNAME = item.RDNAME.substring(0, 1) + ' * ' + ' * ' + item.RDNAME.substring(3, item.RDNAME.length)
|
|
}
|
|
const percentage = (item.TOTALNUM / firstPlaceNum) * 100
|
|
return { ...item, percentage }
|
|
})
|
|
},
|
|
getLendingTotal() {
|
|
FetchLendingTotal().then(res => {
|
|
const result = JSON.parse(res.data)
|
|
if (result.success & result.resultlist.length !== 0) {
|
|
// BZL_YEAR 本年办证人数
|
|
this.cardTotal = result.resultlist.filter(item => item.LIBCODE !== '999').reduce((acc, obj) => acc + obj.BZL_YEAR, 0)
|
|
} else {
|
|
this.cardTotal = 0
|
|
}
|
|
}).catch(error => {
|
|
console.error('Error', error)
|
|
})
|
|
},
|
|
// 馆藏量
|
|
getLibBookTotal() {
|
|
const params = {
|
|
'libcode': 'LSJDFG,LJPFG,DCDFG,QYTSG,SJLFG,XMDFG,FXLFG,QLQFG,SEDSG,MZZFG,GYTZFG,KJSKCFG,JBTZFG,SKTZFG,XJZFG,PSZFG,DZQZFG,WXJDFG,CHJDFG,BSZFG,BZHFG',
|
|
'starttime': '2000-01-01',
|
|
'endtime': '2034-01-01'
|
|
}
|
|
FetchLibBookTotal(params).then(res => {
|
|
const result = JSON.parse(res.data)
|
|
if (result.success & result.resultlist.length !== 0) {
|
|
// 目的拿到馆藏量
|
|
this.libALLNum = result.resultlist
|
|
} else {
|
|
this.libALLNum = []
|
|
}
|
|
|
|
this.getUserTotal()
|
|
.then(userTotals => {
|
|
userTotals.forEach(userTotal => {
|
|
const libCode = Object.keys(userTotal)[0]
|
|
const count = userTotal[libCode]
|
|
const foundItem = this.libALLNum.find(item => item.LIBCODE === libCode)
|
|
if (foundItem) {
|
|
foundItem.countCard = count
|
|
}
|
|
})
|
|
this.getLibcodeDetails()
|
|
})
|
|
.catch(error => {
|
|
console.error('Error', error)
|
|
this.getLibcodeDetails()
|
|
})
|
|
}).catch(error => {
|
|
console.error('Error', error)
|
|
this.libALLNum = []
|
|
this.getLibcodeDetails()
|
|
})
|
|
},
|
|
// 左边办证量
|
|
getTotalForLibcode(libcode) {
|
|
const params = {
|
|
'libcode': libcode,
|
|
'startdate': '2000-01-01',
|
|
'enddate': '2034-01-01',
|
|
'isrdtype': 0
|
|
}
|
|
return FetchUsertotal(params).then(res => {
|
|
const result = JSON.parse(res.data)
|
|
if (result.success && result.pagedata.length > 0) {
|
|
return { [libcode]: result.pagedata[0].count }
|
|
} else {
|
|
throw new Error('Failed' + libcode)
|
|
}
|
|
}).catch(error => {
|
|
console.error('Error' + libcode, error)
|
|
return { [libcode]: 0 }
|
|
})
|
|
},
|
|
getUserTotal() {
|
|
const libraries = ['QYTSG', 'SJLFG', 'FXLFG', 'SEDSG', 'BZHFG']
|
|
const getTotalPromises = libraries.map(libcode => this.getTotalForLibcode(libcode))
|
|
return Promise.all(getTotalPromises)
|
|
.then(results => {
|
|
return results
|
|
})
|
|
.catch(error => {
|
|
console.error('Error', error)
|
|
return 0
|
|
})
|
|
},
|
|
// 分管显示内容
|
|
getLibcodeDetails() {
|
|
FetchLibcodeDetails().then(res => {
|
|
const result = JSON.parse(res.data)
|
|
if (result.length !== 0) {
|
|
const libCode = {
|
|
'QYTSG': [111.848657, 26.588519],
|
|
'LSJDFG': [111.86478, 26.599231],
|
|
'LJPFG': [111.823424, 26.693962],
|
|
'DCDFG': [111.77655, 26.663866],
|
|
'SJLFG': [111.856979, 26.59469],
|
|
'XMDFG': [111.895584, 26.611702],
|
|
'FXLFG': [111.843102, 26.57896],
|
|
'QLQFG': [111.902703, 26.571593],
|
|
'SEDSG': [111.842537, 26.58196],
|
|
'MZZFG': [111.796508, 26.510589],
|
|
'GYTZFG': [111.897118, 26.48444],
|
|
'KJSKCFG': [111.851548, 26.550191],
|
|
'JBTZFG': [112.085297, 26.436849],
|
|
'SKTZFG': [111.819018, 26.412155],
|
|
'XJZFG': [112.009764, 26.355137],
|
|
'PSZFG': [112.051186, 26.489878],
|
|
'DZQZFG': [111.873254, 26.369761],
|
|
'WXJDFG': [111.855175, 26.574414],
|
|
'CHJDFG': [111.850902, 26.586461],
|
|
'BSZFG': [111.989802, 26.421353],
|
|
'BZHFG': [111.862001, 26.580311]
|
|
}
|
|
// console.log('this.libALLNum', this.libALLNum)
|
|
const updatedLibraries = result.map(library => {
|
|
const matchingData = this.libALLNum.find(item => item.LIBCODE === library.tcId)
|
|
if (matchingData) {
|
|
return {
|
|
...library,
|
|
GCL: matchingData.GCL,
|
|
sort: Object.keys(libCode).indexOf(library.tcId) + 1,
|
|
coordinate: libCode[library.tcId],
|
|
countCard: matchingData.countCard ? matchingData.countCard : 0
|
|
}
|
|
} else {
|
|
return {
|
|
...library,
|
|
GCL: 0,
|
|
sort: Object.keys(libCode).indexOf(library.tcId) + 1,
|
|
coordinate: libCode[library.tcId],
|
|
countCard: 0
|
|
}
|
|
}
|
|
}).sort((a, b) => a.sort - b.sort)
|
|
|
|
this.libInfoData = updatedLibraries
|
|
// console.log('this.libInfoData', this.libInfoData)
|
|
if (localStorage.getItem('countItem')) {
|
|
this.count = parseInt(localStorage.getItem('countItem'))
|
|
} else {
|
|
this.count = 0
|
|
}
|
|
if (this.libInfoData.length !== 0) {
|
|
this.initChart() // 初始化
|
|
setTimeout(() => {
|
|
this.updateChart() // 更新数据，散点轮播显示
|
|
this.startScrolling()
|
|
window.addEventListener('resize', debounce(this.resize, 2000)) // 使用事件捕获，由外层向内
|
|
}, 300)
|
|
}
|
|
} else {
|
|
this.libInfoData = []
|
|
}
|
|
}).catch(error => {
|
|
console.error('Error', error)
|
|
})
|
|
},
|
|
initChart() {
|
|
this.$echarts.registerMap('qiyang', mapJson) // 注册map
|
|
this.myChart = this.$echarts.init(this.$refs.chart) // echarts容器实例化
|
|
|
|
var mapImg = document.createElement('img')
|
|
mapImg.style.height = mapImg.height = mapImg.width = mapImg.style.width = '1px'
|
|
mapImg.src = require('../../assets/images/map-bg2.png')
|
|
var XAData = this.libInfoData.map(item => {
|
|
return [
|
|
{ name: '陶铸图书馆' },
|
|
{ name: item.name, value: item.address }
|
|
]
|
|
})
|
|
var convertData = function(data) {
|
|
var res = []
|
|
for (var i = 0; i < data.length; i++) {
|
|
var dataItem = data[i]
|
|
var fromCoord = libJson[dataItem[0].name]
|
|
var toCoord = libJson[dataItem[1].name]
|
|
if (fromCoord && toCoord) {
|
|
res.push({
|
|
fromName: dataItem[0].name,
|
|
toName: dataItem[1].name,
|
|
coords: [fromCoord, toCoord],
|
|
value: dataItem[1].value
|
|
})
|
|
}
|
|
}
|
|
return res
|
|
}
|
|
var series = [];
|
|
[
|
|
['陶铸图书馆', XAData]
|
|
].forEach(function(item, i) {
|
|
series.push(
|
|
{
|
|
name: item[0],
|
|
type: 'effectScatter',
|
|
symbol: 'image://' + require('@/assets/images/map_10.png'),
|
|
symbolSize: [26, 20],
|
|
coordinateSystem: 'geo',
|
|
zlevel: 3,
|
|
selectedMode: false,
|
|
rippleEffect: {
|
|
// brushType: 'stroke',
|
|
color: 'transparent'
|
|
// scale: 1.5
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
formatter: ''
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'transparent',
|
|
areaColor: 'transparent'
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
},
|
|
data: item[1].map(function(dataItem) {
|
|
return {
|
|
name: dataItem[1].name,
|
|
value: dataItem[1].name ? libJson[dataItem[1].name].concat([dataItem[1].value]) : '',
|
|
place: dataItem[1].value
|
|
}
|
|
})
|
|
},
|
|
{
|
|
name: item[0],
|
|
type: 'lines',
|
|
zlevel: 1,
|
|
effect: {
|
|
show: true,
|
|
period: 6,
|
|
trailLength: 0.7,
|
|
color: 'red', // arrow箭头的颜色
|
|
symbolSize: 3
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#fff',
|
|
width: 0,
|
|
curveness: 0.2
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: convertData(item[1])
|
|
},
|
|
{
|
|
name: item[0],
|
|
type: 'lines',
|
|
zlevel: 2,
|
|
symbol: ['none', 'arrow'],
|
|
symbolSize: 10, // 固定箭头大小
|
|
effect: {
|
|
show: true,
|
|
period: 6,
|
|
trailLength: 0,
|
|
symbol: 'arrow',
|
|
symbolSize: 10 // 动态箭头大小
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: '#fff',
|
|
width: 1,
|
|
opacity: 0.6,
|
|
curveness: 0.2
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: convertData(item[1])
|
|
}
|
|
)
|
|
})
|
|
|
|
this.seriesData = series
|
|
const initOption = {
|
|
baseOption: {
|
|
// 提示框
|
|
tooltip: {
|
|
trigger: 'item',
|
|
triggerOn: 'click',
|
|
showContent: true, // 是否显示提示框浮层
|
|
alwaysShowContent: true, // 是否一直显示提示框内容
|
|
// hideDelay: 100, // 浮层隐藏的延迟
|
|
enterable: 'mousemove|click',
|
|
padding: [0, 0, 0, 0],
|
|
backgroundColor: null,
|
|
position: function(point, params, dom, rect, size) {
|
|
return [point[0] + 14, point[1] - 164]
|
|
},
|
|
formatter: (params, ticket, callback) => {
|
|
if (params.seriesType === 'effectScatter') {
|
|
const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''
|
|
return `<div class='tooltip-main' >
|
|
<div class='tooltip-line'></div>
|
|
<div class='tooltip-content'>
|
|
<div class='title'>${params.data.name}</div>
|
|
${addressLine}
|
|
</div>
|
|
</div>`
|
|
} else if (params.seriesType === 'lines') {
|
|
return (
|
|
params.data.fromName +
|
|
'>' +
|
|
params.data.toName +
|
|
'<br />' +
|
|
params.data.value
|
|
)
|
|
} else {
|
|
return params.name
|
|
}
|
|
}
|
|
},
|
|
// 设置geo坐标系
|
|
geo: [
|
|
{
|
|
map: 'qiyang',
|
|
aspectScale: 1,
|
|
zoom: 1.1,
|
|
top: '6%', // 距离顶部的位置，每层向下一个百分比
|
|
left: '11%',
|
|
roam: false, // 是否开启平游或缩放
|
|
z: 6, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
|
|
itemStyle: {
|
|
areaColor: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(0,0,0,.1)'
|
|
}, {
|
|
offset: 0.8, color: 'rgba(59,143,248,.6)'
|
|
}],
|
|
global: false
|
|
},
|
|
borderColor: '#9ffcff',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
areaColor: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(0,0,0,.1)'
|
|
}, {
|
|
offset: 0.8, color: 'rgba(59,143,248,.6)'
|
|
}],
|
|
global: false
|
|
} // 鼠标移上去时区域的颜色
|
|
}
|
|
},
|
|
label: {
|
|
emphasis: {
|
|
show: false,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: true
|
|
}
|
|
},
|
|
{
|
|
map: 'qiyang',
|
|
aspectScale: 1,
|
|
zoom: 1.1,
|
|
top: '6%', // 距离顶部的位置，每层向下一个百分比
|
|
left: '11%',
|
|
roam: false, // 是否开启平游或缩放
|
|
z: 5, // 可以看成是css的z-index，数字越大图层越高，我这里设置了5个，然后页面有点卡，根据实际需要来添加，3个其实就能看出效果了
|
|
itemStyle: {
|
|
areaColor: {
|
|
type: 'pattern',
|
|
image: mapImg,
|
|
repeat: 'repeat'
|
|
}, // 每个图层的背景色，根据需要来调，由亮变暗，下面的几个颜色也一样
|
|
borderColor: '#9ffcff',
|
|
borderWidth: 3,
|
|
shadowColor: '#4cd4eb',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowBlur: 0,
|
|
emphasis: { // 地图悬停高亮样式
|
|
areaColor: {
|
|
type: 'pattern',
|
|
image: mapImg,
|
|
repeat: 'repeat'
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
disabled: true,
|
|
areaColor: '#01215c'
|
|
},
|
|
label: {
|
|
emphasis: {
|
|
show: false,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
map: 'qiyang',
|
|
aspectScale: 1,
|
|
zoom: 1.1,
|
|
top: '7%', // 根据自己需要来设置
|
|
left: '10%',
|
|
roam: false, // 是否开启平游或缩放
|
|
z: 4, // 变小，也就是被压在下面
|
|
itemStyle: {
|
|
areaColor: '#05498f', // 记得改颜色
|
|
borderColor: '#0296cf',
|
|
borderWidth: 2,
|
|
shadowColor: '#0296cf',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowBlur: 0,
|
|
emphasis: { // 地图悬停高亮样式
|
|
disabled: true,
|
|
areaColor: '#05498f'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
map: 'qiyang',
|
|
aspectScale: 1,
|
|
zoom: 1.1,
|
|
top: '9%', // 根据自己需要来设置
|
|
left: '9%',
|
|
roam: false,
|
|
z: 3, // 变小，也就是被压在下面
|
|
itemStyle: {
|
|
areaColor: 'rgba(3,106,183,.5)', // 记得改颜色
|
|
borderColor: '#025792',
|
|
borderWidth: 2,
|
|
shadowColor: '#025792',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 0,
|
|
shadowBlur: 0,
|
|
emphasis: { // 地图悬停高亮样式
|
|
areaColor: 'rgba(3,106,183,.5)'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
map: 'qiyang',
|
|
aspectScale: 1,
|
|
zoom: 1.1,
|
|
top: '11%', // 根据自己需要来设置
|
|
left: '8%',
|
|
roam: false,
|
|
z: 2, // 变小，也就是被压在下面
|
|
itemStyle: {
|
|
areaColor: 'rgba(3,106,183,.2)', // 记得改颜色
|
|
borderColor: '#195175',
|
|
borderWidth: 1,
|
|
shadowColor: '#0f4c74',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 4,
|
|
shadowBlur: 10,
|
|
emphasis: { // 地图悬停高亮样式
|
|
areaColor: 'rgba(3,106,183,.2)'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
}
|
|
},
|
|
{
|
|
map: 'qiyang',
|
|
aspectScale: 1,
|
|
zoom: 1.1,
|
|
top: '12%', // 根据自己需要来设置
|
|
left: '10%',
|
|
roam: false,
|
|
z: 1, // 变小，也就是被压在下面
|
|
itemStyle: {
|
|
areaColor: 'rgba(0,0,0,.6)', // 记得改颜色
|
|
borderColor: 'rgba(0,0,0,.6)',
|
|
borderWidth: 2,
|
|
shadowColor: 'rgba(0,0,0,.6)',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 4,
|
|
shadowBlur: 10,
|
|
emphasis: { // 地图悬停高亮样式
|
|
areaColor: 'rgba(0,0,0,.6)'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
series: series
|
|
},
|
|
media: [
|
|
{
|
|
query: {
|
|
maxWidth: 666
|
|
},
|
|
option: {
|
|
tooltip: {
|
|
position: function(point, params, dom, rect, size) {
|
|
return [point[0] + 10, point[1] - 122]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
setTimeout(() => {
|
|
this.myChart.setOption(initOption)
|
|
}, 200)
|
|
},
|
|
updateChart() {
|
|
// 地图数据
|
|
// const mapData = mapJson.features.map((item) => {
|
|
// return {
|
|
// name: item.properties.name,
|
|
// value: Math.round(Math.random() * 100),
|
|
// centroid: item.properties.centroid,
|
|
// adcode: item.properties.adcode
|
|
// }
|
|
// })
|
|
// 散点数据
|
|
// const scatterData = libJsonData
|
|
// const scatterData = mapData.map((item) => {
|
|
// return {
|
|
// name: item.name,
|
|
// value: item.centroid
|
|
// ? item.centroid.concat(item.value)
|
|
// : item.centroid, // [经, 纬度, 值]
|
|
// itemStyle: {
|
|
// color: 'red'
|
|
// }
|
|
// // adcode: item.adcode,
|
|
// }
|
|
// })
|
|
// const updateOption = {
|
|
// series: [
|
|
// {
|
|
// data: mapData // type: 'map'
|
|
// },
|
|
// {
|
|
// data: mapData // type: 'map'
|
|
// },
|
|
// {
|
|
// data: scatterData // type: 'effectScatter'
|
|
// }
|
|
// ]
|
|
// }
|
|
|
|
this.len = this.seriesData[0].data.length // 此处设置的是需要轮播的次数
|
|
// this.myChart.setOption(updateOption)
|
|
this.libIndex = this.count % this.len
|
|
this.libCurrent = this.libInfoData[this.libIndex]
|
|
console.log('this.libIndex', this.libIndex)
|
|
console.log('this.libCurrent22', this.libCurrent)
|
|
this.initSwiper()
|
|
this.updatePageWithData()
|
|
this.autohover()
|
|
},
|
|
mouseMove() {
|
|
// 当鼠标移入，终止轮播，高亮显示当前区域
|
|
this.myChart.on('mouseover', (params) => {
|
|
clearInterval(this.timeTicket)
|
|
this.myChart.dispatchAction({
|
|
type: 'downplay'
|
|
// seriesIndex: 0
|
|
})
|
|
this.myChart.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: 0,
|
|
dataIndex: params.dataIndex
|
|
})
|
|
this.myChart.dispatchAction({
|
|
type: 'showTip',
|
|
seriesIndex: 0,
|
|
dataIndex: params.dataIndex
|
|
})
|
|
})
|
|
// 当鼠标移出，轮播继续开始
|
|
this.myChart.on('mouseout', this.autohover)
|
|
},
|
|
autohover() {
|
|
// clearInterval(this.timeTicket)
|
|
// this.timeTicket = setInterval(() => {
|
|
// 1. 取消上次的高亮
|
|
this.myChart.dispatchAction({
|
|
type: 'downplay',
|
|
seriesIndex: 0
|
|
})
|
|
// 2. 显示当前高亮
|
|
this.myChart.dispatchAction({
|
|
type: 'highlight',
|
|
seriesIndex: 0,
|
|
dataIndex: this.count % this.len
|
|
})
|
|
// 3. 显示提示框中的信息
|
|
this.myChart.dispatchAction({
|
|
type: 'showTip',
|
|
seriesIndex: 0,
|
|
dataIndex: this.count % this.len
|
|
})
|
|
// }, 2000)
|
|
},
|
|
resize() {
|
|
this.myChart.resize()
|
|
},
|
|
updatePageWithData() {
|
|
this.displayedImages = []
|
|
const linkSrc = process.env.VUE_APP_BASE_API
|
|
const params = {
|
|
'branchId': this.libCurrent.id
|
|
}
|
|
FetchLibcodeResouceDetails(params).then(res => {
|
|
const result = JSON.parse(res.data)
|
|
this.displayedImages = result.map((item, index) => {
|
|
if (item.filePath) {
|
|
item.cover = linkSrc + '/downloadFile' + item.filePath
|
|
} else {
|
|
item.cover = ''
|
|
}
|
|
return item
|
|
})
|
|
this.currentIndex = 0
|
|
this.swiperKey += 1
|
|
if (this.displayedImages.length === 1) {
|
|
setTimeout(() => {
|
|
this.count++
|
|
this.libIndex = this.count % this.len
|
|
this.libCurrent = this.libInfoData[this.libIndex]
|
|
this.updatePageWithData()
|
|
this.autohover()
|
|
}, 5000)
|
|
}
|
|
}).catch(error => {
|
|
console.error('Error', error)
|
|
})
|
|
},
|
|
initSwiper() {
|
|
const _self = this
|
|
this.swiperOption = {
|
|
// loop: true,
|
|
// initialSlide: 0,
|
|
notNextTick: false, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
|
|
// slidesPerView: 3, // 数量
|
|
// spaceBetween: 30, // 间距
|
|
// slidesPerGroup: 1, // 分几组
|
|
// 禁止滑动
|
|
noSwiping: true,
|
|
observer: true, // 开启动态检查器
|
|
direction: 'horizontal', // 设置水平还是垂直vertical
|
|
// grabCursor: true, //光标样式
|
|
// setWrapperSize: true,
|
|
// autoHeight: true,
|
|
// centeredSlides: true,
|
|
// paginationClickable: true,
|
|
// keyboard: true, //键盘控制
|
|
// mousewheelControl: true, //鼠标轮控制
|
|
autoplay: {
|
|
delay: 3000, // 自动切换的时间间隔，单位ms
|
|
stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
|
|
disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
|
|
// reverseDirection: false, //开启反向自动轮播
|
|
// waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
|
|
},
|
|
// 显示分页
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
type: 'progressbar'
|
|
// progressbarOpposite: true,
|
|
// clickable: true // 允许分页点击跳转
|
|
},
|
|
on: {
|
|
slideChangeTransitionEnd() {
|
|
_self.currentIndex = this.activeIndex
|
|
if (_self.currentIndex === _self.displayedImages.length - 1) {
|
|
setTimeout(() => {
|
|
if (_self.count === _self.libInfoData.length - 1) {
|
|
_self.count = 0
|
|
// _self.$parent.autoPagination(3)
|
|
} else {
|
|
_self.count++
|
|
}
|
|
_self.libIndex = _self.count % _self.len
|
|
_self.libCurrent = _self.libInfoData[_self.libIndex]
|
|
console.log('_self.count', _self.count)
|
|
console.log('_self.libIndex', _self.libIndex)
|
|
console.log('_self.libCurrent', _self.libCurrent)
|
|
_self.updatePageWithData()
|
|
_self.autohover()
|
|
_self.startScrolling()
|
|
_self.currentIndex = 0
|
|
}, 3000)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~@/assets/styles/index.scss";
|
|
</style>
|
|
<!--
|
|
{
|
|
type: 'map',
|
|
map: 'qiyang',
|
|
roam: false,
|
|
silent: true,
|
|
// geoIndex: 0, geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。
|
|
data: null,
|
|
label: {
|
|
show: false,
|
|
fontSize: 0
|
|
}
|
|
},
|
|
{
|
|
name: item[0] + ' Top3',
|
|
type: 'lines',
|
|
zlevel: 1,
|
|
effect: {
|
|
show: true,
|
|
period: 6,
|
|
trailLength: 0.7,
|
|
color: 'red', // arrow箭头的颜色
|
|
symbolSize: 3
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[i],
|
|
width: 0,
|
|
curveness: 0.2
|
|
}
|
|
},
|
|
data: convertData(item[1])
|
|
},
|
|
{
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo', // 注意坐标系的设置
|
|
// symbol: 'image://' + require('../../assets/images/default-img.png'),
|
|
data: null,
|
|
symbolSize: [8, 4],
|
|
showEffectOn: 'render',
|
|
rippleEffect: {
|
|
brushType: 'stroke',
|
|
color: '#9ffcff',
|
|
period: 9,
|
|
scale: 5
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#FFF',
|
|
formatter: '',
|
|
offset: [0, -12]
|
|
},
|
|
emphasis: {
|
|
// 设置高亮显示的状态
|
|
scale: 8,
|
|
itemStyle: {
|
|
color: 'pink'
|
|
}
|
|
}
|
|
} -->
|