Merge remote-tracking branch 'origin/ma-mall-ui' into ma-mall-ui
This commit is contained in:
commit
eabddab4a6
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 283 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 B |
|
|
@ -0,0 +1,413 @@
|
||||||
|
<template>
|
||||||
|
<div class="middle-warp">
|
||||||
|
<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-wrapper">
|
||||||
|
<!-- 倾斜层：实现 3D 倾斜效果 -->
|
||||||
|
<div class="map-tilt">
|
||||||
|
<div ref="mapChart" class="map-container"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 点击城市显示详情 -->
|
||||||
|
<div
|
||||||
|
v-if="selectedCity && btnIndex == 1"x'x'x'x
|
||||||
|
class="city-tooltip"
|
||||||
|
:style="{ left: tooltipPos.x + 25 + 'px', top: tooltipPos.y + 25 + 'px' }"
|
||||||
|
>
|
||||||
|
<div class="city-name">{{ selectedCity.cityName }}</div>
|
||||||
|
<div
|
||||||
|
>装备价值： <span class="num">{{ (selectedCity.totalValue / 100000000).toFixed(4) }}</span
|
||||||
|
><span class="unit"> 亿元</span></div
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
>装备数量： <span class="num">{{ selectedCity.totalEquipmentQuantity }}</span
|
||||||
|
><span class="unit"> 台</span></div
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
>配置率： <span class="num">{{ selectedCity.configRate || 0 }}</span
|
||||||
|
><span class="unit"> %</span></div
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
>线路数量： <span class="num">{{ selectedCity.lineNum }}</span
|
||||||
|
><span class="unit"> 台</span></div
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
>变电数量： <span class="num">{{ selectedCity.substationNum }}</span
|
||||||
|
><span class="unit"> 台</span></div
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
>电缆数量： <span class="num">{{ selectedCity.cableNum }}</span
|
||||||
|
><span class="unit"> 台</span></div
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import 'echarts-gl'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import anhuiMapJson from '../anhui.json'
|
||||||
|
import labelBg from '../../img/value-bg.png'
|
||||||
|
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
btnIndex: 1,
|
||||||
|
myChart: null,
|
||||||
|
selectedCity: null,
|
||||||
|
tooltipPos: { x: 0, y: 0 },
|
||||||
|
cityData: [
|
||||||
|
// 调试数据
|
||||||
|
// {
|
||||||
|
// cityName: '合肥市',
|
||||||
|
// deptName: '安徽送变电工程有限公司',
|
||||||
|
// value: [117.227239, 31.820586, 100],
|
||||||
|
// totalValue: 100,
|
||||||
|
// totalEquipmentQuantity: 100,
|
||||||
|
// configRate: 100,
|
||||||
|
// lineNum: 100,
|
||||||
|
// substationNum: 100,
|
||||||
|
// cableNum: 100,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// cityName: '芜湖市',
|
||||||
|
// deptName: '芜湖送变电工程有限公司',
|
||||||
|
// value: [118.62807, 31.68005, 100],
|
||||||
|
// totalValue: 100,
|
||||||
|
// totalEquipmentQuantity: 100,
|
||||||
|
// configRate: 100,
|
||||||
|
// lineNum: 100,
|
||||||
|
// substationNum: 100,
|
||||||
|
// cableNum: 100,
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getInfo()
|
||||||
|
// setTimeout(() => {
|
||||||
|
// console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
||||||
|
// this.initMap()
|
||||||
|
// }, 300)
|
||||||
|
},
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
||||||
|
this.initMap()
|
||||||
|
}, 300)
|
||||||
|
console.log('🚀 ~ 地图数据 ~ res:', res)
|
||||||
|
} catch (error) {
|
||||||
|
console.log('🚀 ~ 地图数据 ~ error:', error)
|
||||||
|
// this.initMap()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initMap() {
|
||||||
|
echarts.registerMap('anhui', anhuiMapJson)
|
||||||
|
this.myChart = echarts.init(this.$refs.mapChart)
|
||||||
|
|
||||||
|
const seriesData = this.cityData
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
geo3D: {
|
||||||
|
map: 'anhui',
|
||||||
|
roam: false, // 👈 允许拖拽
|
||||||
|
regionHeight: 7, // 👈 省份厚度
|
||||||
|
shading: 'lambert', // 光照模型：realistic / lambert / color
|
||||||
|
realisticMaterial: {
|
||||||
|
roughness: 0.6,
|
||||||
|
metalness: 0.1,
|
||||||
|
texture: '#3A5EB1',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#3A5EB1', // 👈 顶层背景色
|
||||||
|
borderColor: '#ECFEFF', // 👈 外层描边
|
||||||
|
borderWidth: 2,
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
light: {
|
||||||
|
main: {
|
||||||
|
intensity: 1.2,
|
||||||
|
shadow: true,
|
||||||
|
shadowQuality: 'high',
|
||||||
|
alpha: 40, // 光照角度
|
||||||
|
beta: 20,
|
||||||
|
},
|
||||||
|
ambient: {
|
||||||
|
intensity: 0.6,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
viewControl: {
|
||||||
|
distance: 168, // 视角远近
|
||||||
|
alpha: 52, // 旋转角度
|
||||||
|
beta: -16,
|
||||||
|
rotateSensitivity: 0, // 禁止旋转
|
||||||
|
zoomSensitivity: 0, // 禁止缩放
|
||||||
|
panSensitivity: 0, // 禁止平移
|
||||||
|
center: [12, -30, 0],
|
||||||
|
// scale: [1.5, 1, 1]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'scatter3D',
|
||||||
|
coordinateSystem: 'geo3D',
|
||||||
|
data: seriesData,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 18,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#f90', // 👈 散点颜色在这里改
|
||||||
|
opacity: 1, // 可调透明度
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top', // 先指定一个基准位置（如 'top'）
|
||||||
|
offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
||||||
|
triggerEvent: true,
|
||||||
|
formatter: (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.deptName
|
||||||
|
}}`
|
||||||
|
: `{name|${params.data.deptName}}`
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
val: {
|
||||||
|
backgroundColor: { image: labelBg },
|
||||||
|
height: 28,
|
||||||
|
minWidth: 70,
|
||||||
|
lineHeight: 28,
|
||||||
|
padding: [0, 10],
|
||||||
|
align: 'center',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 18,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
color: '#fff',
|
||||||
|
fontFamily: 'DS-TITLE',
|
||||||
|
fontSize: 16,
|
||||||
|
padding: [6, 0, 0, 0],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
this.myChart.setOption(option)
|
||||||
|
|
||||||
|
// 点击事件
|
||||||
|
this.myChart.on('click', (params) => {
|
||||||
|
console.log('🚀 ~ click ~ params:', params)
|
||||||
|
// params.name去掉 市
|
||||||
|
let city =
|
||||||
|
params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.cityName.replace(/市$/, '')
|
||||||
|
// if (params.seriesType === 'scatter' && params.data) {
|
||||||
|
// city =
|
||||||
|
// params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.cityName.replace(/市$/, '')
|
||||||
|
// } else {
|
||||||
|
// city = params.name.replace(/市$/, '')
|
||||||
|
// }
|
||||||
|
|
||||||
|
this.$router.push({
|
||||||
|
path: '/screen/cityScreen',
|
||||||
|
query: {
|
||||||
|
cityName: city,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// 鼠标移入时展示
|
||||||
|
this.myChart.on('mouseover', (params) => {
|
||||||
|
console.log('🚀 ~ mouseover ~ params:', params)
|
||||||
|
let city = params.data
|
||||||
|
// if (params.seriesType === 'scatter' && params.data) {
|
||||||
|
// // console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
|
||||||
|
// console.log('🚀 ~ mouseover ~ city:', city)
|
||||||
|
// } else {
|
||||||
|
// this.selectedCity = null
|
||||||
|
// city = this.cityData.find((c) => c.cityName === params.name)
|
||||||
|
// }
|
||||||
|
this.selectedCity = city || null
|
||||||
|
if (params.event) {
|
||||||
|
this.tooltipPos = {
|
||||||
|
x: params.event.offsetX,
|
||||||
|
y: params.event.offsetY,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 鼠标移出时隐藏
|
||||||
|
this.myChart.on('mouseout', () => {
|
||||||
|
this.selectedCity = null
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart.resize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.myChart) {
|
||||||
|
this.myChart.dispose()
|
||||||
|
this.myChart = null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.middle-warp {
|
||||||
|
margin-top: 80px;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.top-btns {
|
||||||
|
margin-left: -80px;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 外层容器：添加底部阴影
|
||||||
|
.map-wrapper {
|
||||||
|
/* margin-top: -180px; */
|
||||||
|
position: relative;
|
||||||
|
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.3)); // 20px 柔和阴影
|
||||||
|
transform: translateZ(0); // 启用硬件加速
|
||||||
|
}
|
||||||
|
|
||||||
|
// 倾斜层：实现 15 度倾斜的 3D 效果
|
||||||
|
.map-tilt {
|
||||||
|
transform: rotateX(15deg);
|
||||||
|
transform-origin: bottom center;
|
||||||
|
perspective: 1200px; // 👈 增加景深，效果更立体
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
height: 900px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 鼠标悬停时轻微动态效果（可选）
|
||||||
|
.middle-warp:hover .map-tilt {
|
||||||
|
transform: rotateX(12deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 实际图表容器
|
||||||
|
.map-container {
|
||||||
|
width: 160%;
|
||||||
|
height: 900px;
|
||||||
|
background: transparent;
|
||||||
|
pointer-events: auto; // 图表本身可交互
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-tooltip {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 80px;
|
||||||
|
width: 288px;
|
||||||
|
height: 288px;
|
||||||
|
color: #fdfdfd;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 17px;
|
||||||
|
background-image: url('../../img/dialog.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 10;
|
||||||
|
.city-name {
|
||||||
|
font-size: 25px;
|
||||||
|
font-family: DS-TITLE;
|
||||||
|
margin: -5px 0 10px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
// 除了第一个和最后一个外，添加一个浅下边框
|
||||||
|
div:not(:first-child):not(:last-child) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
.unit {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,413 +1,473 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="middle-warp">
|
<div style="height: 100%; position: relative">
|
||||||
<div class="top-btns">
|
<!-- 中国地图 -->
|
||||||
<div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
|
<div class="top-btns">
|
||||||
<div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
|
<div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
|
||||||
<div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
|
<div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
|
||||||
</div>
|
<div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
|
||||||
<!-- 外层容器：用于加阴影 -->
|
</div>
|
||||||
<div class="map-wrapper">
|
<div class="echarts" id="mapChart"></div>
|
||||||
<!-- 倾斜层：实现 3D 倾斜效果 -->
|
</div>
|
||||||
<div class="map-tilt">
|
</template>
|
||||||
<div ref="mapChart" class="map-container"></div>
|
<script>
|
||||||
</div>
|
import * as echarts from 'echarts'
|
||||||
</div>
|
let mapJson = require('./sx.json')
|
||||||
|
// let mapBg = require('./assets/home/map-bg.jpg')
|
||||||
<!-- 点击城市显示详情 -->
|
let tjf = require('./assets/home/tianjifeng.png')
|
||||||
<div
|
let twoIcon = require('./assets/home/yd-icon.png')
|
||||||
v-if="selectedCity && btnIndex == 1"
|
import labelBg from '../../img/value-bg.png'
|
||||||
class="city-tooltip"
|
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
|
||||||
:style="{ left: tooltipPos.x + 25 + 'px', top: tooltipPos.y + 25 + 'px' }"
|
|
||||||
>
|
console.log(twoIcon)
|
||||||
<div class="city-name">{{ selectedCity.cityName }}</div>
|
import 'echarts-gl'
|
||||||
<div
|
export default {
|
||||||
>装备价值： <span class="num">{{ (selectedCity.totalValue / 100000000).toFixed(4) }}</span
|
props: {
|
||||||
><span class="unit"> 亿元</span></div
|
isZoom: {
|
||||||
>
|
type: Boolean,
|
||||||
<div
|
default: false,
|
||||||
>装备数量： <span class="num">{{ selectedCity.totalEquipmentQuantity }}</span
|
},
|
||||||
><span class="unit"> 台</span></div
|
},
|
||||||
>
|
data() {
|
||||||
<div
|
return {
|
||||||
>配置率： <span class="num">{{ selectedCity.configRate || 0 }}</span
|
btnIndex: 1,
|
||||||
><span class="unit"> %</span></div
|
cityDate: [
|
||||||
>
|
// {
|
||||||
<div
|
// cityName: '合肥市',
|
||||||
>线路数量： <span class="num">{{ selectedCity.lineNum }}</span
|
// deptName: '安徽送变电工程有限公司',
|
||||||
><span class="unit"> 台</span></div
|
// value: [117.227239, 31.820586, 100],
|
||||||
>
|
// totalValue: 100,
|
||||||
<div
|
// totalEquipmentQuantity: 100,
|
||||||
>变电数量： <span class="num">{{ selectedCity.substationNum }}</span
|
// configRate: 100,
|
||||||
><span class="unit"> 台</span></div
|
// lineNum: 100,
|
||||||
>
|
// substationNum: 100,
|
||||||
<div
|
// cableNum: 100,
|
||||||
>电缆数量： <span class="num">{{ selectedCity.cableNum }}</span
|
// },
|
||||||
><span class="unit"> 台</span></div
|
// {
|
||||||
>
|
// cityName: '蚌埠市',
|
||||||
</div>
|
// deptName: '蚌埠送变电工程有限公司',
|
||||||
</div>
|
// value: [117.330324, 33.107951, 100],
|
||||||
</template>
|
// totalValue: 100,
|
||||||
|
// totalEquipmentQuantity: 100,
|
||||||
<script>
|
// configRate: 100,
|
||||||
import 'echarts-gl'
|
// lineNum: 100,
|
||||||
import * as echarts from 'echarts'
|
// substationNum: 100,
|
||||||
import anhuiMapJson from '../anhui.json'
|
// cableNum: 100,
|
||||||
import labelBg from '../../img/value-bg.png'
|
// },
|
||||||
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
|
],
|
||||||
|
}
|
||||||
export default {
|
},
|
||||||
data() {
|
mounted() {
|
||||||
return {
|
this.initChart()
|
||||||
btnIndex: 1,
|
this.getInfo()
|
||||||
myChart: null,
|
},
|
||||||
selectedCity: null,
|
|
||||||
tooltipPos: { x: 0, y: 0 },
|
methods: {
|
||||||
cityData: [
|
handleBtn(index) {
|
||||||
// 调试数据
|
this.btnIndex = index
|
||||||
// {
|
this.cityData = []
|
||||||
// cityName: '合肥市',
|
this.getInfo()
|
||||||
// deptName: '安徽送变电工程有限公司',
|
},
|
||||||
// value: [117.227239, 31.820586, 100],
|
async getInfo() {
|
||||||
// totalValue: 100,
|
try {
|
||||||
// totalEquipmentQuantity: 100,
|
let res = null
|
||||||
// configRate: 100,
|
if (this.btnIndex == 1) {
|
||||||
// lineNum: 100,
|
res = await getUnitEquipmentConfigurationApi()
|
||||||
// substationNum: 100,
|
if (!res.data) return
|
||||||
// cableNum: 100,
|
this.cityData = res.data.map((item) => {
|
||||||
// },
|
let value = item.location.split(',')
|
||||||
// {
|
value.push(item.totalValue)
|
||||||
// cityName: '芜湖市',
|
// console.log('🚀 ~ getInfo ~ value:', value)
|
||||||
// deptName: '芜湖送变电工程有限公司',
|
return {
|
||||||
// value: [118.62807, 31.68005, 100],
|
...item,
|
||||||
// totalValue: 100,
|
value,
|
||||||
// totalEquipmentQuantity: 100,
|
}
|
||||||
// configRate: 100,
|
})
|
||||||
// lineNum: 100,
|
} else if (this.btnIndex == 2) {
|
||||||
// substationNum: 100,
|
res = await getEquipmentNumberApi()
|
||||||
// cableNum: 100,
|
this.cityData = res.data.map((item) => {
|
||||||
// },
|
let value = item.location.split(',')
|
||||||
],
|
value.push(item.num)
|
||||||
}
|
// console.log('🚀 ~ getInfo ~ value:', value)
|
||||||
},
|
return {
|
||||||
created() {
|
...item,
|
||||||
this.getInfo()
|
value,
|
||||||
// setTimeout(() => {
|
deptName: item.name,
|
||||||
// console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
}
|
||||||
// this.initMap()
|
})
|
||||||
// }, 300)
|
} else if (this.btnIndex == 3) {
|
||||||
},
|
res = await getMechanizationRateApi()
|
||||||
methods: {
|
}
|
||||||
handleBtn(index) {
|
setTimeout(() => {
|
||||||
this.btnIndex = index
|
console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
||||||
this.cityData = []
|
this.initMap()
|
||||||
this.getInfo()
|
}, 300)
|
||||||
},
|
console.log('🚀 ~ 地图数据 ~ res:', res)
|
||||||
async getInfo() {
|
} catch (error) {
|
||||||
try {
|
console.log('🚀 ~ 地图数据 ~ error:', error)
|
||||||
let res = null
|
// this.initMap()
|
||||||
if (this.btnIndex == 1) {
|
}
|
||||||
res = await getUnitEquipmentConfigurationApi()
|
},
|
||||||
if (!res.data) return
|
initChart(jsonData = mapJson) {
|
||||||
this.cityData = res.data.map((item) => {
|
// 模拟数据
|
||||||
let value = item.location.split(',')
|
let arr = this.cityDate.map((item) => {
|
||||||
value.push(item.totalValue)
|
return {
|
||||||
// console.log('🚀 ~ getInfo ~ value:', value)
|
...item,
|
||||||
return {
|
name: item.cityName,
|
||||||
...item,
|
}
|
||||||
value,
|
})
|
||||||
}
|
|
||||||
})
|
echarts.registerMap('ah', jsonData)
|
||||||
} else if (this.btnIndex == 2) {
|
const charEle = document.getElementById('mapChart')
|
||||||
res = await getEquipmentNumberApi()
|
const myChart = echarts.init(charEle)
|
||||||
this.cityData = res.data.map((item) => {
|
// let tooltip = gzjhTooltip(arr)
|
||||||
let value = item.location.split(',')
|
const option = {
|
||||||
value.push(item.num)
|
tooltip: {
|
||||||
// console.log('🚀 ~ getInfo ~ value:', value)
|
show: true,
|
||||||
return {
|
backgroundColor: 'transparent',
|
||||||
...item,
|
borderWidth: 0,
|
||||||
value,
|
formatter: function (e) {
|
||||||
deptName: item.name,
|
let n = e.name
|
||||||
}
|
let res = ''
|
||||||
})
|
arr.forEach((data) => {
|
||||||
} else if (this.btnIndex == 3) {
|
console.log('🚀 ~ 提示数据 ~ data:', data)
|
||||||
// res = await getMechanizationRateApi()
|
if (data.cityName === n) {
|
||||||
}
|
res =
|
||||||
setTimeout(() => {
|
"<div style='width: 330px;height: 285px; background: url(" +
|
||||||
console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
|
require('../../img/dialog.png') +
|
||||||
this.initMap()
|
") no-repeat;background-size:100% 100%;'>" +
|
||||||
}, 300)
|
"<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;'>" +
|
||||||
console.log('🚀 ~ 地图数据 ~ res:', res)
|
n +
|
||||||
} catch (error) {
|
'</div>' +
|
||||||
console.log('🚀 ~ 地图数据 ~ error:', error)
|
"<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(" +
|
||||||
// this.initMap()
|
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>" +
|
||||||
initMap() {
|
'<div>装备价值：' +
|
||||||
echarts.registerMap('anhui', anhuiMapJson)
|
'</div>' +
|
||||||
this.myChart = echarts.init(this.$refs.mapChart)
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1);'>" +
|
||||||
|
(data.totalValue / 100000000).toFixed(4) +
|
||||||
const seriesData = this.cityData
|
" <span style='color:#FFF;font-size:14px'> 亿元</span>" +
|
||||||
|
'</div>' +
|
||||||
const option = {
|
'</div>' +
|
||||||
backgroundColor: 'transparent',
|
"<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(" +
|
||||||
geo3D: {
|
require('./assets/home/map-item-row.png') +
|
||||||
map: 'anhui',
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||||
roam: false, // 👈 允许拖拽
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||||
regionHeight: 7, // 👈 省份厚度
|
'<div>装备数量：' +
|
||||||
shading: 'lambert', // 光照模型：realistic / lambert / color
|
'</div>' +
|
||||||
realisticMaterial: {
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||||
roughness: 0.6,
|
data.totalEquipmentQuantity +
|
||||||
metalness: 0.1,
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||||
texture: '#3A5EB1',
|
'</div>' +
|
||||||
},
|
'</div>' +
|
||||||
itemStyle: {
|
"<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(" +
|
||||||
color: '#3A5EB1', // 👈 顶层背景色
|
require('./assets/home/map-item-row.png') +
|
||||||
borderColor: '#ECFEFF', // 👈 外层描边
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||||
borderWidth: 2,
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||||
opacity: 1,
|
'<div>配置率：' +
|
||||||
},
|
'</div>' +
|
||||||
label: {
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||||
show: false,
|
data.configRate +
|
||||||
},
|
"<span style='color:#FFF;font-size:14px'> %</span>" +
|
||||||
light: {
|
'</div>' +
|
||||||
main: {
|
'</div>' +
|
||||||
intensity: 1.2,
|
"<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(" +
|
||||||
shadow: true,
|
require('./assets/home/map-item-row.png') +
|
||||||
shadowQuality: 'high',
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||||
alpha: 40, // 光照角度
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||||
beta: 20,
|
'<div>线路数量：' +
|
||||||
},
|
'</div>' +
|
||||||
ambient: {
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||||
intensity: 0.6,
|
data.lineNum +
|
||||||
},
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||||
},
|
'</div>' +
|
||||||
viewControl: {
|
'</div>' +
|
||||||
distance: 168, // 视角远近
|
"<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(" +
|
||||||
alpha: 52, // 旋转角度
|
require('./assets/home/map-item-row.png') +
|
||||||
beta: -16,
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||||
rotateSensitivity: 0, // 禁止旋转
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||||
zoomSensitivity: 0, // 禁止缩放
|
'<div>变电数量：' +
|
||||||
panSensitivity: 0, // 禁止平移
|
'</div>' +
|
||||||
center: [12, -30, 0],
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||||
// scale: [1.5, 1, 1]
|
data.substationNum +
|
||||||
},
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||||
},
|
'</div>' +
|
||||||
series: [
|
'</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(" +
|
||||||
type: 'scatter3D',
|
require('./assets/home/map-item-row.png') +
|
||||||
coordinateSystem: 'geo3D',
|
") no-repeat;background-size:100%;margin-left:20px'>" +
|
||||||
data: seriesData,
|
"<div style='width:8px;height:8px;border-radius:50%;background:#FFF;margin-right:8px;'></div>" +
|
||||||
symbol: 'circle',
|
'<div>电缆数量：' +
|
||||||
symbolSize: 18,
|
'</div>' +
|
||||||
itemStyle: {
|
"<div style='font-family: YouSheBiaoTiHei;margin-left: 10px;color:rgba(247, 196, 30, 1)'>" +
|
||||||
color: '#f90', // 👈 散点颜色在这里改
|
data.cableNum +
|
||||||
opacity: 1, // 可调透明度
|
"<span style='color:#FFF;font-size:14px'> 台</span>" +
|
||||||
},
|
'</div>' +
|
||||||
label: {
|
'</div>' +
|
||||||
show: true,
|
'</div>'
|
||||||
position: 'top', // 先指定一个基准位置（如 'top'）
|
}
|
||||||
offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
})
|
||||||
triggerEvent: true,
|
return res
|
||||||
formatter: (params) => {
|
},
|
||||||
const val = params.data.value || []
|
},
|
||||||
let unit = ''
|
geo3D: {
|
||||||
if (this.btnIndex === 1) unit = '亿'
|
map: 'ah',
|
||||||
else if (this.btnIndex === 2) unit = '台'
|
zoom: 1,
|
||||||
else if (this.btnIndex === 3) unit = '%'
|
roam: false,
|
||||||
return val.length
|
label: { show: false },
|
||||||
? `{val|${this.btnIndex === 1 ? (val[2] / 100000000).toFixed(4) : val[2]} ${unit}}\n{name|${
|
itemStyle: {
|
||||||
params.data.deptName
|
opacity: 0, //.01 // important!
|
||||||
}}`
|
},
|
||||||
: `{name|${params.data.deptName}}`
|
emphasis: {
|
||||||
},
|
label: { show: false },
|
||||||
rich: {
|
itemStyle: { opacity: 0 },
|
||||||
val: {
|
},
|
||||||
backgroundColor: { image: labelBg },
|
regionHeight: 0,
|
||||||
height: 28,
|
shading: 'lambert',
|
||||||
minWidth: 70,
|
// lambertMaterial: {
|
||||||
lineHeight: 28,
|
// detailTexture: mapBg
|
||||||
padding: [0, 10],
|
// },
|
||||||
align: 'center',
|
|
||||||
verticalAlign: 'middle',
|
viewControl: {
|
||||||
color: '#fff',
|
zoomSensitivity: false,
|
||||||
fontSize: 18,
|
rotateSensitivity: 0,
|
||||||
},
|
projection: 'orthographic',
|
||||||
name: {
|
autoRotate: false,
|
||||||
color: '#fff',
|
autoRotateAfterStill: 1,
|
||||||
fontFamily: 'DS-TITLE',
|
orthographicSize: 100,
|
||||||
fontSize: 16,
|
minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
|
||||||
padding: [6, 0, 0, 0],
|
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: {
|
||||||
this.myChart.setOption(option)
|
//光照阴影
|
||||||
|
main: {
|
||||||
// 点击事件
|
color: '#02fce7', //光照颜色
|
||||||
this.myChart.on('click', (params) => {
|
intensity: 0.5, //光照强度
|
||||||
console.log('🚀 ~ click ~ params:', params)
|
shadow: true, //是否显示阴影
|
||||||
// params.name去掉 市
|
shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
|
||||||
let city =
|
alpha: 30,
|
||||||
params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.cityName.replace(/市$/, '')
|
beta: 90,
|
||||||
// if (params.seriesType === 'scatter' && params.data) {
|
},
|
||||||
// city =
|
ambient: {
|
||||||
// params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.cityName.replace(/市$/, '')
|
color: '#fff',
|
||||||
// } else {
|
intensity: 1,
|
||||||
// city = params.name.replace(/市$/, '')
|
},
|
||||||
// }
|
},
|
||||||
|
zlevel: -8,
|
||||||
this.$router.push({
|
},
|
||||||
path: '/screen/cityScreen',
|
// 要显示的散点数据
|
||||||
query: {
|
series: [
|
||||||
cityName: city,
|
{
|
||||||
},
|
left: 2,
|
||||||
})
|
top: 8,
|
||||||
})
|
bottom: 20,
|
||||||
|
type: 'map3D',
|
||||||
// 鼠标移入时展示
|
map: 'ah',
|
||||||
this.myChart.on('mouseover', (params) => {
|
roam: false,
|
||||||
console.log('🚀 ~ mouseover ~ params:', params)
|
data: arr,
|
||||||
let city = params.data
|
itemStyle: {
|
||||||
// if (params.seriesType === 'scatter' && params.data) {
|
// color: "#4b6f52",
|
||||||
// // console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
|
color: 'transparent',
|
||||||
// console.log('🚀 ~ mouseover ~ city:', city)
|
borderWidth: 2,
|
||||||
// } else {
|
borderColor: '#b8cad1',
|
||||||
// this.selectedCity = null
|
opacity: 1,
|
||||||
// city = this.cityData.find((c) => c.cityName === params.name)
|
},
|
||||||
// }
|
emphasis: {
|
||||||
this.selectedCity = city || null
|
disabled: true, //是否可以被选中
|
||||||
if (params.event) {
|
label: {
|
||||||
this.tooltipPos = {
|
//移入时的高亮文本
|
||||||
x: params.event.offsetX,
|
show: true,
|
||||||
y: params.event.offsetY,
|
color: '#FFF', //显示字体颜色变淡
|
||||||
}
|
},
|
||||||
}
|
itemStyle: {
|
||||||
})
|
// color: "#4b6f52",
|
||||||
|
color: 'rgba(3,240,247,0.3)',
|
||||||
// 鼠标移出时隐藏
|
},
|
||||||
this.myChart.on('mouseout', () => {
|
},
|
||||||
this.selectedCity = null
|
regionHeight: 0,
|
||||||
})
|
shading: 'lambert',
|
||||||
|
// lambertMaterial: {
|
||||||
window.addEventListener('resize', () => {
|
// detailTexture: mapBg,
|
||||||
this.myChart.resize()
|
// textureTiling: 1,
|
||||||
})
|
// // textureOffset:20
|
||||||
},
|
// },
|
||||||
},
|
viewControl: {
|
||||||
beforeDestroy() {
|
zoomSensitivity: false,
|
||||||
if (this.myChart) {
|
rotateSensitivity: 0,
|
||||||
this.myChart.dispose()
|
projection: 'orthographic',
|
||||||
this.myChart = null
|
autoRotate: false,
|
||||||
}
|
autoRotateAfterStill: 1,
|
||||||
},
|
orthographicSize: 94,
|
||||||
}
|
minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
|
||||||
</script>
|
maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
|
||||||
|
minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
|
||||||
<style lang="scss" scoped>
|
maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
|
||||||
.middle-warp {
|
animation: false, // 是否开启动画。[ default: true ]
|
||||||
margin-top: 80px;
|
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
|
||||||
position: relative;
|
animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
|
||||||
padding-top: 20px;
|
},
|
||||||
border-radius: 8px;
|
label: {
|
||||||
overflow: hidden;
|
show: true,
|
||||||
}
|
color: '#FFF',
|
||||||
.top-btns {
|
position: 'top',
|
||||||
margin-left: -80px;
|
},
|
||||||
display: flex;
|
light: {
|
||||||
justify-content: center;
|
//光照阴影
|
||||||
.btn:not(:last-child) {
|
main: {
|
||||||
margin-right: 80px;
|
color: 'rgb(14,70,82)', //光照颜色
|
||||||
}
|
intensity: 0.1, //光照强度
|
||||||
|
shadow: true, //是否显示阴影
|
||||||
.btn {
|
shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
|
||||||
font-size: 18px;
|
alpha: 30,
|
||||||
text-align: center;
|
beta: 90,
|
||||||
padding: 6px 15px;
|
},
|
||||||
font-family: DS-TITLE;
|
ambient: {
|
||||||
color: #ccc;
|
color: '#fff',
|
||||||
background-image: url('../../img/btn.png');
|
intensity: 1,
|
||||||
background-size: 100% 100%;
|
},
|
||||||
cursor: pointer;
|
},
|
||||||
}
|
zlevel: 1,
|
||||||
|
zoom: 1,
|
||||||
.active {
|
scaleLimit: {
|
||||||
background-image: url('../../img/btn-active.png');
|
// 限制缩放的比例
|
||||||
background-size: 100% 100%;
|
min: 1, // 最小缩放比例
|
||||||
}
|
max: 1, // 最大缩放比例
|
||||||
}
|
},
|
||||||
|
},
|
||||||
// 外层容器：添加底部阴影
|
{
|
||||||
.map-wrapper {
|
type: 'scatter3D',
|
||||||
/* margin-top: -180px; */
|
data: arr,
|
||||||
position: relative;
|
symbol: 'circle',
|
||||||
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.3)); // 20px 柔和阴影
|
symbolSize: 18,
|
||||||
transform: translateZ(0); // 启用硬件加速
|
coordinateSystem: 'geo3D',
|
||||||
}
|
label: {
|
||||||
|
show: true,
|
||||||
// 倾斜层：实现 15 度倾斜的 3D 效果
|
position: 'top', // 先指定一个基准位置（如 'top'）
|
||||||
.map-tilt {
|
offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
|
||||||
transform: rotateX(15deg);
|
// triggerEvent: true,
|
||||||
transform-origin: bottom center;
|
formatter: (params) => {
|
||||||
perspective: 1200px; // 👈 增加景深，效果更立体
|
// console.log('🚀 ~ initChart ~ params:', params)
|
||||||
transition: transform 0.3s ease;
|
const val = params.data.value || []
|
||||||
pointer-events: none;
|
let unit = ''
|
||||||
height: 900px;
|
if (this.btnIndex === 1) unit = '亿'
|
||||||
display: flex;
|
else if (this.btnIndex === 2) unit = '台'
|
||||||
justify-content: center;
|
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.deptName
|
||||||
.middle-warp:hover .map-tilt {
|
}}`
|
||||||
transform: rotateX(12deg);
|
: `{name|${params.data.deptName}}`
|
||||||
}
|
},
|
||||||
|
rich: {
|
||||||
// 实际图表容器
|
val: {
|
||||||
.map-container {
|
backgroundColor: { image: labelBg },
|
||||||
width: 160%;
|
height: 28,
|
||||||
height: 900px;
|
minWidth: 70,
|
||||||
background: transparent;
|
lineHeight: 28,
|
||||||
pointer-events: auto; // 图表本身可交互
|
padding: [0, 10],
|
||||||
display: flex;
|
align: 'center',
|
||||||
align-items: center;
|
verticalAlign: 'middle',
|
||||||
justify-content: center;
|
color: '#fff',
|
||||||
}
|
fontSize: 22,
|
||||||
|
},
|
||||||
.city-tooltip {
|
name: {
|
||||||
position: absolute;
|
color: '#fff',
|
||||||
top: 20px;
|
fontFamily: 'DS-TITLE',
|
||||||
right: 80px;
|
fontSize: 20,
|
||||||
width: 288px;
|
padding: [6, 0, 0, 0],
|
||||||
height: 288px;
|
},
|
||||||
color: #fdfdfd;
|
},
|
||||||
padding: 12px;
|
},
|
||||||
border-radius: 6px;
|
itemStyle: {
|
||||||
font-size: 17px;
|
color: 'rgba(217, 94, 0, 1)',
|
||||||
background-image: url('../../img/dialog.png');
|
},
|
||||||
background-size: 100% 100%;
|
zlevel: 1,
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
},
|
||||||
z-index: 10;
|
],
|
||||||
.city-name {
|
graphic: {
|
||||||
font-size: 25px;
|
elements: [
|
||||||
font-family: DS-TITLE;
|
{
|
||||||
margin: -5px 0 10px;
|
type: 'image',
|
||||||
}
|
style: {
|
||||||
div {
|
image: tjf, // 图片的 URL
|
||||||
padding-bottom: 5px;
|
width: 991, // 图片宽度
|
||||||
}
|
height: 950, // 图片高度
|
||||||
// 除了第一个和最后一个外，添加一个浅下边框
|
// 位置根据实际需求调整
|
||||||
div:not(:first-child):not(:last-child) {
|
x: 0,
|
||||||
margin-bottom: 10px;
|
y: 0,
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
},
|
||||||
}
|
left: 'center',
|
||||||
.num {
|
top: 'center',
|
||||||
font-weight: 900;
|
},
|
||||||
}
|
],
|
||||||
.unit {
|
},
|
||||||
font-size: 12px;
|
}
|
||||||
color: #ccc;
|
myChart.setOption(option)
|
||||||
}
|
// 监听地图绑定双击事件（双击进入地图下一级）
|
||||||
}
|
myChart.on('click', (params) => {
|
||||||
</style>
|
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({
|
||||||
|
path: '/screen/cityScreen',
|
||||||
|
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>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue