完成 电压暂降热力图 严重度 页面迁移

src/views/pqs/bearingCapacity/evaluationList/components/charge.vue

@@ -377,7 +377,7 @@ const rendering = (row: any) => {
         series: [
             {
                 type: 'pie',
-                center: ['50%', '50%'],
+                center: ['50%', '60%'],
                 radius: ['35%', '48%'],
                 label: {
                     normal: {

src/views/pqs/bearingCapacity/evaluationList/components/photovoltaic.vue

@@ -75,7 +75,7 @@
                     </el-tabs>
                     <div class="bottomBox">
                         <el-row v-if="showAssess">
-                            <el-col :span="16" :style="`height: calc(${tabsHeight} / 2 - 107px)`">
+                            <el-col :span="16" :style="`height: calc(${tabsHeight} / 2 - 57px)`">
                                 <vxe-table
                                     style="flex: 1.5"
                                     v-bind="defaultAttribute"
@@ -112,7 +112,7 @@
                                     </vxe-column>
                                 </vxe-table>
                             </el-col>
-                            <el-col :span="8" :style="`height: calc(${tabsHeight} / 2 - 100px)`">
+                            <el-col :span="8" :style="`height: calc(${tabsHeight} / 2 - 107px)`">
                                 <MyEChart style="flex: 1" :options="pieCharts" />
                             </el-col>
                         </el-row>
@@ -241,12 +241,7 @@ const info = () => {
     }).then(res => {
         userList.value = res.data.records
         user.value = userList.value[0] || {}
-        console.log('🚀 ~ info ~ res.data.records:', res.data.records)
-
-        console.log('🚀 ~ info ~ user.value:', user.value)
-
         userData.value = res.data.records[0] || {}
-        console.log('🚀 ~ info ~ userData.value:', userData.value)
     })
 }
 
@@ -326,7 +321,6 @@ const setEChart = (val: any, data: any, text: string, name: string) => {
         xAxis: {
             data: data.filter(item => item.phaseType == 'A').map(item => item.time),
             name: '时间',
-            onZero: false,
             position: 'bottom' // 设置 x 轴在底部
         },
         yAxis: {
@@ -454,7 +448,7 @@ const rendering = (data: any) => {
         series: [
             {
                 type: 'pie',
-                center: ['50%', '50%'],
+                center: ['50%', '60%'],
                 radius: ['35%', '48%'],
                 label: {
                     normal: {

src/views/pqs/voltageSags/Region/severity/index.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="default-main">
+        <TableHeader area date-picker ref="header" />
+        <div v-loading="tableStore.table.loading" class="pr10">
+            <el-row>
+                <el-col :span="12">
+                    <MyEchartMap
+                        ref="EchartMap"
+                        :options="echartMapList"
+                        class="map"
+                        @eliminate="eliminate"
+                        @getRegionByRegion="getRegionByRegion"
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <my-echart class="tall" :options="echartList" />
+                    <div class="tall">
+                        <vxe-table
+                            height="auto"
+                            auto-resize
+                            :data="tableStore.table.data.param"
+                            v-bind="defaultAttribute"
+                        >
+                            <vxe-column field="name" title="区域"></vxe-column>
+                            <vxe-column field="count" title="暂降次数"></vxe-column>
+                            <vxe-column field="size" title="监测点个数"></vxe-column>
+                        </vxe-table>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableStore from '@/utils/tableStore'
+import { ref, onMounted, provide } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+defineOptions({
+    name: 'Region/sagSeverity'
+})
+const EchartMap = ref()
+const dictData = useDictData()
+const echartMapList: any = ref({})
+const echartList = ref({})
+const header = ref()
+
+const tableStore = new TableStore({
+    url: '/event-boot/largeScreen/getAreaDownStatistics',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {},
+    loadCallback: () => {
+        header.value.areaRef.change()
+        let allData: any = []
+        tableStore.table.data.param.forEach(item => {
+            allData.push({
+                name: item.name,
+                value: item.count
+            })
+        })
+
+        map(allData)
+        histogram(allData)
+        EchartMap.value.GetEchar(header.value.areaRef.areaName)
+    }
+})
+
+provide('tableStore', tableStore)
+
+// 地图点击事件
+const getRegionByRegion = (list: any) => {
+    tableStore.table.params.deptIndex = list.id
+    tableStore.onTableAction('search', {})
+}
+// 消除点
+const eliminate = (name: string) => {
+    echartMapList.value.options.series = []
+    EchartMap.value.GetEchar(name)
+}
+
+// 地图数处理
+const map = (res: any) => {
+    echartMapList.value = {
+        name: '',
+        title: {
+            text: '区域暂降次数统计'
+        },
+        tooltip: {
+            formatter: function (params) {
+                var tips = ''
+                if (params.color != undefined) {
+                    tips += params.name + '</br/>'
+                    tips += '暂降次数' + ':' + params.value + '次' + '<br/>'
+                } else if (params.color == undefined) {
+                    tips += params.name + '</br/>'
+                    tips += '暂降次数' + ':' + '暂无数据' + '<br/>'
+                }
+                return tips
+            }
+        },
+
+        visualMap: {
+            left: 26,
+            bottom: 40,
+            show: true,
+            inRange: {
+                color: ['#ccc', '#07CCCA ']
+            },
+            min: 0,
+            max: res.reduce((max, obj) => Math.max(max, obj.value), 0),
+            calculable: true,
+            textStyle: {
+                color: '#000',
+                fontSize: 12
+            }
+        },
+
+        options: {
+            series: [
+                {
+                    type: 'map',
+                    mapType: 'china',
+                    coordinateSystem: 'geo',
+                    geoIndex: 0,
+                    animation: false, //坐标点是否显示动画
+                    roam: true,
+                    selectedMode: 'false', //是否允许选中多个区域
+                    symbol: 'pin',
+                    rippleEffect: {
+                        brushType: 'fill' // stroke|fill
+                    },
+                    data: res
+                    // 鼠标移入
+                }
+            ]
+        }
+    }
+}
+
+// 柱状图数据处理
+const histogram = (res: any) => {
+    echartList.value = {
+        title: {
+            text: '区域暂降次数'
+        },
+        xAxis: {
+            name: '(区域)',
+            data: res.map((item: any) => item.name)
+        },
+        yAxis: {
+            name: '暂降次数'
+        },
+        options: {
+            series: [
+                {
+                    name: '暂降次数',
+                    type: 'bar',
+                    data: res
+                }
+            ]
+        }
+    }
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 10)
+})
+const layout = mainHeight(83) as any
+const layout1 = mainHeight(93) as any
+</script>
+<style lang="scss" scoped>
+.map {
+    height: v-bind('layout.height');
+}
+.tall {
+    height: calc(v-bind('layout1.height') / 2);
+}
+</style>

src/views/pqs/voltageSags/Region/thermodynamicDiagram/index.vue

@@ -15,23 +15,16 @@
                 <el-col :span="12">
                     <my-echart class="tall" :options="echartList" />
                     <div class="tall">
-                        <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
+                        <vxe-table
+                            height="auto"
+                            auto-resize
+                            :data="list"
+                            v-bind="defaultAttribute"
                         >
-                            <vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
+                            <vxe-column field="gdName" title="供电公司"></vxe-column>
-                            <vxe-column field="ci" title="区域暂降评估">
+                            <vxe-column field="subName" title="变电站"></vxe-column>
-                                <template #default="{ row }">
+                            <vxe-column field="lineName" title="监测点"></vxe-column>
-                                    {{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
+                            <vxe-column field="tail" title="暂降次数"></vxe-column>
-                                </template>
-                            </vxe-column>
-                            <vxe-column sortable field="isCount" title="等级">
-                                <template #default="{ row }">
-                                    <span v-if="row.ci == 0.05">暂无等级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
-                                    <span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
-                                </template>
-                            </vxe-column>
                         </vxe-table>
                     </div>
                 </el-col>
@@ -49,14 +42,13 @@ import { ref, onMounted, provide } from 'vue'
 import { mainHeight } from '@/utils/layout'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 defineOptions({
-    name: 'Region/distribution'
+    name: 'Region/thermodynamicDiagram'
 })
 const EchartMap = ref()
 const dictData = useDictData()
 const echartMapList: any = ref({})
 const echartList = ref({})
 const header = ref()
-const distributionData: any = ref([])
 const list: any = ref([])
 const geoCoordMap: any = ref([])
 
@@ -66,6 +58,7 @@ const tableStore = new TableStore({
     column: [],
     beforeSearchFun: () => {},
     loadCallback: () => {
+        geoCoordMap.value = []
         header.value.areaRef.change()
         // 处理地图数据
         tableStore.table.data.eventHeatMapValue.forEach(val => {
@@ -74,9 +67,9 @@ const tableStore = new TableStore({
                 geoCoordMap.value.push([item.lng, item.lat, item.tail])
             })
         })
-        map(tableStore.table.data)
+
-        // tabulation(tableStore.table.data)
+        map(geoCoordMap.value)
-        // histogram(tableStore.table.data)
+        histogram(tableStore.table.data.areaValue)
         EchartMap.value.GetEchar(header.value.areaRef.areaName)
     }
 })
@@ -103,11 +96,9 @@ const eliminate = (name: string) => {
 const map = (res: any) => {
     let areaData: any = []
 
-    if (geoCoordMap.value.lengt > 0) {
+    res.map(item => {
-        geoCoordMap.value.map(item => {
         areaData.push(...new Array(3).fill(item))
     })
-    }
     let maxNum = 0
     let minNum = 0
     let num: any = []
@@ -154,7 +145,7 @@ const map = (res: any) => {
                     width: '65%',
                     height: '95%',
 
-                    name: 'AQI',
+                    // name: 'AQI',
                     type: 'heatmap',
                     coordinateSystem: 'geo',
                     blurSize: 40,
@@ -166,168 +157,25 @@ const map = (res: any) => {
     }
 }
 
-// 表格数据处理
-const tabulation = (res: any) => {
-    distributionData.value = res
-    distributionData.value.forEach((item: any) => {
-        if (item.ci == 0) {
-            item.ci = 0.05
-        }
-    })
-}
 // 柱状图数据处理
 const histogram = (res: any) => {
     echartList.value = {
         title: {
-            text: header.value.areaRef.areaName
+            text: '区域暂降次数'
         },
-        tooltip: {
-            formatter: function (params: any) {
-                var tips = ''
-                for (var i = 0; i < params.length; i++) {
-                    if (params[i].value == 0.05) {
-                        tips += params[i].name + '</br>'
-                        tips += '评估值:0'
-                    } else {
-                        tips += params[i].name + '</br>'
-                        tips += '评估值:' + params[i].value
-                    }
-                }
-                return tips
-            }
-        },
-
         xAxis: {
             name: '(区域)',
-
+            data: res.map((item: any) => item.name)
-            data: res.map((item: any) => item.areaName)
         },
         yAxis: {
-            name: ' 等级',
+            name: '暂降次数'
-            min: 0,
-            max: 2,
-            // minInterval: 0.2,
-            axisLabel: {
-                fontSize: 14,
-                // interval: 4,
-                formatter: function (value: any) {
-                    var texts = ''
-                    if (value === 0.4) {
-                        texts = '1级'
-                    } else if (value === 0.8) {
-                        texts = '2级'
-                    } else if (value === 1.2) {
-                        texts = '3级'
-                    } else if (value === 2) {
-                        texts = '4级'
-                    }
-                    return texts
-                }
-            }
         },
         options: {
             series: [
-                //
                 {
-                    name: '',
+                    name: '暂降次数',
-                    data: res.map((item: any) => {
-                        if (item.ci == 0) {
-                            return (item.ci = 0.05)
-                        }
-                        return item.ci.toFixed(2)
-                    }),
-
-                    barMaxWidth: 30,
-                    barMinHeight: 1,
                     type: 'bar',
-                    itemStyle: {
+                    data: res.map((item: any) => item.count)
-                        normal: {
-                            color: function (params: any) {
-                                if (params.value > 2 && params.value !== 0.05) {
-                                    return '#339966'
-                                } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
-                                    return '#3399FF'
-                                } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
-                                    return '#FF9900'
-                                } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
-                                    return '#CC0000'
-                                } else if (params.value == 0.05) {
-                                    return '#CC0000'
-                                }
-                            }
-                        }
-                    },
-                    markLine: {
-                        silent: false,
-                        symbol: 'circle',
-                        lineStyle: {
-                            color: 'red',
-                            width: 1
-                        },
-                        emphasis: {
-                            lineStyle: {
-                                width: 1
-                            }
-                        },
-                        data: [
-                            {
-                                name: '',
-                                yAxis: 0.4,
-                                lineStyle: {
-                                    color: '#CC0000'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#CC0000'
-                                    }
-                                }
-                            },
-                            {
-                                name: '',
-                                yAxis: 0.8,
-                                lineStyle: {
-                                    color: '#FF9900'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#FF9900'
-                                    }
-                                }
-                            },
-                            {
-                                name: '',
-                                yAxis: 1.2,
-                                lineStyle: {
-                                    color: '#3399FF'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#3399FF'
-                                    }
-                                }
-                            },
-                            {
-                                name: '',
-                                yAxis: 2,
-                                lineStyle: {
-                                    color: '#339966'
-                                },
-                                label: {
-                                    // position: "middle",
-                                    formatter: '{b}',
-                                    textStyle: {
-                                        color: '#339966'
-                                    }
-                                }
-                            }
-                        ]
-                    }
                 }
             ]
         }

src/views/pqs/voltageSags/Region/transientassessment/index.vue

@@ -63,7 +63,7 @@ import { ref, onMounted, provide } from 'vue'
 import { mainHeight } from '@/utils/layout'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 defineOptions({
-    name: 'Region/distribution'
+    name: 'Region/transientassessment'
 })
 const EchartMap = ref()
 const dictData = useDictData()