初次提交
This commit is contained in:
397
src/views/new-screen-zz/components/map-center.vue
Normal file
397
src/views/new-screen-zz/components/map-center.vue
Normal file
@ -0,0 +1,397 @@
|
||||
<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 { 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.latitude, el.longitude]
|
||||
el.symbol = 'image://' + blue
|
||||
el.cityCode = 1000
|
||||
province.push(el)
|
||||
})
|
||||
this.pointData = province
|
||||
} else {
|
||||
this.pointData = [{ symbol: 'image://' + blue, cityCode: 1000, value: [118.8062, 31.9208], name: '江苏' }]
|
||||
}
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
this.getInitMap()
|
||||
},
|
||||
getInitMap() {
|
||||
this.$echarts.registerMap('china', chinaMap)
|
||||
this.$echarts.registerMap('chinaMapOutline', chinaMapOutline)
|
||||
|
||||
var series = [
|
||||
{
|
||||
map: 'china',
|
||||
type: 'map',
|
||||
roam: false,
|
||||
zoom: 1.65,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
top: '29%',
|
||||
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: 50,
|
||||
data: [this.pointData[this.pointIndex]]
|
||||
|
||||
// showEffectOn: 'render' // 加载完毕显示特效
|
||||
}
|
||||
]
|
||||
|
||||
this.options = {
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: Math.max(...this.stationNum),
|
||||
right: 'right',
|
||||
top: 'bottom',
|
||||
text: ['高(电站个数)', '低(电站个数)'],
|
||||
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: 'top',
|
||||
triggerOn: 'click',
|
||||
enterable: true,
|
||||
formatter: params => {
|
||||
// 获取xAxis data中的数据
|
||||
let dataStr = `<div></div>`
|
||||
dataStr += `<div>
|
||||
<span style="padding-left:10px;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;">投运时间</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;">装机容量</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='max-width:220px;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: 'chinaMapOutline',
|
||||
|
||||
zoom: 1.1,
|
||||
top: '10%',
|
||||
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.1,
|
||||
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>
|
||||
Reference in New Issue
Block a user