1. 监控中心 - 能耗监测 - 分析表格前端页面

2. 监控中心 - 能耗监测 - 分析图表前台页面
2024-07-11 17:29:23 +08:00
parent 4dea1ff14d
commit 37b877b220
8 changed files with 362 additions and 169 deletions
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
@@ -0,0 +1,155 @@
+<template>
+  <a-row type="flex" style="height: 92%">
+    <a-col :span="8">
+      <a-radio-group
+        v-model:value="mode"
+        @change="changeMode"
+        style="padding-bottom: 10px; width: 40%; height: 4%; padding-left: 30px; padding-top: 10px">
+        <a-radio-button value="1" style="width: 50%; text-align: center"> 同比 </a-radio-button>
+        <a-radio-button value="2" style="width: 50%; text-align: center"> 环比 </a-radio-button>
+      </a-radio-group>
+      <div ref="analysisGraphchart" style="width: 100%; height: 95%"></div>
+    </a-col>
+    <a-col :span="16" />
+  </a-row>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref, inject, watch } from 'vue';
+  import * as echarts from 'echarts';
+
+  export default defineComponent({
+    name: 'AnalysisGraph',
+    setup() {
+      const mode = ref<String>('1');
+      let data = ref<any[]>([]);
+      interface PageData {
+        // 图表 表格数据
+        graphTableList: any[];
+        // 图表 表格表头
+        graphTableColumns: any[];
+        // 图表 图表数据
+        graphGraphList: any[];
+        // 分析 表格数据
+        analysisTableList: any[];
+        // 分析 图表数据
+        analysisGraphList: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
+
+      // 监听 pageData 的变化
+      watch(
+        () => pageData as PageData,
+        (_newValue, _oldValue) => {
+          // 执行你的逻辑代码
+          draw();
+        },
+        { deep: true },
+      );
+      const changeMode = () => {};
+      const analysisGraphchart = ref(null);
+
+      let chartInstance: echarts.ECharts | null = null;
+
+      const draw = () => {
+        data.value = pageData.analysisGraphList;
+        if (data.value && data.value.length > 0) {
+          if (chartInstance) {
+            chartInstance.dispose();
+          }
+          chartInstance = echarts.init(analysisGraphchart.value);
+
+          var seriesdata = [];
+          var dateX = [];
+          // var legendList: string | any[] = [];
+          for (let i = 0; i < data.value.length; i++) {
+            dateX.push(data.value[i].name);
+
+            seriesdata.push({ value: data.value[i].value, label: data.value[i].labelRight });
+          }
+
+          var seriesList = [
+            {
+              name: data.value[0].energyType,
+              data: seriesdata,
+              type: 'bar',
+              label: {
+                show: true,
+                formatter: '{b}',
+              },
+            },
+          ];
+
+          const option = {
+            // tooltip: {
+            //   trigger: 'axis',
+            //   formatter: (params: any) => {
+            //     const date = params[0].name;
+            //     const values = params
+            //       .map((param: any) => {
+            //         const unit = data.value.find((d) => d.name === date)?.unit || '';
+            //         return `<tr>
+            //               <td>${param.marker}${param.seriesName}</td>
+            //               <td style="text-align: right;">${param.value} ${unit}</td>
+            //             </tr>`;
+            //       })
+            //       .join('');
+            //     return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
+            //   },
+            // },
+            yAxis: {
+              type: 'category',
+              axisLine: { show: false },
+              axisLabel: { show: false },
+              axisTick: { show: false },
+              splitLine: { show: false },
+              data: dateX,
+            },
+            xAxis: {
+              type: 'value',
+              position: 'top',
+              splitLine: {
+                lineStyle: {
+                  type: 'dashed',
+                },
+              },
+            },
+            series: seriesList,
+          };
+
+          chartInstance = echarts.init(analysisGraphchart.value);
+          chartInstance.setOption(option);
+        }
+      };
+      onMounted(() => {
+        draw();
+      });
+
+      // 下载图表
+      const downloadChart = () => {
+        if (chartInstance) {
+          const base64 = chartInstance.getDataURL({
+            type: 'png',
+            backgroundColor: '#fff',
+          });
+          const link = document.createElement('a');
+          link.href = base64;
+          link.download = 'chart.png';
+          link.click();
+        }
+      };
+
+      return {
+        analysisGraphchart,
+        downloadChart,
+        mode,
+        changeMode,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>