修改冀北现场问题

2025-12-14 12:47:53 +08:00
parent ff2b9db7b8
commit 0b61c4b7ba
55 changed files with 2679 additions and 951 deletions
--- a/src/views/pqs/qualityInspeection/panorama/components/details/evaluate.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/evaluate.vue
@@ -1,13 +1,13 @@
 <template>
    <!-- 综合评估详情 -->
-    <el-dialog draggable title="区域污染值统计" v-model="dialogVisible" width="1400px">
+    <el-dialog draggable title="区域污染水平评估" v-model="dialogVisible" width="1400px">
        <div style="display: flex">
            <div style="width: 400px">
                <vxe-table
                    v-bind="defaultAttribute"
                    ref="tableRef"
                    @current-change="currentChangeEvent"
-                    height="240px"
+                    height="250px"
                    :row-config="{ isCurrent: true, isHover: true }"
                    :data="tableData"
                >
@@ -26,14 +26,14 @@
                </vxe-table>
            </div>
            <div class="ml10" style="width: 990px">
-                <vxe-table v-bind="defaultAttribute" v-loading="loadingTab" ref="vxeRef" height="240px" :data="subdata">
-                    <vxe-column type="seq" width="70"></vxe-column>
-                    <vxe-column field="devName" title="终端名称"></vxe-column>
-                    <vxe-column field="lineName" title="监测点名称" />
-                    <vxe-column field="powerFlag" title="电网标志" />
-                    <vxe-column field="devType" title="终端型号"></vxe-column>
-                    <vxe-column field="manufacturer" title="终端厂家"></vxe-column>
-                    <vxe-column field="vharmonicValue" title="污染值" sortable>
+                <vxe-table v-bind="defaultAttribute" v-loading="loadingTab" ref="vxeRef" height="250px" :data="subdata">
+                    <vxe-column type="seq" width="70" title="序号"></vxe-column>
+                    <vxe-column field="subName" title="变电站名称" min-width="120"></vxe-column>
+                    <vxe-column field="lineName" title="监测点名称" align="center" min-width="120"></vxe-column>
+                    <vxe-column field="objName" title="监测对象名称" align="center" min-width="100"></vxe-column>
+                    <vxe-column field="loadType" title="干扰源类型" align="center" min-width="100"></vxe-column>
+                    <vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
+                    <vxe-column field="vharmonicValue" title="污染值" sortable min-width="80">
                        <template #default="scope">
                            <span
                                :style="{
@@ -59,7 +59,7 @@
                </el-radio-group>
            </div> -->

-            <MyEChart style="height: 300px" :options="picEChart" />
+            <MyEChart style="height: 300px" :options="picEChart" @echartClick="echartClick"/>
        </div>
    </el-dialog>
 </template>
@@ -68,7 +68,9 @@ import { ref, nextTick } from 'vue'
 import MyEChart from '@/components/echarts/MyEchart.vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { useDictData } from '@/stores/dictData'
-import { getAssessDetail, getAssessTrend, downPollutionSubCalc } from '@/api/device-boot/panorama'
+import { getAssessDetail, getAssessTrend, downPollutionSensitiveUser } from '@/api/device-boot/panorama'
+import { useRoute } from 'vue-router'
+const router = useRouter()
 const dictData = useDictData()
 const dialogVisible: any = ref(false)
 const rowList: any = ref({})
@@ -108,19 +110,18 @@ const currentChangeEvent = async () => {
 const analysis = () => {
    loading.value = true
    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
-    downPollutionSubCalc({ ...rowList.value, ids: [PollutionList[0].id] }).then(res => {
+    downPollutionSensitiveUser({ ...rowList.value, ids: [PollutionList[0].id], deptId: rowList.value.id }).then(res => {
        const first10Items = res.data.slice(0, 10)
        picEChart.value = {
            title: {
-                text: '污染值排名前十变电站'
+                text: '污染值排名前十敏感及重要用户'
            },

            xAxis: {
                name: '',
-                data: first10Items.map((item: any) => item.subStationName),
+                data: first10Items.map((item: any) => item.projectName.split('(')[0].trim()),
                axisLabel: {
-                    rotate: 30, // 核心：倾斜 45 度（推荐 30/45/60，角度太大易读性差）
-                   
+                    rotate: 30 // 核心：倾斜 45 度（推荐 30/45/60，角度太大易读性差）
                }
            },
            grid: {
@@ -139,7 +140,7 @@ const analysis = () => {
                        // name: time[i],
                        name: '污染值',
                        type: 'bar',
-                        data: first10Items.map((item: any) => item.subVStationValue),
+                        data: first10Items.map((item: any) => item.subValue),
                        itemStyle: {
                            color: function (params) {
                                // params.value 是当前柱子的数值
@@ -170,6 +171,17 @@ const setColor = val => {
        ? '#00B07D'
        : ''
 }
+const echartClick = (res:any) => {
+     router.push({
+        name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
+        query: {
+            type: '4',
+            t: Date.now()
+        }
+    })
+    console.log("🚀 ~ echartClick ~ res:", res)
+    
+}
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
--- a/src/views/pqs/qualityInspeection/panorama/components/details/point.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/point.vue
@@ -19,17 +19,33 @@
            <el-col :span="12">
                <div class="title">
                    <span>分布统计</span>
-                    <el-select
+                    <el-radio-group v-model="statisticalType" size="small" @change="getGridDiagramDev">
+                        <el-radio-button v-for="item in options" :label="item.code" @change="statiStics">
+                            {{ item.name }}
+                        </el-radio-button>
+                    </el-radio-group>
+                    <!-- <el-select
                        v-model="statisticalType"
                        value-key="id"
                        style="width: 120px; margin-right: 80px"
                        @change="statiStics"
                    >
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item" />
-                    </el-select>
+                    </el-select> -->
                </div>
                <div class="pie">
-                    <MyEChart style="height: 260px" :options="picEChart" />
+                    <!-- <MyEChart style="height: 260px" :options="picEChart" /> -->
+                    <MyEChart style="height: 260px; width: 50%" :options="picEChart" />
+                    <el-table size="small" height="260px" style="width: 50%" :data="picList">
+                        <el-table-column prop="orgName" width="90px" align="center">
+                            <template #default="scope">
+                                {{ scope.row.orgName.split('(')[0].trim() }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="integrityRate" label="完整性(%)" align="center"></el-table-column>
+                        <el-table-column prop="onLineRate" label="在线率(%)" align="center" />
+                        <el-table-column prop="outOfStandardRate" label="超标占比(%)" align="center" />
+                    </el-table>
                </div>
            </el-col>
        </el-row>
@@ -55,12 +71,12 @@ import { useDictData } from '@/stores/dictData'
 import { getGridDiagramLineTendency, getGridDiagramLineData, getHalfReport } from '@/api/device-boot/panorama'
 const dictData = useDictData()
 const dialogVisible: any = ref(false)
-
+const picList: any = ref([])
 const Voltage = dictData.getBasicData('Dev_Voltage_Stand')
 const tableData: any = ref([])
-const options = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Power_Network'])
+const options = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Power_Network', 'JB_Power_Flag'])
 const time = ref('1')
-const statisticalType = ref(options[0])
+const statisticalType = ref('Load_Type')
 const loadTypeArr = dictData.getBasicData('Interference_Source')

 const rowList: any = ref({})
@@ -141,52 +157,65 @@ const analysis = (e: any) => {
 }
 // 统计
 const statiStics = () => {
-    getGridDiagramLineData({ ...rowList.value, statisticalType: statisticalType.value }).then(res => {
+    getGridDiagramLineData({
+        ...rowList.value,
+        statisticalType: options.filter((item: any) => item.code == statisticalType.value)[0]
+    }).then(res => {
+        picList.value = res.data
+        let picData: any = []
+        const total = res.data.reduce((sum, item) => {
+            const num = (item.orgName.match(/\((\d+)\)/) || [])[1] || 0
+            return sum + Number(num)
+        }, 0)
+
+        res.data.forEach((item: any) => {
+            let value = (item.orgName.match(/\((\d+)\)/) || [])[1] || 0
+            picData.push({
+                value: value,
+                name: item.orgName,
+                proportion: (value / total).toFixed(2)
+            })
+        })
+
        picEChart.value = {
-            title: {
-                text: ''
+            tooltip: {
+                trigger: 'item',
+                formatter: '{b}: 占比 {d}%  '
+            },
+
+            legend: {
+                show: false
            },
            xAxis: {
-                data: res.data.map((item: any) => item.orgName)
+                show: false
            },
            yAxis: {
-                name: '%',
-                min: 0,
-                max: 100
+                show: false
            },
            options: {
                dataZoom: null,
                series: [
                    {
-                        name: '数据完整性',
-                        type: 'bar',
+                        type: 'pie',
+                        startAngle: 360,
+                        center: ['50%', '55%'],
+                        radius: ['40%', '60%'],
+                        endAngle: 0,
+                        labelLine: {
+                            length: 8,
+                            length2: 30,
+                            show: true
+                        },
+                        label: {
+                            padding: [0, -30],
+                            formatter: '{b}\n\n'
+                        },
+                        itemStyle: {
+                            borderColor: '#fff',
+                            borderWidth: 1
+                        },

-                        data: res.data.map((item: any) => item.integrityRate),
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 12
-                        }
-                    },
-                    {
-                        name: '在线率',
-                        type: 'bar',
-                        data: res.data.map((item: any) => item.onLineRate),
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 12
-                        }
-                    },
-                    {
-                        name: '超标监测点占比',
-                        type: 'bar',
-                        data: res.data.map((item: any) => item.outOfStandardRate),
-                        label: {
-                            show: true,
-                            position: 'top',
-                            fontSize: 12
-                        }
+                        data: picData.sort((a, b) => b.value - a.value)
                    }
                ]
            }
--- a/src/views/pqs/qualityInspeection/panorama/components/details/propInfo.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/propInfo.vue
@@ -0,0 +1,140 @@
+<template>
+    <div class="propInfo" v-if="show">
+        <div class="top">
+            <el-form :inline="false" label-width="auto">
+                <el-form-item label=" 筛选:">
+                    <el-input v-model="value" size="small" clearable placeholder="请输入关键字进行筛选"></el-input>
+                </el-form-item>
+            </el-form>
+            <Close class="ico" @click="show = false" />
+        </div>
+        <vxe-table
+            height="200px"
+            :data="filterDataByKeyword(dataList, value)"
+            size="mini"
+            border
+            ref="tableRef"
+            align="center"
+            showOverflow
+            v-loading="loading"
+            :row-config="{ isCurrent: true, isHover: true }"
+            :columnConfig="{ resizable: true }"
+            @current-change="currentChangeEvent"
+            style="z-index: 0;"
+        >
+            <vxe-column type="seq" title="序号" width="70px"></vxe-column>
+            <vxe-column field="gdName" title="供电公司"></vxe-column>
+            <vxe-column field="subName" title="变电站名称"></vxe-column>
+            <!-- <vxe-column field="deviceName" title="终端名称"></vxe-column> -->
+            <!-- <vxe-column field="ip" title="IP"></vxe-column> -->
+            <vxe-column field="lineName" title="监测点名称"></vxe-column>
+            <!-- <vxe-column field="loadType" title="干扰源"></vxe-column> -->
+            <vxe-column field="loadType" title="干扰源类型"></vxe-column>
+            <vxe-column field="objName" title="监测对象"></vxe-column>
+        </vxe-table>
+    </div>
+</template>
+<script setup lang="ts">
+import { onMounted, nextTick, ref, provide } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { Close } from '@element-plus/icons-vue'
+const emit = defineEmits(['flyTo'])
+const value = ref('')
+const tableRef=ref()
+const dataList = ref([])
+const loading = ref(false)
+const open = (data: any) => {
+    dataList.value = []
+    loading.value = true
+    show.value = true
+    setTimeout(() => {
+        dataList.value = data
+        loading.value = false
+    }, 1000)
+}
+
+/**
+ * 根据关键字过滤数据，匹配gdName/subName/deviceName字段
+ * @param {Array} data - 原始数据数组
+ * @param {string} keyword - 过滤关键字（支持多关键字空格分隔，忽略大小写）
+ * @returns {Array} 过滤后的结果数组
+ */
+function filterDataByKeyword(data, keyword) {
+    // 空关键字直接返回全部数据
+    if (!keyword || keyword.trim() === '') {
+        return [...data] // 返回新数组，避免修改原数据
+    }
+
+    // 处理关键字：转小写、去除首尾空格、拆分多关键字（空格分隔）
+    const keywords = keyword
+        .trim()
+        .toLowerCase()
+        .split(/\s+/)
+        .filter(k => k)
+
+    // 无有效关键字时返回全部
+    if (keywords.length === 0) {
+        return [...data]
+    }
+
+    // 过滤逻辑
+    return data.filter(item => {
+        // 提取需要匹配的三个字段，统一转小写（忽略大小写）
+        const gdName = (item.gdName || '').toLowerCase()
+        const subName = (item.subName || '').toLowerCase()
+        const deviceName = (item.deviceName || '').toLowerCase()
+        const ip = (item.ip || '').toLowerCase()
+        const lineName = (item.lineName || '').toLowerCase()
+
+        // 多关键字需全部匹配（逻辑与）
+        return keywords.every(key => {
+            // 只要有一个字段包含关键字，就匹配成功
+            return (
+                gdName.includes(key) ||
+                subName.includes(key) ||
+                deviceName.includes(key) ||
+                ip.includes(key) ||
+                lineName.includes(key)
+            )
+        })
+    })
+}
+const currentChangeEvent=()=>{
+    // tableRef.value.getCurrentRecord()
+    console.log("🚀 ~ currentChangeEvent ~  tableRef.value.getCurrentRecord():",  tableRef.value.getCurrentRecord())
+    let data=tableRef.value.getCurrentRecord()
+    emit('flyTo',{ coordinate: [data.lng, data.lat] }, 16)
+}
+
+const show = ref(false)
+defineExpose({ open, show })
+</script>
+<style lang="scss" scoped>
+.propInfo {
+    position: absolute;
+    width: 48%;
+    bottom: 10px;
+    left: 26%;
+    background-color: #fff;
+    padding: 10px;
+    // z-index: 1;
+}
+.vxe-table--render-default.size--mini .vxe-body--column:not(.col--ellipsis),
+.vxe-table--render-default.size--mini .vxe-footer--column:not(.col--ellipsis),
+.vxe-table--render-default.size--mini .vxe-header--column:not(.col--ellipsis) {
+    padding: 5px;
+}
+.top {
+    width: 100%;
+    height: 40px;
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+
+    .ico {
+        height: 20px;
+        cursor: pointer;
+        margin-top: 8px;
+    }
+}
+</style>
--- a/src/views/pqs/qualityInspeection/panorama/components/details/stand.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/stand.vue
@@ -18,14 +18,14 @@
            </el-col>
            <el-col :span="12">
                <div class="title">
-                    <span>
+                    <span class="text-style" @click="jump">
                        污染告警
                        <el-popover placement="right" :width="190" trigger="hover">
                            <template #reference>
                                <WarningFilled class="WarningFilled" />
                            </template>
                            <div class="text">
-                                 <span style="color: #00B07D">无污染：0</span>
+                                <span style="color: #00b07d">无污染：0</span>
                                <br />
                                <span style="color: #3399ff">轻微污染：(0 , 100]</span>
                                <br />
@@ -33,7 +33,7 @@
                                <br />
                                <span style="color: #ff9900">中度污染：(1000 , 10000]</span>
                                <br />
-                                <span style="color: #A52a2a">重度污染：(10000</span>
+                                <span style="color: #a52a2a">重度污染：(10000</span>
                            </div>
                        </el-popover>
                    </span>
@@ -51,12 +51,7 @@
                </div>
                <!-- :style="i == 3 ? `margin-left: 20%;` : ``" -->
                <div class="pie">
-                    <MyEChart
-                        v-for="(item, i) in picEChart"
-                       
-                        class="MyEChart"
-                        :options="item"
-                    />
+                    <MyEChart v-for="(item, i) in picEChart" @click="echartClick" class="MyEChart" :options="item" />
                </div>
            </el-col>
        </el-row>
@@ -72,7 +67,7 @@
                <vxe-column field="num3" sortable title="轻度污染数量" :formatter="formatter" />
                <vxe-column field="num4" sortable title="中度污染数量" :formatter="formatter" />
                <vxe-column field="num5" sortable title="重度污染数量" :formatter="formatter" />
-                <vxe-column field="num6" sortable title="暂无数据数量" :formatter="formatter" />
+                <!-- <vxe-column field="num6" sortable title="暂无数据数量" :formatter="formatter" /> -->
            </vxe-table>
        </div>
    </el-dialog>
@@ -82,9 +77,10 @@ import { ref } from 'vue'
 import MyEChart from '@/components/echarts/MyEchart.vue'
 import { useDictData } from '@/stores/dictData'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
-
 import { WarningFilled } from '@element-plus/icons-vue'
 import { getPollutionAlarmList, getPollutionAlarmData, getGridDiagramSubTendency } from '@/api/device-boot/panorama'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 const dictData = useDictData()
 const dialogVisible: any = ref(false)
 const time = ref('1')
@@ -95,7 +91,7 @@ const options: any = dictData.getBasicData('Pollution_Calc')
 //         return item
 //     }
 // })
-const contaminate = ref(options[0].id)
+const contaminate = ref(options[0]?.id)
 const rowList: any = ref({})
 const trendEChart: any = ref({})
 const tableData: any = ref([])
@@ -290,8 +286,7 @@ const contaminateC = () => {
        let a3 = tableData.value.reduce((t, item) => t + (item.num3 - 0 || 0), 0)
        let a4 = tableData.value.reduce((t, item) => t + (item.num4 - 0 || 0), 0)
        let a5 = tableData.value.reduce((t, item) => t + (item.num5 - 0 || 0), 0)
-        let a6 = tableData.value.reduce((t, item) => t + (item.num6 - 0 || 0), 0)
-        let total = a1 + a2 + a3 + a4 + a5 + a6
+        let total = a1 + a2 + a3 + a4 + a5
        // if (rowList.value.isUpToGrid == 0) {
        //     data = res.data.info
        // } else {
@@ -331,13 +326,9 @@ const contaminateC = () => {
            {
                value: ((a5 / total || 0) * 100).toFixed(2),
                name: `重度污染：${a5}座`
-            },
-            {
-                value: ((a6 / total || 0) * 100).toFixed(2),
-                name: `暂无数据：${a6}座`
-            },
+            }
        ]
-        const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a','#ccc']
+        const color = ['#00B07D', '#3399ff', '#ffcc33', '#ff9900', '#A52a2a', '#ccc']

        list.forEach((item, i) => {
            picEChart.value[i] = {
@@ -500,6 +491,17 @@ const handleClose = () => {
    dialogVisible.value = false
 }

+const jump = () => {
+    router.push({
+        name: 'harmonic-boot/qydetailedAnalysis/pollutionReport',
+        query: {
+            type: '2',
+            statisticalType:contaminate.value,
+            t: Date.now()
+        }
+    })
+}
+
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
@@ -531,4 +533,8 @@ defineExpose({ open })
 :deep(.el-dialog__body) {
    max-height: none !important;
 }
+.text-style {
+    cursor: pointer;
+    text-decoration: underline;
+}
 </style>
--- a/src/views/pqs/qualityInspeection/panorama/components/details/steadyState.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/steadyState.vue
@@ -10,15 +10,19 @@
                <div class="boxSteps">
                    <el-steps>
                        <template v-for="(item, i) in Voltage">
-                            <el-step :class="active == i ? 'highlight' : ''" :title="item.name"
-                                @click="handleClick(i)"></el-step>
+                            <el-step
+                                :class="active == i ? 'highlight' : ''"
+                                :title="item.name"
+                                @click="handleClick(i)"
+                            ></el-step>
                        </template>
                    </el-steps>
                </div>
                <div v-for="(item, i) in evaluationData" class="evaluationData">
                    <el-row style="width: 100%">
                        <el-col :span="12" style="display: flex">
-                            <img :src="url[i]" />
+                            <span :class="`iconfont ${url[i]} icoColor`"></span>
+                            <!-- <img :src="url[i]" /> -->
                            <span>{{ item.targetName }}</span>
                        </el-col>
                        <el-col :span="12" style="display: flex">
@@ -90,11 +94,16 @@ const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {

 const chartRef = ref<HTMLDivElement>()
 const url: any = [
-    new URL(`@/assets/img/PLPC.png`, import.meta.url),
-    new URL(`@/assets/img/DYPC.png`, import.meta.url),
-    new URL(`@/assets/img/JBL.png`, import.meta.url),
-    new URL(`@/assets/img/SXDY.png`, import.meta.url),
-    new URL(`@/assets/img/SB.png`, import.meta.url)
+    'icon-frequency',
+    'icon-dianya',
+    'icon-dianyazongxiebojibianshuai',
+    'icon-sanxiangdianyafuzhibupingheng',
+    'icon-a-253_ipower'
+    // new URL(`@/assets/img/PLPC.png`, import.meta.url),
+    // new URL(`@/assets/img/DYPC.png`, import.meta.url),
+    // new URL(`@/assets/img/JBL.png`, import.meta.url),
+    // new URL(`@/assets/img/SXDY.png`, import.meta.url),
+    // new URL(`@/assets/img/SB.png`, import.meta.url)
 ]
 const tableData: any = ref([])
 const title = ['频率偏差(超标)', '电压偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
@@ -108,7 +117,8 @@ const echart = (row: any) => {

    let chart = echarts.init(chartRef.value as HTMLDivElement)

-    let dataname = ['频率偏差(Hz)',
+    let dataname = [
+        '频率偏差(Hz)',
        '电压偏差(%)',
        '电压总谐波畸变率(%)',
        '三相电压不平衡度(%)',
@@ -116,7 +126,8 @@ const echart = (row: any) => {
        '谐波电压(%)',
        '谐波电流(%)',
        '间谐波电压(%)',
-        '负序电流(A)']
+        '负序电流(A)'
+    ]
    // let datamax = [100, 100, 100, 100, 100, 100]
    let indicator = []
    for (let i = 0; i < dataname.length; i++) {
@@ -247,6 +258,7 @@ const handleClick = (i: any) => {
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
+@import '@/assets/font/iconfont.css';
 :deep(.el-select) {
    min-width: 80px;
 }
@@ -335,4 +347,9 @@ defineExpose({ open })
 :deep(.el-dialog__body) {
    max-height: none !important;
 }
+.icoColor{
+    color: var(--el-color-primary);
+    margin: 0 20px;
+    font-size: 20px;
+}
 </style>
--- a/src/views/pqs/qualityInspeection/panorama/components/details/temporaryState.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/temporaryState.vue
@@ -5,10 +5,27 @@
            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
                <vxe-column field="name" title="区域" />

-                <vxe-column sortable field="sagTimes" title="暂降次数" />
-                <vxe-column sortable field="swellTimes" title="暂升次数" />
-                <vxe-column sortable field="interruptTimes" title="短时中断次数" />
-
+                <vxe-column sortable field="sagTimes" title="暂降次数">
+                    <template #default="{ row }">
+                        <span class="text-style" @click="transientOpen(row.sagTimesIds, row.name, '暂降')">
+                            {{ row.sagTimes }}
+                        </span>
+                    </template>
+                </vxe-column>
+                <vxe-column sortable field="swellTimes" title="暂升次数">
+                    <template #default="{ row }">
+                        <span class="text-style" @click="transientOpen(row.swellTimesIds, row.name, '暂升')">
+                            {{ row.swellTimes }}
+                        </span>
+                    </template>
+                </vxe-column>
+                <vxe-column sortable field="interruptTimes" title="短时中断次数">
+                    <template #default="{ row }">
+                        <span class="text-style" @click="transientOpen(row.interruptTimesIds, row.name, '短时中断')">
+                            {{ row.interruptTimes }}
+                        </span>
+                    </template>
+                </vxe-column>
                <vxe-colgroup title="暂态严重度占比">
                    <vxe-column sortable field="rate90" title="SARFI-90" />
                    <vxe-column sortable field="rate50" title="SARFI-50" />
@@ -39,19 +56,21 @@
            </div>
        </div>
    </el-dialog>
+    <!-- 暂态详情 -->
+    <transientDetails ref="transientRef" />
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import MyEChart from '@/components/echarts/MyEchart.vue'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { getEventReason, getEventDetailByList } from '@/api/device-boot/panorama'
-
+import transientDetails from './transientDetails.vue'
+import { ElMessage } from 'element-plus'
 const dialogVisible: any = ref(false)
-
+const transientRef = ref()
 const tableData: any = ref([])
 const descentData = ref([])
 const resembleData = ref([])
-
 const picEChart = ref({})
 const picEChart1 = ref({})
 const open = async (row: any) => {
@@ -130,6 +149,13 @@ const open = async (row: any) => {
    })
    dialogVisible.value = true
 }
+// 查看详情
+const transientOpen = (row: any, name: string, type: string) => {
+    if (row == null || row?.length == 0) {
+        return ElMessage.info('暂无详情')
+    }
+    transientRef.value.open(row, name, type)
+}

 defineExpose({ open })
 </script>
@@ -150,4 +176,8 @@ defineExpose({ open })
 :deep(.el-dialog__body) {
    max-height: none !important;
 }
+.text-style {
+    cursor: pointer;
+    text-decoration: underline;
+}
 </style>
--- a/src/views/pqs/qualityInspeection/panorama/components/details/terminal.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/terminal.vue
@@ -19,6 +19,10 @@
            <el-col :span="12">
                <div class="title">
                    <span>分布统计</span>
+                    <el-radio-group v-model="type" size="small" @change="getGridDiagramDev">
+                        <el-radio-button label="1">区域</el-radio-button>
+                        <el-radio-button label="3">终端厂家</el-radio-button>
+                    </el-radio-group>
                </div>
                <div class="pie">
                    <MyEChart style="height: 260px; width: 50%" :options="picEChart" />
@@ -77,11 +81,12 @@ const dialogVisible: any = ref(false)
 const time = ref('1')
 const rowList: any = ref({})
 const tableData: any = ref()
+const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])

 const picList = ref([])
-
+const type = ref('1')
 const trendEChart: any = ref({})
-
+const loadingTab = ref(false)
 const picEChart = ref()
 const open = async (row: any) => {
    time.value = '1'
@@ -97,13 +102,49 @@ const open = async (row: any) => {
    analysis(1)
    dialogVisible.value = true
    //分布统计
-    getGridDiagramDevData(rowList.value).then(res => {
-        picList.value = res.data
+    getGridDiagramDev()
+    // 列表
+    getGridDiagramDevDataList({
+        deviceInfoParam: {
+            ...row,
+            serverName: 'pqs-common',
+            ids: [row.id],
+            runFlag: [],
+            comFlag: [],
+            manufacturer: dictData.getBasicData('Dev_Manufacturers'),
+            statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+        },
+        ...row,
+        serverName: 'pqs-common',
+        ids: [row.id],
+        runFlag: [],
+        comFlag: [],
+        manufacturer: dictData.getBasicData('Dev_Manufacturers'),
+        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
+    }).then((res: any) => {
+        tableData.value = res.data
+    })
+}
+
+const getGridDiagramDev = async () => {
+    loadingTab.value = true
+    let data = JSON.parse(JSON.stringify(rowList.value))
+    data.deviceInfoParam.statisticalType = type.value == '1' ? classificationData[0] : classificationData[1]
+    data.statisticalType = type.value == '1' ? classificationData[0] : classificationData[1]
+
+    await getGridDiagramDevData(data).then((res: any) => {
+        const total = res.data.reduce((sum, item) => {
+            return sum + item.devCount
+        }, 0)
+
+        picList.value = type.value == '1' ? res.data : res.data.filter((item: any) => item.devCount != 0)
        let picData: any = []
-        res.data.forEach((item: any) => {
+        picList.value = picList.value.sort((a, b) => b.devCount - a.devCount)
+        picList.value.forEach((item: any) => {
            picData.push({
                value: item.devCount,
-                name: `${item.orgName}`,
+                name: `${item.orgName}(${item.devCount})`,
+                proportion: (item.devCount / total).toFixed(2),
                itemStyle: {
                    color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
                }
@@ -113,7 +154,7 @@ const open = async (row: any) => {
        picEChart.value = {
            tooltip: {
                trigger: 'item',
-                formatter: '{b} :在运终端数 {c} 台'
+                formatter: '{b}: 占比 {d}%  '
            },
            legend: {
                show: false
@@ -153,29 +194,8 @@ const open = async (row: any) => {
            }
        }
    })
-    // 列表
-    getGridDiagramDevDataList({
-        deviceInfoParam: {
-            ...row,
-            serverName: 'pqs-common',
-            ids: [row.id],
-            runFlag: [],
-            comFlag: [],
-            manufacturer: dictData.getBasicData('Dev_Manufacturers'),
-            statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
-        },
-        ...row,
-        serverName: 'pqs-common',
-        ids: [row.id],
-        runFlag: [],
-        comFlag: [],
-        manufacturer: dictData.getBasicData('Dev_Manufacturers'),
-        statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
-    }).then((res: any) => {
-        tableData.value = res.data
-    })
+    loadingTab.value = false
 }
-
 const analysis = (e: any) => {
    let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`

--- a/src/views/pqs/qualityInspeection/panorama/components/details/transientDetails.vue
+++ b/src/views/pqs/qualityInspeection/panorama/components/details/transientDetails.vue
@@ -0,0 +1,58 @@
+<!-- 暂态 -->
+<template>
+    <el-dialog draggable :title="title" v-model="dialogVisible" width="800px">
+        <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
+            <vxe-column title="序号" width="70" type="seq"></vxe-column>
+            <vxe-column field="lineName" title="监测点名称" />
+            <vxe-column field="subName" title="变电站名称"></vxe-column>
+            <vxe-column field="devName" title="终端名称"></vxe-column>
+            <vxe-column sortable field="count" :title="types + '次数'"></vxe-column>
+        </vxe-table>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { useDictData } from '@/stores/dictData'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getEventDetailByList } from '@/api/device-boot/panorama'
+const dictData = useDictData()
+const dialogVisible: any = ref(false)
+const list = dictData.getBasicData('Event_Statis')
+const tableData: any = ref([])
+const title = ref('详情')
+const types = ref('')
+// Event_Statis
+const open = async (row: any, name: string, type: string) => {
+    types.value = type
+    title.value = name + type + '详情'
+    tableData.value = row
+
+    dialogVisible.value = true
+}
+// 查看详情
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.statistics-main {
+    // height: 300px;
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+
+    .statistics-box {
+        // height: 300px;
+        // display: flex;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+    }
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+.text-style {
+    cursor: pointer;
+    text-decoration: underline;
+}
+</style>