bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
bonus-ui/src/views/screen/wsScreenWidescreen/components/center/index.vue

475 lines
18 KiB
Vue
Raw Normal View History

大屏
2025-10-29 16:31:30 +08:00
<template>
<div style="height: 100%; position: relative">
<!-- 中国地图 -->
<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="echarts" id="mapChart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
let mapJson = require('./sx.json')
// let mapBg = require('./assets/home/map-bg.jpg')
let tjf = require('./assets/home/tianjifeng.png')
let twoIcon = require('./assets/home/yd-icon.png')
import labelBg from '../../img/value-bg.png'
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
console.log(twoIcon)
import 'echarts-gl'
export default {
props: {
isZoom: {
type: Boolean,
default: false,
},
},
data() {
return {
btnIndex: 1,
cityData: [
// {
// cityName: '合肥市',
// deptName: '安徽送变电工程有限公司',
// value: [117.227239, 31.820586, 100],
// totalValue: 100,
// totalEquipmentQuantity: 100,
// configRate: 100,
// lineNum: 100,
// substationNum: 100,
// cableNum: 100,
// },
// {
// cityName: '蚌埠市',
// deptName: '蚌埠送变电工程有限公司',
// value: [117.330324, 33.107951, 100],
// totalValue: 100,
// totalEquipmentQuantity: 100,
// configRate: 100,
// lineNum: 100,
// substationNum: 100,
// cableNum: 100,
// },
],
}
},
mounted() {
// this.initChart()
this.getInfo()
},
methods: {
handleBtn(index) {
this.btnIndex = index
this.cityData = []
this.getInfo()
},
async getInfo() {
try {
let res = null
if (this.btnIndex == 1) {
res = await getUnitEquipmentConfigurationApi()
if (!res.data) return
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()
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()
}
},
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('../../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;'>" +
n +
'</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('./assets/home/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 / 100000000).toFixed(4) +
" <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('./assets/home/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('./assets/home/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('./assets/home/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('./assets/home/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('./assets/home/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: {
label: { show: false },
itemStyle: { opacity: 0 },
},
regionHeight: 0,
shading: 'lambert',
// lambertMaterial: {
// detailTexture: mapBg
// },
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: 2,
top: 8,
bottom: 20,
type: 'map3D',
map: 'ah',
roam: false,
data: arr,
itemStyle: {
// color: "#4b6f52",
color: 'transparent',
borderWidth: 2,
borderColor: '#b8cad1',
opacity: 1,
},
emphasis: {
disabled: true, //是否可以被选中
label: {
//移入时的高亮文本
show: true,
color: '#FFF', //显示字体颜色变淡
},
itemStyle: {
// color: "#4b6f52",
color: 'rgba(3,240,247,0.3)',
},
},
regionHeight: 0,
shading: 'lambert',
// lambertMaterial: {
// detailTexture: mapBg,
// textureTiling: 1,
// // textureOffset:20
// },
viewControl: {
zoomSensitivity: false,
rotateSensitivity: 0,
projection: 'orthographic',
autoRotate: false,
autoRotateAfterStill: 1,
orthographicSize: 94,
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 ]
},
label: {
show: true,
color: '#FFF',
position: 'top',
fontSize: 18,
},
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: 18,
coordinateSystem: 'geo3D',
label: {
show: true,
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|${this.btnIndex === 1 ? (val[2] / 100000000).toFixed(4) : 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: tjf, // 图片的 URL
width: 991, // 图片宽度
height: 950, // 图片高度
// 位置根据实际需求调整
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.seriesType === 'map3D' && params.data) {
let city =
params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.name.replace(/市$/, '')
console.log('🚀 ~ initChart ~ this.$router:', this.$router)
this.$router.push({
样式
2025-11-25 16:58:29 +08:00
path: '/screen/cityWidescreen',
大屏
2025-10-29 16:31:30 +08:00
query: {
cityName: city,
},
})
}
})
myChart.on('mouseover', (params) => {
// console.log('🚀 ~ 移入 ~ params:', params)
})
myChart.on('mouseout', () => {
// this.selectedCity = null
})
return myChart
},
},
}
</script>
<style lang="scss" scoped>
.echarts {
width: 1100px;
height: 869px;
margin: 20px auto 0;
transform: scale(1.1, 0.85);
transform-origin: 50% 30%;
}
.top-btns {
margin-top: 100px;
margin-left: -180px;
display: flex;
justify-content: center;
.btn:not(:last-child) {
margin-right: 80px;
}
.btn {
font-size: 18px;
text-align: center;
padding: 6px 15px;
font-family: DS-TITLE;
color: #ccc;
background-image: url('../../img/btn.png');
background-size: 100% 100%;
cursor: pointer;
}
.active {
background-image: url('../../img/btn-active.png');
background-size: 100% 100%;
}
}
</style>