同步现场数据
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- 综合评估详情 -->
|
||||
<el-dialog draggable title="指标合格率统计统计" v-model="dialogVisible" width="1400px">
|
||||
<el-dialog draggable title="指标合格率统计" v-model="dialogVisible" width="1400px">
|
||||
<div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="600px" :data="tableData">
|
||||
<vxe-column field="substationName" title="变电站名称" />
|
||||
|
||||
@@ -132,7 +132,7 @@ const contaminateC = () => {
|
||||
a5++
|
||||
}
|
||||
}
|
||||
console.log('🚀 ~ getPollutionAlarmData ~ a1 / data.length:', a1 / data.length)
|
||||
// console.log('🚀 ~ getPollutionAlarmData ~ a1 / data.length:', a1 / data.length)
|
||||
|
||||
let list = [
|
||||
{
|
||||
|
||||
@@ -63,9 +63,10 @@ function initMap(styleurl: any) {
|
||||
localIdeographFontFamily: 'Microsoft YoHei'
|
||||
})
|
||||
map.value.on('load', () => {
|
||||
addLayer()
|
||||
|
||||
nextTick(() => {
|
||||
// 添加图层
|
||||
addLayer()
|
||||
|
||||
Query()
|
||||
})
|
||||
@@ -223,7 +224,7 @@ const addLayer = () => {
|
||||
}
|
||||
})
|
||||
map.value.addLayer({
|
||||
id: 'spotName-ZY',
|
||||
id: 'spotName',
|
||||
type: 'symbol',
|
||||
minzoom: 10,
|
||||
source: {
|
||||
@@ -238,7 +239,7 @@ const addLayer = () => {
|
||||
|
||||
'text-field': '{name}',
|
||||
'icon-ignore-placement': true,
|
||||
'text-ignore-placement': false,
|
||||
'text-ignore-placement': true,
|
||||
'text-size': 12,
|
||||
'text-max-width': 8,
|
||||
'text-offset': [0, 2],
|
||||
@@ -252,6 +253,7 @@ const addLayer = () => {
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
map.value.loadImage(
|
||||
new URL('@/assets/txzdwzj.png', import.meta.url).href, // 图片地址
|
||||
(error: any, image: any) => {
|
||||
@@ -290,13 +292,21 @@ const addLayer = () => {
|
||||
// 'text-halo-width': 1.33333
|
||||
// }
|
||||
})
|
||||
}
|
||||
)
|
||||
map.value.loadImage(
|
||||
new URL('@/assets/point.png', import.meta.url).href, // 图片地址
|
||||
(error: any, image: any) => {
|
||||
if (error) throw error
|
||||
|
||||
//添加图片到map,第一个参数为图片设置id
|
||||
map.value.addImage('poi3', image)
|
||||
map.value.addLayer({
|
||||
id: 'spotName-TY',
|
||||
id: 'spotImg-GJ',
|
||||
type: 'symbol',
|
||||
minzoom: 8,
|
||||
source: {
|
||||
type: 'geojson',
|
||||
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
@@ -304,20 +314,13 @@ const addLayer = () => {
|
||||
},
|
||||
layout: {
|
||||
// 为图层设置引用的图片ID
|
||||
// 'icon-image': 'poi2',
|
||||
// 'icon-size': 0.7,
|
||||
'text-field': '{name}',
|
||||
'icon-image': 'poi3',
|
||||
'icon-size': 0.6,
|
||||
'icon-ignore-placement': true,
|
||||
'text-ignore-placement': false,
|
||||
'text-size': 12,
|
||||
'text-max-width': 8,
|
||||
'text-offset': [0, 2],
|
||||
'text-font': ['Microsoft YaHei Regular']
|
||||
'icon-allow-overlap': true
|
||||
},
|
||||
paint: {
|
||||
'text-color': '#ccc',
|
||||
// 'text-halo-color': '#FFFFFF',
|
||||
'text-halo-width': 1.33333
|
||||
Paint: {
|
||||
'icon-opacity': 10
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -325,7 +328,7 @@ const addLayer = () => {
|
||||
// 添加地图弹框
|
||||
map.value.on('click', (e: any) => {
|
||||
const features = map.value.queryRenderedFeatures(e.point, {
|
||||
layers: ['spotImg-ZY', 'spotImg-TY']
|
||||
layers: ['spotImg-ZY', 'spotImg-TY', 'spotImg-GJ']
|
||||
})
|
||||
|
||||
if (features.length > 0) {
|
||||
@@ -383,7 +386,9 @@ const addLayer = () => {
|
||||
})
|
||||
}
|
||||
//添加多个监测点
|
||||
const addMarkers = async (row?: any) => {
|
||||
const addMarkers = async (row?: any, key?: any) => {
|
||||
console.log('🚀 ~ addMarkers ~ key:', key)
|
||||
if (map.value == null) return
|
||||
let params = {
|
||||
deptIndex: deptIndex.value,
|
||||
monitorFlag: 2,
|
||||
@@ -426,14 +431,25 @@ const addMarkers = async (row?: any) => {
|
||||
list: val
|
||||
}
|
||||
}
|
||||
if (key == 0) {
|
||||
switch (val.type) {
|
||||
case 0:
|
||||
tempFeatureZ.push(tempFeature)
|
||||
|
||||
switch (val.comFlag) {
|
||||
case 0:
|
||||
tempFeatureT.push(tempFeature)
|
||||
break
|
||||
case 1:
|
||||
tempFeatureZ.push(tempFeature)
|
||||
break
|
||||
break
|
||||
case 1:
|
||||
tempFeatureT.push(tempFeature)
|
||||
break
|
||||
}
|
||||
} else {
|
||||
switch (val.comFlag) {
|
||||
case 0:
|
||||
tempFeatureT.push(tempFeature)
|
||||
break
|
||||
case 1:
|
||||
tempFeatureZ.push(tempFeature)
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -442,17 +458,33 @@ const addMarkers = async (row?: any) => {
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureZ
|
||||
})
|
||||
map.value.getSource('spotName-ZY').setData({
|
||||
|
||||
map.value.setLayerZoomRange('spotImg-GJ', key != undefined ? 0 : 8)
|
||||
map.value.setLayerZoomRange('spotImg-TY', key != undefined ? 0 : 8)
|
||||
map.value.setLayerZoomRange('spotImg-ZY', key != undefined ? 0 : 8)
|
||||
if (key == 0) {
|
||||
map.value.getSource('spotImg-GJ').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureT
|
||||
})
|
||||
map.value.getSource('spotImg-TY').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
})
|
||||
} else {
|
||||
map.value.getSource('spotImg-GJ').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
})
|
||||
map.value.getSource('spotImg-TY').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureT
|
||||
})
|
||||
}
|
||||
|
||||
map.value.getSource('spotName').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureZ
|
||||
})
|
||||
map.value.getSource('spotImg-TY').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureT
|
||||
})
|
||||
map.value.getSource('spotName-TY').setData({
|
||||
type: 'FeatureCollection',
|
||||
features: tempFeatureT
|
||||
features: [...tempFeatureT, ...tempFeatureZ]
|
||||
})
|
||||
}
|
||||
|
||||
@@ -521,7 +553,7 @@ const height = mainHeight(20)
|
||||
:deep(.query-box-wrap) {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: calc(50% - 295px);
|
||||
left: calc(50% - 345px);
|
||||
.query-box {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
@@ -530,7 +562,7 @@ const height = mainHeight(20)
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
left: calc(50% + 35px);
|
||||
left: calc(50% - 15px);
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
{{ item.titleT[0] }}:
|
||||
<span
|
||||
:style="`color: ${item.color[0]}; cursor: pointer;`"
|
||||
@click="LookMap(item.list[4].numOneList, 0)"
|
||||
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
|
||||
>
|
||||
{{ item.list[4].numOne }}
|
||||
</span>
|
||||
@@ -32,7 +32,7 @@
|
||||
{{ item.titleT[1] }}:
|
||||
<span
|
||||
:style="`color: ${item.color[1]}; cursor: pointer;`"
|
||||
@click="LookMap(item.list[4].numTwoList, 1)"
|
||||
@click="LookMap([], item.list[4].numTwoList, i)"
|
||||
>
|
||||
{{ item.list[4].numTwo }}
|
||||
</span>
|
||||
@@ -46,11 +46,11 @@
|
||||
<span class="vol">500kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div @click="LookMap(item.list[0].numOneList, 0)">
|
||||
<div @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, i)">
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
|
||||
</div>
|
||||
<div @click="LookMap(item.list[0].numTwoList, 1)">
|
||||
<div @click="LookMap([], item.list[0].numTwoList, i)">
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
|
||||
</div>
|
||||
@@ -62,11 +62,11 @@
|
||||
<span class="vol">220kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div @click="LookMap(item.list[1].numOneList, 0)">
|
||||
<div @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, i)">
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
|
||||
</div>
|
||||
<div @click="LookMap(item.list[1].numTwoList, 1)">
|
||||
<div @click="LookMap([], item.list[1].numTwoList, i)">
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
|
||||
</div>
|
||||
@@ -78,11 +78,11 @@
|
||||
<span class="vol">110kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div @click="LookMap(item.list[2].numOneList, 0)">
|
||||
<div @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, i)">
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
|
||||
</div>
|
||||
<div @click="LookMap(item.list[2].numTwoList, 1)">
|
||||
<div @click="LookMap([], item.list[2].numTwoList, i)">
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
|
||||
</div>
|
||||
@@ -91,14 +91,14 @@
|
||||
<div class="card-Box">
|
||||
<div>
|
||||
<span class="line"></span>
|
||||
<span class="vol">350kV</span>
|
||||
<span class="vol">35kV</span>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div @click="LookMap(item.list[3].numOneList, 0)">
|
||||
<div @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, i)">
|
||||
{{ item.titleT[0] }}:
|
||||
<span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
|
||||
</div>
|
||||
<div @click="LookMap(item.list[3].numTwoList, 1)">
|
||||
<div @click="LookMap([], item.list[3].numTwoList, i)">
|
||||
{{ item.titleT[1] }}:
|
||||
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
|
||||
</div>
|
||||
@@ -298,19 +298,21 @@ const info = (row: any) => {
|
||||
list.value[2].list = data[0].data.map((item: any) => {
|
||||
return {
|
||||
numOne: item.num,
|
||||
numTwo: item.onLineNum
|
||||
numTwo: item.onLineNum,
|
||||
numOneList: item.numList,
|
||||
numTwoList: item.onLineNumList
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 点击
|
||||
const LookMap = (row: object, num: number) => {
|
||||
console.log('🚀 ~ LookMap ~ row:', row)
|
||||
const LookMap = (coutList: object, alarmList: object, key?: any) => {
|
||||
// console.log('🚀 ~ LookMap ~ row:', row)
|
||||
let form = {
|
||||
coutList: num == 0 ? row : [],
|
||||
alarmList: num == 1 ? row : []
|
||||
coutList: coutList,
|
||||
alarmList: alarmList
|
||||
}
|
||||
emit('LookMap', form)
|
||||
emit('LookMap', form, key)
|
||||
}
|
||||
onMounted(() => {})
|
||||
defineExpose({ info, show })
|
||||
|
||||
Reference in New Issue
Block a user