同步现场代码 修改电网一张图页面
This commit is contained in:
@@ -545,10 +545,12 @@ const addLayer = () => {
|
||||
</div>`
|
||||
)
|
||||
.addTo(map.value)
|
||||
document.getElementById('ids').onclick = function (v: any) {
|
||||
// console.log(e.target.dataset.sid)
|
||||
emit('drop', v.target.dataset.sid)
|
||||
}
|
||||
let html = document.getElementById('ids')
|
||||
if (html)
|
||||
html.onclick = function (v: any) {
|
||||
// console.log(e.target.dataset.sid)
|
||||
emit('drop', v.target.dataset.sid)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -556,8 +558,8 @@ const addLayer = () => {
|
||||
map.value.on('zoomend', (e: any) => {
|
||||
// console.log(123, map.value.getCenter())
|
||||
|
||||
if (map.value.getZoom() > 8 || map.value.getZoom() < 6) {
|
||||
// rPopList.value.remove()
|
||||
if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
|
||||
|
||||
rPopList.value.map((item: any) => item.remove())
|
||||
rPopList.value = []
|
||||
} else {
|
||||
@@ -697,6 +699,7 @@ const addMarkers = async (row?: any, key?: any) => {
|
||||
features: [...tempFeatureT, ...tempFeatureZ]
|
||||
})
|
||||
}
|
||||
// 统计弹框数据
|
||||
const GridDiagramArea = () => {
|
||||
let List = [
|
||||
{
|
||||
@@ -759,29 +762,43 @@ const radiusPop = (k?: number) => {
|
||||
rPopList.value = []
|
||||
}
|
||||
|
||||
mapList.value.forEach((item: any) => {
|
||||
mapList.value.forEach((item: any, i: number) => {
|
||||
let infoText = ''
|
||||
if (PopKey.value == 0) {
|
||||
// 监测点
|
||||
infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
|
||||
<div class="infoBox">
|
||||
<div>总数<p>${item.lineNum} 个</p></div>
|
||||
<div>在线<p>${item.onlineNum} 个</p></div>
|
||||
<div>告警<p>${item.alarm} 个</p></div>
|
||||
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
|
||||
item.alarmList
|
||||
}" data-key="0">总数<br/>${item.lineNum}</div>
|
||||
<div id="clickZx${i}" data-alarm="${item.onlineList}" data-key="0">在线<br/>${
|
||||
item.onlineNum
|
||||
}</div>
|
||||
<div id="clickGj${i}" data-line="" data-alarm="${item.alarmList}" data-key="1">告警<br/>${
|
||||
item.alarm
|
||||
}</div>
|
||||
</div>`
|
||||
} else if (PopKey.value == 1) {
|
||||
// 变电站
|
||||
infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
|
||||
<div class="infoBox">
|
||||
<div>总数<p>${item.subNum} 个</p></div>
|
||||
<div>告警<p>${item.alarmSubNum} 个</p></div>
|
||||
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
|
||||
item.alarmSubList
|
||||
}" data-key="1">总数<br/>${item.subNum}</div>
|
||||
<div id="clickGj${i}" data-line="" data-alarm="${item.alarmSubList}" data-key="1">告警<br/>${
|
||||
item.alarmSubNum
|
||||
}</div>
|
||||
</div>`
|
||||
} else if (PopKey.value == 2) {
|
||||
// 终端
|
||||
infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
|
||||
<div class="infoBox">
|
||||
<div>总数<p>${item.deviceNum} 个</p></div>
|
||||
<div>在运<p>${item.onDevice} 个</p></div>
|
||||
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
|
||||
item.onlineList
|
||||
}" data-key="2">总数<br/>${item.deviceNum}</div>
|
||||
<div id="clickGj${i}" data-line="" data-alarm="${item.onlineList}" data-key="2">在运<br/>${
|
||||
item.onDevice
|
||||
}</div>
|
||||
</div>`
|
||||
}
|
||||
|
||||
@@ -793,11 +810,7 @@ const radiusPop = (k?: number) => {
|
||||
})
|
||||
.setLngLat(item.LngLat)
|
||||
.setHTML(
|
||||
` <div class="sgmap-popup-content" style="background-color: ${item.background};">
|
||||
|
||||
|
||||
|
||||
|
||||
`<div class="sgmap-popup-content" style="background-color: ${item.background};">
|
||||
<div style="display: flex;">` +
|
||||
infoText +
|
||||
` </div>
|
||||
@@ -805,8 +818,35 @@ const radiusPop = (k?: number) => {
|
||||
)
|
||||
.addTo(map.value)
|
||||
rPopList.value.push(pop)
|
||||
let html: any = document.getElementById(`clickZs${i}`)
|
||||
let html1: any = document.getElementById(`clickZx${i}`)
|
||||
let html2: any = document.getElementById(`clickGj${i}`)
|
||||
if (html)
|
||||
html.onclick = function (v: any) {
|
||||
popMarkers(v.target.dataset.line?.split(','), v.target.dataset.alarm?.split(','), v.target.dataset.key)
|
||||
}
|
||||
if (html1)
|
||||
html1.onclick = function (v: any) {
|
||||
popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key)
|
||||
}
|
||||
if (html2)
|
||||
html2.onclick = function (v: any) {
|
||||
|
||||
popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 点击弹框调用点加载
|
||||
const popMarkers = (coutList: any, alarmList: any, key: any) => {
|
||||
addMarkers(
|
||||
{
|
||||
coutList: coutList,
|
||||
alarmList: alarmList,
|
||||
type: 1
|
||||
},
|
||||
key
|
||||
)
|
||||
}
|
||||
|
||||
const locatePositions = (e: any) => {
|
||||
if (map.value != null) {
|
||||
@@ -814,11 +854,17 @@ const locatePositions = (e: any) => {
|
||||
// 加载点
|
||||
addMarkers()
|
||||
|
||||
powerManageGridMap.value.drillDown({
|
||||
// 判断超高压
|
||||
orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
|
||||
onlyDisplay: true
|
||||
})
|
||||
powerManageGridMap.value.drillDown(
|
||||
{
|
||||
// 判断超高压
|
||||
orgId:
|
||||
e.data.code == '1100F3DE246A6FADE050007F01006CBE'
|
||||
? '1100F3DE20806FADE050007F01006CBE'
|
||||
: e.data.code,
|
||||
onlyDisplay: true
|
||||
},
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
// 电网查询功能
|
||||
|
||||
Reference in New Issue
Block a user