同步现场数据

This commit is contained in:
GGJ
2024-05-16 14:56:04 +08:00
parent 6c3b776db2
commit 5b9d4aac0f
9 changed files with 208 additions and 68 deletions

View File

@@ -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="变电站名称" />

View File

@@ -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 = [
{

View File

@@ -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;
}

View File

@@ -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 })