电压暂降表及密度完成

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

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:

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

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

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'>
+                <div style='flex: 1;overflow: hidden'>
-                    <vxe-table
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='firstData'>
-                        v-bind='defaultAttribute'
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
-                        style='height: 100%'
-                        size='mini'
-                        :data='firstData'>
-                        <vxe-colgroup title='剩余电压' field='name'></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'>
+                <div style='flex: 1;overflow: hidden'>
-                    <vxe-table
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='secondData'>
-                        v-bind='defaultAttribute'
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
-                        style='height: 100%'
-                        size='mini'
-                        :data='secondData'>
-                        <vxe-colgroup title='剩余电压' field='name'></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'>
+                <div style='flex: 1;overflow: hidden'>
-                    <vxe-table
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
-                        v-bind='defaultAttribute'
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
-                        style='height: 100%'
-                        size='mini'
-                        :data='thirdData'>
-                        <vxe-colgroup title='剩余电压' field='name'></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,17 +93,16 @@ const init = () => {
     formData.startTime = datePickerRef.value.timeValue[0]
     formData.endTime = datePickerRef.value.timeValue[1]
     loading.value = true
-    Promise.all([
+    Promise.all([eventDisdip(formData), IEC411(formData), IEC28(formData), getCoords(formData)]).then(res => {
-        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 = {
+            options: {
+                xAxis: null,
+                yAxis: null,
+                dataZoom: null,
                 backgroundColor: '#fff',
                 tooltip: {
                     trigger: 'axis'
@@ -124,6 +111,33 @@ const init = () => {
                     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()
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
                 visualMap: {
                     max: 20,
                     show: false,
@@ -134,12 +148,40 @@ const init = () => {
                 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']
+                    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'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#111'
+                    }
                 },
                 yAxis3D: {
                     type: 'category',
                     name: '持续时间(cyc)',
-                data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc']
+                    data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
+                    nameTextStyle: {
+                        color: '#111'
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#111'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#111'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            // 使用深浅的间隔色
+                            color: ['#111'],
+                            type: 'dashed',
+                            opacity: 0.5
+                        }
+                    }
                 },
                 zAxis3D: {
                     type: 'value',
@@ -148,6 +190,10 @@ const init = () => {
                     name: '次数'
                 },
                 grid3D: {
+                    viewControl: {
+                        projection: 'perspective',
+                        distance: 250
+                    },
                     boxWidth: 200,
                     boxDepth: 80,
                     light: {
@@ -164,7 +210,7 @@ const init = () => {
                         type: 'bar3D',
                         data: chartsData.value.map(function(item: any) {
                             return {
-                            value: [item[0], item[1], item[2]]
+                                value: [item['x'], item['y'], item['z']]
                             }
                         }),
                         shading: 'realistic',
@@ -193,22 +239,31 @@ const init = () => {
                     }
                 ]
             }
+        }
         loading.value = false
     })
 }
 onMounted(() => {
     init()
 })
-
 </script>
 <style lang='scss'>
+.dianyazanjiangbaojimidu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: scroll;
+
     .dianyazanjiang {
+        flex: 1;
+        min-width: 1200px;
+        min-height: 800px;
         display: grid;
         grid-template-areas:
-    "first charts"
+        'first charts'
-    "second charts"
+        'second charts'
-    "third third "
+        'third third '
-    "third third ";
+        'third third ';
         grid-template-rows: 1fr 1fr 1fr 1fr;
         grid-template-columns: 1fr 1fr;
         grid-gap: 10px;
@@ -236,7 +291,8 @@ onMounted(() => {
 
         .charts {
             grid-area: charts;
+            overflow: hidden;
+        }
     }
 }
-
 </style>

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