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.
1490 lines
52 KiB
1490 lines
52 KiB
<template>
|
|
<div class="map-wrapper">
|
|
<div class="map-content">
|
|
<!-- 左边图书馆基本信息 -->
|
|
<div class="lib-info">
|
|
<div class="database-title big-title" style="font-size: .47rem !important;">{{ 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" style="padding: 0;">
|
|
<!-- <h5>借阅Top10</h5> -->
|
|
<div class="database-title" style="margin-bottom: 20px;">读者借阅排行榜</div>
|
|
<div class="ranking-cont" style="margin: 0.25rem 0.375rem 0 0.3125rem;">
|
|
<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" style="padding-top: 10px;">
|
|
<li v-for="(item,index) in rankingWithPercentage" :key="index" :class="{ 'hovered': index === currentHover }" style="font-size: .28rem !important; line-height: 36px !important;">
|
|
<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 currentDate = new Date() // 获取当前日期
|
|
currentDate.setDate(currentDate.getDate() - 30) // 将当前日期减去30天
|
|
const year = currentDate.getFullYear() // 获取年份
|
|
const month = currentDate.getMonth() + 1 // 获取月份（注意月份从0开始，需要加1）
|
|
const day = currentDate.getDate() // 获取日期
|
|
const formattedDate = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`
|
|
|
|
const params = {
|
|
'libcode': this.libcode,
|
|
'starttime': formattedDate,
|
|
'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')
|
|
}
|
|
}).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 === 'GD').reduce((acc, obj) => acc + obj.BZL_YEAR, 0)
|
|
} else {
|
|
this.cardTotal = 0
|
|
}
|
|
}).catch(error => {
|
|
console.error('Error', error)
|
|
})
|
|
},
|
|
// 馆藏量
|
|
getLibBookTotal() {
|
|
const params = {
|
|
'libcode': this.libcode,
|
|
'starttime': '2000-01-01',
|
|
'endtime': '2034-01-01'
|
|
}
|
|
|
|
// 先初始化馆藏量数据，避免后续找不到对应属性
|
|
this.libALLNum = []
|
|
|
|
FetchLibBookTotal(params)
|
|
.then(res => {
|
|
const result = JSON.parse(res.data)
|
|
if (result.success && result.resultlist.length !== 0) {
|
|
this.libALLNum = result.resultlist
|
|
}
|
|
return this.getUserTotal()
|
|
})
|
|
.then(userTotals => {
|
|
console.log('userTotal', userTotals)
|
|
if (Array.isArray(userTotals) && userTotals.length > 0) {
|
|
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
|
|
} else {
|
|
this.libALLNum.push({
|
|
LIBCODE: libCode,
|
|
countCard: count
|
|
})
|
|
}
|
|
})
|
|
}
|
|
// 执行后续逻辑
|
|
this.getLibcodeDetails()
|
|
})
|
|
.catch(error => {
|
|
console.error('Error', error)
|
|
// 即使接口报错，也执行 getUserTotal 保证 countCard 有值
|
|
this.getUserTotal()
|
|
.then(userTotals => {
|
|
console.log('userTotal (error case)', userTotals)
|
|
if (Array.isArray(userTotals) && userTotals.length > 0) {
|
|
userTotals.forEach(userTotal => {
|
|
const libCode = Object.keys(userTotal)[0]
|
|
const count = userTotal[libCode]
|
|
this.libALLNum.push({
|
|
LIBCODE: libCode,
|
|
countCard: count
|
|
})
|
|
})
|
|
}
|
|
})
|
|
.finally(() => {
|
|
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 = ['GD']
|
|
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 = {
|
|
'DWSF': [114.664064, 30.478882],
|
|
'ZJWSF': [114.635376, 30.532215]
|
|
}
|
|
console.log('this.libALLNum', this.libALLNum)
|
|
|
|
const nameToLibcodeMap = {
|
|
'葛店城市书房·大湾分馆': 'DWSF',
|
|
'葛店城市书房·张家湾分馆': 'ZJWSF'
|
|
}
|
|
const libcodeToGclMap = {
|
|
'DWSF': 9145, // 大湾分馆
|
|
'ZJWSF': 5582 // 张家湾分馆
|
|
}
|
|
// const allowedLibcodes = ['DWSF', 'ZJWSF']
|
|
|
|
const updatedLibraries = result.map(library => {
|
|
console.log('', library)
|
|
// 通过图书馆名称获取对应的LIBCODE
|
|
const currentLibcode = nameToLibcodeMap[library.name] || ''
|
|
// 根据LIBCODE获取对应的GCL值
|
|
const currentGcl = libcodeToGclMap[currentLibcode] || 10000
|
|
|
|
// 保留原有的countCard逻辑
|
|
const gdData = this.libALLNum.find(item => item.LIBCODE === 'GD')
|
|
// 根据当前LIBCODE获取排序值
|
|
const sortIndex = Object.keys(libCode).indexOf(currentLibcode)
|
|
const sortValue = sortIndex > -1 ? sortIndex + 1 : 99
|
|
|
|
return {
|
|
...library,
|
|
GCL: currentGcl, // 按名称区分的GCL值
|
|
// 直接使用result原始数据中的occupationArea，不再自定义覆盖
|
|
sort: sortValue, // 按LIBCODE排序
|
|
coordinate: libCode[currentLibcode] || [0, 0], // 匹配不到坐标时给默认值
|
|
countCard: gdData?.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')
|
|
|
|
const colorMap = {
|
|
'葛店城市书房·大湾分馆': '#FF7420', // 红色
|
|
'葛店城市书房·张家湾分馆': '#4ECDC4' // 青色
|
|
// '书房3': '#FFD166', // 黄色
|
|
// '书房4': '#6A0572' // 紫色
|
|
}
|
|
|
|
var XAData = this.libInfoData.map(item => {
|
|
const pointColor = colorMap[item.name] || '#FFFFFF' // 默认白色
|
|
return [
|
|
{ name: '葛店城市书房·大湾分馆', color: pointColor },
|
|
{ name: item.name, value: item.address, color: pointColor }
|
|
]
|
|
})
|
|
|
|
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,
|
|
color: dataItem[1].color // 传递颜色属性
|
|
})
|
|
}
|
|
}
|
|
return res
|
|
}
|
|
|
|
var series = [];
|
|
[
|
|
['葛店城市书房·大湾分馆', XAData]
|
|
].forEach(function(item, i) {
|
|
series.push(
|
|
{
|
|
name: item[0],
|
|
type: 'effectScatter',
|
|
// symbol: 'image://' + require('@/assets/images/map_10.png'),
|
|
symbol: 'circle',
|
|
symbolSize: [24, 14],
|
|
coordinateSystem: 'geo',
|
|
zlevel: 3,
|
|
selectedMode: false,
|
|
rippleEffect: {
|
|
brushType: 'fill', // 填充模式
|
|
color: 'rgba(255,255,255,0.4)',
|
|
scale: 4, // 涟漪扩散大小（可调整）
|
|
period: 4 // 动画周期
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'right',
|
|
formatter: ''
|
|
}
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
console.log('点位名称:', params.name) // 现在能打印出值
|
|
|
|
// 定义渐变生成函数，复用逻辑
|
|
function createRadialGradient(centerColor, edgeColor) {
|
|
// 创建径向渐变：x0, y0, r0, x1, y1, r1
|
|
// (0.5,0.5)是中心点，0是中心半径，(0.5,0.5)是外圆中心，1是外圆半径
|
|
return {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 1,
|
|
colorStops: [{
|
|
offset: 0, // 中心位置
|
|
color: centerColor // 中心颜色
|
|
}, {
|
|
offset: 1, // 边缘位置
|
|
color: edgeColor // 边缘颜色（可以浅一点或透明）
|
|
}],
|
|
global: false // 局部渐变，跟随元素
|
|
}
|
|
}
|
|
|
|
switch (params.name) {
|
|
case '葛店城市书房·大湾分馆':
|
|
// 橙红渐变：中心深橙红，边缘浅橙红
|
|
return createRadialGradient('#FF7420', '#FFB380')
|
|
case '葛店城市书房·张家湾分馆':
|
|
// 青蓝渐变：中心深青蓝，边缘浅青蓝
|
|
return createRadialGradient('#4ECDC4', '#99E6E0')
|
|
default:
|
|
// 白色渐变：中心纯白，边缘浅灰（避免全白看不见）
|
|
return createRadialGradient('#FFFFFF', '#F0F0F0')
|
|
}
|
|
},
|
|
areaColor: 'transparent'
|
|
},
|
|
emphasis: {
|
|
shadowColor: function(params) {
|
|
switch (params.name) {
|
|
case '葛店城市书房·大湾分馆':
|
|
return '#FF7420'
|
|
case '葛店城市书房·张家湾分馆':
|
|
return '#4ECDC4'
|
|
default:
|
|
return '#FFFFFF'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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,
|
|
color: dataItem[1].color
|
|
}
|
|
})
|
|
},
|
|
{
|
|
name: item[0],
|
|
type: 'lines',
|
|
zlevel: 1,
|
|
effect: {
|
|
show: true,
|
|
period: 6,
|
|
trailLength: 0.7,
|
|
color: function(params) {
|
|
return params.data.color || 'red'
|
|
},
|
|
symbolSize: 3
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
return params.data.color || '#fff'
|
|
},
|
|
width: 0,
|
|
curveness: 0.2
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
data: convertData(item[1])
|
|
},
|
|
{
|
|
name: item[0],
|
|
type: 'lines',
|
|
zlevel: 2,
|
|
symbol: ['none', 'none'],
|
|
symbolSize: 10,
|
|
effect: {
|
|
show: true,
|
|
period: 6,
|
|
trailLength: 0,
|
|
symbol: 'arrow',
|
|
symbolSize: 6
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
return params.data.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,
|
|
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 pointColor = params.data.color || '#FF7420'
|
|
const addressLine = params.data.place ? `<div class='place'>地址：${params.data.place}</div>` : ''
|
|
|
|
// 动态设置边框颜色和背景渐变
|
|
return `<div class='tooltip-main' >
|
|
<div class='tooltip-line' style="background: linear-gradient(0deg, ${pointColor} 0%, rgba(255,255,255,0) 100%);"></div>
|
|
<div class='tooltip-content' style="border-color: ${pointColor}; background-color: rgba(0,31,87,0.8);">
|
|
<div class='title' style="background: linear-gradient(90deg, ${pointColor}, rgba(255,255,255,0.22));">${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: 0.96,
|
|
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: 0.96,
|
|
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: 0.96,
|
|
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: 0.96,
|
|
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: 0.96,
|
|
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: 0.96,
|
|
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)
|
|
},
|
|
// 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,
|
|
// 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,
|
|
// 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,
|
|
// 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,
|
|
// 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,
|
|
// 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,
|
|
// 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.NODE_ENV === 'production' ? window.g.ApiUrl : 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'
|
|
}
|
|
}
|
|
} -->
|