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

修改电网一张图

Browse Source
This commit is contained in:
guanj
2026-06-24 09:57:48 +08:00
parent a324f7afcf
commit 01cc29c8b2
2 changed files with 820 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/views/pqs/panorama/components/line/info.vue
View File

@@ -3,28 +3,38 @@
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
<el-page-header :icon="ArrowLeft" @back="emit('back')">
<template #content>
<span style="font-size: 16px">{{ dropList.objName ? dropList.objName + '_' : '' }}{{ dropList.lineName }}详情　</span>
<span style="font-weight: 500">最新数据时间：</span>
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
<span style="">{{ dropList.gdName }}_{{ dropList.bdName }}_{{ dropList.lineName }}</span>
<span style="font-weight: 500" class="ml20">最新数据时间：</span>
<span style="color: var(--el-color-primary)">{{ dropList.updateTime }}</span>
<span style="font-weight: 500" class="ml20">统计日期：</span>
<span style="color: var(--el-color-primary)">
{{ getTimeOfTheMonth('3')[0] + '至' + getTimeOfTheMonth('3')[1] }}
</span>
</template>
</el-page-header>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3 class="mb10 iconBox " >
<span></span>
台账信息
</h3>
<el-descriptions title="" border :column="2">
<el-descriptions-item label="监测点名称" width="140px">
<el-descriptions title="" label-width="100px" border :column="2" size="small">
<el-descriptions-item label="变电站名称">
{{ dropList.bdName }}
</el-descriptions-item>
<el-descriptions-item label="监测点名称">
{{ dropList.lineName }}
</el-descriptions-item>
<el-descriptions-item label="监测对象名称">
{{ dropList.objName }}
</el-descriptions-item>
<el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
<el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
<el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
<el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
<!-- <el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item> -->
<el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
<el-descriptions-item label="通讯状态" width="140px">
<el-descriptions-item label="通讯状态">
<el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
{{ dropList.comFlag }}
</el-tag>
@@ -32,22 +42,33 @@
</el-descriptions>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3
class="mb10 iconBox "
>
<span></span>
告警明细 (天)
告警天数
</h3>
<el-descriptions title="" border :column="2" size="small">
<el-descriptions-item width="140px" label="告警原因">
<span style="font-weight: 550"
:style="TargetData.info == 0 ? 'color: #0e8780;' : TargetData.info == 3 ? 'color: #000' : 'color: #ff0000;'">
<span
style="font-weight: 550"
:style="
TargetData.info == 0
? 'color: #0e8780;'
: TargetData.info == 3
? 'color: #000'
: 'color: #ff0000;'
"
>
{{
TargetData.info == 1
? '超标告警'
: TargetData.info == 2
? '完整性告警'
: TargetData.info == 0
? '无告警'
: '暂无数据'
? '完整性告警'
: TargetData.info == 0
? '无告警'
: '暂无数据'
}}
</span>
</el-descriptions-item>
@@ -72,72 +93,27 @@
数据质量
</h3>
<div style="display: flex">
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" @click="Integrity" />
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts"
@click="OnlineRate" />
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" />
<MyEChart
:style="`height: calc(${rowHeight} - 31px)`"
:options="onLineCharts"
/>
</div>
</el-col>
</el-row>
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
<el-col :span="8">
<h3 class="mb10 iconBox">
<span></span>
监测点总体评价结论
</h3>
<div class="evaluationData">
<el-row style="width: 96%" class="row pb5">
<el-col :span="12" style="display: flex">
<span>{{ dropList.lineName }}</span>
</el-col>
<el-col :span="12" style="display: flex">
<div>
综合评估得分:
<span class="conclusion" :class="dropList.assessData == '特质'
? 'background1'
: dropList.assessData == '较差'
? 'background2'
: dropList.assessData == '极差'
? 'background3'
: ''
">
{{ dropList.assessData }}
</span>
</div>
</el-col>
</el-row>
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb4 pt3">
<el-col :span="14" style="display: flex; align-items: center">
<img :src="url[i]" />
<span style="line-height: 20px">{{ item.targetName }}</span>
</el-col>
<el-col :span="10" style="display: flex; align-items: center">
<div style="width: 100%">
评估得分：
<span class="conclusion" :class="item.avg == '特质'
? 'background1'
: item.avg == '较差'
? 'background2'
: item.avg == '极差'
? 'background3'
: ''
">
{{ item.avg }}
</span>
</div>
</el-col>
</el-row>
</div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3 class="mb10 iconBox ">
<span></span>
稳态指标合格率
</h3>
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
<div :style="`height: calc(${rowHeight} - 31px); `" ref="chartRef"></div>
</el-col>
<el-col :span="8">
<h3 class="mb10 iconBox">
<h3 class="mb10 iconBox" >
<span></span>
暂态事件统计
</h3>
@@ -167,6 +143,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
import echarts from '@/components/echarts/echarts'
import { useRouter } from 'vue-router'
import { getTimeOfTheMonth } from '@/utils/formatTime'
const router = useRouter()
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
import {
@@ -175,14 +152,14 @@ import {
lineQualifiedDetail,
getLineAssess,
getEventDetailByLineId,
getGridDiagramTargetData
getGridDiagramTargetData,
} from '@/api/device-boot/panorama'
import { formatter } from 'element-plus'
const loading=ref(false)
const emit = defineEmits(['back'])
const dropList: any = ref({})
const TargetData: any = ref({})
const evaluationData: any = ref([])
const incidentCharts: any = ref({})
const ComCharts: any = ref({})
const onLineCharts: any = ref({})
@@ -362,42 +339,8 @@ const open = async (id: string) => {
}
}
})
loading.value = true
// 监测点总体评价结论
getLineAssess({
lineId: id,
startTime: datePickerRef.value.timeValue[0],
endTime: datePickerRef.value.timeValue[1]
}).then((res: any) => {
dropList.value.assessData = res.data.assessLevel
evaluationData.value = [
{
targetName: '频率偏差(Hz)',
avg: res.data.freqAssessLevel,
sd: res.data.freqQualifyData
},
{
targetName: '电压偏差(%)',
avg: res.data.vdevAssessLevel,
sd: res.data.vdevQualifyData
},
{
targetName: '电压总谐波畸变率(%)',
avg: res.data.harmAssessLevel,
sd: res.data.harmQualifyData
},
{
targetName: '三相电压不平衡度(%)',
avg: res.data.unbalanceAssessLevel,
sd: res.data.unbalanceQualifyData
},
{
targetName: '闪变',
avg: res.data.flickerAssessLevel,
sd: res.data.flickerQualifyData
}
]
})
// 稳态指标合格率
lineQualifiedDetail({
@@ -522,7 +465,7 @@ const open = async (id: string) => {
if (res.data[k] != '/') {
judgment = false
}
flag += (res.data[k] == '/' ? 0 : res.data[k])
flag += res.data[k] == '/' ? 0 : res.data[k]
}
}
@@ -633,7 +576,7 @@ const echart = (row: any) => {
},
indicator: indicator
},
color: color,
series: []
}
@@ -642,32 +585,25 @@ const echart = (row: any) => {
name: item.time,
type: 'radar',
symbol: 'none',
areaStyle: {
normal: {
color: '#2a9fe069'
}
opacity: 0.6, // 调整透明度，避免重叠遮挡
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: `${color[i]}50` },
{ offset: 1, color: `${color[i]}50` } // 渐变透明
])
},
itemStyle: {
color: '#2a9fe0'
lineStyle: {
color: color[i],
width: 2
},
data: [item.ratioList]
})
})
// console.log("🚀 ~ echart ~ option:", option)
chart.setOption(option)
}
// 跳转
const Integrity = () => {
router.push({
name: 'harmonic-boot/harmonic/getIntegrityData'
})
}
const OnlineRate = () => {
router.push({
name: 'harmonic-boot/area/OnlineRate'
})
}
onMounted(() => {
// open('4c87b7dff2281254fc55c25a4da31506')
@@ -708,7 +644,7 @@ defineExpose({ open })
.iconBox {
display: flex;
align-items: center;
span {
display: inline-block;
width: 3px;
@@ -737,7 +673,16 @@ defineExpose({ open })
}
.background3 {
background-color: #A52a2a;
background-color: #a52a2a;
color: #fff;
}
:deep(.el-table--small .el-table__cell) {
padding: 2px 0 !important;
}
.text-style {
cursor: pointer;
text-decoration: underline;
text-decoration-color: var(--el-color-primary);
text-underline-offset: 4px;
}
</style>