From 31e4aa1eb784477a917cd2c601857693be2a872d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Mon, 26 Feb 2024 16:12:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B5=E5=8E=8B=E6=9A=82=E9=99=8D=E8=A1=A8?=
 =?UTF-8?q?=E5=8F=8A=E5=AF=86=E5=BA=A6=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  17 +
 src/components/echarts/MyEchart.vue           |  88 ++++-
 src/main.ts                                   |   1 -
 .../dianyazanjiangbiaojimidu/index.vue        | 310 +++++++++++-------
 .../online/eventStatistics/index.vue          |   2 +-
 6 files changed, 288 insertions(+), 131 deletions(-)

diff --git a/package.json b/package.json
index f72be292..6124def0 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "axios": "^1.6.2",
     "crypto-js": "^4.2.0",
     "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
     "echarts4": "npm:echarts@^4.9.0",
     "element-plus": "^2.5.3",
     "exceljs": "^4.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5e814934..04cdbc8c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,9 @@ dependencies:
   echarts:
     specifier: ^5.4.3
     version: 5.4.3
+  echarts-gl:
+    specifier: ^2.0.9
+    version: 2.0.9(echarts@5.4.3)
   echarts4:
     specifier: npm:echarts@^4.9.0
     version: /echarts@4.9.0
@@ -1743,6 +1746,10 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /claygl@1.3.0:
+    resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1876,6 +1883,16 @@ packages:
       readable-stream: 2.3.8
     dev: false
 
+  /echarts-gl@2.0.9(echarts@5.4.3):
+    resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==}
+    peerDependencies:
+      echarts: ^5.1.2
+    dependencies:
+      claygl: 1.3.0
+      echarts: 5.4.3
+      zrender: 5.4.4
+    dev: false
+
   /echarts@4.9.0:
     resolution: {integrity: sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==}
     dependencies:
diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index 833385f7..782e68ed 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -6,7 +6,7 @@
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
-
+import 'echarts-gl';
 import 'echarts/lib/component/dataZoom'
 
 const chartRef = ref<HTMLDivElement>()
@@ -24,6 +24,90 @@ const initChart = () => {
     chart?.dispose()
 
     chart = echarts.init(chartRef.value as HTMLDivElement)
+    console.log({
+        title: {
+            left: 'center',
+            textStyle: {
+                color: '#000',
+                fontSize: 18
+            },
+            ...(props.options.title || null)
+        },
+        tooltip: {
+            trigger: 'axis',
+
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            borderWidth: 0,
+            ...(props.options.tooltip || null)
+        },
+        legend: {
+            right: 20,
+            top: 0,
+            itemGap: 10,
+            itemStyle: {},
+            textStyle: {
+                fontSize: 12,
+                padding: [2, 0, 0, 0] //[上、右、下、左]
+            },
+            itemWidth: 15,
+            itemHeight: 10,
+            ...(props.options.legend || null)
+        },
+        grid: {
+            top: '50px',
+            left: '10px',
+            right: '60px',
+            bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
+            containLabel: true
+        },
+        xAxis: handlerXAxis(),
+        yAxis: handlerYAxis(),
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                bottom: '20px',
+                end: 100,
+                ...(props.options.dataZoom || null)
+            },
+            {
+                start: 0,
+                height: 13,
+                bottom: '20px',
+                end: 100,
+                ...(props.options.dataZoom || null)
+            }
+        ],
+        color: [
+            ...(props.options.color || ''),
+            '#07CCCA ',
+            '#00BFF5',
+            '#FFBF00',
+            '#77DA63',
+            '#D5FF6B',
+            '#Ff6600',
+            '#FF9100',
+            '#5B6E96',
+            '#66FFCC',
+            '#B3B3B3'
+        ],
+        series: props.options.series,
+        ...props.options.options
+    })
     chart.setOption({
         title: {
             left: 'center',
@@ -66,7 +150,6 @@ const initChart = () => {
             itemHeight: 10,
             ...(props.options.legend || null)
         },
-
         grid: {
             top: '50px',
             left: '10px',
@@ -106,6 +189,7 @@ const initChart = () => {
             '#66FFCC',
             '#B3B3B3'
         ],
+        series: props.options.series,
         ...props.options.options
     })
     setTimeout(() => {
diff --git a/src/main.ts b/src/main.ts
index 0b7b5cb2..d552c70f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,7 +17,6 @@ import { ElDialog } from 'element-plus'
 import BaiduMap from 'vue-baidu-map-3x'
 import ExcelJS from 'exceljs'
 import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
-
 // 方式1：NPM 安装，注入 ExcelJS 对象
 VXETable.use(VXETablePluginExportXLSX, {
   ExcelJS
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
index d32ce2cf..9335cbc1 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
+    <div v-loading='loading' class='dianyazanjiangbaojimidu'>
         <el-form :inline='true'>
             <el-form-item label='时间间隔'>
                 <DatePicker ref='datePickerRef'></DatePicker>
@@ -8,16 +8,12 @@
                 <el-button type='primary' @click='init'>查询</el-button>
             </el-form-item>
         </el-form>
-        <div style='flex: 1;' class='mt10 dianyazanjiang'>
+        <div class='mt10 dianyazanjiang'>
             <div class='first'>
                 <div class='mb10'>DISDIP表格(国际发配电联盟UNIPEDE)</div>
-                <div style='flex: 1'>
-                    <vxe-table
-                        v-bind='defaultAttribute'
-                        style='height: 100%'
-                        size='mini'
-                        :data='firstData'>
-                        <vxe-colgroup title='剩余电压' field='name'></vxe-colgroup>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='firstData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
                         <vxe-colgroup title='持续事件'>
                             <vxe-column field='twentyMs' title='20ms'></vxe-column>
                             <vxe-column field='oneHundredMs' title='100ms'></vxe-column>
@@ -33,13 +29,9 @@
             </div>
             <div class='second'>
                 <div class='mb10'>EC61000-4-11(用电终端的电压暂降抗度)</div>
-                <div style='flex: 1'>
-                    <vxe-table
-                        v-bind='defaultAttribute'
-                        style='height: 100%'
-                        size='mini'
-                        :data='secondData'>
-                        <vxe-colgroup title='剩余电压' field='name'></vxe-colgroup>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='secondData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
                         <vxe-colgroup title='持续事件'>
                             <vxe-column field='tenTwentyMs' title='10-20ms'></vxe-column>
                             <vxe-column field='twentyOneHundredMs' title='20-100ms'></vxe-column>
@@ -53,13 +45,9 @@
             </div>
             <div class='third'>
                 <div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
-                <div style='flex: 1'>
-                    <vxe-table
-                        v-bind='defaultAttribute'
-                        style='height: 100%'
-                        size='mini'
-                        :data='thirdData'>
-                        <vxe-colgroup title='剩余电压' field='name'></vxe-colgroup>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
                         <vxe-colgroup title='持续事件'>
                             <vxe-column field='q' title='0.01-0.1s' align='center'></vxe-column>
                             <vxe-column field='w' title='0.1-0.25s' align='center'></vxe-column>
@@ -73,7 +61,7 @@
                     </vxe-table>
                 </div>
             </div>
-            <div class='charts'>
+            <div class='charts' id='charts'>
                 <MyEchart :options='options' />
             </div>
         </div>
@@ -105,93 +93,152 @@ const init = () => {
     formData.startTime = datePickerRef.value.timeValue[0]
     formData.endTime = datePickerRef.value.timeValue[1]
     loading.value = true
-    Promise.all([
-        eventDisdip(formData),
-        IEC411(formData),
-        IEC28(formData),
-        getCoords(formData)
-    ]).then(res => {
+    Promise.all([eventDisdip(formData), IEC411(formData), IEC28(formData), getCoords(formData)]).then(res => {
         firstData.value = res[0].data
         secondData.value = res[1].data
         thirdData.value = res[2].data
         chartsData.value = res[3].data
         options.value = {
-            backgroundColor: '#fff',
-            tooltip: {
-                trigger: 'axis'
-            },
-            title: {
-                text: '暂降密度图',
-                x: 'center'
-            },
-            visualMap: {
-                max: 20,
-                show: false,
-                inRange: {
-                    color: ['#313695', '#00BB00', '#ff8000', '#a50026']
-                }
-            },
-            xAxis3D: {
-                type: 'category',
-                name: '剩余电压(%)',
-                data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100']
-            },
-            yAxis3D: {
-                type: 'category',
-                name: '持续时间(cyc)',
-                data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc']
-            },
-            zAxis3D: {
-                type: 'value',
-                splitNumber: 10,
-                minInterval: 10,
-                name: '次数'
-            },
-            grid3D: {
-                boxWidth: 200,
-                boxDepth: 80,
-                light: {
-                    main: {
-                        intensity: 1.2
-                    },
-                    ambient: {
-                        intensity: 0.3
+            options: {
+                xAxis: null,
+                yAxis: null,
+                dataZoom: null,
+                backgroundColor: '#fff',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                title: {
+                    text: '暂降密度图',
+                    x: 'center'
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        // dataView: { show: true },
+                        // dataZoom: { show: true },
+                        //restore: { show: true },
+                        // saveAsImage: { show: true },
+                        myFull: {
+                            show: true,
+                            title: '全屏查看',
+                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
+                            onclick: () => {
+                                let element = document.getElementById('charts') as HTMLElement
+                                // 全屏，如果已经全屏，则退出全屏
+                                if (document.fullscreenElement) {
+                                    if (document.exitFullscreen) {
+                                        document.exitFullscreen()
+                                    }
+                                } else {
+                                    if (element.requestFullscreen) {
+                                        element.requestFullscreen()
+                                    }
+                                }
+                            }
+                        }
                     }
-                }
-            },
-            series: [
-                {
-                    type: 'bar3D',
-                    data: chartsData.value.map(function(item: any) {
-                        return {
-                            value: [item[0], item[1], item[2]]
-                        }
-                    }),
-                    shading: 'realistic',
-                    label: {
-                        show: false,
-                        textStyle: {
-                            fontSize: 16,
-                            borderWidth: 1
+                },
+                visualMap: {
+                    max: 20,
+                    show: false,
+                    inRange: {
+                        color: ['#313695', '#00BB00', '#ff8000', '#a50026']
+                    }
+                },
+                xAxis3D: {
+                    type: 'category',
+                    name: '剩余电压(%)',
+                    data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#111'
                         }
                     },
-
-                    itemStyle: {
-                        opacity: 1
+                    axisLabel: {
+                        color: '#111'
+                    }
+                },
+                yAxis3D: {
+                    type: 'category',
+                    name: '持续时间(cyc)',
+                    data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
+                    nameTextStyle: {
+                        color: '#111'
                     },
-                    emphasis: {
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#111'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#111'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            // 使用深浅的间隔色
+                            color: ['#111'],
+                            type: 'dashed',
+                            opacity: 0.5
+                        }
+                    }
+                },
+                zAxis3D: {
+                    type: 'value',
+                    splitNumber: 10,
+                    minInterval: 10,
+                    name: '次数'
+                },
+                grid3D: {
+                    viewControl: {
+                        projection: 'perspective',
+                        distance: 250
+                    },
+                    boxWidth: 200,
+                    boxDepth: 80,
+                    light: {
+                        main: {
+                            intensity: 1.2
+                        },
+                        ambient: {
+                            intensity: 0.3
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar3D',
+                        data: chartsData.value.map(function(item: any) {
+                            return {
+                                value: [item['x'], item['y'], item['z']]
+                            }
+                        }),
+                        shading: 'realistic',
                         label: {
+                            show: false,
                             textStyle: {
-                                fontSize: 20,
-                                color: '#900'
+                                fontSize: 16,
+                                borderWidth: 1
                             }
                         },
+
                         itemStyle: {
-                            color: '#900'
+                            opacity: 1
+                        },
+                        emphasis: {
+                            label: {
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: '#900'
+                                }
+                            },
+                            itemStyle: {
+                                color: '#900'
+                            }
                         }
                     }
-                }
-            ]
+                ]
+            }
         }
         loading.value = false
     })
@@ -199,44 +246,53 @@ const init = () => {
 onMounted(() => {
     init()
 })
-
 </script>
 <style lang='scss'>
-.dianyazanjiang {
-    display: grid;
-    grid-template-areas:
-    "first charts"
-    "second charts"
-    "third third "
-    "third third ";
-    grid-template-rows:  1fr 1fr 1fr 1fr;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 10px;
+.dianyazanjiangbaojimidu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: scroll;
 
-    .first {
-        grid-area: first;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
+    .dianyazanjiang {
+        flex: 1;
+        min-width: 1200px;
+        min-height: 800px;
+        display: grid;
+        grid-template-areas:
+        'first charts'
+        'second charts'
+        'third third '
+        'third third ';
+        grid-template-rows: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 10px;
 
-    .second {
-        grid-area: second;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
+        .first {
+            grid-area: first;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
 
-    .third {
-        grid-area: third;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
+        .second {
+            grid-area: second;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
 
-    .charts {
-        grid-area: charts;
+        .third {
+            grid-area: third;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .charts {
+            grid-area: charts;
+            overflow: hidden;
+        }
     }
 }
-
 </style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
index f80ec166..37b0860d 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
@@ -7,7 +7,7 @@
             <SEMIF47fenxi v-if='activeName === "2"' />
         </el-tab-pane>
         <el-tab-pane label='电压暂降表及密度' name='3' >
-            <Dianyazanjiangbiaojimidu />
+            <Dianyazanjiangbiaojimidu  v-if='activeName === "3"' />
         </el-tab-pane>
         <el-tab-pane label='暂降分布统计' name='4' >
             <Zanjiangfenbutongji />