同步现场电网一张图代码代码
This commit is contained in:
@@ -3,7 +3,13 @@
|
||||
<div class="boxLeft" :style="height">
|
||||
<div v-for="(item, i) in list" :style="boxHeight">
|
||||
<div class="title">
|
||||
<span>{{ item.title }}</span>
|
||||
<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" />
|
||||
@@ -16,28 +22,36 @@
|
||||
|
||||
<div class="cardBox">
|
||||
<div class="card" style="width: 98%">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" 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>
|
||||
</el-col>
|
||||
<el-col :span="12" class="cor">
|
||||
<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>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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">
|
||||
<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">
|
||||
@@ -132,18 +146,73 @@ 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 } from '@/api/device-boot/panorama'
|
||||
const emit = defineEmits(['LookMap'])
|
||||
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: [
|
||||
{
|
||||
@@ -181,45 +250,9 @@ 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: ['总数', '在线'],
|
||||
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: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '监测点',
|
||||
img: [new URL(`@/assets/img/JCD-ZS.png`, import.meta.url), new URL(`@/assets/img/JCD-ZX.png`, import.meta.url)],
|
||||
titleT: ['总数', '在线'],
|
||||
titleT: ['总数', '在运'],
|
||||
ratioTitle:'在运率',
|
||||
ratio: 0,
|
||||
color: ['#000', '#2dcd28'],
|
||||
list: [
|
||||
{
|
||||
@@ -269,7 +302,7 @@ const open = (e: any) => {
|
||||
pointRef.value.open(formRow.value)
|
||||
}
|
||||
}
|
||||
const info = (row: any) => {
|
||||
const info = async (row: any) => {
|
||||
let form = {
|
||||
...row,
|
||||
id: row.orgNo,
|
||||
@@ -281,21 +314,11 @@ const info = (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
|
||||
})
|
||||
// 监测点
|
||||
getGridDiagramMonitor(form).then(res => {
|
||||
await getGridDiagramMonitor(form).then(res => {
|
||||
let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
|
||||
|
||||
list.value[2].list = data[0].data.map((item: any) => {
|
||||
list.value[0].list = data[0].data.map((item: any) => {
|
||||
return {
|
||||
numOne: item.num,
|
||||
numTwo: item.onLineNum,
|
||||
@@ -303,6 +326,39 @@ const info = (row: any) => {
|
||||
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)
|
||||
})
|
||||
}
|
||||
// 点击
|
||||
@@ -314,6 +370,9 @@ const LookMap = (coutList: object, alarmList: object, key?: any) => {
|
||||
}
|
||||
emit('LookMap', form, key)
|
||||
}
|
||||
const GridDiagram = (k: any) => {
|
||||
emit('GridDiagram', k)
|
||||
}
|
||||
onMounted(() => {})
|
||||
defineExpose({ info, show })
|
||||
</script>
|
||||
@@ -336,8 +395,9 @@ defineExpose({ info, show })
|
||||
margin-top: 10px;
|
||||
width: 48%;
|
||||
margin-right: 2%;
|
||||
|
||||
display: flex;
|
||||
.cor {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
@@ -405,6 +465,9 @@ defineExpose({ info, show })
|
||||
width: 100%;
|
||||
font-weight: 550;
|
||||
|
||||
span:nth-child(1) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.info {
|
||||
font-weight: normal;
|
||||
display: flex;
|
||||
@@ -412,6 +475,11 @@ defineExpose({ info, show })
|
||||
cursor: pointer;
|
||||
color: #757575;
|
||||
}
|
||||
.ratio {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.imgL {
|
||||
|
||||
Reference in New Issue
Block a user