517 lines
16 KiB
Vue
517 lines
16 KiB
Vue
<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">
|
||
<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>
|