修改辽宁全景展示

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 })
+} 

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(
                     {

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 },

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>

src/views/pqs/panorama/components/cityMapL1.vue

@@ -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>

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',
+                type: 'value'
-                max: 100
+                // 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: [
                     {

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>

src/views/pqs/panorama/components/mapL1.vue

@@ -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>

src/views/pqs/panorama/index.vue

@@ -4,8 +4,13 @@
             <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"
+                    <Area
-                        @changeValue="changeValue" />
+                        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">
@@ -21,24 +26,36 @@
         </div>
 
         <!-- 地图 -->
-        <Map v-if="VITE_FLAG" ref="mapRef" @changeValue="changeValue" :lineInfo="lineInfo" @drop="drop"
+        <Map
-            @show="infoShow" />
+            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" />
+                <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 ref="cityMapLRef" class="mapL" @LookMap="LookMap" @GridDiagram="GridDiagram" />
+                <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;
+        <Info
-    top: -10px;width: 100%;" ref="InfoRef" @back="lineInfo = true,infoShow(false)" />
+            v-if="!lineInfo"
+            style="position: absolute; z-index: 2; top: -10px; width: 100%"
+            ref="InfoRef"
+            @back=";(lineInfo = true), infoShow(false)"
+        />
     </div>
 </template>
 
@@ -50,12 +67,15 @@ 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 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({
@@ -176,7 +196,7 @@ const info = () => {
     form.value.endTime = datePickerRef.value.timeValue[1]
     form.value.searchEndTime = datePickerRef.value.timeValue[1]
 
-    form.value.type = 1//datePickerRef.value.interval
+    form.value.type = 1 //datePickerRef.value.interval
 
     VITE_FLAG ? mapRef.value.grids(form.value) : ''
     if (control.value == 1) {
@@ -205,7 +225,6 @@ onMounted(() => {
 })
 </script>
 
-
 <style lang="scss" scoped>
 :deep(.mapBox) {
     position: absolute;