From 22011188a12ea092eb6a43307005ab2380db2e80 Mon Sep 17 00:00:00 2001
From: guanj <guan0550>
Date: Fri, 17 Jul 2026 16:13:49 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device-boot/panorama.ts               |    4 +
 src/components/echarts/MyEchart.vue           |    2 +-
 .../runManage/terminalLedger/index.vue        |    2 +-
 .../pqs/panorama/components/cityMapL-LN.vue   |  667 +++++++++
 .../pqs/panorama/components/cityMapL1.vue     |  338 -----
 .../pqs/panorama/components/cityMapR.vue      |   11 +-
 src/views/pqs/panorama/components/mapL-LN.vue |  786 +++++++++++
 src/views/pqs/panorama/components/mapL1.vue   |  516 -------
 src/views/pqs/panorama/index.vue              |  579 ++++----
 .../panorama/components/cityMapR.vue          | 1252 ++++++++---------
 10 files changed, 2391 insertions(+), 1766 deletions(-)
 create mode 100644 src/views/pqs/panorama/components/cityMapL-LN.vue
 delete mode 100644 src/views/pqs/panorama/components/cityMapL1.vue
 create mode 100644 src/views/pqs/panorama/components/mapL-LN.vue
 delete mode 100644 src/views/pqs/panorama/components/mapL1.vue

diff --git a/src/api/device-boot/panorama.ts b/src/api/device-boot/panorama.ts
index 3faeb7ba..c9b5a25a 100644
--- a/src/api/device-boot/panorama.ts
+++ b/src/api/device-boot/panorama.ts
@@ -186,3 +186,7 @@ export function limitTableDetail(data: any) {
 export function downPollutionSensitiveUser(data: any) {
     return request({ url: '/harmonic-boot/PollutionSubstation/downPollutionSensitiveUser', method: 'post', data })
 } 
+//干扰源类型统计
+export function loadTypeVOList(data: any) {
+    return request({ url: '/device-boot/gridDiagram/loadTypeVOList', method: 'post', data })
+} 
diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index 898794c1..3701a52b 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -169,7 +169,7 @@ const handlerBar = (options: any) => {
     if (Array.isArray(options.series)) {
         options.series.forEach((item: any) => {
             if (item.type === 'bar') {
-                item.barMinHeight = 10
+                item.barMinHeight = 0
                 item.barMaxWidth = 20
                 item.itemStyle = Object.assign(
                     {
diff --git a/src/views/pqs/harmonicMonitoring/runManage/terminalLedger/index.vue b/src/views/pqs/harmonicMonitoring/runManage/terminalLedger/index.vue
index 11cee20a..cbb39d8d 100644
--- a/src/views/pqs/harmonicMonitoring/runManage/terminalLedger/index.vue
+++ b/src/views/pqs/harmonicMonitoring/runManage/terminalLedger/index.vue
@@ -173,7 +173,7 @@ const tableStore = new TableStore({
         },
         {
             field: 'objName',
-            title: '用户对象',
+            title: '监测点对象',
             minWidth: 110
         },
         { field: 'manufacturer', title: '厂家', minWidth: 100 },
diff --git a/src/views/pqs/panorama/components/cityMapL-LN.vue b/src/views/pqs/panorama/components/cityMapL-LN.vue
new file mode 100644
index 00000000..1af076b5
--- /dev/null
+++ b/src/views/pqs/panorama/components/cityMapL-LN.vue
@@ -0,0 +1,667 @@
+<template>
+    <div :class="show ? 'show' : 'noshow'">
+        <div class="boxLeft" :style="height">
+            <!-- 监测规模 -->
+            <div class="mb10" :style="`height:250px);`">
+                <div class="title">
+                    <span>监测规模</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div style="display: flex">
+                    <div v-for="(item, i) in list" class="cardBox" :style="i == 1 ? 'flex:1.3' : ''">
+                        <div class="card">
+                            <span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
+                            <span
+                                :style="`color: ${item.color[0]}; cursor:pointer`"
+                                @click="
+                                    LookMap(
+                                        item.list[item.list.length - 1].numOneList,
+                                        item.list[item.list.length - 1].numTwoList,
+                                        0
+                                    )
+                                "
+                            >
+                                {{ item.list[item.list.length - 1]?.numOne }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 监测规模 列表 -->
+                <div>
+                    <div class="vcl mt5">
+                        <p v-for="(item, i) in vList" :style="i == 0 ? 'width: 60px' : 'flex:1'">
+                            {{ item }}
+                        </p>
+                    </div>
+
+                    <div v-for="(item, i) in list" class="vcl">
+                        <p style="width: 60px">
+                            {{ item.title }}
+                            <!-- <span style="position: absolute; font-size: 10px; top: -10px; right: -5px; color: #575757">
+                                详情
+                            </span> -->
+                        </p>
+                        <p
+                            v-for="(k, i) in vList?.slice(0, vList.length - 1)"
+                            class="numOne"
+                            @click="LookMap(item.list[i].numOneList, item.list[i].numTwoList, 0)"
+                        >
+                            {{ item.list[i]?.numOne }}
+                        </p>
+                        <!-- <p class="numOne" @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, 0)">
+                            {{ item.list[0].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
+                            {{ item.list[1].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
+                            {{ item.list[2].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
+                            {{ item.list[3].numOne }}
+                        </p> -->
+                        <!-- <p
+                            style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
+                            @click.stop="open(i)"
+                        >
+                            详情
+                        </p> -->
+                    </div>
+                </div>
+            </div>
+            <!-- 干扰源类型统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 55px)`">
+                <div class="title">
+                    <span>干扰源类型统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div :style="`height:calc(${boxHeight.height} - 100px );overflow-y: auto;`">
+                    <div v-for="item in loadTypeVOListData">
+                        <div
+                            class="card-Box mt10 card-Box-loadTypeVO"
+                            style="max-height: 100px"
+                            :style="`height:calc((${boxHeight.height} - 40px )/ 5.5);`"
+                        >
+                            <div>
+                                <span class="line"></span>
+                                <span class="vol">
+                                    {{ loadTypeVO.find((v: any) => v.id == item.name)?.name || '' }}
+                                </span>
+                            </div>
+                            <div class="num">
+                                <div @click="LookMap(item.loadTypeList, [], 0)">
+                                    暂降次数:
+                                    <span>{{ item.count }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:120px`">
+                <div class="title">
+                    <span>监测点指标统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div>
+                    <div v-for="item in countList">
+                        <div
+                            class="card-Box mt10"
+                            style="max-height: 100px"
+                            :style="`height:70px;`"
+                            v-for="val in item.children"
+                        >
+                            <div>
+                                <span class="line"></span>
+                                <span class="vol">{{ val.title }}</span>
+                            </div>
+                            <div class="num">
+                                <div @click="LookMap(val.numList, [], 0)">
+                                    投运:
+                                    <span>{{ val.num }}</span>
+                                </div>
+                                <div @click="LookMap(val.onLineNumList, [], 0)">
+                                    在线:
+                                    <span style="color: #2dcd28">{{ val.onLineNum }}</span>
+                                </div>
+                                <div>
+                                    数据完整性:
+                                    <span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 55px)`">
+                <div class="title">
+                    <span>监测运行统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+
+                <div :style="`height:calc(${boxHeight.height} - 100px);overflow-y: auto;`" class="BoxA mt10">
+                    <div class="card-Box" v-for="item in linList">
+                        <div>
+                            <span class="line"></span>
+                            <span class="vol">{{ item.title[0] }}</span>
+                        </div>
+                        <div class="num">
+                            <div>
+                                {{ item.title[1] }}:
+                                <span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
+                                    {{ item.lineNumOne || 0 }}
+                                </span>
+                            </div>
+                            <div>
+                                {{ item.title[2] }}:
+                                <span style="color: #a52a2a" @click="LookMap([], item.lineListTwo, 1)">
+                                    {{ item.lineNumTwo || 0 }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <img
+            class="imgL"
+            :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
+            @click="show = !show"
+            src="@/assets/img/QH.png"
+        />
+
+        <!-- 变电站详情 -->
+        <stand ref="standRef" />
+        <!-- 终端 -->
+        <terminal ref="terminalRef" />
+        <!-- 检测点 -->
+        <point ref="pointRef" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, provide } from 'vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { ArrowRight, View } from '@element-plus/icons-vue'
+import stand from './details/stand.vue'
+import terminal from './details/terminal.vue'
+import point from './details/point.vue'
+import {
+    getSubLineGiveAnAlarm,
+    getGridDiagramMonitor,
+    getGridDiagramDev,
+    getGridDiagramStatistics,
+    getGridDiagramRunData,
+    loadTypeVOList
+} from '@/api/device-boot/panorama'
+const emit = defineEmits(['LookMap', 'GridDiagram'])
+const dictData = useDictData()
+const show = ref(false)
+const standRef = ref()
+const terminalRef = ref()
+const pointRef = ref()
+const list: any = ref([
+    {
+        title: '变电站',
+        color: ['#000', '#bd3124'],
+
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            }
+        ]
+    },
+    {
+        title: '监测终端',
+        color: ['#000', '#2dcd28'],
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            }
+        ]
+    },
+    {
+        title: '监测点',
+
+        color: ['#000', '#2dcd28', '#bd3124'],
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            }
+        ]
+    }
+])
+const countList: any = ref([
+    {
+        title: '网公司',
+        children: [
+            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
+            // {
+            //     title: '电网侧监测点',
+            //     num: 0,
+            //     onLineNum: 0,
+            //     integrityRate: 0
+            // }
+        ]
+    }
+    // {
+    //     title: '上送网公司',
+    //     children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
+    // }
+])
+const loadTypeVO = dictData.getBasicData('Interference_Source')
+const loadTypeVOListData: any = ref([])
+const linList: any = ref([
+    {
+        title: ['运行状态', '合格', '告警']
+    },
+    {
+        title: ['通讯状态', '在线', '离线']
+    },
+
+    {
+        title: ['数据完整性', '≥90%', '<90%']
+    },
+    {
+        title: ['电能质量指标', '未超标', '超标']
+    }
+])
+const panoramicVoltage: any = dictData.getBasicData('Dev_Voltage_Stand')
+const vList = ref(['', '500kV', '220kV', '110kV', '35kV'])
+const formRow: any = ref({})
+const height = mainHeight(30)
+const boxHeight = mainHeight(290, 2)
+
+// 详情
+const open = (e: any) => {
+    if (e == 0) {
+        standRef.value.open(formRow.value)
+    } else if (e == 1) {
+        terminalRef.value.open(formRow.value)
+    } else if (e == 2) {
+        pointRef.value.open(formRow.value)
+    }
+}
+const info = async (row: any) => {
+    let form = {
+        ...row,
+        id: row.orgNo,
+        deptIndex: row.orgNo,
+        orgId: row.orgNo,
+        ids: [],
+        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
+        isUpToGrid: row.isUpToGrid,
+        monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
+    }
+    countList.value[0].title = row.areaName
+    formRow.value = form
+    vList.value = ['']
+    // 变电站
+    getSubLineGiveAnAlarm(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        data[0].data.forEach((item: any) => {
+            if (item.columnName) vList.value.push(panoramicVoltage.find((v: any) => v.id == item.columnName).name)
+        })
+
+        list.value[0].list = data[0].data
+    })
+    // 终端
+    getGridDiagramDev(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[1].list = data[0].data
+    })
+    // 监测点
+    await getGridDiagramMonitor(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+
+        list.value[2].list = data[0].data.map((item: any) => {
+            return {
+                numOne: item.num,
+                numTwo: item.onLineNum,
+                numOneList: item.numList,
+                numTwoList: item.onLineNumList
+            }
+        })
+
+        // list.value[2].list.push({
+        //     numOne: 0,
+        //     numOneList: []
+        // })
+    })
+    // 监测点指标统计
+    getGridDiagramStatistics(form).then(res => {
+        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] }
+    })
+    // 干扰源类型统计
+    loadTypeVOList({ form }).then(res => {
+        loadTypeVOListData.value = res.data
+    })
+    // 监测运行统计
+    getGridDiagramRunData(form).then(res => {
+        res.data[0].title = ['运行状态', '合格', '告警']
+        res.data[1].title = ['通讯状态', '在线', '离线']
+        res.data[2].title = ['数据完整性', '≥90%', '<90%']
+        res.data[3].title = ['电能质量指标', '未超标', '超标']
+
+        linList.value = res.data
+    })
+}
+// 点击
+const LookMap = (coutList: object, alarmList: object, key?: any) => {
+    // console.log('🚀 ~ LookMap ~ row:', row)
+    let form = {
+        coutList: coutList,
+        alarmList: alarmList
+    }
+    emit('LookMap', form, key)
+}
+const GridDiagram = (k: any) => {
+    emit('GridDiagram', k, 3)
+}
+onMounted(() => {})
+defineExpose({ info, show })
+</script>
+
+<style lang="scss" scoped>
+.boxLeft {
+    background-color: #fff;
+    width: 100%;
+    // padding: 10px 10px 10px 10px;
+    border-radius: 5px;
+    font-size: 13px;
+    overflow: hidden;
+}
+
+.cardBox {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+
+    .card {
+        justify-content: center;
+        margin-top: 15px;
+        margin-right: 2%;
+        display: flex;
+        flex: 1;
+        align-items: center;
+        font-size: 16px;
+
+        span:nth-child(2) {
+            font-weight: 550;
+        }
+    }
+}
+
+.vcl {
+    display: flex;
+    border-bottom: 2px solid #fff;
+    background-color: #edededc0;
+    border-radius: 5px;
+    font-size: 14px;
+
+    p {
+        text-align: center;
+        margin: 6px;
+        line-height: 30px;
+    }
+
+    .numOne {
+        flex: 1;
+        font-weight: 550;
+        cursor: pointer;
+    }
+
+    &:nth-child(1) {
+        background-color: #fff;
+    }
+
+    &:nth-child(2) {
+        .numOne {
+            color: #00bff5;
+        }
+    }
+
+    &:nth-child(3) {
+        .numOne {
+            color: #008000;
+        }
+    }
+
+    &:nth-child(4) {
+        .numOne {
+            color: #0000ff;
+        }
+    }
+}
+
+.title {
+    // height: ;
+    // display: flex;
+    // justify-content: space-between;
+    font-size: 15px;
+    line-height: 23px;
+    padding-left: 5px;
+    width: 100%;
+    font-weight: 550;
+    display: flex;
+    align-items: center;
+
+    span:nth-child(1) {
+        cursor: pointer;
+    }
+
+    .info {
+        font-weight: normal;
+        display: flex;
+        font-size: 12px;
+        cursor: pointer;
+        color: #757575;
+    }
+
+    img {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-right: 5px;
+    }
+}
+
+.card-Box {
+    // display: grid;
+    // grid-template-rows: 1fr 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    // align-items: center;
+    margin: 0 5px 5px;
+    padding: 10px;
+    background-color: #edededc0;
+    border-radius: 10px;
+    min-height: 60px;
+    max-height: 120px;
+
+    .line {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--el-color-primary);
+        margin-right: 5px;
+        margin-bottom: 2px;
+    }
+
+    .num {
+        margin-left: 10px;
+        display: grid;
+        text-align: center;
+        grid-template-columns: 1fr 1fr 1.5fr;
+        font-size: 14px;
+
+        span {
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 550;
+        }
+    }
+}
+
+.card-Box-loadTypeVO {
+    min-height: 40px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    .num {
+        grid-template-columns: 1fr;
+        font-size: 13px;
+        margin-right: 10%;
+    }
+}
+.BoxA {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    // grid-template-rows: 80px;
+    .num {
+        margin-left: 10px;
+        display: grid;
+        text-align: center;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.imgL {
+    position: absolute;
+    padding: 10px;
+    top: calc(50% - 80px);
+    right: -23px;
+
+    transform: rotate(180deg);
+    height: 200px;
+    cursor: pointer;
+}
+
+.show {
+    width: 0px;
+    transition: all 0.3s ease;
+
+    .boxLeft {
+        padding: 0;
+    }
+}
+
+.noshow {
+    width: 25%;
+    transition: all 0.3s ease;
+
+    .boxLeft {
+        padding: 10px 10px 10px 10px;
+    }
+}
+
+:deep(.el-card) {
+    --el-card-padding: 10px !important;
+}
+
+:deep(.el-table thead) {
+    color: #000;
+}
+
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>
diff --git a/src/views/pqs/panorama/components/cityMapL1.vue b/src/views/pqs/panorama/components/cityMapL1.vue
deleted file mode 100644
index f425355a..00000000
--- a/src/views/pqs/panorama/components/cityMapL1.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<template>
-    <div :class="show ? 'show' : 'noshow'">
-        <div class="boxLeft" :style="height">
-            <!-- 在线监测规模 -->
-            <div :style="boxHeight">
-                <div class="title">
-                    <span>在线监测规模</span>
-                </div>
-
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-                <MyEChart :style="tabHeight" :options="onlineCharts" />
-            </div>
-            <!-- 监测终端状态 -->
-            <div :style="boxHeight">
-                <div class="title">
-                    <span>监测终端状态</span>
-                </div>
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-                <div class="TJTop">
-                    <img src="@/assets/img/TJ.png" />
-                    终端在线率：
-                    <span>{{ onlineRate }}%</span>
-                </div>
-                <MyEChart :style="`height: calc(${tabHeight.height} - 27px)`" :options="terminalCharts" />
-            </div>
-            <!-- 监测点 -->
-            <div :style="boxHeight">
-                <div class="title">
-                    <span>监测点数据完整率</span>
-                </div>
-
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-                <MyEChart :style="tabHeight" :options="dotCharts" />
-            </div>
-        </div>
-        <img
-            class="imgL"
-            :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
-            @click="show = !show"
-            src="@/assets/img/QH.png"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, provide } from 'vue'
-
-import MyEChart from '@/components/echarts/MyEchart.vue'
-import { useDictData } from '@/stores/dictData'
-import { mainHeight } from '@/utils/layout'
-
-import { getGridDiagramAreaData, getGridDiagramCityDev, getGridDiagramLineData } from '@/api/device-boot/panorama'
-import { useConfig } from '@/stores/config'
-const config = useConfig()
-const dictData = useDictData()
-const height = mainHeight(30)
-const boxHeight = mainHeight(40, 3)
-const tabHeight: any = mainHeight(150, 3)
-const onlineRate = ref(0)
-const show = ref(false)
-const formRow: any = ref({})
-const terminalCharts: any = ref({})
-
-const dotCharts = ref()
-
-const onlineCharts = ref()
-
-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
-    }
-    let loadType = dictData.getBasicData('Statistical_Type').find(item => item.code == 'Load_Type')
-
-    formRow.value = form
-    // 变电站
-    getGridDiagramAreaData(form).then(res => {
-        onlineCharts.value = {
-            tooltip: {},
-            yAxis: {
-                type: 'value',
-                name: '个'
-            },
-
-            xAxis: {
-                type: 'category',
-                data: ['变电站', '监测终端', '监测点'],
-                axisLabel: {
-                    color: '#000',
-                    fontSize: 12
-                }
-            },
-            grid: {
-                top: '30px',
-                left: '10px',
-                right: '20px'
-            },
-
-            options: {
-                dataZoom: null,
-                series: [
-                    {
-                        name: '个数',
-                        type: 'bar',
-                        data: [
-                            res.data[0].subNum,
-                            res.data[0].deviceNum,
-                            res.data[0].lineNum
-                        ],
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10
-                        }
-                    }
-                ]
-            }
-        }
-    })
-    // 终端
-    getGridDiagramCityDev({ ...form, deviceInfoParam: form, pageNum: 1, pageSize: 1000 }).then(res => {
-        onlineRate.value = res.data[1]
-        let data = [
-            {
-                name: '运行',
-                value: res.data[0] - 0
-            },
-            {
-                name: '检修',
-                value: res.data[2] - 0
-            },
-            {
-                name: '退役',
-                value: res.data[4] - 0
-            }
-        ]
-
-        terminalCharts.value = {
-            title: {
-                text: data[0].value + data[1].value + data[2].value,
-                left: '26%',
-                top: '40%',
-                textStyle: {
-                    fontWeight: 600,
-                    fontSize: 16
-                },
-                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: {
-                dataZoom: null,
-                series: [
-                    {
-                        type: 'pie',
-                        center: ['30%', '50%'],
-                        radius: ['40%', '60%'],
-                        label: {
-                            show: false,
-                            position: 'outside',
-                            textStyle: {
-                                //数值样式
-                            }
-                        },
-
-                        data: data
-                    }
-                ]
-            }
-        }
-    })
-
-    // 监测点
-    getGridDiagramLineData({ ...form, statisticalType: loadType }).then(res => {
-        dotCharts.value = {
-            title: {
-                text: ''
-            },
-            // str.replace(/\(\d+\)/, "\n$&");
-            xAxis: {
-                data: res.data.map((item: any) => {
-                    let title = item.orgName.replace(/\(\d+\)/g, '')
-                    // return title.length > 5
-                    return title.length > 6
-                        ? title.length > 11
-                            ? title.slice(0, 5) + '\n ' + title.slice(5, 10) + '\n ' + title.slice(10)
-                            : title.slice(0, 5) + '\n ' + title.slice(5)
-                        : title
-                }),
-                axisLabel: {
-                    color: '#000',
-                    fontSize: 12,
-                    interval: 0
-                }
-            },
-            yAxis: {
-                name: '%',
-                min: 0,
-                max: 100
-            },
-            grid: {
-                top: '30px',
-                left: '0px',
-                right: '20px',
-                bottom: 0
-            },
-            options: {
-                dataZoom: null,
-                series: [
-                    {
-                        name: '数据完整率',
-                        type: 'bar',
-
-                        data: res.data.map((item: any) => item.integrityRate),
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 10
-                        }
-                    }
-                ]
-            }
-        }
-    })
-}
-
-defineExpose({ info, show })
-</script>
-
-<style lang="scss" scoped>
-.boxLeft {
-    background-color: #fff;
-    width: 100%;
-    padding: 10px 10px 10px 10px;
-    border-radius: 5px;
-    font-size: 13px;
-    overflow: hidden;
-}
-
-.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;
-    }
-}
-
-.imgL {
-    position: absolute;
-    padding: 10px;
-    top: calc(50% - 80px);
-    right: -23px;
-
-    transform: rotate(180deg);
-    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-card) {
-    --el-card-padding: 10px !important;
-}
-:deep(.el-table thead) {
-    color: #000;
-}
-.TJTop {
-    margin-top: 10px;
-    display: flex;
-    img {
-        height: 1.2rem;
-        width: 1.2rem;
-        margin-right: 5px;
-    }
-    span {
-        color: #2dcd28;
-    }
-}
-:deep(.el-dialog__body) {
-    max-height: none !important;
-}
-</style>
diff --git a/src/views/pqs/panorama/components/cityMapR.vue b/src/views/pqs/panorama/components/cityMapR.vue
index 6fe1e1ba..528ad5e5 100644
--- a/src/views/pqs/panorama/components/cityMapR.vue
+++ b/src/views/pqs/panorama/components/cityMapR.vue
@@ -339,11 +339,12 @@ const info = (row: any) => {
             color: [config.layout.elementUiPrimary[0], '#FFBF00'],
             yAxis: {
                 name: '',
-                type: 'value',
-                max: 100
+                type: 'value'
+                // max: 100
             },
             legend: {
-                data: ['超标监测点数', '超标天数']
+                data: ['超标监测点数', '超标天数'],
+                top: '5'
             },
             xAxis: {
                 type: 'category',
@@ -354,7 +355,8 @@ const info = (row: any) => {
                 }),
                 axisLabel: {
                     color: '#000',
-                    fontSize: 10
+                    fontSize: 10,
+                    rotate: 30
                 }
             },
             grid: {
@@ -364,6 +366,7 @@ const info = (row: any) => {
             },
 
             options: {
+                dataZoom: null,
                 toolbox: null,
                 series: [
                     {
diff --git a/src/views/pqs/panorama/components/mapL-LN.vue b/src/views/pqs/panorama/components/mapL-LN.vue
new file mode 100644
index 00000000..74ba7539
--- /dev/null
+++ b/src/views/pqs/panorama/components/mapL-LN.vue
@@ -0,0 +1,786 @@
+<template>
+    <div :class="show ? 'show' : 'noshow'">
+        <div class="boxLeft" :style="height">
+            <!-- 监测规模 -->
+            <div class="mb10" :style="`height:250px);`">
+                <div class="title">
+                    <span>监测规模</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div style="display: flex">
+                    <div
+                        v-for="(item, i) in list"
+                        class="cardBox mt10"
+                        :style="i == 1 ? 'flex:1.2' : i === 2 ? 'flex: 1.3' : ''"
+                    >
+                        <div class="card">
+                            <span style="cursor: pointer" @click="GridDiagram(i)">{{ item.title }}：</span>
+                            <span
+                                :style="`color: ${item.color[0]}; cursor:pointer`"
+                                @click="
+                                    LookMap(
+                                        item.list?.[item.list.length - 1]?.numOneList,
+                                        item.list?.[item.list.length - 1]?.numTwoList,
+                                        0
+                                    )
+                                "
+                            >
+                                {{ item.list?.[item.list.length - 1]?.numOne }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <!-- 监测规模 列表 -->
+                <div>
+                    <div class="vcl mt2">
+                        <p
+                            v-for="(item, i) in displayVList"
+                            :style="
+                                i == 0
+                                    ? 'width: 60px'
+                                    : i == displayVList?.length - 1
+                                    ? IS_LN
+                                        ? 'flex:1'
+                                        : 'width: 32px'
+                                    : 'flex:1'
+                            "
+                        >
+                            {{ item }}
+                        </p>
+                    </div>
+
+                    <div v-for="(item, i) in list" class="vcl">
+                        <p style="width: 60px">
+                            {{ item.title }}
+                        </p>
+                        <p
+                            v-for="(k, i) in dataVList"
+                            class="numOne"
+                            @click="LookMap(item.list[i].numOneList, item.list[i].numTwoList, 0)"
+                        >
+                            {{ item.list[i]?.numOne }}
+                        </p>
+                        <!-- <p class="numOne" @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, 0)">
+                            {{ item.list[1].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, 0)">
+                            {{ item.list[2].numOne }}
+                        </p>
+                        <p class="numOne" @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, 0)">
+                            {{ item.list[3].numOne }}
+                        </p> -->
+                        <p
+                            v-if="!IS_LN"
+                            style="font-size: 12px; width: 32px; cursor: pointer; color: var(--el-color-primary)"
+                            @click.stop="open(i)"
+                        >
+                            详情
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <!-- 干扰源类型统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 95px)`">
+                <div class="title">
+                    <span>干扰源类型统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div :style="`height:calc(${boxHeight.height} - 130px );overflow-y: auto;`">
+                    <div v-for="item in loadTypeVOListData">
+                        <div
+                            class="card-Box mt10 card-Box-loadTypeVO"
+                            style="max-height: 100px"
+                            :style="`height:calc((${boxHeight.height} - 50px )/ 5.5);`"
+                           
+                        >
+                            <div>
+                                <span class="line"></span>
+                                <span class="vol">
+                                    {{ loadTypeVO.find((v: any) => v.id == item.name)?.name || '' }}
+                                </span>
+                            </div>
+                            <div class="num">
+                                <div @click="LookMap(item.loadTypeList, [], 0)">
+                                    暂降次数:
+                                    <span>{{ item.count }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:100px`">
+                <div class="title">
+                    <span>监测点指标统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+                <div :style="`overflow-y: auto;`">
+                    <div v-for="item in countList">
+                        <div
+                            class="card-Box mt10"
+                            style="max-height: 100px"
+                            :style="`height:70px`"
+                            v-for="val in item.children"
+                        >
+                            <div>
+                                <span class="line"></span>
+                                <span class="vol">{{ val.title }}</span>
+                            </div>
+                            <div class="num">
+                                <div @click="LookMap(val.numList, [], 0)">
+                                    投运:
+                                    <span>{{ val.num }}</span>
+                                </div>
+                                <div @click="LookMap(val.onLineNumList, [], 0)">
+                                    在线:
+                                    <span style="color: #2dcd28">{{ val.onLineNum }}</span>
+                                </div>
+                                <div>
+                                    数据完整性:
+                                    <span style="color: #2b7fd3; cursor: text">{{ val.integrityRate }}%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 监测点指标统计 -->
+            <div :style="`height:calc(${boxHeight.height} - 75px)`" class="mt20">
+                <div class="title">
+                    <span>监测运行统计</span>
+                </div>
+                <div style="display: flex" class="mt2">
+                    <img src="@/assets/img/FGX.png" />
+                </div>
+
+                <div :style="`height:calc(${boxHeight.height} - 100px);overflow-y: auto;`" class="BoxA mt10">
+                    <div class="card-Box" v-for="item in linList">
+                        <div>
+                            <span class="line"></span>
+                            <span class="vol">{{ item.title[0] }}</span>
+                        </div>
+                        <div class="num">
+                            <div>
+                                {{ item.title[1] }}:
+                                <span style="color: #2dcd28" @click="LookMap(item.lineListOne, [], 0)">
+                                    {{ item.lineNumOne || 0 }}
+                                </span>
+                            </div>
+                            <div>
+                                {{ item.title[2] }}:
+                                <span style="color: #a52a2a" @click="LookMap([], item.lineListTwo, 1)">
+                                    {{ item.lineNumTwo || 0 }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <img
+            class="imgL"
+            :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
+            @click="show = !show"
+            src="@/assets/img/QH.png"
+        />
+        <div class="legeng">
+            <div v-for="item in legengList">
+                <span :style="`background-color: ${item.color};`"></span>
+                <span>{{ item.title }}</span>
+            </div>
+        </div>
+
+        <!-- 变电站详情 -->
+        <stand ref="standRef" />
+        <!-- 终端 -->
+        <terminal ref="terminalRef" />
+        <!-- 检测点 -->
+        <point ref="pointRef" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref, provide, computed } from 'vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { ArrowRight, View } from '@element-plus/icons-vue'
+import stand from './details/stand.vue'
+import terminal from './details/terminal.vue'
+import point from './details/point.vue'
+import {
+    getSubLineGiveAnAlarm,
+    getGridDiagramMonitor,
+    getGridDiagramDev,
+    getGridDiagramStatistics,
+    getGridDiagramRunData,
+    getAreaObjAlarm,
+    loadTypeVOList
+} from '@/api/device-boot/panorama'
+const emit = defineEmits(['LookMap', 'GridDiagram'])
+const IS_LN = import.meta.env.VITE_NAME == 'LN' || import.meta.env.VITE_NAME == 'LNqr'
+const dictData = useDictData()
+const show = ref(false)
+const standRef = ref()
+const terminalRef = ref()
+const pointRef = ref()
+const list: any = ref([
+    {
+        title: '场站',
+        color: ['#000', '#bd3124'],
+
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            }
+        ]
+    },
+    {
+        title: '变电站',
+        color: ['#000', '#bd3124'],
+
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            }
+        ]
+    },
+    {
+        title: '监测终端',
+        color: ['#000', '#2dcd28'],
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            }
+        ]
+    },
+    {
+        title: '监测点',
+
+        color: ['#000', '#2dcd28', '#bd3124'],
+        list: [
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            },
+            {
+                numOne: 0,
+                numTwo: 0,
+                numOneList: [],
+                numTwoList: []
+            }
+        ]
+    }
+])
+const countList: any = ref([
+    {
+        title: '', //网公司
+        children: [
+            { title: '非电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }
+
+            // {
+            //     title: '电网侧监测点',
+            //     num: 0,
+            //     onLineNum: 0,
+            //     integrityRate: 0
+            // }
+        ]
+    }
+    // {
+    //     title: '上送网公司',
+    //     children: [{ title: '电网侧监测点', num: 0, onLineNum: 0, integrityRate: 0 }]
+    // }
+])
+const linList: any = ref([
+    {
+        title: ['运行状态', '合格', '告警']
+    },
+    {
+        title: ['通讯状态', '在线', '离线']
+    },
+
+    {
+        title: ['数据完整性', '≥90%', '<90%']
+    },
+    {
+        title: ['电能质量指标', '未超标', '超标']
+    }
+])
+const legengList = [
+    {
+        color: '#00b07d',
+        title: '优质'
+    },
+    {
+        color: '#3399ff',
+        title: '良好'
+    },
+    {
+        color: '#ffcc33',
+        title: '合格'
+    },
+    {
+        color: '#db0887',
+        title: '较差'
+    },
+    {
+        color: '#ff0000',
+        title: '极差'
+    }
+]
+const loadTypeVO = dictData.getBasicData('Interference_Source')
+const loadTypeVOListData: any = ref([
+
+])
+const panoramicVoltage: any = dictData.getBasicData('Dev_Voltage_Stand')
+const vList = ref(['', '500kV', '220kV', '110kV', '35kV', ''])
+const displayVList = computed(() => (IS_LN && vList.value.length ? vList.value.slice(0, -1) : vList.value))
+const dataVList = computed(() => (IS_LN ? vList.value.slice(1, -1) : vList.value.slice(0, vList.value.length - 2)))
+const formRow: any = ref({})
+const height = mainHeight(30)
+const boxHeight = mainHeight(290, 2)
+
+// 详情
+const open = (e: any) => {
+    if (e == 0) {
+        standRef.value.open(formRow.value)
+    } else if (e == 1) {
+        terminalRef.value.open(formRow.value)
+    } else if (e == 2) {
+        pointRef.value.open(formRow.value)
+    }
+}
+const info = async (row: any) => {
+    let form = {
+        ...row,
+        id: row.orgNo,
+        deptIndex: row.orgNo,
+        orgId: row.orgNo,
+        ids: [],
+        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
+        isUpToGrid: row.isUpToGrid,
+        monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
+    }
+    countList.value[0].title = row.areaName
+    formRow.value = form
+    vList.value = ['']
+
+    getAreaObjAlarm(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        data[0].data.forEach((item: any) => {
+            if (item.columnName) vList.value.push(panoramicVoltage.find((v: any) => v.id == item.columnName).name)
+        })
+        vList.value.push('')
+        list.value[0].list = data[0].data
+    })
+
+    // 变电站
+    getSubLineGiveAnAlarm(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[1].list = data[0].data
+    })
+    // 终端
+    getGridDiagramDev(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+        list.value[2].list = data[0].data
+    })
+    // 监测点
+    await getGridDiagramMonitor(form).then(res => {
+        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
+
+        list.value[3].list = data[0].data.map((item: any) => {
+            return {
+                numOne: item.num,
+                numTwo: item.onLineNum,
+                numOneList: item.numList,
+                numTwoList: item.onLineNumList
+            }
+        })
+
+        // list.value[2].list.push({
+        //     numOne: 0,
+        //     numOneList: []
+        // })
+    })
+    // 监测点指标统计
+    getGridDiagramStatistics(form).then(res => {
+        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] }
+    })
+    // 干扰源类型统计
+    loadTypeVOList({ form }).then(res => {
+        loadTypeVOListData.value = res.data
+    })
+
+    // 监测运行统计
+    getGridDiagramRunData(form).then(res => {
+        res.data[0].title = ['运行状态', '合格', '告警']
+        res.data[1].title = ['通讯状态', '在线', '离线']
+        res.data[2].title = ['数据完整性', '≥90%', '<90%']
+        res.data[3].title = ['电能质量指标', '未超标', '超标']
+
+        linList.value = res.data
+    })
+}
+// 点击
+const LookMap = (coutList: object, alarmList: object, key?: any) => {
+    // console.log('🚀 ~ LookMap ~ row:', row)
+    let form = {
+        coutList: coutList,
+        alarmList: alarmList
+    }
+    emit('LookMap', form, key)
+}
+const GridDiagram = (k: any) => {
+    emit('GridDiagram', k)
+}
+onMounted(() => {})
+defineExpose({ info, show })
+</script>
+
+<style lang="scss" scoped>
+.boxLeft {
+    background-color: #fff;
+    width: 100%;
+    // padding: 10px 10px 10px 10px;
+    border-radius: 5px;
+    font-size: 13px;
+    overflow: hidden;
+}
+
+.cardBox {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+
+    .card {
+        justify-content: center;
+        margin-top: 1px;
+        margin-right: 2%;
+        display: flex;
+        flex: 1;
+        align-items: center;
+        font-size: 15px;
+
+        span:nth-child(2) {
+            font-weight: 550;
+        }
+    }
+}
+
+.vcl {
+    display: flex;
+    border-bottom: 2px solid #fff;
+    background-color: #edededc0;
+    border-radius: 5px;
+    font-size: 14px;
+
+    p {
+        text-align: center;
+        margin: 6px;
+        line-height: 30px;
+    }
+
+    .numOne {
+        flex: 1;
+        font-weight: 550;
+        cursor: pointer;
+    }
+
+    &:nth-child(1) {
+        background-color: #fff;
+    }
+
+    &:nth-child(2) {
+        .numOne {
+            color: #00bff5;
+        }
+    }
+
+    &:nth-child(3) {
+        .numOne {
+            color: #008000;
+        }
+    }
+
+    &:nth-child(4) {
+        .numOne {
+            color: #0000ff;
+        }
+    }
+}
+
+.title {
+    // height: ;
+    // display: flex;
+    // justify-content: space-between;
+    font-size: 15px;
+    line-height: 23px;
+    padding-left: 5px;
+    width: 100%;
+    font-weight: 550;
+    display: flex;
+    align-items: center;
+
+    span:nth-child(1) {
+        cursor: pointer;
+    }
+
+    .info {
+        font-weight: normal;
+        display: flex;
+        font-size: 12px;
+        cursor: pointer;
+        color: #757575;
+    }
+
+    img {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-right: 5px;
+    }
+}
+
+.card-Box {
+    // display: grid;
+    // grid-template-rows: 1fr 1fr;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    // align-items: center;
+    margin: 0 5px 5px;
+    padding: 10px;
+    background-color: #edededc0;
+    border-radius: 10px;
+    min-height: 60px;
+    max-height: 120px;
+
+    .line {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--el-color-primary);
+        margin-right: 5px;
+        margin-bottom: 2px;
+    }
+
+    .num {
+        margin-left: 10px;
+        display: grid;
+        text-align: center;
+        grid-template-columns: 1fr 1fr 1.5fr;
+        font-size: 14px;
+
+        span {
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 550;
+        }
+    }
+}
+.card-Box-loadTypeVO {
+    min-height: 40px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    .num {
+        grid-template-columns: 1fr;
+        font-size: 13px;
+        margin-right: 10%;
+    }
+}
+
+.BoxA {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
+    // grid-template-rows: 80px;
+    .num {
+        margin-left: 10px;
+        display: grid;
+        text-align: center;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.imgL {
+    position: absolute;
+    padding: 10px;
+    top: calc(50% - 80px);
+    right: -23px;
+
+    transform: rotate(180deg);
+    height: 200px;
+    cursor: pointer;
+}
+
+.show {
+    width: 0px;
+    transition: all 0.3s ease;
+
+    .boxLeft {
+        padding: 0;
+    }
+}
+
+.noshow {
+    width: 25%;
+    transition: all 0.3s ease;
+
+    .boxLeft {
+        padding: 10px 10px 10px 10px;
+    }
+}
+
+:deep(.el-card) {
+    --el-card-padding: 10px !important;
+}
+
+:deep(.el-table thead) {
+    color: #000;
+}
+
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+
+.legeng {
+    position: absolute;
+    padding: 5px;
+    bottom: 0;
+    right: -75px;
+    width: 70px;
+    font-size: 12px;
+    height: 120px;
+    background: #fff;
+    border-radius: 5px;
+    display: grid;
+    line-height: 22px;
+    grid-template-rows: auto;
+
+    div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span:nth-child(1) {
+            display: inline-block;
+            height: 10px;
+            border-radius: 2px;
+            width: 15px;
+            margin-right: 5px;
+        }
+    }
+}
+</style>
diff --git a/src/views/pqs/panorama/components/mapL1.vue b/src/views/pqs/panorama/components/mapL1.vue
deleted file mode 100644
index da19b612..00000000
--- a/src/views/pqs/panorama/components/mapL1.vue
+++ /dev/null
@@ -1,516 +0,0 @@
-<template>
-    <div :class="show ? 'show' : 'noshow'">
-        <div class="boxLeft" :style="height">
-            <div v-for="(item, i) in list" :style="boxHeight">
-                <div class="title">
-                    <span @click="GridDiagram(i)">
-                        {{ item.title }}
-                        <span class="ratio">{{ item.ratioTitle }}: {{ item.ratio }}%</span>
-                    </span>
-                    <span class="info" @click="open(i)">
-                        详情
-                        <ArrowRight style="width: 12px" />
-                    </span>
-                </div>
-
-                <div style="display: flex" class="mt2">
-                    <img src="@/assets/img/FGX.png" />
-                </div>
-
-                <div class="cardBox">
-                    <div class="card" style="width: 98%">
-                        <div class="cor">
-                            <img :src="item.img[0]" />
-                            {{ item.titleT[0] }}：
-                            <span
-                                :style="`color: ${item.color[0]}; cursor: pointer;`"
-                                @click="LookMap(item.list[4].numOneList, item.list[4].numTwoList, i)"
-                            >
-                                {{ item.list[4].numOne }}
-                            </span>
-                        </div>
-                        <div class="cor" :style="i == 0 ? 'flex:1.2;' : ''">
-                            <img :src="item.img[1]" />
-                            {{ item.titleT[1] }}：
-                            <span
-                                :style="`color: ${item.color[1]}; cursor: pointer;`"
-                                @click="LookMap([], item.list[4].numTwoList, i)"
-                            >
-                                {{ item.list[4].numTwo }}
-                            </span>
-                        </div>
-                        <div class="cor" v-if="i == 0">
-                            <img :src="item.img[2]" />
-                            {{ item.titleT[2] }}：
-                            <span
-                                :style="`color: ${item.color[2]}; cursor: pointer;`"
-                                @click="LookMap([], item.list[5].numOneList, 1)"
-                            >
-                                {{ item.list[5].numOne }}
-                            </span>
-                        </div>
-                    </div>
-                    <div :style="`height:calc(${boxHeight.height} - 90px);width: 100%;overflow-y: auto;`" class="BoxA">
-                        <div class="card-Box">
-                            <div>
-                                <span class="line"></span>
-                                <span class="vol">500kV</span>
-                            </div>
-                            <div class="num">
-                                <div @click="LookMap(item.list[0].numOneList, item.list[0].numTwoList, i)">
-                                    {{ item.titleT[0] }}:
-                                    <span :style="`color: ${item.color[0]}`">{{ item.list[0].numOne }}</span>
-                                </div>
-                                <div @click="LookMap([], item.list[0].numTwoList, i)">
-                                    {{ item.titleT[1] }}:
-                                    <span :style="`color: ${item.color[1]}`">{{ item.list[0].numTwo }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card-Box">
-                            <div>
-                                <span class="line"></span>
-                                <span class="vol">220kV</span>
-                            </div>
-                            <div class="num">
-                                <div @click="LookMap(item.list[1].numOneList, item.list[1].numTwoList, i)">
-                                    {{ item.titleT[0] }}:
-                                    <span :style="`color: ${item.color[0]}`">{{ item.list[1].numOne }}</span>
-                                </div>
-                                <div @click="LookMap([], item.list[1].numTwoList, i)">
-                                    {{ item.titleT[1] }}:
-                                    <span :style="`color: ${item.color[1]}`">{{ item.list[1].numTwo }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card-Box">
-                            <div>
-                                <span class="line"></span>
-                                <span class="vol">110kV</span>
-                            </div>
-                            <div class="num">
-                                <div @click="LookMap(item.list[2].numOneList, item.list[2].numTwoList, i)">
-                                    {{ item.titleT[0] }}:
-                                    <span :style="`color: ${item.color[0]}`">{{ item.list[2].numOne }}</span>
-                                </div>
-                                <div @click="LookMap([], item.list[2].numTwoList, i)">
-                                    {{ item.titleT[1] }}:
-                                    <span :style="`color: ${item.color[1]}`">{{ item.list[2].numTwo }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="card-Box">
-                            <div>
-                                <span class="line"></span>
-                                <span class="vol">35kV</span>
-                            </div>
-                            <div class="num">
-                                <div @click="LookMap(item.list[3].numOneList, item.list[3].numTwoList, i)">
-                                    {{ item.titleT[0] }}:
-                                    <span :style="`color: ${item.color[0]}`">{{ item.list[3].numOne }}</span>
-                                </div>
-                                <div @click="LookMap([], item.list[3].numTwoList, i)">
-                                    {{ item.titleT[1] }}:
-                                    <span :style="`color: ${item.color[1]}`">{{ item.list[3].numTwo }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <img
-            class="imgL"
-            :style="show ? 'transform: rotate(0deg);' : 'transform: rotate(180deg);'"
-            @click="show = !show"
-            src="@/assets/img/QH.png"
-        />
-
-        <!-- 变电站详情 -->
-        <stand ref="standRef" />
-        <!-- 终端 -->
-        <terminal ref="terminalRef" />
-        <!-- 检测点 -->
-        <point ref="pointRef" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, reactive, ref, provide } from 'vue'
-import { useDictData } from '@/stores/dictData'
-import { mainHeight } from '@/utils/layout'
-import { ArrowRight } from '@element-plus/icons-vue'
-import stand from './details/stand.vue'
-import terminal from './details/terminal.vue'
-import point from './details/point.vue'
-import {
-    getSubLineGiveAnAlarm,
-    getGridDiagramMonitor,
-    getGridDiagramDev,
-    getGridDiagramAreaData
-} from '@/api/device-boot/panorama'
-const emit = defineEmits(['LookMap', 'GridDiagram'])
-const dictData = useDictData()
-const show = ref(false)
-const standRef = ref()
-const terminalRef = ref()
-const pointRef = ref()
-const list: any = ref([
-    {
-        title: '监测点',
-        img: [
-            new URL(`@/assets/img/JCD-ZS.png`, import.meta.url),
-            new URL(`@/assets/img/JCD-ZX.png`, import.meta.url),
-            new URL(`@/assets/img/JCD-GJ.png`, import.meta.url)
-        ],
-        ratioTitle: '告警率',
-        ratio: 0,
-        titleT: ['总数', '当前在线', '告警'],
-        color: ['#000', '#2dcd28', '#bd3124'],
-        list: [
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numOneList: []
-            }
-        ]
-    },
-    {
-        title: '变电站',
-        img: [new URL(`@/assets/img/BDZ-ZS.png`, import.meta.url), new URL(`@/assets/img/BDZ-GJ.png`, import.meta.url)],
-        color: ['#000', '#bd3124'],
-        ratioTitle: '告警率',
-        ratio: 0,
-        titleT: ['总数', '告警'],
-        list: [
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            }
-        ]
-    },
-    {
-        title: '终端',
-        img: [new URL(`@/assets/img/ZD-ZS.png`, import.meta.url), new URL(`@/assets/img/ZD-ZX.png`, import.meta.url)],
-        titleT: ['总数', '在运'],
-        ratioTitle: '在运率',
-        ratio: 0,
-        color: ['#000', '#2dcd28'],
-        list: [
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            },
-            {
-                numOne: 0,
-                numTwo: 0,
-                numOneList: [],
-                numTwoList: []
-            }
-        ]
-    }
-])
-const formRow: any = ref({})
-const height = mainHeight(30)
-const boxHeight = mainHeight(40, 3)
-
-// 详情
-const open = (e: any) => {
-    if (e == 0) {
-        pointRef.value.open(formRow.value)
-    } else if (e == 1) {
-        standRef.value.open(formRow.value)
-    } else if (e == 2) {
-        terminalRef.value.open(formRow.value)
-    }
-}
-const info = async (row: any) => {
-    let form = {
-        ...row,
-        id: row.orgNo,
-        deptIndex: row.orgNo,
-        orgId: row.orgNo,
-        ids: [],
-        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
-        isUpToGrid: row.isUpToGrid,
-        monitorFlag: row.isUpToGrid == 0 ? null : row.isUpToGrid
-    }
-    formRow.value = form
-    // 监测点
-    await getGridDiagramMonitor(form).then(res => {
-        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
-
-        list.value[0].list = data[0].data.map((item: any) => {
-            return {
-                numOne: item.num,
-                numTwo: item.onLineNum,
-                numOneList: item.numList,
-                numTwoList: item.onLineNumList
-            }
-        })
-
-        list.value[0].list.push({
-            numOne: 0,
-            numOneList: []
-        })
-    })
-    // 监测点告警
-    getGridDiagramAreaData(form).then((res: any) => {
-        let numOne = 0
-        let numOneList: any = []
-
-        res.data.forEach((item: any) => {
-            numOne = numOne + item.alarm
-            numOneList.push(...item.alarmList)
-        })
-
-        list.value[0].list[5] = {
-            numOne: numOne,
-            numOneList: numOneList
-        }
-        list.value[0].ratio = ((list.value[0].list[5].numOne / list.value[0].list[4].numOne) * 100).toFixed(2)
-    })
-    // 变电站
-    getSubLineGiveAnAlarm(form).then(res => {
-        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
-        list.value[1].list = data[0].data
-
-        list.value[1].ratio = ((list.value[1].list[4].numTwo / list.value[1].list[4].numOne) * 100).toFixed(2)
-    })
-    // 终端
-    getGridDiagramDev(form).then(res => {
-        let data = row.isUpToGrid == 1 ? res.data.gwInfo : res.data.info
-        list.value[2].list = data[0].data
-        list.value[2].ratio = ((list.value[2].list[4].numTwo / list.value[2].list[4].numOne) * 100).toFixed(2)
-    })
-}
-// 点击
-const LookMap = (coutList: object, alarmList: object, key?: any) => {
-    // console.log('🚀 ~ LookMap ~ row:', row)
-    let form = {
-        coutList: coutList,
-        alarmList: alarmList
-    }
-    emit('LookMap', form, key)
-}
-const GridDiagram = (k: any) => {
-    emit('GridDiagram', k)
-}
-onMounted(() => {})
-defineExpose({ info, show })
-</script>
-
-<style lang="scss" scoped>
-.boxLeft {
-    background-color: #fff;
-    width: 100%;
-    padding: 10px 10px 10px 10px;
-    border-radius: 5px;
-    font-size: 13px;
-    overflow: hidden;
-}
-
-.cardBox {
-    display: flex;
-    flex-wrap: wrap;
-
-    .card {
-        margin-top: 10px;
-        width: 48%;
-        margin-right: 2%;
-        display: flex;
-        .cor {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            font-size: 12px;
-            color: #6d6d6d;
-            span {
-                font-size: 16px;
-                font-weight: 550;
-            }
-        }
-        img {
-            width: 40px;
-            height: 40px;
-            margin: 0 5%;
-        }
-    }
-    .BoxA {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 80px;
-        .card-Box {
-            display: grid;
-            grid-template-rows: 1fr 1fr;
-            align-items: center;
-            margin: 5px;
-            padding: 10px;
-            background-color: #edededc0;
-            border-radius: 10px;
-            max-height: 80px;
-            .line {
-                display: inline-block;
-                width: 0.5rem;
-                height: 0.5rem;
-                border-radius: 0.25rem;
-                background: var(--el-color-primary);
-                margin-right: 5px;
-                margin-bottom: 2px;
-            }
-            .num {
-                margin-left: 10px;
-                display: grid;
-                text-align: center;
-                grid-template-columns: 1fr 1fr;
-                font-size: 12px;
-                color: #6d6d6d;
-                div {
-                    cursor: pointer;
-                }
-                span {
-                    font-size: 14px;
-                    font-weight: 550;
-                }
-            }
-        }
-    }
-}
-
-.title {
-    // height: ;
-    display: flex;
-    justify-content: space-between;
-    font-size: 15px;
-    line-height: 23px;
-    padding-left: 5px;
-    width: 100%;
-    font-weight: 550;
-
-    span:nth-child(1) {
-        cursor: pointer;
-    }
-    .info {
-        font-weight: normal;
-        display: flex;
-        font-size: 12px;
-        cursor: pointer;
-        color: #757575;
-    }
-    .ratio {
-        font-weight: 500;
-        font-size: 12px;
-        line-height: 12px;
-    }
-}
-
-.imgL {
-    position: absolute;
-    padding: 10px;
-    top: calc(50% - 80px);
-    right: -23px;
-
-    transform: rotate(180deg);
-    height: 200px;
-    cursor: pointer;
-}
-
-.show {
-    width: 0px;
-    transition: all 0.3s ease;
-    .boxLeft {
-        padding: 0;
-    }
-}
-.noshow {
-    width: 25%;
-    transition: all 0.3s ease;
-    .boxLeft {
-        padding: 10px 10px 10px 10px;
-    }
-}
-:deep(.el-card) {
-    --el-card-padding: 10px !important;
-}
-:deep(.el-table thead) {
-    color: #000;
-}
-:deep(.el-dialog__body) {
-    max-height: none !important;
-}
-</style>
diff --git a/src/views/pqs/panorama/index.vue b/src/views/pqs/panorama/index.vue
index 3462635b..ad59e184 100644
--- a/src/views/pqs/panorama/index.vue
+++ b/src/views/pqs/panorama/index.vue
@@ -1,280 +1,299 @@
-<template>
-    <div class="panorama" :style="height">
-        <div class="mapBox" v-show="lineInfo">
-            <DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
-            <el-form :inline="true" :model="form" class="demo-form-inline">
-                <el-form-item>
-                    <Area ref="areaRef" :show-all-levels="false" v-model="form.orgNo" style="width: 100px"
-                        @changeValue="changeValue" />
-                </el-form-item>
-                <!-- <el-form-item>
-                    <el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
-                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
-                    </el-select>
-                </el-form-item> -->
-                <el-form-item>
-                    <div class="Icon" @click="reset">
-                        <Icon name="fa fa-refresh" />
-                    </div>
-                </el-form-item>
-            </el-form>
-        </div>
-
-        <!-- 地图 -->
-        <Map v-if="VITE_FLAG" ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop"
-            @show="infoShow" />
-        <div v-show="lineInfo">
-            <!-- 省级 -->
-            <div v-show="control == 1">
-                <mapL ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
-                <mapR ref="mapRRef" class="mapR" />
-            </div>
-            <!-- 市级 -->
-            <!-- <div v-show="control == 4"> -->
-            <div v-show="control == 2">
-                <cityMapL ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
-                <cityMapR ref="cityMapRRef" class="mapR" />
-            </div>
-        </div>
-
-        <Info v-if="!lineInfo" style="position: absolute;z-index: 2;
-    top: -10px;width: 100%;" ref="InfoRef" @back="lineInfo = true,infoShow(false)" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, nextTick, ref, provide } from 'vue'
-import Area from '@/components/form/area/index.vue'
-import Map from './components/map.vue'
-import { useDictData } from '@/stores/dictData'
-import { mainHeight } from '@/utils/layout'
-import { Search, Refresh } from '@element-plus/icons-vue'
-import mapL from './components/mapL.vue'
-import mapR from './components/mapR.vue'
-import cityMapL from './components/cityMapL.vue'
-import cityMapR from './components/cityMapR.vue'
-import Info from './components/line/info.vue'
-import DatePicker from '@/components/form/datePicker/index.vue'
-const VITE_FLAG = true//import.meta.env.VITE_NAME == 'jibei'
-
-const dictData = useDictData()
-defineOptions({
-    name: 'panorama'
-})
-
-const datePickerRef = ref()
-const areaRef = ref()
-const lineInfo = ref(true)
-const mapRef = ref()
-const mapLRef = ref()
-const InfoRef = ref()
-const mapRRef = ref()
-const cityMapLRef = ref()
-const cityMapRRef = ref()
-
-// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
-const options: any = ref([
-    {
-        name: dictData.state.area[0].name,
-        id: 0
-    },
-    {
-        name: '上送网公司',
-        id: 1
-    }
-])
-const control = ref(1)
-const form: any = ref({
-    name: '',
-    orgNo: dictData.state.area[0].id,
-    areaName: dictData.state.area[0]?.name,
-    isUpToGrid: 0
-})
-
-const height = mainHeight(10)
-// 获取区域名称
-const changeValue = (e: any) => {
-    VITE_FLAG ? mapRef.value.locatePositions(e) : ''
-    form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
-    form.value.areaName = e.data.name
-    options.value[0].name = e.data.areaName
-
-    control.value = e.data.level
-
-    info()
-}
-//点击监测点详情
-const drop = (id: string) => {
-    lineInfo.value = false
-    nextTick(() => {
-        InfoRef.value.open(id)
-    })
-}
-// 关闭左右数据展示
-const infoShow = (e: boolean) => {
-    mapLRef.value.show = e
-    mapRRef.value.show = e
-    cityMapLRef.value.show = e
-    cityMapRRef.value.show = e
-}
-// 地图控制图层
-const LookMap = (row: any, key?: any) => {
-    VITE_FLAG ? mapRef.value.addMarkers({ ...row, type: 1 }, key) : ''
-}
-const LngLat = [
-    {
-        name: '唐山',
-        LngLat: [118.335849137, 39.7513593355],
-        zoom: 8
-    },
-    {
-        name: '张家口',
-        LngLat: [115.032504679, 40.8951549951],
-        zoom: 7
-    },
-    {
-        name: '秦皇岛',
-        LngLat: [119.185113833, 40.1179119754],
-        zoom: 8.3
-    },
-    {
-        name: '承德',
-        LngLat: [117.548498365, 41.3775890632],
-        zoom: 7.3
-    },
-    {
-        name: '廊坊',
-        LngLat: [116.628004129, 39.0589378611],
-        zoom: 8
-    },
-    {
-        name: '超高压',
-        LngLat: [116.84428600000001, 40.57707185292256],
-        zoom: 6.709267680647425
-    },
-    {
-        name: '风光储',
-        LngLat: [116.84428600000001, 40.57707185292256],
-        zoom: 6.709267680647425
-    }
-]
-//区域统计展示切换
-const GridDiagram = (k?: number, num?: number) => {
-    VITE_FLAG ? mapRef.value.radiusPop(k) : ''
-    if (num == 3) {
-        // form.value.areaName
-        let value = LngLat.filter(item => item.name == form.value.areaName)[0]
-
-        if (value) VITE_FLAG ? mapRef.value.flyTo({ coordinate: value.LngLat }, value.zoom) : ''
-    } else {
-        VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 8) : ''
-    }
-}
-const info = () => {
-    form.value.startTime = datePickerRef.value.timeValue[0]
-    form.value.searchBeginTime = datePickerRef.value.timeValue[0]
-    form.value.endTime = datePickerRef.value.timeValue[1]
-    form.value.searchEndTime = datePickerRef.value.timeValue[1]
-
-    form.value.type = 1//datePickerRef.value.interval
-
-    VITE_FLAG ? mapRef.value.grids(form.value) : ''
-    if (control.value == 1) {
-        mapLRef.value.info(form.value)
-        mapRRef.value.info(form.value)
-    } else {
-        cityMapRRef.value.info(form.value)
-        cityMapLRef.value.info(form.value)
-    }
-}
-// 重置
-const reset = () => {
-    form.value = {
-        name: '',
-        orgNo: dictData.state.area[0].id,
-        areaName: dictData.state.area[0]?.name,
-        isUpToGrid: 0
-    }
-    mapRef.value.reset()
-    changeValue({ data: dictData.state.area[0] })
-}
-onMounted(() => {
-    // info()
-    changeValue({ data: dictData.state.area[0] })
-    // aaa()
-})
-</script>
- 
-
-<style lang="scss" scoped>
-:deep(.mapBox) {
-    position: absolute;
-    top: 10px;
-    left: calc(50% + 45px);
-
-    z-index: 1;
-
-    .el-select {
-        min-width: 100px;
-
-        .el-select__wrapper {
-            height: 46px !important;
-            border-radius: 8px;
-        }
-    }
-
-    .Icon {
-        height: 46px;
-        width: 46px;
-        background-color: #fff;
-        border-radius: 8px;
-        text-align: center;
-        line-height: 50px;
-        cursor: pointer;
-
-        .fa-refresh {
-            color: var(--el-color-primary) !important;
-        }
-    }
-
-    .el-input__wrapper {
-        height: 46px;
-        border-radius: 8px;
-    }
-
-    .el-form-item {
-        margin-right: 15px;
-    }
-}
-
-.mapL {
-    position: absolute;
-    top: 5px;
-    // z-index: 1;
-    left: 10px;
-}
-
-.mapR {
-    position: absolute;
-    top: 5px;
-    // z-index: 1;
-    right: 10px;
-}
-
-.panorama {
-    margin: 10px 0 0 0;
-    position: relative;
-}
-
-.el-button:focus {
-    color: var(--color);
-    background-color: #fff;
-}
-
-.el-button:hover {
-    color: var(--el-color-white);
-    border-color: var(--el-button-hover-bg-color);
-    background-color: var(--el-button-hover-bg-color);
-    outline: 0;
-}
-</style>
+<template>
+    <div class="panorama" :style="height">
+        <div class="mapBox" v-show="lineInfo">
+            <DatePicker ref="datePickerRef" style="display: none" theCurrentTime />
+            <el-form :inline="true" :model="form" class="demo-form-inline">
+                <el-form-item>
+                    <Area
+                        ref="areaRef"
+                        :show-all-levels="false"
+                        v-model="form.orgNo"
+                        style="width: 100px"
+                        @changeValue="changeValue"
+                    />
+                </el-form-item>
+                <!-- <el-form-item>
+                    <el-select v-model="form.isUpToGrid" style="width: 100px" @change="info">
+                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+                    </el-select>
+                </el-form-item> -->
+                <el-form-item>
+                    <div class="Icon" @click="reset">
+                        <Icon name="fa fa-refresh" />
+                    </div>
+                </el-form-item>
+            </el-form>
+        </div>
+
+        <!-- 地图 -->
+        <Map
+            v-if="VITE_FLAG"
+            ref="mapRef"
+            @changeValue="changeValue"
+            :lineInfo="lineInfo"
+            @drop="drop"
+            @show="infoShow"
+        />
+        <div v-show="lineInfo">
+            <!-- 省级 -->
+            <div v-show="control == 1">
+                <mapL v-if="!IS_LN" ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
+                <mapL_LN v-else ref="mapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
+                <mapR ref="mapRRef" class="mapR" />
+            </div>
+            <!-- 市级 -->
+            <!-- <div v-show="control == 4"> -->
+            <div v-show="control == 2">
+                <cityMapL v-if="!IS_LN" ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
+                <cityMapL_LN v-else ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
+                <cityMapR ref="cityMapRRef" class="mapR" />
+            </div>
+        </div>
+
+        <Info
+            v-if="!lineInfo"
+            style="position: absolute; z-index: 2; top: -10px; width: 100%"
+            ref="InfoRef"
+            @back=";(lineInfo = true), infoShow(false)"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, nextTick, ref, provide } from 'vue'
+import Area from '@/components/form/area/index.vue'
+import Map from './components/map.vue'
+import { useDictData } from '@/stores/dictData'
+import { mainHeight } from '@/utils/layout'
+import { Search, Refresh } from '@element-plus/icons-vue'
+import mapL from './components/mapL.vue'
+import mapL_LN from './components/mapL-LN.vue'
+import mapR from './components/mapR.vue'
+import cityMapL from './components/cityMapL.vue'
+import cityMapL_LN from './components/cityMapL-LN.vue'
+import cityMapR from './components/cityMapR.vue'
+import Info from './components/line/info.vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+const VITE_FLAG = true //import.meta.env.VITE_NAME == 'jibei'
+const IS_LN = import.meta.env.VITE_NAME == 'LN' || import.meta.env.VITE_NAME == 'LNqr'
+
+const dictData = useDictData()
+defineOptions({
+    name: 'panorama'
+})
+
+const datePickerRef = ref()
+const areaRef = ref()
+const lineInfo = ref(true)
+const mapRef = ref()
+const mapLRef = ref()
+const InfoRef = ref()
+const mapRRef = ref()
+const cityMapLRef = ref()
+const cityMapRRef = ref()
+
+// const list: any = [dictData.state.area[0], ...dictData.state.area[0].children]
+const options: any = ref([
+    {
+        name: dictData.state.area[0].name,
+        id: 0
+    },
+    {
+        name: '上送网公司',
+        id: 1
+    }
+])
+const control = ref(1)
+const form: any = ref({
+    name: '',
+    orgNo: dictData.state.area[0].id,
+    areaName: dictData.state.area[0]?.name,
+    isUpToGrid: 0
+})
+
+const height = mainHeight(10)
+// 获取区域名称
+const changeValue = (e: any) => {
+    VITE_FLAG ? mapRef.value.locatePositions(e) : ''
+    form.value.orgNo = e.data.id //list.filter((item: any) => item.code == e.orgId)[0]?.id || dictData.state.area[0].id
+    form.value.areaName = e.data.name
+    options.value[0].name = e.data.areaName
+
+    control.value = e.data.level
+
+    info()
+}
+//点击监测点详情
+const drop = (id: string) => {
+    lineInfo.value = false
+    nextTick(() => {
+        InfoRef.value.open(id)
+    })
+}
+// 关闭左右数据展示
+const infoShow = (e: boolean) => {
+    mapLRef.value.show = e
+    mapRRef.value.show = e
+    cityMapLRef.value.show = e
+    cityMapRRef.value.show = e
+}
+// 地图控制图层
+const LookMap = (row: any, key?: any) => {
+    VITE_FLAG ? mapRef.value.addMarkers({ ...row, type: 1 }, key) : ''
+}
+const LngLat = [
+    {
+        name: '唐山',
+        LngLat: [118.335849137, 39.7513593355],
+        zoom: 8
+    },
+    {
+        name: '张家口',
+        LngLat: [115.032504679, 40.8951549951],
+        zoom: 7
+    },
+    {
+        name: '秦皇岛',
+        LngLat: [119.185113833, 40.1179119754],
+        zoom: 8.3
+    },
+    {
+        name: '承德',
+        LngLat: [117.548498365, 41.3775890632],
+        zoom: 7.3
+    },
+    {
+        name: '廊坊',
+        LngLat: [116.628004129, 39.0589378611],
+        zoom: 8
+    },
+    {
+        name: '超高压',
+        LngLat: [116.84428600000001, 40.57707185292256],
+        zoom: 6.709267680647425
+    },
+    {
+        name: '风光储',
+        LngLat: [116.84428600000001, 40.57707185292256],
+        zoom: 6.709267680647425
+    }
+]
+//区域统计展示切换
+const GridDiagram = (k?: number, num?: number) => {
+    VITE_FLAG ? mapRef.value.radiusPop(k) : ''
+    if (num == 3) {
+        // form.value.areaName
+        let value = LngLat.filter(item => item.name == form.value.areaName)[0]
+
+        if (value) VITE_FLAG ? mapRef.value.flyTo({ coordinate: value.LngLat }, value.zoom) : ''
+    } else {
+        VITE_FLAG ? mapRef.value.flyTo({ coordinate: [116.84428600000001, 40.57707185292256] }, 8) : ''
+    }
+}
+const info = () => {
+    form.value.startTime = datePickerRef.value.timeValue[0]
+    form.value.searchBeginTime = datePickerRef.value.timeValue[0]
+    form.value.endTime = datePickerRef.value.timeValue[1]
+    form.value.searchEndTime = datePickerRef.value.timeValue[1]
+
+    form.value.type = 1 //datePickerRef.value.interval
+
+    VITE_FLAG ? mapRef.value.grids(form.value) : ''
+    if (control.value == 1) {
+        mapLRef.value.info(form.value)
+        mapRRef.value.info(form.value)
+    } else {
+        cityMapRRef.value.info(form.value)
+        cityMapLRef.value.info(form.value)
+    }
+}
+// 重置
+const reset = () => {
+    form.value = {
+        name: '',
+        orgNo: dictData.state.area[0].id,
+        areaName: dictData.state.area[0]?.name,
+        isUpToGrid: 0
+    }
+    mapRef.value.reset()
+    changeValue({ data: dictData.state.area[0] })
+}
+onMounted(() => {
+    // info()
+    changeValue({ data: dictData.state.area[0] })
+    // aaa()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep(.mapBox) {
+    position: absolute;
+    top: 10px;
+    left: calc(50% + 45px);
+
+    z-index: 1;
+
+    .el-select {
+        min-width: 100px;
+
+        .el-select__wrapper {
+            height: 46px !important;
+            border-radius: 8px;
+        }
+    }
+
+    .Icon {
+        height: 46px;
+        width: 46px;
+        background-color: #fff;
+        border-radius: 8px;
+        text-align: center;
+        line-height: 50px;
+        cursor: pointer;
+
+        .fa-refresh {
+            color: var(--el-color-primary) !important;
+        }
+    }
+
+    .el-input__wrapper {
+        height: 46px;
+        border-radius: 8px;
+    }
+
+    .el-form-item {
+        margin-right: 15px;
+    }
+}
+
+.mapL {
+    position: absolute;
+    top: 5px;
+    // z-index: 1;
+    left: 10px;
+}
+
+.mapR {
+    position: absolute;
+    top: 5px;
+    // z-index: 1;
+    right: 10px;
+}
+
+.panorama {
+    margin: 10px 0 0 0;
+    position: relative;
+}
+
+.el-button:focus {
+    color: var(--color);
+    background-color: #fff;
+}
+
+.el-button:hover {
+    color: var(--el-color-white);
+    border-color: var(--el-button-hover-bg-color);
+    background-color: var(--el-button-hover-bg-color);
+    outline: 0;
+}
+</style>
diff --git a/src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue b/src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue
index 4aa7cdd4..59d79522 100644
--- a/src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/cityMapR.vue
@@ -1,626 +1,626 @@
-<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,
-                // dataZoom: 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>
+                    <!-- <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,
+                // dataZoom: 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>