现场修改电网一张图

This commit is contained in:
GGJ
2024-05-30 13:30:12 +08:00
parent 3860ede46e
commit 9eb8eb73ff
5 changed files with 90 additions and 63 deletions

View File

@@ -384,6 +384,9 @@ body,
background: #fff; background: #fff;
z-index: 2; z-index: 2;
} }
.bjs-powered-by{
display: none;
}
@font-face { @font-face {
font-family: 'AlimamaFangYuanTiVF'; font-family: 'AlimamaFangYuanTiVF';

View File

@@ -5,9 +5,10 @@
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData"> <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="320px" :data="tableData">
<vxe-column field="devName" title="区域" /> <vxe-column field="devName" title="区域" />
<vxe-column field="num" title="异常问题总数" /> <vxe-column field="num" title="异常问题总数" />
<vxe-column field="num" title="已关联工单数" />
<vxe-column field="num" title="工单转换率(%)" />
<vxe-column field="num" title="工单总数" /> <vxe-column field="num" title="工单总数" />
<!-- <vxe-column field="num" title="已关联工单数" /> -->
<vxe-column field="num" title="工单转换率(%)" />
<vxe-column field="num" title="已处理工单数" /> <vxe-column field="num" title="已处理工单数" />
<vxe-column field="num" title="工单处置率(%)" /> <vxe-column field="num" title="工单处置率(%)" />
</vxe-table> </vxe-table>

View File

@@ -164,6 +164,7 @@ import {
getEventDetailByLineId, getEventDetailByLineId,
getGridDiagramTargetData getGridDiagramTargetData
} from '@/api/device-boot/panorama' } from '@/api/device-boot/panorama'
import { formatter } from 'element-plus'
const emit = defineEmits(['back']) const emit = defineEmits(['back'])
const dropList: any = ref({}) const dropList: any = ref({})
@@ -254,6 +255,9 @@ const open = async (id: string) => {
}, },
label: { label: {
normal: { normal: {
formatter: () => {
return num * 100 + '%'
},
textStyle: { textStyle: {
fontSize: 20, fontSize: 20,
color: '#000' color: '#000'
@@ -323,6 +327,9 @@ const open = async (id: string) => {
}, },
label: { label: {
normal: { normal: {
formatter: () => {
return num * 100 + '%'
},
textStyle: { textStyle: {
fontSize: 20, fontSize: 20,
color: '#000' color: '#000'

View File

@@ -103,6 +103,28 @@ const popupOffsets = ref({
}) })
const mapList: any = ref([]) const mapList: any = ref([])
const flag = ref(true) const flag = ref(true)
const LngLat = [
{
name: '唐山',
LngLat: [118.335849137, 39.7513593355]
},
{
name: '张家口',
LngLat: [115.032504679, 40.8951549951]
},
{
name: '秦皇岛',
LngLat: [119.185113833, 40.1179119754]
},
{
name: '承德',
LngLat: [117.548498365, 41.3775890632]
},
{
name: '廊坊',
LngLat: [116.628004129, 39.0589378611]
}
]
import { getAssessOverview } from '@/api/device-boot/panorama' import { getAssessOverview } from '@/api/device-boot/panorama'
narimap.Require(['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector'], () => { narimap.Require(['PSRMap', 'Thematic', 'Components.Query', 'Components.RegionSelector'], () => {
@@ -559,7 +581,6 @@ const addLayer = () => {
// console.log(123, map.value.getCenter()) // console.log(123, map.value.getCenter())
if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) { if (map.value.getZoom() > 8.5 || map.value.getZoom() < 6) {
rPopList.value.map((item: any) => item.remove()) rPopList.value.map((item: any) => item.remove())
rPopList.value = [] rPopList.value = []
} else { } else {
@@ -568,7 +589,7 @@ const addLayer = () => {
}) })
} }
//添加多个监测点 //添加多个监测点
const addMarkers = async (row?: any, key?: any) => { const addMarkers = async (row?: any, key?: any, num?: any) => {
if (map.value == null) return if (map.value == null) return
let params = { let params = {
deptIndex: deptIndex.value, deptIndex: deptIndex.value,
@@ -659,7 +680,7 @@ const addMarkers = async (row?: any, key?: any) => {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [] features: []
}) })
if (key != undefined) map.value.easeTo({ zoom: 8.1 }) if (key != undefined && num == undefined) map.value.easeTo({ zoom: 8.1 })
if (key == undefined) { if (key == undefined) {
map.value.getSource('spotImg-DW').setData({ map.value.getSource('spotImg-DW').setData({
@@ -701,30 +722,7 @@ const addMarkers = async (row?: any, key?: any) => {
} }
// 统计弹框数据 // 统计弹框数据
const GridDiagramArea = () => { const GridDiagramArea = () => {
let List = [ LngLat.forEach((item: any) => {
{
name: '唐山',
LngLat: [118.335849137, 39.7513593355]
},
{
name: '张家口',
LngLat: [115.032504679, 40.8951549951]
},
{
name: '秦皇岛',
LngLat: [119.185113833, 40.1179119754]
},
{
name: '承德',
LngLat: [117.548498365, 41.3775890632]
},
{
name: '廊坊',
LngLat: [116.628004129, 39.0589378611]
}
]
List.forEach((item: any) => {
assessList.value.forEach((y: any) => { assessList.value.forEach((y: any) => {
if (item.name == y.name) { if (item.name == y.name) {
if (y.score == 3.14159) { if (y.score == 3.14159) {
@@ -763,20 +761,22 @@ const radiusPop = (k?: number) => {
} }
mapList.value.forEach((item: any, i: number) => { mapList.value.forEach((item: any, i: number) => {
console.log('🚀 ~ mapList.value.forEach ~ item:', item.LngLat)
let infoText = '' let infoText = ''
if (PopKey.value == 0) { if (PopKey.value == 0) {
// 监测点 // 监测点
infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" /> infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
<div class="infoBox"> <div class="infoBox">
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${ <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
item.alarmList item.alarmList
}" data-key="0">总数<br/>${item.lineNum}</div> }" data-key="0" data-LngLat="${item.LngLat}">总数<br/>${item.lineNum}</div>
<div id="clickZx${i}" data-alarm="${item.onlineList}" data-key="0">在线<br/>${ <div id="clickZx${i}" data-alarm="${item.onlineList}" data-key="0" data-LngLat="${
item.onlineNum item.LngLat
}</div> }">在线<br/>${item.onlineNum}</div>
<div id="clickGj${i}" data-line="" data-alarm="${item.alarmList}" data-key="1">告警<br/>${ <div id="clickGj${i}" data-line="" data-alarm="${
item.alarm item.alarmList
}</div> }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarm}</div>
</div>` </div>`
} else if (PopKey.value == 1) { } else if (PopKey.value == 1) {
// 变电站 // 变电站
@@ -784,10 +784,10 @@ const radiusPop = (k?: number) => {
<div class="infoBox"> <div class="infoBox">
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${ <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
item.alarmSubList item.alarmSubList
}" data-key="1">总数<br/>${item.subNum}</div> }" data-key="1" data-LngLat="${item.LngLat}">总数<br/>${item.subNum}</div>
<div id="clickGj${i}" data-line="" data-alarm="${item.alarmSubList}" data-key="1">告警<br/>${ <div id="clickGj${i}" data-line="" data-alarm="${
item.alarmSubNum item.alarmSubList
}</div> }" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarmSubNum}</div>
</div>` </div>`
} else if (PopKey.value == 2) { } else if (PopKey.value == 2) {
// 终端 // 终端
@@ -795,10 +795,10 @@ const radiusPop = (k?: number) => {
<div class="infoBox"> <div class="infoBox">
<div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${ <div id="clickZs${i}" data-line="${item.lineList}" data-alarm="${
item.onlineList item.onlineList
}" data-key="2">总数<br/>${item.deviceNum}</div> }" data-key="2" data-LngLat="${item.LngLat}">总数<br/>${item.deviceNum}</div>
<div id="clickGj${i}" data-line="" data-alarm="${item.onlineList}" data-key="2">在运<br/>${ <div id="clickGj${i}" data-line="" data-alarm="${
item.onDevice item.onlineList
}</div> }" data-key="2" data-LngLat="${item.LngLat}">在运<br/>${item.onDevice}</div>
</div>` </div>`
} }
@@ -823,28 +823,50 @@ const radiusPop = (k?: number) => {
let html2: any = document.getElementById(`clickGj${i}`) let html2: any = document.getElementById(`clickGj${i}`)
if (html) if (html)
html.onclick = function (v: any) { html.onclick = function (v: any) {
popMarkers(v.target.dataset.line?.split(','), v.target.dataset.alarm?.split(','), v.target.dataset.key) popMarkers(
v.target.dataset.line?.split(','),
v.target.dataset.alarm?.split(','),
v.target.dataset.key,
v.target.dataset.lnglat?.split(',')
)
} }
if (html1) if (html1)
html1.onclick = function (v: any) { html1.onclick = function (v: any) {
popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key) popMarkers(
[],
v.target.dataset.alarm?.split(','),
v.target.dataset.key,
v.target.dataset.lnglat?.split(',')
)
} }
if (html2) if (html2)
html2.onclick = function (v: any) { html2.onclick = function (v: any) {
popMarkers(
popMarkers([], v.target.dataset.alarm?.split(','), v.target.dataset.key) [],
v.target.dataset.alarm?.split(','),
v.target.dataset.key,
v.target.dataset.lnglat?.split(',')
)
} }
}) })
} }
// 点击弹框调用点加载 // 点击弹框调用点加载
const popMarkers = (coutList: any, alarmList: any, key: any) => { const popMarkers = (coutList: any, alarmList: any, key: any, LngLat: any) => {
addMarkers( addMarkers(
{ {
coutList: coutList, coutList: coutList,
alarmList: alarmList, alarmList: alarmList,
type: 1 type: 1
}, },
key key,
0
)
flyTo(
{
coordinate: LngLat
},
8.1
) )
} }
@@ -854,17 +876,11 @@ const locatePositions = (e: any) => {
// 加载点 // 加载点
addMarkers() addMarkers()
powerManageGridMap.value.drillDown( powerManageGridMap.value.drillDown({
{ // 判断超高压
// 判断超高压 orgId: e.data.code == '1100F3DE246A6FADE050007F01006CBE' ? '1100F3DE20806FADE050007F01006CBE' : e.data.code,
orgId: onlyDisplay: true
e.data.code == '1100F3DE246A6FADE050007F01006CBE' })
? '1100F3DE20806FADE050007F01006CBE'
: e.data.code,
onlyDisplay: true
},
)
} }
} }
// 电网查询功能 // 电网查询功能

View File

@@ -113,7 +113,7 @@ const tableStore = new TableStore({
buttons: [ buttons: [
{ {
name: 'productSetting', name: 'productSetting',
title: '入网设计方案审查', title: '入网设计方案申请',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-EditPen',
render: 'basicButton', render: 'basicButton',
@@ -123,7 +123,7 @@ const tableStore = new TableStore({
}, },
{ {
name: 'productSetting', name: 'productSetting',
title: '治理工程验收', title: '治理工程申请',
type: 'primary', type: 'primary',
icon: 'el-icon-EditPen', icon: 'el-icon-EditPen',
render: 'basicButton', render: 'basicButton',