From 2445cfbff35cd5717081775b42bd6b86d6767f78 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Mon, 6 Jul 2026 10:12:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BE=BD=E5=AE=81=E5=85=A8?=
 =?UTF-8?q?=E6=99=AF=E5=B1=95=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pqs/panorama/components/cityMapL.vue      |   17 +-
 .../pqs/panorama/components/cityMapR.vue      | 1247 ++++++++---------
 src/views/pqs/panorama/components/mapL.vue    |   17 +-
 src/views/pqs/panorama/components/mapR.vue    |    6 +-
 4 files changed, 643 insertions(+), 644 deletions(-)

diff --git a/src/views/pqs/panorama/components/cityMapL.vue b/src/views/pqs/panorama/components/cityMapL.vue
index 7f67a84b..56d138e0 100644
--- a/src/views/pqs/panorama/components/cityMapL.vue
+++ b/src/views/pqs/panorama/components/cityMapL.vue
@@ -302,19 +302,20 @@ const countList: any = ref([
     {
         title: '网公司',
         children: [
+        { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 },
             {
                 title: '电网侧监测点',
                 num: 0,
                 onLineNum: 0,
                 integrityRate: 0
             },
-            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
+        
         ]
     },
-    {
-        title: '上送网公司',
-        children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
-    }
+    // {
+    //     title: '上送网公司',
+    //     children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
+    // }
 ])
 const linList: any = ref([
     {
@@ -395,9 +396,9 @@ const info = async (row: any) => {
     })
     // 监测点指标统计
     getGridDiagramStatistics(form).then(res => {
-        countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
-        countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
-        countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
+        countList.value[0].children[0] = { title: '非电网侧监测点', ...res.data.data[1] }
+        countList.value[0].children[1] = { title: '电网侧监测点', ...res.data.data[0] }
+        // countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
     })
     // 监测运行统计
     getGridDiagramRunData(form).then(res => {
diff --git a/src/views/pqs/panorama/components/cityMapR.vue b/src/views/pqs/panorama/components/cityMapR.vue
index 5e2f5660..1b66d84f 100644
--- a/src/views/pqs/panorama/components/cityMapR.vue
+++ b/src/views/pqs/panorama/components/cityMapR.vue
@@ -1,625 +1,622 @@
-<template>
-    <div :class="show ? 'show' : 'noshow'">
-        <div class="boxLeft" :style="height">
-            <!-- 指标合格率统计 -->
-            <div :style="`height:calc(${boxHeight.height} - 40px)`">
-                <div class="title">
-                    <span>指标合格率统计</span>
-                    <span class="info" @click="open(0)">
-                        详情
-                        <ArrowRight style="width: 12px" />
-                    </span>
-                </div>
-
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-                <MyEChart :style="`height:calc(${EchHeight.height} - 40px)`" :options="passingCharts" />
-            </div>
-
-            <!-- 稳态指标超标占比 -->
-            <div :style="`height:calc(${boxHeight.height} + 40px)`">
-                <div class="title">
-                    <span>稳态指标超标占比</span>
-                    <span class="info" @click="open(1)">
-                        详情
-                        <ArrowRight style="width: 12px" />
-                    </span>
-                </div>
-
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-                <div>
-                    <div class="monitoringPoints">
-                        <div>
-                            <span class="line"></span>
-                            在线监测点数：{{ monitorList?.onlineNum }}
-                        </div>
-                        <div>
-                            <span class="line"></span>
-                            超标监测点数：{{ monitorList?.overNum }}
-                        </div>
-                        <div>
-                            <span class="line"></span>
-                            超标监测点占比：{{ monitorList?.overRatio }}
-                        </div>
-                    </div>
-
-                    <MyEChart :style="`height:calc(${EchHeight.height} + 15px)`" :options="exceededCharts" />
-                </div>
-            </div>
-
-            <!-- 暂态事件统计 -->
-            <div :style="`height:calc(${boxHeight.height} - 10px)`">
-                <div class="title">
-                    <span>暂态事件统计</span>
-                </div>
-
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-                <MyEChart :style="`height:calc(${EchHeight.height} - 10px)`" :options="statisticsCharts" />
-            </div>
-
-            <!-- 稳态电能质量指标水平评估 -->
-            <div>
-                <div class="title">
-                    <span>技术监督统计</span>
-                    <!-- <span class="info" @click="open(3)">
-                        详情
-                        <ArrowRight style="width: 12px" />
-                    </span> -->
-                </div>
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-                <div style="height: 150px" class="boxR">
-                    <el-segmented v-model="active" :options="Voltage" block />
-                    <el-row
-                        style="height: calc(100% - 45px); display: flex; justify-content: space-around"
-                        class="ml10 mr10 mt5"
-                    >
-                        <el-col :span="11" class="col pt10">
-                            <div>
-                                <span>异常问题总数：</span>
-                                <span style="color: #2dcd28">{{ technology[active]?.abnormalNum || 0 }}个</span>
-                            </div>
-                            <div>
-                                <span style="width: 120px">已关联工单数：</span>
-                                <span style="color: #81b337">{{ technology[active]?.associatedNum || 0 }}个</span>
-                            </div>
-                            <div>
-                                <span style="width: 120px">　工单转换率：</span>
-                                <span style="color: #338dff">{{ technology[active]?.conversionNum || 0 }}%</span>
-                            </div>
-                        </el-col>
-                        <el-col :span="11" class="col pt10" :offset="0.5">
-                            <div>
-                                <span>工单总数：</span>
-                                <span style="color: #2dcd28">{{ technology[active]?.workNum || 0 }}个</span>
-                            </div>
-                            <div>
-                                <span style="width: 120px">已处理工单数：</span>
-                                <span style="color: #81b337">{{ technology[active]?.processedNum || 0 }}个</span>
-                            </div>
-                            <div>
-                                <span style="width: 120px">　工单处置率：</span>
-                                <span style="color: #338dff">{{ technology[active]?.disposalNum || 0 }}%</span>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </div>
-            </div>
-            <!-- 指标合格率统计 -->
-            <statistics ref="statisticsRef" />
-            <!-- 稳态指标超标占比 -->
-            <exceeded ref="exceededRef" />
-        </div>
-        <img
-            class="imgR"
-            :style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
-            @click="show = !show"
-            src="@/assets/img/QH.png"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, provide } from 'vue'
-import statistics from '../components/city/statistics.vue'
-import exceeded from '../components/city/exceeded.vue'
-import MyEChart from '@/components/echarts/MyEchart.vue'
-import { useDictData } from '@/stores/dictData'
-import { mainHeight } from '@/utils/layout'
-import { getSupervisionCityDetailsData } from '@/api/device-boot/panorama'
-import { ArrowRight } from '@element-plus/icons-vue'
-import { getAssessDetail, evaluationDetail, getGeneralSituation } from '@/api/device-boot/panorama'
-
-const dictData = useDictData()
-const height = mainHeight(30)
-const show = ref(false)
-const boxHeight: any = mainHeight(220, 3)
-const EchHeight: any = mainHeight(320, 3)
-const statisticsRef = ref()
-const exceededRef = ref()
-const formRow: any = ref({})
-const monitorList: any = ref({})
-const statisticsCharts: any = ref({})
-import { useConfig } from '@/stores/config'
-const config = useConfig()
-const passingCharts = ref()
-const exceededCharts = ref()
-const technology: any = ref({})
-
-const Voltage: any = [
-    {
-        label: '技术监督计划',
-        value: 'survey'
-    },
-    {
-        label: '在线监测',
-        value: 'onLine'
-    },
-    {
-        label: '用户投诉',
-        value: 'user'
-    },
-    {
-        label: '试运行问题',
-        value: 'trialRun'
-    }
-]
-
-const active: any = ref(Voltage[0].value)
-
-const open = (e: number) => {
-    if (e == 0) {
-        statisticsRef.value.open(formRow.value)
-    } else if (e == 1) {
-        exceededRef.value.open(formRow.value)
-    }
-}
-const info = (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
-    // 指标合格率统计
-    getAssessDetail(form).then(res => {
-        let data = [
-            {
-                name:
-                    '电压偏差：' +
-                    (res.data[0]?.vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.vdevQualifyData || 0 + '%'),
-                value: res.data[0]?.vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.vdevQualifyData
-            },
-            {
-                name:
-                    '频率偏差：' +
-                    (res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData || 0 + '%'),
-                value: res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData
-            },
-            {
-                name:
-                    '电压总谐波畸变率：' +
-                    (res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData || 0 + '%'),
-                value: res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData
-            },
-            {
-                name:
-                    '闪变：' +
-                    (res.data[0]?.flickerQualifyData == 3.14159
-                        ? '暂无数据'
-                        : res.data[0]?.flickerQualifyData || 0 + '%'),
-                value: res.data[0]?.flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.flickerQualifyData
-            },
-            {
-                name:
-                    '三相电压不平衡度：' +
-                    (res.data[0]?.unbalanceQualifyData == 3.14159
-                        ? '暂无数据'
-                        : res.data[0]?.unbalanceQualifyData || 0 + '%'),
-                value: res.data[0]?.unbalanceQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.unbalanceQualifyData
-            }
-        ]
-
-        let optionData = getData(data)
-        passingCharts.value = {
-            tooltip: {
-                show: true,
-                trigger: 'item',
-                formatter: '{b}'
-            },
-            xAxis: {
-                show: false
-            },
-
-            yAxis: {
-                show: false
-            },
-
-            legend: {
-                data: data.map((item: any) => item.name),
-                type: 'scroll',
-                orient: 'vertical',
-                icon: 'roundRect',
-                right: '10',
-
-                itemGap: 15,
-                itemWidth: 12,
-                itemHeight: 12,
-                textStyle: {
-                    fontSize: '0.85rem'
-                }
-            },
-
-            options: {
-                toolbox: null,
-                dataZoom: null,
-                series: optionData.series
-            }
-        }
-
-        function getData(data: any) {
-            var res: any = {
-                series: []
-            }
-            for (let i = 0; i < data.length; i++) {
-                res.series.push({
-                    type: 'pie',
-                    clockWise: false, //顺时加载
-                    hoverAnimation: false, //鼠标移入变大
-                    radius: [70 - i * 15 + '%', 80 - i * 15 + '%'],
-                    center: ['30%', '50%'],
-                    label: {
-                        show: false
-                    },
-
-                    data: [
-                        {
-                            value: data[i].value || 0,
-                            name: data[i].name
-                        },
-                        {
-                            value: 100 - (data[i].value || 0),
-                            name: '',
-                            itemStyle: {
-                                color: 'rgba(0,0,0,0)',
-                                borderWidth: 0
-                            },
-                            tooltip: {
-                                show: false
-                            },
-                            hoverAnimation: true
-                        }
-                    ]
-                })
-                res.series.push({
-                    name: '',
-                    type: 'pie',
-                    silent: true,
-                    z: 1,
-                    clockWise: false, //顺时加载
-                    hoverAnimation: false, //鼠标移入变大
-                    radius: [70 - i * 15 + '%', 80 - i * 15 + '%'],
-                    center: ['30%', '50%'],
-                    label: {
-                        show: false
-                    },
-
-                    data: [
-                        {
-                            value: 7.5,
-                            itemStyle: {
-                                color: '#E3F0FF',
-                                borderWidth: 0
-                            },
-                            tooltip: {
-                                show: false
-                            },
-                            hoverAnimation: false
-                        }
-                    ]
-                })
-            }
-            return res
-        }
-    })
-    // 稳态指标超标占比
-
-    evaluationDetail(form).then(res => {
-        monitorList.value = res.data[0]
-        exceededCharts.value = {
-            tooltip: {},
-            color: [config.layout.elementUiPrimary[0], '#FFBF00'],
-            yAxis: {
-                name: '',
-                type: 'value',
-                max: 100
-            },
-            legend: {
-                data: ['超标监测点数', '超标天数']
-            },
-            xAxis: {
-                type: 'category',
-                data: res.data[0]?.list?.map((item: any) => {
-                    return item.targetName.length > 4
-                        ? item.targetName.slice(0, 4) + '\n ' + item.targetName.slice(4)
-                        : item.targetName
-                }),
-                axisLabel: {
-                    color: '#000',
-                    fontSize: 10
-                }
-            },
-            grid: {
-                top: '35px',
-                left: '10px',
-                right: '20px'
-            },
-
-            options: {
-                toolbox: null,
-                series: [
-                    {
-                        name: '超标监测点数',
-                        type: 'bar',
-                        data: res.data[0]?.list?.map((item: any) => item.overNum),
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10,
-                            formatter: function (params: any) {
-                                return `${params.value == 3.14159 ? '' : params.value}`
-                            }
-                        }
-                    },
-                    {
-                        name: '超标天数',
-                        type: 'bar',
-                        data: res.data[0]?.list?.map((item: any) => item.overDay),
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10,
-                            formatter: function (params: any) {
-                                return `${params.value == 3.14159 ? '' : params.value}`
-                            }
-                        }
-                    }
-                ]
-            }
-        }
-    })
-    // 稳态电能质量指标水平评估
-
-    getGeneralSituation({ ...form, monitorFlag: form.isUpToGrid == 0 ? 2 : 1 }).then(res => {
-        let data = [
-            {
-                name: '电压暂升',
-                value: res.data[0].upCount - 0
-            },
-            {
-                name: '电压暂降',
-                value: res.data[0].sagsCount - 0
-            },
-            {
-                name: '短时中断',
-                value: res.data[0].breakCount - 0
-            }
-        ]
-        statisticsCharts.value = {
-            title: {
-                text: '总数：' + (data[0].value + data[1].value + data[2].value),
-                left: '23%',
-                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
-            },
-            color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
-            options: {
-                toolbox: null,
-                dataZoom: null,
-                series: [
-                    {
-                        type: 'pie',
-                        center: ['30%', '50%'],
-                        radius: ['50%', '70%'],
-                        label: {
-                            show: false,
-                            position: 'outside',
-                            textStyle: {
-                                //数值样式
-                            }
-                        },
-
-                        data: data
-                    }
-                ]
-            }
-        }
-    })
-    // 技术监督
-    getSupervisionCityDetailsData(form).then(res => {
-        technology.value = res.data
-    })
-}
-
-defineExpose({ info, show })
-</script>
-
-<style lang="scss" scoped>
-.boxLeft {
-    background-color: #fff;
-    width: 100%;
-    padding: 10px 10px 10px 10px;
-    font-size: 13px;
-    overflow: hidden;
-    border-radius: 5px;
-}
-
-.title {
-    // height: ;
-    display: flex;
-    justify-content: space-between;
-    font-size: 15px;
-    line-height: 23px;
-    padding-left: 5px;
-    width: 100%;
-    font-weight: 550;
-
-    .info {
-        font-weight: normal;
-        display: flex;
-        font-size: 12px;
-        cursor: pointer;
-        color: #757575;
-    }
-}
-.TJTop {
-    display: flex;
-    img {
-        height: 1.2rem;
-        width: 1.2rem;
-        margin-right: 5px;
-    }
-}
-.evaluate {
-    margin: 10px 0;
-    display: flex;
-    justify-content: space-around;
-    text-align: center;
-    overflow-x: auto;
-    overflow-y: hidden;
-    .line {
-        display: inline-block;
-        width: 0.5rem;
-        height: 0.5rem;
-        border-radius: 0.25rem;
-        background: var(--el-color-primary);
-        margin-right: 2px;
-        margin-bottom: 1px;
-    }
-}
-.boxR {
-    margin: 10px 0 0 0;
-
-    .num {
-        color: #2478f2;
-    }
-    .top {
-        display: flex;
-        justify-content: space-between;
-    }
-    .bottom {
-        margin: 0;
-        border: 0px;
-    }
-
-    .harmonic {
-        display: grid;
-        .progress {
-            display: flex;
-            align-items: center;
-            .text {
-                width: 50px;
-                font-size: 12px;
-            }
-            .el-progress {
-                flex: 1;
-            }
-        }
-    }
-}
-:deep(.el-select) {
-    min-width: 120px;
-}
-.col {
-    display: grid;
-    grid-template-columns: 1fr;
-    border-radius: 10px;
-    text-align: center;
-    align-items: center;
-    background-color: #edededc0;
-}
-.imgR {
-    position: absolute;
-    padding: 10px;
-    top: calc(50% - 80px);
-    left: -23px;
-
-    height: 200px;
-    cursor: pointer;
-}
-.show {
-    width: 0px;
-    transition: all 0.1s ease;
-    .boxLeft {
-        padding: 0;
-    }
-}
-.noshow {
-    width: 25%;
-    transition: all 0.3s ease;
-    .boxLeft {
-        padding: 10px 10px 10px 10px;
-    }
-}
-:deep(.el-progress__text) {
-    font-size: 0.8rem !important    ;
-}
-.monitoringPoints {
-    // display: grid;
-    font-size: 12px;
-    display: flex;
-    justify-content: space-between;
-    // grid-template-columns: 1fr 1fr 1fr;
-    margin-top: 10px;
-    margin-bottom: 3px;
-    .line {
-        display: inline-block;
-        width: 0.5rem;
-        height: 0.5rem;
-        border-radius: 0.25rem;
-        background: var(--el-color-primary);
-        margin-right: 2px;
-        margin-bottom: 1px;
-    }
-}
-:deep(.el-dialog__body) {
-    max-height: none !important;
-}
-</style>
+<template>
+    <div :class="show ? 'show' : 'noshow'">
+        <div class="boxLeft" :style="height">
+            <!-- 指标合格率统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 40px)`">
+                <div class="title">
+                    <span>指标合格率统计</span>
+                    <span class="info" @click="open(0)">
+                        详情
+                        <ArrowRight style="width: 12px" />
+                    </span>
+                </div>
+
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <MyEChart :style="`height:calc(${EchHeight.height} - 40px)`" :options="passingCharts" />
+            </div>
+
+            <!-- 稳态指标超标占比 -->
+            <div :style="`height:calc(${boxHeight.height} + 40px)`">
+                <div class="title">
+                    <span>稳态指标超标占比</span>
+                    <span class="info" @click="open(1)">
+                        详情
+                        <ArrowRight style="width: 12px" />
+                    </span>
+                </div>
+
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div>
+                    <div class="monitoringPoints">
+                        <div>
+                            <span class="line"></span>
+                            在线监测点数：{{ monitorList?.onlineNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点数：{{ monitorList?.overNum }}
+                        </div>
+                        <div>
+                            <span class="line"></span>
+                            超标监测点占比：{{ monitorList?.overRatio }}
+                        </div>
+                    </div>
+
+                    <MyEChart :style="`height:calc(${EchHeight.height} + 15px)`" :options="exceededCharts" />
+                </div>
+            </div>
+
+            <!-- 暂态事件统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 10px)`">
+                <div class="title">
+                    <span>暂态事件统计</span>
+                </div>
+
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <MyEChart :style="`height:calc(${EchHeight.height} - 10px)`" :options="statisticsCharts" />
+            </div>
+
+            <!-- 稳态电能质量指标水平评估 -->
+            <!-- <div>
+                <div class="title">
+                    <span>技术监督统计</span>
+        
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div style="height: 150px" class="boxR">
+                    <el-segmented v-model="active" :options="Voltage" block />
+                    <el-row
+                        style="height: calc(100% - 45px); display: flex; justify-content: space-around"
+                        class="ml10 mr10 mt5"
+                    >
+                        <el-col :span="11" class="col pt10">
+                            <div>
+                                <span>异常问题总数：</span>
+                                <span style="color: #2dcd28">{{ technology[active]?.abnormalNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">已关联工单数：</span>
+                                <span style="color: #81b337">{{ technology[active]?.associatedNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">　工单转换率：</span>
+                                <span style="color: #338dff">{{ technology[active]?.conversionNum || 0 }}%</span>
+                            </div>
+                        </el-col>
+                        <el-col :span="11" class="col pt10" :offset="0.5">
+                            <div>
+                                <span>工单总数：</span>
+                                <span style="color: #2dcd28">{{ technology[active]?.workNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">已处理工单数：</span>
+                                <span style="color: #81b337">{{ technology[active]?.processedNum || 0 }}个</span>
+                            </div>
+                            <div>
+                                <span style="width: 120px">　工单处置率：</span>
+                                <span style="color: #338dff">{{ technology[active]?.disposalNum || 0 }}%</span>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </div> -->
+            <!-- 指标合格率统计 -->
+            <statistics ref="statisticsRef" />
+            <!-- 稳态指标超标占比 -->
+            <exceeded ref="exceededRef" />
+        </div>
+        <img
+            class="imgR"
+            :style="show ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"
+            @click="show = !show"
+            src="@/assets/img/QH.png"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, provide } from 'vue'
+import statistics from '../components/city/statistics.vue'
+import exceeded from '../components/city/exceeded.vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { getSupervisionCityDetailsData } from '@/api/device-boot/panorama'
+import { ArrowRight } from '@element-plus/icons-vue'
+import { getAssessDetail, evaluationDetail, getGeneralSituation } from '@/api/device-boot/panorama'
+
+const dictData = useDictData()
+const height = mainHeight(30)
+const show = ref(false)
+const boxHeight: any = mainHeight(70, 3)
+const EchHeight: any = mainHeight(170, 3)
+const statisticsRef = ref()
+const exceededRef = ref()
+const formRow: any = ref({})
+const monitorList: any = ref({})
+const statisticsCharts: any = ref({})
+import { useConfig } from '@/stores/config'
+const config = useConfig()
+const passingCharts = ref()
+const exceededCharts = ref()
+const technology: any = ref({})
+
+const Voltage: any = [
+    {
+        label: '技术监督计划',
+        value: 'survey'
+    },
+    {
+        label: '在线监测',
+        value: 'onLine'
+    },
+    {
+        label: '用户投诉',
+        value: 'user'
+    },
+    {
+        label: '试运行问题',
+        value: 'trialRun'
+    }
+]
+
+const active: any = ref(Voltage[0].value)
+
+const open = (e: number) => {
+    if (e == 0) {
+        statisticsRef.value.open(formRow.value)
+    } else if (e == 1) {
+        exceededRef.value.open(formRow.value)
+    }
+}
+const info = (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
+    // 指标合格率统计
+    getAssessDetail(form).then(res => {
+        let data = [
+            {
+                name:
+                    '电压偏差：' +
+                    (res.data[0]?.vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.vdevQualifyData || 0 + '%'),
+                value: res.data[0]?.vdevQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.vdevQualifyData
+            },
+            {
+                name:
+                    '频率偏差：' +
+                    (res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData || 0 + '%'),
+                value: res.data[0]?.freqQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.freqQualifyData
+            },
+            {
+                name:
+                    '电压总谐波畸变率：' +
+                    (res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData || 0 + '%'),
+                value: res.data[0]?.harmQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.harmQualifyData
+            },
+            {
+                name:
+                    '闪变：' +
+                    (res.data[0]?.flickerQualifyData == 3.14159
+                        ? '暂无数据'
+                        : res.data[0]?.flickerQualifyData || 0 + '%'),
+                value: res.data[0]?.flickerQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.flickerQualifyData
+            },
+            {
+                name:
+                    '三相电压不平衡度：' +
+                    (res.data[0]?.unbalanceQualifyData == 3.14159
+                        ? '暂无数据'
+                        : res.data[0]?.unbalanceQualifyData || 0 + '%'),
+                value: res.data[0]?.unbalanceQualifyData == 3.14159 ? '暂无数据' : res.data[0]?.unbalanceQualifyData
+            }
+        ]
+
+        let optionData = getData(data)
+        passingCharts.value = {
+            tooltip: {
+                show: true,
+                trigger: 'item',
+                formatter: '{b}'
+            },
+            xAxis: {
+                show: false
+            },
+
+            yAxis: {
+                show: false
+            },
+
+            legend: {
+                data: data.map((item: any) => item.name),
+                type: 'scroll',
+                orient: 'vertical',
+                icon: 'roundRect',
+                right: '10',
+
+                itemGap: 15,
+                itemWidth: 12,
+                itemHeight: 12,
+                textStyle: {
+                    fontSize: '0.85rem'
+                }
+            },
+
+            options: {
+                toolbox: null,
+                dataZoom: null,
+                series: optionData.series
+            }
+        }
+
+        function getData(data: any) {
+            var res: any = {
+                series: []
+            }
+            for (let i = 0; i < data.length; i++) {
+                res.series.push({
+                    type: 'pie',
+                    clockWise: false, //顺时加载
+                    hoverAnimation: false, //鼠标移入变大
+                    radius: [70 - i * 15 + '%', 80 - i * 15 + '%'],
+                    center: ['30%', '50%'],
+                    label: {
+                        show: false
+                    },
+
+                    data: [
+                        {
+                            value: data[i].value || 0,
+                            name: data[i].name
+                        },
+                        {
+                            value: 100 - (data[i].value || 0),
+                            name: '',
+                            itemStyle: {
+                                color: 'rgba(0,0,0,0)',
+                                borderWidth: 0
+                            },
+                            tooltip: {
+                                show: false
+                            },
+                            hoverAnimation: true
+                        }
+                    ]
+                })
+                res.series.push({
+                    name: '',
+                    type: 'pie',
+                    silent: true,
+                    z: 1,
+                    clockWise: false, //顺时加载
+                    hoverAnimation: false, //鼠标移入变大
+                    radius: [70 - i * 15 + '%', 80 - i * 15 + '%'],
+                    center: ['30%', '50%'],
+                    label: {
+                        show: false
+                    },
+
+                    data: [
+                        {
+                            value: 7.5,
+                            itemStyle: {
+                                color: '#E3F0FF',
+                                borderWidth: 0
+                            },
+                            tooltip: {
+                                show: false
+                            },
+                            hoverAnimation: false
+                        }
+                    ]
+                })
+            }
+            return res
+        }
+    })
+    // 稳态指标超标占比
+
+    evaluationDetail(form).then(res => {
+        monitorList.value = res.data[0]
+        exceededCharts.value = {
+            tooltip: {},
+            color: [config.layout.elementUiPrimary[0], '#FFBF00'],
+            yAxis: {
+                name: '',
+                type: 'value',
+                max: 100
+            },
+            legend: {
+                data: ['超标监测点数', '超标天数']
+            },
+            xAxis: {
+                type: 'category',
+                data: res.data[0]?.list?.map((item: any) => {
+                    return item.targetName.length > 4
+                        ? item.targetName.slice(0, 4) + '\n ' + item.targetName.slice(4)
+                        : item.targetName
+                }),
+                axisLabel: {
+                    color: '#000',
+                    fontSize: 10
+                }
+            },
+            grid: {
+                top: '35px',
+                left: '10px',
+                right: '20px'
+            },
+
+            options: {
+                toolbox: null,
+                series: [
+                    {
+                        name: '超标监测点数',
+                        type: 'bar',
+                        data: res.data[0]?.list?.map((item: any) => item.overNum),
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 10,
+                            formatter: function (params: any) {
+                                return `${params.value == 3.14159 ? '' : params.value}`
+                            }
+                        }
+                    },
+                    {
+                        name: '超标天数',
+                        type: 'bar',
+                        data: res.data[0]?.list?.map((item: any) => item.overDay),
+                        label: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 10,
+                            formatter: function (params: any) {
+                                return `${params.value == 3.14159 ? '' : params.value}`
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    })
+    // 稳态电能质量指标水平评估
+
+    getGeneralSituation({ ...form, monitorFlag: form.isUpToGrid == 0 ? 2 : 1 }).then(res => {
+        let data = [
+            {
+                name: '电压暂升',
+                value: res.data[0].upCount - 0
+            },
+            {
+                name: '电压暂降',
+                value: res.data[0].sagsCount - 0
+            },
+            {
+                name: '短时中断',
+                value: res.data[0].breakCount - 0
+            }
+        ]
+        statisticsCharts.value = {
+            title: {
+                text: '总数：' + (data[0].value + data[1].value + data[2].value),
+                left: '23%',
+                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
+            },
+            color: [config.layout.elementUiPrimary[0], '#FFBF00', '#FF9100'],
+            options: {
+                toolbox: null,
+                dataZoom: null,
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['30%', '50%'],
+                        radius: ['50%', '70%'],
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
+
+                        data: data
+                    }
+                ]
+            }
+        }
+    })
+    // 技术监督
+    getSupervisionCityDetailsData(form).then(res => {
+        technology.value = res.data
+    })
+}
+
+defineExpose({ info, show })
+</script>
+
+<style lang="scss" scoped>
+.boxLeft {
+    background-color: #fff;
+    width: 100%;
+    padding: 10px 10px 10px 10px;
+    font-size: 13px;
+    overflow: hidden;
+    border-radius: 5px;
+}
+
+.title {
+    // height: ;
+    display: flex;
+    justify-content: space-between;
+    font-size: 15px;
+    line-height: 23px;
+    padding-left: 5px;
+    width: 100%;
+    font-weight: 550;
+
+    .info {
+        font-weight: normal;
+        display: flex;
+        font-size: 12px;
+        cursor: pointer;
+        color: #757575;
+    }
+}
+.TJTop {
+    display: flex;
+    img {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-right: 5px;
+    }
+}
+.evaluate {
+    margin: 10px 0;
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .line {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--el-color-primary);
+        margin-right: 2px;
+        margin-bottom: 1px;
+    }
+}
+.boxR {
+    margin: 10px 0 0 0;
+
+    .num {
+        color: #2478f2;
+    }
+    .top {
+        display: flex;
+        justify-content: space-between;
+    }
+    .bottom {
+        margin: 0;
+        border: 0px;
+    }
+
+    .harmonic {
+        display: grid;
+        .progress {
+            display: flex;
+            align-items: center;
+            .text {
+                width: 50px;
+                font-size: 12px;
+            }
+            .el-progress {
+                flex: 1;
+            }
+        }
+    }
+}
+:deep(.el-select) {
+    min-width: 120px;
+}
+.col {
+    display: grid;
+    grid-template-columns: 1fr;
+    border-radius: 10px;
+    text-align: center;
+    align-items: center;
+    background-color: #edededc0;
+}
+.imgR {
+    position: absolute;
+    padding: 10px;
+    top: calc(50% - 80px);
+    left: -23px;
+
+    height: 200px;
+    cursor: pointer;
+}
+.show {
+    width: 0px;
+    transition: all 0.1s ease;
+    .boxLeft {
+        padding: 0;
+    }
+}
+.noshow {
+    width: 25%;
+    transition: all 0.3s ease;
+    .boxLeft {
+        padding: 10px 10px 10px 10px;
+    }
+}
+:deep(.el-progress__text) {
+    font-size: 0.8rem !important    ;
+}
+.monitoringPoints {
+    // display: grid;
+    font-size: 12px;
+    display: flex;
+    justify-content: space-between;
+    // grid-template-columns: 1fr 1fr 1fr;
+    margin-top: 10px;
+    margin-bottom: 3px;
+    .line {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--el-color-primary);
+        margin-right: 2px;
+        margin-bottom: 1px;
+    }
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>
diff --git a/src/views/pqs/panorama/components/mapL.vue b/src/views/pqs/panorama/components/mapL.vue
index 2f9b77bf..87c40452 100644
--- a/src/views/pqs/panorama/components/mapL.vue
+++ b/src/views/pqs/panorama/components/mapL.vue
@@ -339,19 +339,20 @@ const countList: any = ref([
     {
         title: '网公司',
         children: [
+        { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 },
+
             {
                 title: '电网侧监测点',
                 num: 0,
                 onLineNum: 0,
                 integrityRate: 0
             },
-            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
         ]
     },
-    {
-        title: '上送网公司',
-        children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
-    }
+    // {
+    //     title: '上送网公司',
+    //     children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
+    // }
 ])
 const linList: any = ref([
     {
@@ -464,9 +465,9 @@ const info = async (row: any) => {
     })
     // 监测点指标统计
     getGridDiagramStatistics(form).then(res => {
-        countList.value[0].children[0] = { title: '电网侧监测点', ...res.data.data[0] }
-        countList.value[0].children[1] = { title: '非电网侧监测点', ...res.data.data[1] }
-        countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
+        countList.value[0].children[0] = { title: '非电网侧监测点', ...res.data.data[1] }
+        countList.value[0].children[1] = { title: '电网侧监测点', ...res.data.data[0] }
+        // countList.value[1].children[0] = { title: '电网侧监测点', ...res.data.gwData[0] }
     })
     // 监测运行统计
     getGridDiagramRunData(form).then(res => {
diff --git a/src/views/pqs/panorama/components/mapR.vue b/src/views/pqs/panorama/components/mapR.vue
index 82f3614b..7b09a277 100644
--- a/src/views/pqs/panorama/components/mapR.vue
+++ b/src/views/pqs/panorama/components/mapR.vue
@@ -169,7 +169,7 @@
                 </div>
             </div>
             <!-- 技术监督管理 -->
-            <div>
+            <!-- <div>
                 <div class="title">
                     <span>技术监督统计</span>
                     <span class="info" @click="open(3)">
@@ -221,7 +221,7 @@
                         </el-col>
                     </el-row>
                 </div>
-            </div>
+            </div> -->
         </div>
         <img
             class="imgR"
@@ -266,7 +266,7 @@ import {
 const dictData = useDictData()
 const show = ref(false)
 const height = mainHeight(30)
-const boxHeight: any = mainHeight(420, 2)
+const boxHeight: any = mainHeight(270, 2)
 const EchHeight: any = mainHeight(510, 2)
 const evaluateRef = ref()
 const steadyStateRef = ref()