修改菜单+权限+图表渲染

web/src/components/statisticalAnalysis/energyEchart.vue

@@ -17,7 +17,6 @@
         ref="comTable"
         :table-option="tableOption"
         :page-option="pageOption"
-        :table-h="tableH"
       ></ComTable>
     </div>
   </div>
@@ -26,10 +25,16 @@
 import { processData } from '@/utils/dealWithData'
 import { postReq } from '@/request/api'
 import ComTable from '@/components/ComTable'
+// import { debounce } from 'lodash'; 
 export default {
   name: 'StatisicalAnView',
   components: { ComTable },
   props: {
+    pageOption: {
+      type: Object,
+      default: () => ({}), // 默认空对象
+      required: false // 非必须
+    },
     tableInfo: {
       type: Object,
       default: () => ({}), // 默认空对象
@@ -50,6 +55,11 @@ export default {
       default: () => ({}), // 默认空对象
       required: false // 非必须
     },
+    chartDatav: {
+      type: Object,
+      default: () => ({}), // 默认空对象
+      required: false // 非必须
+    },
     tableData: {
       type: Array,
       default: () => [] // 默认空对象
@@ -64,94 +74,172 @@ export default {
         },
         select: false
       },
-      tableH: 0,
 
       chartInstances: [] // 存储 ECharts 实例
     }
   },
   watch: {
     chartData: {
-      handler(n) {
-        console.log(n, 'nnnnnnnnnnnnnnnnnnnnnnn')
-        this.$nextTick(() => {
-          this.initCharts()
-          window.addEventListener('resize', this.handleResize)
-        })
-      }
-    }
+      handler(newVal) {
+        if (newVal && Object.keys(newVal).length > 0) {
+          this.$nextTick(() => {
+            // this.destroyCharts(); // 先销毁旧图表
+            this.initBarCharts(); // 重新初始化
+          });
+        }
+      },
+      deep: true,
+      // immediate: true,
+    },
+    chartDatav: {
+      handler(newVal) {
+        if (newVal && Object.keys(newVal).length > 0) {
+          this.$nextTick(() => {
+            // this.destroyCharts(); // 先销毁旧图表
+            this.initLineCharts(); // 重新初始化
+          });
+        }
+      },
+      deep: true,
+      // immediate: true,
+    },
   },
   mounted() {
-    // this.initCharts()
-    // window.addEventListener('resize', this.handleResize)
+    window.addEventListener('resize', this.handleResize);
   },
   beforeUnmount() {
-    window.removeEventListener('resize', this.handleResize)
-    this.chartInstances.forEach((chart) => chart && chart.dispose())
+    window.removeEventListener('resize', this.handleResize);
+    this.destroyCharts();
   },
   methods: {
-    initCharts() {
-      this.chartOptions.forEach((option, index) => {
-        const dom = this.$refs[`chartContainer${index}`][0]
-        if (!dom) return
-        const chart = this.$echarts.init(dom)
-        this.chartInstances.push(chart) // 存储实例
-        const keys= option.infoKeys.map((item) => item.key)
-        // 设置图表配置
-        chart.setOption({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          legend: {
-            top: 20,
-            textStyle: {
-              color: '#fff'
-            }
-          },
-          grid: {
-            left: '3%',
-            right: '3%',
-            bottom: '5%',
-            containLabel: true
-          },
-          xAxis: {
-            type: 'category',
-            data: processData(this.chartData,keys)
-              .dates,
+    destroyCharts() {
+      this.chartInstances.forEach((chart) => {
+        if (chart && !chart.isDisposed()) {
+          chart.dispose(); // 销毁旧图表
+        }
+      });
+      this.chartInstances = []; // 清空实例数组
+    },
+    // 公共 ECharts 配置
+    getCommonOption(option, dataKeys, isLineChart = false) {
+      return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+        },
+        legend: {
+          top: 20,
+          textStyle: { color: '#fff' },
+        },
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '5%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: isLineChart ? this.generateTimePoints() : processData(this.chartData, dataKeys).dates,
+          axisLine: { lineStyle: { color: '#fff' } },
+          axisLabel: { color: '#fff' },
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
+          axisLabel: { color: '#fff' },
+        },
+      };
+    },
+    generateTimePoints() {
+      const timePoints = []
 
-            axisLine: {
-              lineStyle: { type: 'dashed', color: '#435463' }
-            },
-            axisLabel: {
-              color: '#fff'
-            }
-          },
-          yAxis: {
-            type: 'value',
-            splitLine: {
-              lineStyle: { type: 'dashed', color: '#435463' }
-            },
-            axisLabel: {
-              color: '#fff'
-            }
-          },
-          series: option.infoKeys.map((info, i) => {
-            return {
+      for (let hour = 0; hour <= 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 10) {
+          // 处理24:00的特殊情况
+          if (hour === 24 && minute === 0) {
+            timePoints.push('24:00')
+            break
+          }
+
+          // 格式化小时和分钟，确保两位数
+          const formattedHour = hour.toString().padStart(2, '0')
+          const formattedMinute = minute.toString().padStart(2, '0')
+
+          timePoints.push(`${formattedHour}:${formattedMinute}`)
+        }
+      }
+
+      return timePoints
+    },
+    // 初始化柱状图
+    initBarCharts() {
+      this.chartOptions.forEach((option, index) => {
+        if (option.type === 'bar') {
+          const dom = this.$refs[`chartContainer${index}`]?.[0];
+          if (!dom) return;
+ 
+          const chart = this.$echarts.init(dom);
+          this.chartInstances.push(chart);
+ 
+          const dataKeys = option.infoKeys.map((item) => item.key);
+          const commonOption = this.getCommonOption(option, dataKeys);
+ 
+          chart.setOption({
+            ...commonOption,
+            series: option.infoKeys.map((info, i) => ({
               name: info.label,
-              smooth: true,
-              type: option.type,
+              type: 'bar',
               barWidth: 10,
               itemStyle: {
                 borderRadius: [10, 10, 0, 0],
-                color: info.lineColor
+                color: info.lineColor,
               },
-              emphasis: {
-                focus: 'series'
+              data: processData(this.chartData, dataKeys).values[i],
+            })),
+          });
+        }
+      });
+    },
+ 
+    // 初始化折线图
+    initLineCharts() {
+      this.chartOptions.forEach((option, index) => {
+        if (option.type === 'line') {
+          const dom = this.$refs[`chartContainer${index}`]?.[0];
+          if (!dom) return;
+ 
+          const chart = this.$echarts.init(dom);
+          this.chartInstances.push(chart);
+ 
+          const dataKeys = option.infoKeys.map((item) => item.key);
+          const commonOption = this.getCommonOption(option, dataKeys, true);
+ 
+          chart.setOption({
+            ...commonOption,
+            dataZoom: [
+              {
+                type: 'slider',
+                show: true,
+                xAxisIndex: 0,
+                start: 0,
+                end: 20,
+                height: 20,
+                bottom: 10,
               },
+              {
+                type: 'inside',
+                xAxisIndex: 0,
+                start: 0,
+                end: 20,
+              },
+            ],
+            series: option.infoKeys.map((info, i) => ({
+              name: info.label,
+              type: 'line',
+              smooth: true,
+              showSymbol: false,
+              itemStyle: { color: info.lineColor },
               areaStyle: {
-                global: false,
                 color: {
                   type: 'linear',
                   x: 0,
@@ -159,32 +247,33 @@ export default {
                   x2: 0,
                   y2: 1,
                   colorStops: [
-                    { offset: 0, color: info.colorStart }, // 顶部颜色
-                    { offset: 1, color: info.colorEnd } // 底部颜色
-                  ]
-                }
+                    { offset: 0, color: info.colorStart },
+                    { offset: 1, color: info.colorEnd },
+                  ],
+                },
               },
-              global: false,
-              showSymbol: false,
-              data: processData(
-                this.chartData,
-                keys
-              ).values[i]
-
-            }
-          })
-        })
-      })
+              data: this.chartDatav[info.key],
+            })),
+          });
+        }
+      });
     },
-
-    handleResize() {
-      this.chartInstances.forEach((chart) => chart && chart.resize())
+    handleResize () {
+      this.chartInstances.forEach((chart) => chart && chart.resize());
+      // this.handleResize = debounce(this.resize, 300);
+     
     },
+    resize() {
+      this.chartInstances.forEach((chart) => chart && chart.resize());
+    },
+   
 
     handlePagesizeChange(pageOption) {
       this.$emit('pagesizeChange_energy', pageOption)
     }
-  }
+  },
+  
+  
 }
 </script>
 
@@ -242,5 +331,11 @@ export default {
   min-height: 500px;
   width: 100%;
   padding-right: 10px;
+  padding-bottom: 10px;
+
+  .comtable{
+    height:610px;
+    // overflow: scroll;
+  }
 }
 </style>