2025-12-08 16:28:34 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div class="default-main lineInfo" :style="height">
|
|
|
|
|
|
<DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
|
|
|
|
|
|
<el-page-header :icon="ArrowLeft" @back="emit('back')">
|
|
|
|
|
|
<template #content>
|
|
|
|
|
|
<span style="font-size: 16px">{{ dropList.lineName }}详情 </span>
|
|
|
|
|
|
<span style="font-weight: 500">最新数据时间：</span>
|
|
|
|
|
|
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-page-header>
|
|
|
|
|
|
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<h3 class="mb10 iconBox">
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
台账信息
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<el-descriptions title="" border :column="2">
|
|
|
|
|
|
<el-descriptions-item label="监测点名称" width="140px">
|
|
|
|
|
|
{{ dropList.lineName }}
|
|
|
|
|
|
</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="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="通讯状态" width="140px">
|
|
|
|
|
|
<el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
|
|
|
|
|
|
{{ dropList.comFlag }}
|
|
|
|
|
|
</el-tag>
|
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<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;'">
|
|
|
|
|
|
{{
|
|
|
|
|
|
TargetData.info == 1
|
|
|
|
|
|
? '超标告警'
|
|
|
|
|
|
: TargetData.info == 2
|
|
|
|
|
|
? '完整性告警'
|
|
|
|
|
|
: TargetData.info == 0
|
|
|
|
|
|
? '无告警'
|
|
|
|
|
|
: '暂无数据'
|
|
|
|
|
|
}}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="频率偏差">{{ TargetData.freqDevOvertime }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="电压偏差">{{ TargetData.voltageDevOvertime }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="谐波电流">{{ TargetData.iharmOvertime }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="负序电流">{{ TargetData.inegOvertime }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="间谐波电压">{{ TargetData.inuharmOvertime }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="电压总谐波畸变率">
|
|
|
|
|
|
{{ TargetData.uaberranceOvertime }}
|
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="闪变">{{ TargetData.flickerOvertime }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item label="谐波电压">{{ TargetData.uharmOvertime }}</el-descriptions-item>
|
|
|
|
|
|
<el-descriptions-item width="140px" label="三相电压不平衡度">
|
|
|
|
|
|
{{ TargetData.ubalanceOvertime }}
|
|
|
|
|
|
</el-descriptions-item>
|
|
|
|
|
|
</el-descriptions>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<h3 class="mb10 iconBox">
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
数据质量
|
|
|
|
|
|
</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" />
|
|
|
|
|
|
</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">
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
稳态指标合格率
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<h3 class="mb10 iconBox">
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
暂态事件统计
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<h3 class="mb10 iconBox">
|
|
|
|
|
|
<span></span>
|
|
|
|
|
|
历史趋势图
|
|
|
|
|
|
</h3>
|
|
|
|
|
|
<history :lineId="lineId" ref="historyRef" />
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { onMounted, reactive, ref, provide } from 'vue'
|
|
|
|
|
|
import { ArrowLeft } from '@element-plus/icons-vue'
|
|
|
|
|
|
import { mainHeight } from '@/utils/layout'
|
|
|
|
|
|
import history from './history.vue'
|
|
|
|
|
|
import { color } from '@/components/echarts/color'
|
|
|
|
|
|
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'
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
|
|
|
|
|
|
import {
|
|
|
|
|
|
getTotalIntegrityByLineIds,
|
|
|
|
|
|
getTotalOnlineRates,
|
|
|
|
|
|
lineQualifiedDetail,
|
|
|
|
|
|
getLineAssess,
|
|
|
|
|
|
getEventDetailByLineId,
|
|
|
|
|
|
getGridDiagramTargetData
|
|
|
|
|
|
} from '@/api/device-boot/panorama'
|
|
|
|
|
|
import { formatter } from 'element-plus'
|
|
|
|
|
|
|
|
|
|
|
|
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({})
|
|
|
|
|
|
const datePickerRef = ref()
|
|
|
|
|
|
const chartRef = ref<HTMLDivElement>()
|
|
|
|
|
|
const historyRef = ref()
|
|
|
|
|
|
const IntegrityNum = ref(0)
|
|
|
|
|
|
const url: any = [
|
|
|
|
|
|
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
|
|
|
|
|
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
|
|
|
|
|
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
|
|
|
|
|
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
|
|
|
|
|
new URL(`@/assets/img/SB.png`, import.meta.url)
|
|
|
|
|
|
]
|
|
|
|
|
|
const lineId: any = ref('')
|
|
|
|
|
|
const height = mainHeight(20)
|
|
|
|
|
|
const rowHeight = mainHeight(190, 3).height
|
|
|
|
|
|
|
|
|
|
|
|
// 查询
|
|
|
|
|
|
const open = async (id: string) => {
|
|
|
|
|
|
let form = {
|
|
|
|
|
|
comFlag: 1,
|
|
|
|
|
|
endTime: datePickerRef.value.timeValue[1],
|
|
|
|
|
|
lineIds: [id],
|
|
|
|
|
|
|
|
|
|
|
|
ids: [id],
|
|
|
|
|
|
searchValue: '',
|
|
|
|
|
|
startTime: datePickerRef.value.timeValue[0]
|
|
|
|
|
|
}
|
|
|
|
|
|
lineId.value = id
|
|
|
|
|
|
const { data } = await getLineDetailData({ id: id })
|
|
|
|
|
|
dropList.value = data
|
|
|
|
|
|
// 运行状态
|
|
|
|
|
|
|
|
|
|
|
|
// 完整性
|
|
|
|
|
|
getTotalIntegrityByLineIds(form).then((res: any) => {
|
|
|
|
|
|
let num = (res.data || 0) / 100
|
|
|
|
|
|
IntegrityNum.value = res.data
|
|
|
|
|
|
ComCharts.value = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '完整性',
|
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 16
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
options: {
|
|
|
|
|
|
dataZoom: null,
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
//第二个球的填充
|
|
|
|
|
|
type: 'liquidFill',
|
|
|
|
|
|
radius: '65%',
|
|
|
|
|
|
center: ['50%', '40%'], //中心点
|
|
|
|
|
|
color: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: '#2aa1e3'
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
globalCoord: false
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
data: [num, num], // data个数代表波浪数
|
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
color: '#f7f8fc'
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
formatter: () => {
|
|
|
|
|
|
return (num * 100).toFixed(2) + '%'
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
color: '#000'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
outline: {
|
|
|
|
|
|
// show: false
|
|
|
|
|
|
borderDistance: 0,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
|
borderColor: '#fff'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 稳态指标合格率
|
|
|
|
|
|
})
|
|
|
|
|
|
// 在线率
|
|
|
|
|
|
getTotalOnlineRates({ ...form, id: dropList.value.devId, ids: [dropList.value.devId] }).then((res: any) => {
|
|
|
|
|
|
let num = (res.data || 0) / 100
|
|
|
|
|
|
onLineCharts.value = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '在线率',
|
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
|
left: 'center',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 16
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
options: {
|
|
|
|
|
|
dataZoom: null,
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
//第二个球的填充
|
|
|
|
|
|
type: 'liquidFill',
|
|
|
|
|
|
radius: '65%',
|
|
|
|
|
|
center: ['50%', '40%'], //中心点
|
|
|
|
|
|
color: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'linear',
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
|
|
|
|
|
x2: 0,
|
|
|
|
|
|
y2: 1,
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: '#67c23a'
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
globalCoord: false
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
data: [num, num], // data个数代表波浪数
|
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
|
color: '#f7f8fc'
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
formatter: () => {
|
|
|
|
|
|
return (num * 100).toFixed(2) + '%'
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
|
color: '#000'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
outline: {
|
|
|
|
|
|
// show: false
|
|
|
|
|
|
borderDistance: 0,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
|
borderColor: '#fff'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 监测点总体评价结论
|
|
|
|
|
|
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({
|
|
|
|
|
|
lineId: id,
|
|
|
|
|
|
startTime: datePickerRef.value.timeValue[0],
|
|
|
|
|
|
endTime: datePickerRef.value.timeValue[1]
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
echart([
|
|
|
|
|
|
{
|
|
|
|
|
|
time: datePickerRef.value.timeValue[0].substring(0, 7),
|
|
|
|
|
|
targetList: [
|
|
|
|
|
|
'频率偏差(Hz)',
|
|
|
|
|
|
'电压偏差(%)',
|
|
|
|
|
|
'电压总谐波畸变率(%)',
|
|
|
|
|
|
'三相电压不平衡度(%)',
|
|
|
|
|
|
'闪变',
|
|
|
|
|
|
'谐波电压(%)',
|
|
|
|
|
|
'谐波电流(%)',
|
|
|
|
|
|
'间谐波电压(%)',
|
|
|
|
|
|
'负序电流(A)'
|
|
|
|
|
|
],
|
|
|
|
|
|
ratioList: [
|
|
|
|
|
|
res.data.freqDev == 3.14159 ? null : res.data.freqDev,
|
|
|
|
|
|
res.data.vdev == 3.14159 ? null : res.data.vdev,
|
|
|
|
|
|
res.data.vthd == 3.14159 ? null : res.data.vthd,
|
|
|
|
|
|
res.data.ubalance == 3.14159 ? null : res.data.ubalance,
|
|
|
|
|
|
res.data.plt == 3.14159 ? null : res.data.plt,
|
|
|
|
|
|
|
|
|
|
|
|
res.data.uharm == 3.14159 ? null : res.data.uharm,
|
|
|
|
|
|
res.data.iharm == 3.14159 ? null : res.data.iharm,
|
|
|
|
|
|
res.data.inuHarm == 3.14159 ? null : res.data.inuHarm,
|
|
|
|
|
|
res.data.ineg == 3.14159 ? null : res.data.ineg
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
])
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 暂态事件统计
|
|
|
|
|
|
getEventDetailByLineId({
|
|
|
|
|
|
id: id,
|
|
|
|
|
|
startTime: datePickerRef.value.timeValue[0],
|
|
|
|
|
|
endTime: datePickerRef.value.timeValue[1],
|
|
|
|
|
|
type: datePickerRef.value.interval
|
|
|
|
|
|
}).then((res: any) => {
|
|
|
|
|
|
let data = [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '电压暂升',
|
|
|
|
|
|
value: res.data?.swellTimes || 0
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '电压暂降',
|
|
|
|
|
|
value: res.data?.sagTimes || 0
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '电压中断',
|
|
|
|
|
|
value: res.data?.interruptTimes || 0
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
incidentCharts.value = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '总数：' + (data[0].value + data[1].value + data[2].value),
|
|
|
|
|
|
left: '40%',
|
|
|
|
|
|
top: '45%',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
// fontWeight: 600,
|
|
|
|
|
|
fontSize: 12
|
|
|
|
|
|
}
|
|
|
|
|
|
// subtext: '总数',
|
|
|
|
|
|
// subtextStyle: {
|
|
|
|
|
|
// fontWeight: 550,
|
|
|
|
|
|
// fontSize: 14
|
|
|
|
|
|
// }
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
top: 'center',
|
|
|
|
|
|
right: '10%',
|
|
|
|
|
|
formatter: function (e: any) {
|
|
|
|
|
|
return e + ' ' + data.filter(item => item.name == e)[0].value + '条'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
options: {
|
|
|
|
|
|
dataZoom: null,
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
center: ['45%', '50%'],
|
|
|
|
|
|
radius: ['60%', '80%'],
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'outside',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
//数值样式
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
data: data
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// 告警明细
|
|
|
|
|
|
getGridDiagramTargetData({ ...form, id: id, type: 3 }).then(res => {
|
|
|
|
|
|
TargetData.value = res.data
|
|
|
|
|
|
let num = 0
|
|
|
|
|
|
let flag = 0
|
|
|
|
|
|
let judgment = true
|
|
|
|
|
|
for (let k in res.data) {
|
|
|
|
|
|
if (k != 'lineId') {
|
|
|
|
|
|
if (res.data[k] != '/') {
|
|
|
|
|
|
judgment = false
|
|
|
|
|
|
}
|
|
|
|
|
|
flag += (res.data[k] == '/' ? 0 : res.data[k])
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (IntegrityNum.value == 0) {
|
|
|
|
|
|
num = 2 //完整性告警
|
|
|
|
|
|
} else {
|
|
|
|
|
|
if (flag > 0) {
|
|
|
|
|
|
num = 1 //超标告警
|
|
|
|
|
|
} else {
|
|
|
|
|
|
num = 0 //无告警
|
|
|
|
|
|
}
|
|
|
|
|
|
if (judgment) {
|
|
|
|
|
|
num = 3
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
TargetData.value.info = num
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
const echart = (row: any) => {
|
|
|
|
|
|
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
|
|
|
|
|
|
|
|
|
|
|
let dataname = [
|
|
|
|
|
|
'频率偏差(Hz)',
|
|
|
|
|
|
'电压偏差(%)',
|
|
|
|
|
|
'电压总谐波畸变率(%)',
|
|
|
|
|
|
'三相电压不平衡度(%)',
|
|
|
|
|
|
'闪变',
|
|
|
|
|
|
'谐波电压(%)',
|
|
|
|
|
|
'谐波电流(%)',
|
|
|
|
|
|
'间谐波电压(%)',
|
|
|
|
|
|
'负序电流(A)'
|
|
|
|
|
|
]
|
|
|
|
|
|
let datamax = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
|
|
|
|
|
|
let indicator = []
|
|
|
|
|
|
for (let i = 0; i < dataname.length; i++) {
|
|
|
|
|
|
indicator.push({
|
|
|
|
|
|
name: dataname[i],
|
|
|
|
|
|
max: datamax[i]
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let option: any = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
|
axisPointer: {
|
|
|
|
|
|
type: 'shadow',
|
|
|
|
|
|
label: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontSize: 16
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#fff',
|
|
|
|
|
|
fontStyle: 'normal',
|
|
|
|
|
|
opacity: 0.35,
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
},
|
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.55)',
|
|
|
|
|
|
borderWidth: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
data: row.map((item: any) => item.time),
|
|
|
|
|
|
type: 'scroll',
|
|
|
|
|
|
orient: 'vertical',
|
|
|
|
|
|
icon: 'roundRect',
|
|
|
|
|
|
right: '20',
|
|
|
|
|
|
|
|
|
|
|
|
itemGap: 10,
|
|
|
|
|
|
itemWidth: 16,
|
|
|
|
|
|
itemHeight: 16,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: '15',
|
|
|
|
|
|
color: '#656565'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
radar: {
|
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
|
radius: '65%',
|
|
|
|
|
|
startAngle: 90,
|
|
|
|
|
|
splitNumber: 5,
|
|
|
|
|
|
splitArea: {
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#D2E4F8'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#D2E4F8'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
name: {
|
|
|
|
|
|
formatter: '{value}',
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#656565',
|
|
|
|
|
|
fontSize: 15
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
indicator: indicator
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
series: []
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
row.forEach((item: any, i: any) => {
|
|
|
|
|
|
option.series.push({
|
|
|
|
|
|
name: item.time,
|
|
|
|
|
|
type: 'radar',
|
|
|
|
|
|
symbol: 'none',
|
|
|
|
|
|
areaStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: '#2a9fe069'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color: '#2a9fe0'
|
|
|
|
|
|
},
|
|
|
|
|
|
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')
|
|
|
|
|
|
})
|
|
|
|
|
|
defineExpose({ open })
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.lineInfo {
|
|
|
|
|
|
padding: 0 10px 10px 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-page-header__header) {
|
|
|
|
|
|
height: 45px;
|
|
|
|
|
|
border-bottom: 1px solid #f1eded;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-descriptions__header) {
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.evaluationData {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-rows: repeat(5, auto);
|
|
|
|
|
|
height: 87%;
|
|
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
|
margin: 4px 2% 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
width: 6%;
|
|
|
|
|
|
margin: 0px 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.iconBox {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
width: 3px;
|
|
|
|
|
|
height: 18px;
|
|
|
|
|
|
background: var(--el-color-primary);
|
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
|
margin-left: 3px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.conclusion {
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
padding: 2px 5px;
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.background1 {
|
|
|
|
|
|
background-color: #339966;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.background2 {
|
|
|
|
|
|
background-color: #97017e;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.background3 {
|
|
|
|
|
|
background-color: #A52a2a;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
