bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏地图

This commit is contained in:
bb_pan 2025-09-24 14:49:58 +08:00
parent 839149f14b
commit 1ba03331e4
5 changed files with 518 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -43,6 +43,7 @@
"core-js": "^3.39.0",
"crypto-js": "^4.2.0",
"echarts": "5.4.0",
"echarts-gl": "^2.0.9",
"element-china-area-data": "^6.1.0",
"element-ui": "2.15.14",
"file-saver": "2.0.5",

413
src/views/screen/wsScreen/components/center/index-old.vue Normal file
View File

@ -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" class="city-tooltip">
<div class="city-name">{{ selectedCity.cityName }}</div>
<div
>装备价值： <span class="num">{{ selectedCity.totalValue }}</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 * 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,
cityData: [
// 假数据
{
deptName: '合肥市',
cityName: '合肥市',
value: [117.227239, 31.820586, 100],
totalValue: 100,
totalEquipmentQuantity: 100,
configRate: 100,
lineNum: 100,
substationNum: 100,
cableNum: 100,
},
{
deptName: '芜湖市',
cityName: '芜湖市',
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',
geo: {
map: 'anhui',
roam: false,
zoom: 1.1,
aspectScale: 1.5,
center: [117.227239, 31.820586],
label: { show: false },
itemStyle: {
areaColor: '#1B3452',
borderColor: '#5A9BD9',
borderWidth: 1.5,
},
emphasis: {
itemStyle: { areaColor: '#4C7DBF' },
},
},
series: [
// ******** 阴影层（伪3D底座） ********
...[1, 2, 3].map((i) => ({
type: 'map',
map: 'anhui',
roam: false,
silent: true,
zoom: 1.1,
aspectScale: 1.5,
center: [117.227239 + i * 0.05, 31.820586 - i * 0.05], // 👈 每层轻微错位
itemStyle: {
areaColor: `rgba(27,52,82,${0.6 - i * 0.15})`, // 从深到浅
borderColor: 'rgba(0,0,0,0.2)',
borderWidth: 1,
},
z: 1, // 比主层低
})),
// ******** 主地图层（顶部亮色） ********
{
type: 'map',
map: 'anhui',
roam: false,
zoom: 1.1,
aspectScale: 1.5,
center: [117.227239, 31.820586],
itemStyle: {
areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#3a8bd6' },
{ offset: 1, color: '#142b44' },
]),
borderColor: '#5A9BD9',
borderWidth: 2,
shadowColor: 'rgba(0,0,0,0.6)',
shadowBlur: 15,
},
emphasis: {
itemStyle: {
areaColor: '#4C7DBF',
},
},
z: 5,
},
// ******** 城市散点 ********
{
type: 'scatter',
coordinateSystem: 'geo',
data: seriesData,
symbol: 'circle',
symbolSize: 16,
label: {
show: true,
color: '#fff',
fontSize: 15,
textShadowColor: '#000',
textShadowBlur: 2,
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|${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],
},
},
},
z: 10,
},
],
}
this.myChart.setOption(option)
this.myChart.on('click', (params) => {
console.log('🚀 ~ initMap ~ params:', params)
// params.name去掉 市
let city = null
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('🚀 ~ initMap ~ params:', params)
let city = null
if (params.seriesType === 'scatter' && params.data) {
// console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
city = params.data
} else {
this.selectedCity = null
city = this.cityData.find((c) => c.cityName === params.name)
}
this.selectedCity = city || null
})
// 鼠标移出时隐藏
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: 28px;
text-align: center;
padding: 10px 20px;
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: -21px;
position: relative;
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.3)); // 20px 柔和阴影
transform: translateZ(0); // 启用硬件加速
}
// 倾斜层：实现 15 度倾斜的 3D 效果
.map-tilt {
transform: rotateX(18deg); // 默认就有角度
transform-origin: bottom center;
perspective: 1600px; // 加大景深
transition: transform 0.3s ease;
pointer-events: none;
height: 900px;
display: flex;
justify-content: center;
}
// 鼠标悬停时轻微动态效果（可选）
.middle-warp:hover .map-tilt {
transform: rotateX(15deg); // hover 时轻微调整，显得有呼吸感
}
// 实际图表容器
.map-container {
width: 100%;
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>

194
src/views/screen/wsScreen/components/center/index.vue
View File

@ -45,6 +45,7 @@
</template>
<script>
import 'echarts-gl'
import * as echarts from 'echarts'
import anhuiMapJson from '../anhui.json'
import labelBg from '../../img/value-bg.png'
@ -56,11 +57,39 @@ export default {
btnIndex: 1,
myChart: null,
selectedCity: null,
cityData: [],
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) {
@ -116,125 +145,106 @@ export default {
const option = {
backgroundColor: 'transparent',
geo: {
geo3D: {
map: 'anhui',
roam: false,
zoom: 1.1,
aspectScale: 1.5,
center: [117.227239, 31.820586],
label: { show: false },
itemStyle: {
areaColor: '#1B3452',
borderColor: '#5A9BD9',
borderWidth: 1.5,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
roam: false, // 👈 允许拖拽
regionHeight: 7, // 👈 省份厚度
shading: 'lambert', // 光照模型：realistic / lambert / color
realisticMaterial: {
roughness: 0.6,
metalness: 0.1,
texture: '#3A5EB1',
},
emphasis: {
itemStyle: { areaColor: '#4C7DBF' },
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: 136, // 视角远近
alpha: 40, // 旋转角度
beta: -16,
rotateSensitivity: 0, // 禁止旋转
zoomSensitivity: 0, // 禁止缩放
panSensitivity: 0, // 禁止平移
center: [12, -30, 0],
// scale: [1.5, 1, 1]
},
},
series: [
{
type: 'scatter',
coordinateSystem: 'geo',
type: 'scatter3D',
coordinateSystem: 'geo3D',
data: seriesData,
symbol: 'circle',
symbolSize: 16,
symbolSize: 18,
label: {
show: true,
// 保持文字阴影等样式（可按需调整）
color: '#fff',
fontSize: 15,
textShadowColor: '#000',
textShadowBlur: 2,
// 使用富文本标签：{val|...} 表示 value 显示区，{name|...} 表示城市名
formatter: (params) => {
// console.log('🚀 ~ initMap ~ params:', params)
// 优先使用 params.data.value（更可靠），否则 fallback 到 params.value
const val = params.data && params.data.value !== undefined ? params.data.value : params.value
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 !== undefined
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.deptName}}`
: `{name|${params.data.deptName}}`
// 根据 params.name 匹配 seriesData 中的数据, 同一个城市如果有多条数据 则间隔一点距离展示
},
rich: {
// value 的背景图样式
val: {
// 关键：backgroundColor 使用 image（传入上面引入的 labelBg）
backgroundColor: {
image: labelBg, // ← 确保上面已 import 或用 new URL 得到的 href
},
// 使背景块垂直居中、控制高度、内边距等
backgroundColor: { image: labelBg },
height: 28,
minWidth: 70,
lineHeight: 28,
padding: [0, 10], // 上右下左
padding: [0, 10],
align: 'center',
verticalAlign: 'middle',
color: '#fff',
fontSize: 18,
borderRadius: 14, // 圆角（如果背景图是纯图，这个可以省）
},
// 城市名样式（在 value 下方）
name: {
color: '#fff',
fontFamily: 'DS-TITLE',
fontSize: 16,
padding: [6, 0, 0, 0],
textShadowColor: '#000',
textShadowBlur: 2,
},
},
},
itemStyle: {
areaColor: '#1B3452',
borderColor: '#5A9BD9',
borderWidth: 1.5,
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
},
emphasis: {
label: {
color: '#fff',
},
itemStyle: {
areaColor: '#4C7DBF',
},
},
data: seriesData,
},
],
// series: [{ type: 'map3D', z: 10, itemStyle: {color: 'transparent'}, borderColor: '#5CE0FF', borderWidth: 3 }]
}
this.myChart.setOption(option)
// 点击事件
this.myChart.on('click', (params) => {
console.log('🚀 ~ initMap ~ params:', params)
console.log('🚀 ~ click ~ params:', params)
// params.name去掉 市
let city = null
if (params.seriesType === 'scatter' && params.data) {
city =
params.data.deptName == '安徽送变电工程有限公司'
? '安徽送变电'
: params.data.cityName.replace(/市$/, '')
} else {
city = params.name.replace(/市$/, '')
}
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',
@ -246,15 +256,15 @@ export default {
// 鼠标移入时展示
this.myChart.on('mouseover', (params) => {
// console.log('🚀 ~ initMap ~ params:', params)
let city = null
if (params.seriesType === 'scatter' && params.data) {
// console.log('🚀 ~ 当前坐标点信息 ~ params.data:', params.data)
city = params.data
} else {
this.selectedCity = null
city = this.cityData.find((c) => c.cityName === params.name)
}
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
})
@ -294,9 +304,9 @@ export default {
}
.btn {
font-size: 28px;
font-size: 18px;
text-align: center;
padding: 10px 20px;
padding: 6px 15px;
font-family: DS-TITLE;
color: #ccc;
background-image: url('../../img/btn.png');
@ -312,7 +322,7 @@ export default {
// 外层容器：添加底部阴影
.map-wrapper {
margin-top: -21px;
/* margin-top: -180px; */
position: relative;
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.3)); // 20px 柔和阴影
transform: translateZ(0); // 启用硬件加速
@ -337,7 +347,7 @@ export default {
// 实际图表容器
.map-container {
width: 100%;
width: 160%;
height: 900px;
background: transparent;
pointer-events: auto; // 图表本身可交互

2
src/views/screen/wsScreen/components/left/EquipItem.vue
View File

@ -70,7 +70,7 @@ export default {
methods: {
initPieChart() {
const chartDom = this.$refs.pieChart
console.log('🚀 ~ initPieChart ~ chartDom:', chartDom)
// console.log('🚀 ~ initPieChart ~ chartDom:', chartDom)
if (!chartDom) return
const myChart = echarts.init(chartDom)

2
src/views/screen/wsScreen/components/left/LeftItem.vue
View File

@ -70,7 +70,7 @@ export default {
methods: {
initPieChart() {
const chartDom = this.$refs.pieChart
console.log('🚀 ~ initPieChart ~ chartDom:', chartDom)
// console.log('🚀 ~ initPieChart ~ chartDom:', chartDom)
if (!chartDom) return
const myChart = echarts.init(chartDom)