Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

同步电网一张图代码

Browse Source
This commit is contained in:
GGJ
2024-06-04 16:56:57 +08:00
parent a0c64a4232
commit cf21d0a842
8 changed files with 832 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/device-boot/panorama.ts
View File

@@ -145,3 +145,11 @@ export function getGridDiagramAreaData(data: any) {
export function getGridDiagramTargetData(data: any) {
return request({ url: '/harmonic-boot/gridDiagram/getGridDiagramTargetData', method: 'post', data })
}
//监测点指标统计
export function getGridDiagramStatistics(data: any) {
return request({ url: '/device-boot/gridDiagram/getGridDiagramStatistics', method: 'post', data })
}
//监测运行统计
export function getGridDiagramRunData(data: any) {
return request({ url: '/harmonic-boot/gridDiagram/getGridDiagramRunData', method: 'post', data })
}

10
src/utils/request.ts
View File

@@ -140,11 +140,11 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
})
}
} else if (response.data.code == 'A0024') {
// 登录失效
ElNotification({
type: 'error',
message: response.data.message
})
// // 登录失效
// ElNotification({
// type: 'error',
// message: response.data.message
// })
adminInfo.removeToken()
router.push({ name: 'login' })
return Promise.reject(response.data)

6
src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue
View File

@@ -168,11 +168,13 @@ const tableStore = new TableStore({
let treeData = []
tableStore.table.data.forEach((item: any) => {
if (item.children.length > 0) {
item.id = item.children[0].pid
item.children.forEach((k: any) => {
k.pid = item.id
})
}
})
treeData = tree2List(tableStore.table.data,)
treeData = tree2List(tableStore.table.data)
tableStore.table.data = JSON.parse(JSON.stringify(treeData))
setTimeout(() => {

5
src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue
View File

@@ -171,7 +171,9 @@ const tableStore = new TableStore({
let treeData = []
tableStore.table.data.forEach((item: any) => {
if (item.children.length > 0) {
item.id = item.children[0].pid
item.children.forEach((k: any) => {
k.pid = item.id
})
}
})
treeData = tree2List(tableStore.table.data)
@@ -195,7 +197,6 @@ const tree2List = (list: any) => {
// 遍历 tree 数组
list.forEach((item: any) => {
item.comFlag = item.comFlag == null ? 3 : item.comFlag
item.assess = item.onlineRate == 3.14159 ? 0 : item.onlineRate < 60 ? 1 : item.onlineRate < 90 ? 2 : 3
// 判断item是否存在children
if (!item.children) return arr.push(item)

9
src/views/pqs/qualityInspeection/panorama/components/map.vue
View File

@@ -76,7 +76,7 @@ const dictData = useDictData()
const datePickerRef = ref()
const form: any = ref({})
const colorKey = ref('')
const PopKey = ref(0)
const PopKey = ref(2)
const assessList: any = ref([])
const linList: any = ref([])
const QueryList: any = ref([])
@@ -781,10 +781,9 @@ const radiusPop = (k?: number) => {
}
mapList.value.forEach((item: any, i: number) => {
console.log('🚀 ~ mapList.value.forEach ~ item:', item.LngLat)
let infoText = ''
if (PopKey.value == 0) {
if (PopKey.value == 2) {
// 监测点
infoText = `<img src="${new URL(`@/assets/img/JCD-ZS.png`, import.meta.url)}" />
<div class="infoBox">
@@ -798,7 +797,7 @@ const radiusPop = (k?: number) => {
item.alarmList
}" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarm}</div>
</div>`
} else if (PopKey.value == 1) {
} else if (PopKey.value == 0) {
// 变电站
infoText = `<img src="${new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url)}" />
<div class="infoBox">
@@ -809,7 +808,7 @@ const radiusPop = (k?: number) => {
item.alarmSubList
}" data-key="1" data-LngLat="${item.LngLat}">告警<br/>${item.alarmSubNum}</div>
</div>`
} else if (PopKey.value == 2) {
} else if (PopKey.value == 1) {
// 终端
infoText = `<img src="${new URL(`@/assets/img/ZD-ZS.png`, import.meta.url)}" />
<div class="infoBox">

509
src/views/pqs/qualityInspeection/panorama/components/mapL.vue
View File

@@ -1,124 +1,132 @@
<template>
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<div v-for="(item, i) in list" :style="boxHeight">
<!-- 监测规模 -->
<div class="mb10" :style="`height:250px);`">
<div class="title">
<span @click="GridDiagram(i)">
{{ item.title }}
<span class="ratio">{{ item.ratioTitle }}: {{ item.ratio }}%</span>
</span>
<span class="info" @click="open(i)">
详情
<ArrowRight style="width: 12px" />
</span>
<span>监测规模</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div class="cardBox">
<div class="card" style="width: 98%">
<div class="cor">
<img :src="item.img[0]" />
{{ item.titleT[0] }}：
<div style="display: flex">
<div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
<div class="card">
<span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
<span
:style="`color: ${item.color[0]}; cursor: pointer;`"
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
:style="`color: ${item.color[0]}; cursor:`"
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, 0)"
>
{{ item.list[4].numOne }}
</span>
</div>
<div class="cor" :style="i == 0 ? 'flex:1.2;' : ''">
<img :src="item.img[1]" />
{{ item.titleT[1] }}：
<span
:style="`color: ${item.color[1]}; cursor: pointer;`"
@click="LookMap([], item.list[4].numTwoList, i)"
</div>
</div>
<!-- 监测规模 列表 -->
<div>
<div class="vcl mt5">
<p
v-for="(item, i) in vList"
:style="i == 0 ? 'width: 60px' : i == 5 ? 'width: 32px' : 'flex:1'"
>
{{ item.list[4].numTwo }}
{{ item }}
</p>
</div>
<div v-for="(item, i) in list" class="vcl">
<p style="width: 60px">
{{ item.title }}
<!-- <span style="position: absolute; font-size: 10px; top: -10px; right: -5px; color: #575757">
详情
</span> -->
</p>
<p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
{{ item.list[0].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
{{ item.list[1].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
{{ item.list[2].numOne }}
</p>
<p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
{{ item.list[3].numOne }}
</p>
<p style="font-size: 12px; width: 32px; cursor: pointer" @click.stop="open(i)">详情></p>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<div :style="`height:calc(${boxHeight.height} + 50px)`">
<div class="title">
<span>监测点指标统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`height:calc(${boxHeight.height} + 20px);overflow-y: auto;`">
<div v-for="item in countList">
<div class="title mt5" style="font-weight: 500">
<img src="@/assets/img/TJ.png" />
{{ item.title }}
</div>
<div class="card-Box" v-for="val in item.children">
<div>
<span class="line"></span>
<span class="vol">{{ val.title }}</span>
</div>
<div class="num">
<div @click="LookMap(val.numList, [], 0)">
总数:
<span>{{ val.num }}</span>
</div>
<div @click="LookMap(val.onLineNumList, [], 0)">
在线:
<span style="color: #2dcd28">{{ val.onLineNum }}</span>
</div>
<div>
数据完整性:
<span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 监测点指标统计 -->
<div :style="`height:calc(${boxHeight.height} - 50px)`">
<div class="title">
<span>监测运行统计</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div :style="`height:calc(${boxHeight.height} - 80px);overflow-y: auto;`" class="BoxA mt10">
<div class="card-Box" v-for="item in linList">
<div>
<span class="line"></span>
<span class="vol">{{ item.title[0] }}</span>
</div>
<div class="num">
<div>
{{ item.title[1] }}:
<span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
{{ item.lineNumOne || 0 }}
</span>
</div>
<div class="cor" v-if="i == 0">
<img :src="item.img[2]" />
{{ item.titleT[2] }}：
<span
:style="`color: ${item.color[2]}; cursor: pointer;`"
@click="LookMap([], item.list[5].numOneList, 1)"
>
{{ item.list[5].numOne }}
<div>
{{ item.title[2] }}:
<span style="color: #cc0000" @click="LookMap([], item.lineListTwo, 1)">
{{ item.lineNumTwo || 0 }}
</span>
</div>
</div>
<div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">500kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">220kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">110kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">35kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@@ -139,7 +147,7 @@
import { onMounted, reactive, ref, provide } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight } from '@element-plus/icons-vue'
import { ArrowRight, View } from '@element-plus/icons-vue'
import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
@@ -147,7 +155,8 @@ import {
getSubLineGiveAnAlarm,
getGridDiagramMonitor,
getGridDiagramDev,
getGridDiagramAreaData
getGridDiagramStatistics,
getGridDiagramRunData
} from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap', 'GridDiagram'])
const dictData = useDictData()
@@ -156,61 +165,10 @@ const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
{
title: '监测点',
img: [
new URL(`@/assets/img/JCD-ZS.png`, import.meta.url),
new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
],
ratioTitle: '告警率',
ratio: 0,
titleT: ['总数', '当前在线', '告警'],
color: ['#000', '#2dcd28', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numOneList: []
}
]
},
{
title: '变电站',
img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
color: ['#000', '#bd3124'],
ratioTitle: '告警率',
ratio: 0,
titleT: ['总数', '告警'],
list: [
{
numOne: 0,
@@ -245,11 +203,7 @@ const list: any = ref([
]
},
{
title: '终端',
img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
titleT: ['总数', '在运'],
ratioTitle: '在运率',
ratio: 0,
title: '监测终端',
color: ['#000', '#2dcd28'],
list: [
{
@@ -283,20 +237,91 @@ const list: any = ref([
numTwoList: []
}
]
},
{
title: '监测点',
color: ['#000', '#2dcd28', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
}
])
const countList: any = ref([
{
title: '冀北',
children: [
{
title: '电网测监测点',
num: 0,
onLineNum: 0,
integrityRate: 0
},
{ title: '非电网测监测点', num: 0, onLineNum: 0, integrityRate: 0 }
]
},
{
title: '上送国网',
children: [{ title: '电网测监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
}
])
const linList: any = ref([
{
title: ['运行状态', '合格', '告警']
},
{
title: ['通讯状态', '在线', '离线']
},
{
title: ['数据完整性', '≥90%', '<90%']
},
{
title: ['电能质量指标', '未超标', '超标']
}
])
const vList = ['', '500kV', '220kV', '110kV', '35kV', '']
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)
const boxHeight = mainHeight(290, 2)
// 详情
const open = (e: any) => {
if (e == 0) {
pointRef.value.open(formRow.value)
} else if (e == 1) {
standRef.value.open(formRow.value)
} else if (e == 2) {
} else if (e == 1) {
terminalRef.value.open(formRow.value)
} else if (e == 2) {
pointRef.value.open(formRow.value)
}
}
const info = async (row: any) => {
@@ -311,11 +336,22 @@ const info = async (row: any) => {
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
}
formRow.value = form
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[0].list = data[0].data
})
// 终端
getGridDiagramDev(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[1].list = data[0].data
})
// 监测点
await getGridDiagramMonitor(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[0].list = data[0].data.map((item: any) => {
list.value[2].list = data[0].data.map((item: any) => {
return {
numOne: item.num,
numTwo: item.onLineNum,
@@ -324,39 +360,25 @@ const info = async (row: any) => {
}
})
list.value[0].list.push({
list.value[2].list.push({
numOne: 0,
numOneList: []
})
})
// 监测点告警
getGridDiagramAreaData(form).then((res: any) => {
let numOne = 0
let numOneList: any = []
res.data.forEach((item: any) => {
numOne = numOne + item.alarm
numOneList.push(...item.alarmList)
// 监测点指标统计
getGridDiagramStatistics(form).then(res => {
countList.value[0].children[0] = { title: '电网测监测点', ...res.data.data[0] }
countList.value[0].children[1] = { title: '非电网测监测点', ...res.data.data[1] }
countList.value[1].children[0] = { title: '电网测监测点', ...res.data.gwData[0] }
})
// 监测运行统计
getGridDiagramRunData(form).then(res => {
res.data[0].title = ['运行状态', '合格', '告警']
res.data[1].title = ['通讯状态', '在线', '离线']
res.data[2].title = ['数据完整性', '≥90%', '<90%']
res.data[3].title = ['电能质量指标', '未超标', '超标']
list.value[0].list[5] = {
numOne: numOne,
numOneList: numOneList
}
list.value[0].ratio = ((list.value[0].list[5].numOne / list.value[0].list[4].numOne) * 100).toFixed(2)
})
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[1].list = data[0].data
list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
})
// 终端
getGridDiagramDev(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[2].list = data[0].data
list.value[2].ratio = ((list.value[2].list[4].numTwo / list.value[2].list[4].numOne) * 100).toFixed(2)
linList.value = res.data
})
}
// 点击
@@ -388,39 +410,71 @@ defineExpose({ info, show })
.cardBox {
display: flex;
flex-wrap: wrap;
flex: 1;
.card {
margin-top: 10px;
width: 48%;
justify-content: center;
margin-top: 15px;
margin-right: 2%;
display: flex;
.cor {
flex: 1;
display: flex;
align-items: center;
font-size: 12px;
color: #6d6d6d;
span {
font-size: 16px;
span:nth-child(2) {
font-weight: 550;
}
}
}
.vcl {
display: flex;
border-bottom: 1px solid #e6e0e0;
font-size: 14px;
p {
text-align: center;
margin: 6px;
line-height: 30px;
}
.numOne {
flex: 1;
font-weight: 550;
cursor: pointer;
}
}
.title {
// height: ;
// display: flex;
// justify-content: space-between;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
font-weight: 550;
display: flex;
align-items: center;
span:nth-child(1) {
cursor: pointer;
}
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
img {
width: 40px;
height: 40px;
margin: 0 5%;
height: 1.2rem;
width: 1.2rem;
margin-right: 5px;
}
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px;
.card-Box {
display: grid;
grid-template-rows: 1fr 1fr;
align-items: center;
margin: 5px;
margin: 0 5px 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
@@ -438,45 +492,28 @@ defineExpose({ info, show })
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
font-size: 12px;
color: #6d6d6d;
grid-template-columns: 1fr 1fr 1.5fr;
font-size: 14px;
margin-top: 5px;
div {
cursor: pointer;
}
span {
font-size: 14px;
cursor: pointer;
font-size: 16px;
font-weight: 550;
}
}
}
}
}
.title {
// height: ;
display: flex;
justify-content: space-between;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
font-weight: 550;
span:nth-child(1) {
cursor: pointer;
}
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
.ratio {
font-weight: 500;
font-size: 12px;
line-height: 12px;
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px;
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
}
}

516
src/views/pqs/qualityInspeection/panorama/components/mapL1.vue Normal file
View File

@@ -0,0 +1,516 @@
<template>
<div :class="show ? 'show' : 'noshow'">
<div class="boxLeft" :style="height">
<div v-for="(item, i) in list" :style="boxHeight">
<div class="title">
<span @click="GridDiagram(i)">
{{ item.title }}
<span class="ratio">{{ item.ratioTitle }}: {{ item.ratio }}%</span>
</span>
<span class="info" @click="open(i)">
详情
<ArrowRight style="width: 12px" />
</span>
</div>
<div style="display: flex" class="mt2">
<img src="@/assets/img/FGX.png" />
</div>
<div class="cardBox">
<div class="card" style="width: 98%">
<div class="cor">
<img :src="item.img[0]" />
{{ item.titleT[0] }}：
<span
:style="`color: ${item.color[0]}; cursor: pointer;`"
@click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
>
{{ item.list[4].numOne }}
</span>
</div>
<div class="cor" :style="i == 0 ? 'flex:1.2;' : ''">
<img :src="item.img[1]" />
{{ item.titleT[1] }}：
<span
:style="`color: ${item.color[1]}; cursor: pointer;`"
@click="LookMap([], item.list[4].numTwoList, i)"
>
{{ item.list[4].numTwo }}
</span>
</div>
<div class="cor" v-if="i == 0">
<img :src="item.img[2]" />
{{ item.titleT[2] }}：
<span
:style="`color: ${item.color[2]}; cursor: pointer;`"
@click="LookMap([], item.list[5].numOneList, 1)"
>
{{ item.list[5].numOne }}
</span>
</div>
</div>
<div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">500kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">220kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">110kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
</div>
</div>
</div>
<div class="card-Box">
<div>
<span class="line"></span>
<span class="vol">35kV</span>
</div>
<div class="num">
<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, i)">
{{ item.titleT[1] }}:
<span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<img
class="imgL"
:style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
@click="show = !show"
src="@/assets/img/QH.png"
/>
<!-- 变电站详情 -->
<stand ref="standRef" />
<!-- 终端 -->
<terminal ref="terminalRef" />
<!-- 检测点 -->
<point ref="pointRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, provide } from 'vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { ArrowRight } from '@element-plus/icons-vue'
import stand from './details/stand.vue'
import terminal from './details/terminal.vue'
import point from './details/point.vue'
import {
getSubLineGiveAnAlarm,
getGridDiagramMonitor,
getGridDiagramDev,
getGridDiagramAreaData
} from '@/api/device-boot/panorama'
const emit = defineEmits(['LookMap', 'GridDiagram'])
const dictData = useDictData()
const show = ref(false)
const standRef = ref()
const terminalRef = ref()
const pointRef = ref()
const list: any = ref([
{
title: '监测点',
img: [
new URL(`@/assets/img/JCD-ZS.png`, import.meta.url),
new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
],
ratioTitle: '告警率',
ratio: 0,
titleT: ['总数', '当前在线', '告警'],
color: ['#000', '#2dcd28', '#bd3124'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numOneList: []
}
]
},
{
title: '变电站',
img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
color: ['#000', '#bd3124'],
ratioTitle: '告警率',
ratio: 0,
titleT: ['总数', '告警'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
},
{
title: '终端',
img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
titleT: ['总数', '在运'],
ratioTitle: '在运率',
ratio: 0,
color: ['#000', '#2dcd28'],
list: [
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
},
{
numOne: 0,
numTwo: 0,
numOneList: [],
numTwoList: []
}
]
}
])
const formRow: any = ref({})
const height = mainHeight(30)
const boxHeight = mainHeight(40, 3)
// 详情
const open = (e: any) => {
if (e == 0) {
pointRef.value.open(formRow.value)
} else if (e == 1) {
standRef.value.open(formRow.value)
} else if (e == 2) {
terminalRef.value.open(formRow.value)
}
}
const info = async (row: any) => {
let form = {
...row,
id: row.orgNo,
deptIndex: row.orgNo,
orgId: row.orgNo,
ids: [],
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
isUpToGrid: row.isUpToGrid,
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
}
formRow.value = form
// 监测点
await getGridDiagramMonitor(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[0].list = data[0].data.map((item: any) => {
return {
numOne: item.num,
numTwo: item.onLineNum,
numOneList: item.numList,
numTwoList: item.onLineNumList
}
})
list.value[0].list.push({
numOne: 0,
numOneList: []
})
})
// 监测点告警
getGridDiagramAreaData(form).then((res: any) => {
let numOne = 0
let numOneList: any = []
res.data.forEach((item: any) => {
numOne = numOne + item.alarm
numOneList.push(...item.alarmList)
})
list.value[0].list[5] = {
numOne: numOne,
numOneList: numOneList
}
list.value[0].ratio = ((list.value[0].list[5].numOne / list.value[0].list[4].numOne) * 100).toFixed(2)
})
// 变电站
getSubLineGiveAnAlarm(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[1].list = data[0].data
list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
})
// 终端
getGridDiagramDev(form).then(res => {
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
list.value[2].list = data[0].data
list.value[2].ratio = ((list.value[2].list[4].numTwo / list.value[2].list[4].numOne) * 100).toFixed(2)
})
}
// 点击
const LookMap = (coutList: object, alarmList: object, key?: any) => {
// console.log('🚀 ~ LookMap ~ row:', row)
let form = {
coutList: coutList,
alarmList: alarmList
}
emit('LookMap', form, key)
}
const GridDiagram = (k: any) => {
emit('GridDiagram', k)
}
onMounted(() => {})
defineExpose({ info, show })
</script>
<style lang="scss" scoped>
.boxLeft {
background-color: #fff;
width: 100%;
padding: 10px 10px 10px 10px;
border-radius: 5px;
font-size: 13px;
overflow: hidden;
}
.cardBox {
display: flex;
flex-wrap: wrap;
.card {
margin-top: 10px;
width: 48%;
margin-right: 2%;
display: flex;
.cor {
flex: 1;
display: flex;
align-items: center;
font-size: 12px;
color: #6d6d6d;
span {
font-size: 16px;
font-weight: 550;
}
}
img {
width: 40px;
height: 40px;
margin: 0 5%;
}
}
.BoxA {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 80px;
.card-Box {
display: grid;
grid-template-rows: 1fr 1fr;
align-items: center;
margin: 5px;
padding: 10px;
background-color: #edededc0;
border-radius: 10px;
max-height: 80px;
.line {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
background: var(--el-color-primary);
margin-right: 5px;
margin-bottom: 2px;
}
.num {
margin-left: 10px;
display: grid;
text-align: center;
grid-template-columns: 1fr 1fr;
font-size: 12px;
color: #6d6d6d;
div {
cursor: pointer;
}
span {
font-size: 14px;
font-weight: 550;
}
}
}
}
}
.title {
// height: ;
display: flex;
justify-content: space-between;
font-size: 15px;
line-height: 23px;
padding-left: 5px;
width: 100%;
font-weight: 550;
span:nth-child(1) {
cursor: pointer;
}
.info {
font-weight: normal;
display: flex;
font-size: 12px;
cursor: pointer;
color: #757575;
}
.ratio {
font-weight: 500;
font-size: 12px;
line-height: 12px;
}
}
.imgL {
position: absolute;
padding: 10px;
top: calc(50% - 80px);
right: -23px;
transform: rotate(180deg);
height: 200px;
cursor: pointer;
}
.show {
width: 0px;
transition: all 0.3s ease;
.boxLeft {
padding: 0;
}
}
.noshow {
width: 25%;
transition: all 0.3s ease;
.boxLeft {
padding: 10px 10px 10px 10px;
}
}
:deep(.el-card) {
--el-card-padding: 10px !important;
}
:deep(.el-table thead) {
color: #000;
}
:deep(.el-dialog__body) {
max-height: none !important;
}
</style>

11
src/views/pqs/qualityInspeection/panorama/components/mapR.vue
View File

@@ -370,14 +370,17 @@ const info = (row: any) => {
monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
}
formRow.value = form
// 综合评估
getAssessOverview(form).then(res => {
assessList.value = res.data
})
// 稳态电能质量水平评估概览数据
harmonicChange()
// 暂态统计详情
transientChange()
// 综合评估
setTimeout(() => {
getAssessOverview(form).then(res => {
assessList.value = res.data
})
}, 300)
}
const harmonicChange = () => {
getEvaluationOverview({ ...formRow.value, harmonicType: harmonicType.value }).then(res => {