修改电网一张图

src/views/pqs/panorama/components/line/info.vue

@@ -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="">{{ dropList.gdName }}_{{ dropList.bdName }}_{{ dropList.lineName }}</span>
-                <span style="font-weight: 500">最新数据时间：</span>
+                <span style="font-weight: 500" class="ml20">最新数据时间：</span>
-                <span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</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 title="" label-width="100px" border :column="2" size="small">
-                    <el-descriptions-item label="监测点名称" width="140px">
+                    <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="PT">{{ dropList.pt }}</el-descriptions-item>
-                    <el-descriptions-item label="CT">{{ dropList.ct }}</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"
+                        <span
-                            :style="TargetData.info == 0 ? 'color: #0e8780;' : TargetData.info == 3 ? 'color: #000' : 'color: #ff0000;'">
+                            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="ComCharts" />
-                    <MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts"
+                    <MyEChart
-                        @click="OnlineRate" />
+                        :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">
+                <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>
+
+                <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: {
+                opacity: 0.6, // 调整透明度，避免重叠遮挡
-                    color: '#2a9fe069'
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                }
+                    { offset: 0, color: `${color[i]}50` },
+                    { offset: 1, color: `${color[i]}50` } // 渐变透明
+                ])
             },
-            itemStyle: {
+            lineStyle: {
-                color: '#2a9fe0'
+                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>

src/views/pqs/panorama/components/line/info1.vue

@@ -0,0 +1,743 @@
+<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.objName ? dropList.objName + '_' : '' }}{{ 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>