395 lines
11 KiB
Vue
395 lines
11 KiB
Vue
<template>
|
|
<div class="map-warp">
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
<Chart v-else ref="chart" :options="options" @mapClick="mapClick" />
|
|
<div class="map-left-box">
|
|
<template v-for="(item,index) in tableData">
|
|
<div :key="index" class="box-value">
|
|
<span class="num">{{ index + 1 }}</span>
|
|
<span class="name">{{ item.addName }}</span>
|
|
<span class="value"><span style="min-width: 25px;display: inline-block;">{{ (item.stationCapacity / 1000).toFixed(2) }}</span>MWh</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import chinaMap from '@/assets/mapJson/chinaMap.json'
|
|
import worldJson from 'echarts/map/json/world.json'
|
|
// import { chinaMapOutline } from '@/assets/mapJson/chinaMapOut.js'
|
|
import blue from '../../../assets/new-screen/map-blue.png'
|
|
import { GetStationInfo, GetCapacity, GetRegionalDistribution } from '@/api/screen/zzScreen'
|
|
export default {
|
|
data() {
|
|
return {
|
|
options: {},
|
|
pointData: [],
|
|
pointIndex: 0,
|
|
timer: null,
|
|
currentToolTip: {},
|
|
loading: true,
|
|
tableData: [],
|
|
mapData: [],
|
|
stationNum: []
|
|
}
|
|
},
|
|
destroyed() {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
},
|
|
methods: {
|
|
mapClick(params) {
|
|
if (params.seriesType === 'effectScatter' || params.name === '四川') {
|
|
const routeParams = {
|
|
url: '/dashboard-test/dashboard-test',
|
|
urlName: 'dashboard-test',
|
|
data: {
|
|
id: params.data.id
|
|
}
|
|
}
|
|
this.$store.dispatch('user/menuChange', routeParams)
|
|
}
|
|
},
|
|
async getStationNum(deptId) {
|
|
const { data } = await GetRegionalDistribution({
|
|
deptId: deptId
|
|
})
|
|
this.mapData = data
|
|
this.mapData.map((el) => {
|
|
el.name = el.addName
|
|
el.value = el.regionValue
|
|
this.stationNum.push(el.value)
|
|
})
|
|
},
|
|
async getLeftData(deptId) {
|
|
try {
|
|
const { data } = await GetCapacity({
|
|
deptId: deptId
|
|
})
|
|
this.tableData = data
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
async getData(deptId) {
|
|
this.loading = true
|
|
try {
|
|
const { data } = await GetStationInfo({
|
|
deptId: deptId
|
|
})
|
|
console.log('GetStationInfo', data)
|
|
const province = []
|
|
if (data.length) {
|
|
data.forEach((el) => {
|
|
el.value = [el.longitude, el.latitude]
|
|
el.symbol = 'image://' + blue
|
|
el.cityCode = 1000
|
|
province.push(el)
|
|
})
|
|
this.pointData = province
|
|
} else {
|
|
this.pointData = [{ symbol: 'image://' + blue, cityCode: 1000, value: [30.787045, 103.923008], name: 'Sichuan' }]
|
|
}
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
this.getInitMap()
|
|
},
|
|
getInitMap() {
|
|
this.$echarts.registerMap('world', worldJson)
|
|
var series = [
|
|
{
|
|
name: '国家',
|
|
map: 'world',
|
|
type: 'map',
|
|
roam: false,
|
|
zoom: 1.1,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
emphasis: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
top: '10%',
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: 'transparent',
|
|
borderColor: 'rgba(21,138,246,100%)',
|
|
borderWidth: 1
|
|
},
|
|
emphasis: {
|
|
areaColor: '#0B63B0',
|
|
textStyle: {
|
|
color: 'red'
|
|
}
|
|
}
|
|
},
|
|
data: this.mapData
|
|
},
|
|
|
|
{
|
|
name: '散点',
|
|
type: 'effectScatter',
|
|
coordinateSystem: 'geo',
|
|
rippleEffect: {
|
|
color: 'purple', // 涟漪颜色,默认为散点自身颜色
|
|
brushType: 'fill', // 动画方式,全填充或只有线条,'stroke'
|
|
period: 4, // 动画周期
|
|
scale: '0.5' // 涟漪规模
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F4E925',
|
|
shadowColor: '#333'
|
|
}
|
|
},
|
|
symbolSize: 24,
|
|
symbolOffset: [0, '-50%'], // 或 [0, -12] 更精确
|
|
data: [this.pointData[this.pointIndex]],
|
|
|
|
showEffectOn: 'render' // 加载完毕显示特效
|
|
}
|
|
]
|
|
|
|
this.options = {
|
|
visualMap: {
|
|
min: 0,
|
|
max: Math.max(...this.stationNum),
|
|
right: 'right',
|
|
top: 'bottom',
|
|
text: [this.$t('screen.high') + '(' + this.$t('screen.stationNum') + ')', this.$t('screen.low') + '(' + this.$t('screen.stationNum') + ')'],
|
|
calculable: true,
|
|
inRange: {
|
|
// color: ['#5edfd6', '#37d4cf', '#14c9c9', '#0da5aa', '#07828b']
|
|
// color: ['#fcf26b', '#fbe842', '#fadc19', '#cfaf0f', '#a38408']
|
|
color: ['#6aa1ff', '#4080ff', '#165dff', '#0e42d2', '#072ca6', '#031a79']
|
|
// color: ['#8d4eda', '#722ed1', '#551db0', '#3c108f', '#27066e']
|
|
// color: ['#e13edb', '#d91ad9', '#b010b6', '#8a0993', '#650370']
|
|
// color: ['#23c343', '#00b42a', '#009a29', '#008026', '#006622']
|
|
|
|
},
|
|
textStyle: {
|
|
color: '#F5FAFF'
|
|
},
|
|
seriesIndex: [0]
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
alwaysShowContent: true,
|
|
backgroundColor: 'transparent',
|
|
position: 'bottom',
|
|
triggerOn: 'click',
|
|
enterable: true,
|
|
formatter: params => {
|
|
// 获取xAxis data中的数据
|
|
let dataStr = `<div></div>`
|
|
dataStr += `<div>
|
|
<span style="padding-left:20px;font-weight:bold;margin-left:20px;margin-top:5px;font-size="14px">${params.name}</span>
|
|
</div>`
|
|
dataStr += `<div style="margin-top:15px">
|
|
<span style="padding-left:10px;">${this.$t('screen.comTime')}</span>
|
|
<span style="margin-left:5px;margin-right:10px;color:rgba(245, 221, 0, 1);font-family:DIN;">${params.data.createTime}</span>
|
|
</div>`
|
|
dataStr += `<div style="margin-top:2px;">
|
|
<span style="padding-left:10px;">${this.$t('screen.capacity')}</span>
|
|
<span style="margin-left:5px;margin-right:5px;color:rgba(245, 221, 0, 1);font-family:DIN;">${params.data.capacity}</span>
|
|
<span style="color:rgba(245, 221, 0, 1);">kWh</span>
|
|
</div>`
|
|
const div = `<div style='height:85px;
|
|
background-image:url(${require('../../../assets/new-screen/tooltip-bg.png')});background-repeat: no-repeat;background-size:100% 100%;' >${dataStr}</div>`
|
|
return div
|
|
}
|
|
},
|
|
color: ['#34c6bb'],
|
|
geo: [
|
|
{
|
|
silent: true,
|
|
map: 'world',
|
|
zoom: 1.1,
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
emphasis: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
|
|
roam: false,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: 'rgba(3,56,100,50%)',
|
|
borderColor: 'transparent',
|
|
borderWidth: 1.5,
|
|
shadowColor: 'transparent',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 4,
|
|
shadowBlur: 10
|
|
},
|
|
emphasis: {
|
|
areaColor: 'transparent', // 悬浮背景
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
{
|
|
silent: true,
|
|
map: 'chinaMapOutline',
|
|
zoom: 1.2,
|
|
top: '7%',
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
emphasis: {
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
|
|
roam: false,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: 'rgba(1,28,50,100%)',
|
|
borderColor: '#0089FB',
|
|
borderWidth: 1.5,
|
|
shadowColor: '#0089FB',
|
|
shadowOffsetX: 0,
|
|
shadowOffsetY: 4,
|
|
shadowBlur: 15
|
|
},
|
|
emphasis: {
|
|
areaColor: 'transparent', // 悬浮背景
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}
|
|
|
|
}],
|
|
series: series
|
|
}
|
|
|
|
setTimeout(() => {
|
|
this.$refs.chart?.chart.dispatchAction({
|
|
type: 'showTip',
|
|
seriesIndex: 1, // 针对series下第几个数据
|
|
dataIndex: 0 // 第几个数据
|
|
})
|
|
}, 0)
|
|
|
|
if (!this.timer) {
|
|
this.timer = setInterval(() => {
|
|
this.pointIndex++
|
|
if (this.pointIndex === this.pointData.length) {
|
|
this.pointIndex = 0
|
|
}
|
|
this.getInitMap()
|
|
}, 5000)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.map-warp {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.map-left-box{
|
|
|
|
width: 220px;
|
|
height: 180px;
|
|
// border: 1px solid;
|
|
z-index: 9999999;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 10px;
|
|
overflow: auto;
|
|
margin-right: 10px;
|
|
|
|
.box-value{
|
|
|
|
width: 100%;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
background-size: 100% 100%;
|
|
background: url(../../../assets/new-screen/nomal-bg.png)no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
.num{
|
|
width: 20px;
|
|
font-size: 12px;
|
|
padding-left: 20px;
|
|
font-family: DIN;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
}
|
|
.name{
|
|
font-size: 12px;
|
|
text-align: center;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
}
|
|
.value{
|
|
font-size: 12px;
|
|
width: 80px;
|
|
line-height: 24px;
|
|
height: 24px;
|
|
background: url(../../../assets/new-screen/select-bg.png)no-repeat;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.map-right-box{
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid;
|
|
z-index: 9999999;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
.box{
|
|
width: 100px;
|
|
height: 100px;
|
|
|
|
}
|
|
::v-deep *::-webkit-scrollbar{
|
|
background-color: transparent!important;
|
|
}
|
|
::v-deep *::-webkit-scrollbar-thumb{
|
|
background-color: transparent!important;
|
|
}
|
|
|
|
</style>
|