2026-01-22 15:56:24 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
2026-01-22 18:32:51 +08:00
|
|
|
|
<div class="top-btns">
|
|
|
|
|
|
<div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
|
|
|
|
|
|
<div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
|
|
|
|
|
|
<div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="map-box">
|
|
|
|
|
|
<div class="echarts" id="mapChart"></div>
|
|
|
|
|
|
</div>
|
2026-01-22 15:56:24 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2026-01-22 18:32:51 +08:00
|
|
|
|
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
|
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
|
import 'echarts-gl'
|
2026-01-22 15:56:24 +08:00
|
|
|
|
|
2026-01-22 18:32:51 +08:00
|
|
|
|
let mapImg = require('./Map/assets/img/anhui.png')
|
|
|
|
|
|
import labelBg from './Map/assets/img/value-bg.png'
|
|
|
|
|
|
let mapJson = require('./Map/ah.json')
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
btnIndex: 1,
|
|
|
|
|
|
cityData: [],
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
created() {
|
|
|
|
|
|
this.getInfo()
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
handleBtn(index) {
|
|
|
|
|
|
if (this.btnIndex == index) return
|
|
|
|
|
|
this.btnIndex = index
|
|
|
|
|
|
this.cityData = []
|
|
|
|
|
|
this.getInfo()
|
|
|
|
|
|
},
|
|
|
|
|
|
async getInfo() {
|
|
|
|
|
|
try {
|
|
|
|
|
|
let res = null
|
|
|
|
|
|
if (this.btnIndex == 1) {
|
|
|
|
|
|
res = await getUnitEquipmentConfigurationApi()
|
|
|
|
|
|
if (!res.data) return
|
|
|
|
|
|
res.data = res.data.filter((item) => item.location)
|
|
|
|
|
|
this.cityData = res.data.map((item) => {
|
|
|
|
|
|
let value = item.location.split(',')
|
|
|
|
|
|
value.push(item.totalValue)
|
|
|
|
|
|
// console.log('🚀 ~ getInfo ~ value:', value)
|
|
|
|
|
|
return {
|
|
|
|
|
|
...item,
|
|
|
|
|
|
value,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} else if (this.btnIndex == 2) {
|
|
|
|
|
|
res = await getEquipmentNumberApi()
|
|
|
|
|
|
if (!res.data) return
|
|
|
|
|
|
res.data = res.data.filter((item) => item.location)
|
|
|
|
|
|
this.cityData = res.data.map((item) => {
|
|
|
|
|
|
let value = item.location.split(',')
|
|
|
|
|
|
value.push(item.num)
|
|
|
|
|
|
// console.log('🚀 ~ getInfo ~ value:', value)
|
|
|
|
|
|
return {
|
|
|
|
|
|
...item,
|
|
|
|
|
|
value,
|
|
|
|
|
|
deptName: item.name,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
} else if (this.btnIndex == 3) {
|
|
|
|
|
|
res = await getMechanizationRateApi()
|
|
|
|
|
|
}
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
|
|
|
|
|
this.initChart()
|
|
|
|
|
|
})
|
|
|
|
|
|
console.log('🚀 ~ 地图数据 ~ res:', res)
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.log('🚀 ~ 地图数据 ~ error:', error)
|
|
|
|
|
|
// this.initChart()
|
2026-01-22 15:56:24 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
2026-01-22 18:32:51 +08:00
|
|
|
|
initChart(jsonData = mapJson) {
|
|
|
|
|
|
// 模拟数据
|
|
|
|
|
|
let arr = this.cityData.map((item) => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
...item,
|
|
|
|
|
|
name: item.cityName,
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
echarts.registerMap('ah', jsonData)
|
|
|
|
|
|
const charEle = document.getElementById('mapChart')
|
|
|
|
|
|
const myChart = echarts.init(charEle)
|
|
|
|
|
|
// let tooltip = gzjhTooltip(arr)
|
|
|
|
|
|
const option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
|
formatter: function (e) {
|
|
|
|
|
|
let n = e.name
|
|
|
|
|
|
let res = ''
|
|
|
|
|
|
arr.forEach((data) => {
|
|
|
|
|
|
// console.log('🚀 ~ 提示数据 ~ data:', data)
|
|
|
|
|
|
if (data.cityName === n) {
|
|
|
|
|
|
res =
|
|
|
|
|
|
"<div style='width: 330px;height: 285px; background: url(" +
|
|
|
|
|
|
require('./Map/assets/img/dialog.png') +
|
|
|
|
|
|
") no-repeat;background-size:100% 100%;'>" +
|
|
|
|
|
|
"<div style='width: 300px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
|
|
|
|
|
|
data.deptAbbreviation +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='margin-top:10px;margin-bottom:5px;width: 300px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
|
|
|
|
|
require('./Map/assets/img/map-item-row.png') +
|
|
|
|
|
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
|
|
|
|
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
|
|
|
|
|
'<div>装备价值：' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1);'>" +
|
|
|
|
|
|
data.totalValue +
|
|
|
|
|
|
" <span style='color:#FFF;font-size:14px'> 万元</span>" +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
|
|
|
|
|
require('./Map/assets/img/map-item-row.png') +
|
|
|
|
|
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
|
|
|
|
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
|
|
|
|
|
'<div>装备数量：' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
|
|
|
|
|
data.totalEquipmentQuantity +
|
|
|
|
|
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
|
|
|
|
|
require('./Map/assets/img/map-item-row.png') +
|
|
|
|
|
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
|
|
|
|
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
|
|
|
|
|
'<div>配置率：' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
|
|
|
|
|
data.configRate +
|
|
|
|
|
|
"<span style='color:#FFF;font-size:14px'> %</span>" +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
|
|
|
|
|
require('./Map/assets/img/map-item-row.png') +
|
|
|
|
|
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
|
|
|
|
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
|
|
|
|
|
'<div>线路数量：' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
|
|
|
|
|
data.lineNum +
|
|
|
|
|
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
|
|
|
|
|
require('./Map/assets/img/map-item-row.png') +
|
|
|
|
|
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
|
|
|
|
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
|
|
|
|
|
'<div>变电数量：' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
|
|
|
|
|
data.substationNum +
|
|
|
|
|
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='width: 300px;margin-top:10px;height: 30px;line-height:30px;display: flex;align-items:center; padding-left: 30px;font-family:Source Han Sans CN;font-size: 16px;color: #ffffff;background: url(" +
|
|
|
|
|
|
require('./Map/assets/img/map-item-row.png') +
|
|
|
|
|
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
|
|
|
|
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
|
|
|
|
|
'<div>电缆数量：' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
|
|
|
|
|
data.cableNum +
|
|
|
|
|
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
'</div>' +
|
|
|
|
|
|
'</div>'
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
return res
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
geo3D: {
|
|
|
|
|
|
map: 'ah',
|
|
|
|
|
|
zoom: 1,
|
|
|
|
|
|
roam: false,
|
|
|
|
|
|
label: { show: false },
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
opacity: 0, //.01 // important!
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
disabled: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
regionHeight: 0,
|
|
|
|
|
|
shading: 'lambert',
|
|
|
|
|
|
|
|
|
|
|
|
viewControl: {
|
|
|
|
|
|
zoomSensitivity: false,
|
|
|
|
|
|
rotateSensitivity: 0,
|
|
|
|
|
|
projection: 'orthographic',
|
|
|
|
|
|
autoRotate: false,
|
|
|
|
|
|
autoRotateAfterStill: 1,
|
|
|
|
|
|
orthographicSize: 100,
|
|
|
|
|
|
minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
|
|
|
|
|
|
maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
|
|
|
|
|
|
minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
|
|
|
|
|
|
maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
|
|
|
|
|
|
animation: false, // 是否开启动画。[ default: true ]
|
|
|
|
|
|
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
|
|
|
|
|
|
animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
|
|
|
|
|
|
},
|
|
|
|
|
|
light: {
|
|
|
|
|
|
//光照阴影
|
|
|
|
|
|
main: {
|
|
|
|
|
|
color: '#02fce7', //光照颜色
|
|
|
|
|
|
intensity: 0.5, //光照强度
|
|
|
|
|
|
shadow: true, //是否显示阴影
|
|
|
|
|
|
shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
|
|
|
|
|
|
alpha: 30,
|
|
|
|
|
|
beta: 90,
|
|
|
|
|
|
},
|
|
|
|
|
|
ambient: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
intensity: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
zlevel: -8,
|
|
|
|
|
|
},
|
|
|
|
|
|
// 要显示的散点数据
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
left: 0,
|
|
|
|
|
|
top: 6,
|
|
|
|
|
|
bottom: 22,
|
|
|
|
|
|
type: 'map3D',
|
|
|
|
|
|
map: 'ah',
|
|
|
|
|
|
roam: false,
|
|
|
|
|
|
data: arr,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
// color: "#4b6f52",
|
|
|
|
|
|
color: 'transparent',
|
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
|
borderColor: '#b8cad1',
|
|
|
|
|
|
opacity: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
disabled: false, // 👈 一定要打开
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: 'rgba(44, 186, 178, 0.45)', // 👈 青绿色半透明背景
|
|
|
|
|
|
borderColor: '#2cbab2', // 👈 高亮描边
|
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
regionHeight: 0,
|
|
|
|
|
|
shading: 'lambert',
|
|
|
|
|
|
viewControl: {
|
|
|
|
|
|
zoomSensitivity: false,
|
|
|
|
|
|
rotateSensitivity: 0,
|
|
|
|
|
|
projection: 'orthographic',
|
|
|
|
|
|
autoRotate: false,
|
|
|
|
|
|
autoRotateAfterStill: 1,
|
|
|
|
|
|
orthographicSize: 92,
|
|
|
|
|
|
animation: false, // 是否开启动画。[ default: true ]
|
|
|
|
|
|
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
|
|
|
|
|
|
animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
color: '#FFF',
|
|
|
|
|
|
position: 'top',
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
},
|
|
|
|
|
|
light: {
|
|
|
|
|
|
//光照阴影
|
|
|
|
|
|
main: {
|
|
|
|
|
|
color: 'rgb(14,70,82)', //光照颜色
|
|
|
|
|
|
intensity: 0.1, //光照强度
|
|
|
|
|
|
shadow: true, //是否显示阴影
|
|
|
|
|
|
shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
|
|
|
|
|
|
alpha: 30,
|
|
|
|
|
|
beta: 90,
|
|
|
|
|
|
},
|
|
|
|
|
|
ambient: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
intensity: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
|
zoom: 1,
|
|
|
|
|
|
scaleLimit: {
|
|
|
|
|
|
// 限制缩放的比例
|
|
|
|
|
|
min: 1, // 最小缩放比例
|
|
|
|
|
|
max: 1, // 最大缩放比例
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'scatter3D',
|
|
|
|
|
|
data: arr,
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
symbolSize: 11,
|
|
|
|
|
|
coordinateSystem: 'geo3D',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'top', // 先指定一个基准位置（如 'top'）
|
|
|
|
|
|
offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
|
|
|
|
|
// triggerEvent: true,
|
|
|
|
|
|
formatter: (params) => {
|
|
|
|
|
|
// console.log('🚀 ~ initChart ~ params:', params)
|
|
|
|
|
|
const val = params.data.value || []
|
|
|
|
|
|
let unit = ''
|
|
|
|
|
|
if (this.btnIndex === 1) unit = '万元'
|
|
|
|
|
|
else if (this.btnIndex === 2) unit = '台'
|
|
|
|
|
|
else if (this.btnIndex === 3) unit = '%'
|
|
|
|
|
|
return val.length
|
|
|
|
|
|
? `{val|${val[2]} ${unit}}\n{name|${params.data.deptAbbreviation}}`
|
|
|
|
|
|
: `{name|${params.data.deptAbbreviation}}`
|
|
|
|
|
|
},
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
val: {
|
|
|
|
|
|
backgroundColor: { image: labelBg },
|
|
|
|
|
|
height: 28,
|
|
|
|
|
|
minWidth: 70,
|
|
|
|
|
|
lineHeight: 28,
|
|
|
|
|
|
padding: [0, 10],
|
|
|
|
|
|
align: 'center',
|
|
|
|
|
|
verticalAlign: 'middle',
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontSize: 23,
|
|
|
|
|
|
},
|
|
|
|
|
|
name: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontFamily: 'DS-TITLE',
|
|
|
|
|
|
fontSize: 21,
|
|
|
|
|
|
padding: [6, 0, 0, 0],
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: 'rgba(217, 94, 0, 1)',
|
|
|
|
|
|
},
|
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
graphic: {
|
|
|
|
|
|
elements: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'image',
|
|
|
|
|
|
style: {
|
|
|
|
|
|
image: mapImg, // 图片的 URL
|
|
|
|
|
|
width: 456, // 图片宽度
|
|
|
|
|
|
height: 440, // 图片高度
|
|
|
|
|
|
// 位置根据实际需求调整
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
},
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
top: 'center',
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
myChart.setOption(option)
|
|
|
|
|
|
// 监听地图绑定双击事件（双击进入地图下一级）
|
|
|
|
|
|
myChart.on('click', (params) => {
|
|
|
|
|
|
console.log('🚀 ~ 点击 ~ params-->:', params)
|
|
|
|
|
|
console.log('🚀 ~ initChart ~ params.data-->>:', params.data)
|
|
|
|
|
|
if (!params.data) return
|
|
|
|
|
|
this.$router.push({
|
|
|
|
|
|
path: '/equipment/equipment-ledger',
|
|
|
|
|
|
query: {
|
|
|
|
|
|
parentId: params.data.parentId,
|
|
|
|
|
|
deptId: params.data.deptId,
|
|
|
|
|
|
},
|
|
|
|
|
|
})
|
|
|
|
|
|
if (params.seriesType === 'map3D' && params.data) {
|
|
|
|
|
|
let city =
|
|
|
|
|
|
params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.name.replace(/市$/, '')
|
|
|
|
|
|
|
|
|
|
|
|
console.log('🚀 ~ initChart ~ this.$router:', this.$router)
|
|
|
|
|
|
// this.$router.push({
|
|
|
|
|
|
// path: '/screen/cityScreen',
|
|
|
|
|
|
// query: {
|
|
|
|
|
|
// cityName: city,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// })
|
|
|
|
|
|
// window.open(`${window.location.origin}/screen/cityScreen?cityName=${city}`, '_blank')
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
myChart.on('mouseover', (params) => {
|
|
|
|
|
|
// console.log('🚀 ~ 移入 ~ params:', params)
|
|
|
|
|
|
})
|
|
|
|
|
|
myChart.on('mouseout', () => {
|
|
|
|
|
|
// this.selectedCity = null
|
|
|
|
|
|
})
|
|
|
|
|
|
return myChart
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
2026-01-22 15:56:24 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2026-01-22 18:32:51 +08:00
|
|
|
|
.top-btns {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
|
|
margin-right: 24px;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
|
color: #2cbab2;
|
|
|
|
|
|
border-bottom: 2px solid #2cbab2;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2026-01-22 15:56:24 +08:00
|
|
|
|
|
2026-01-22 18:32:51 +08:00
|
|
|
|
.map-box {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 440px;
|
2026-01-22 18:42:54 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
2026-01-22 18:32:51 +08:00
|
|
|
|
}
|
|
|
|
|
|
.echarts {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
