1.设备监控 图表下载 时间选择改为三天

2.能耗监控 - 图表前台页面

hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div ref="graphGraphchart" style="width: 100%; height: 80%"></div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref } from 'vue';
+  import * as echarts from 'echarts';
+
+  const data = [
+    {
+      date: '2023-12-01 0:00',
+      unit: 'V',
+      data: [
+        {
+          name: 'AC_002（暖通电表）',
+          value: '21',
+        },
+        {
+          name: 'AC_003（照明电表）',
+          value: '36',
+        },
+        {
+          name: 'AC_004（给排水电表）',
+          value: '5',
+        },
+      ],
+    },
+    {
+      date: '2023-12-02 0:00',
+      unit: 'V',
+      data: [
+        {
+          name: 'AC_002（暖通电表）',
+          value: '26',
+        },
+        {
+          name: 'AC_003（照明电表）',
+          value: '25',
+        },
+        {
+          name: 'AC_004（给排水电表）',
+          value: '47',
+        },
+      ],
+    },
+    {
+      date: '2023-12-03 0:00',
+      unit: 'V',
+      data: [
+        {
+          name: 'AC_002（暖通电表）',
+          value: '18',
+        },
+        {
+          name: 'AC_003（照明电表）',
+          value: '22',
+        },
+        {
+          name: 'AC_004（给排水电表）',
+          value: '26',
+        },
+      ],
+    },
+    {
+      date: '2023-12-04 0:00',
+      unit: 'V',
+      data: [
+        {
+          name: 'AC_002（暖通电表）',
+          value: '40',
+        },
+        {
+          name: 'AC_003（照明电表）',
+          value: '15',
+        },
+        {
+          name: 'AC_004（给排水电表）',
+          value: '12',
+        },
+      ],
+    },
+    {
+      date: '2023-12-05 0:00',
+      unit: 'V',
+      data: [
+        {
+          name: 'AC_002（暖通电表）',
+          value: '15',
+        },
+        {
+          name: 'AC_003（照明电表）',
+          value: '18',
+        },
+        {
+          name: 'AC_004（给排水电表）',
+          value: '15',
+        },
+      ],
+    },
+  ];
+
+  export default defineComponent({
+    name: 'GraphGraph',
+    setup() {
+      const graphGraphchart = ref(null);
+
+      let chartInstance: echarts.ECharts | null = null;
+      onMounted(() => {
+        chartInstance = echarts.init(graphGraphchart.value);
+        var seriesList = [];
+        var date = [];
+        var legendList: string | any[] = [];
+        for (let i = 0; i < data.length; i++) {
+          date.push(data[i].date);
+
+          for (let j = 0; j < data[i].data.length; j++) {
+            if (seriesList.length < j + 1) {
+              seriesList.push({
+                name: data[i].data[j].name,
+                data: [data[i].data[j].value],
+                type: 'line',
+                smooth: true,
+              });
+            } else {
+              seriesList[j].data.push(data[i].data[j].value);
+            }
+            if (legendList.length == 0 || legendList.length < j + 1) {
+              legendList.push(data[i].data[j].name);
+            }
+          }
+        }
+        const option = {
+          legend: {
+            data: legendList,
+            orient: 'horizontal',
+            bottom: 0,
+            left: 60,
+          },
+          tooltip: {
+            trigger: 'axis',
+            formatter: (params: any) => {
+              const date = params[0].name;
+              const values = params
+                .map((param: any) => {
+                  const unit = data.find((d) => d.date === 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>`;
+            },
+          },
+          xAxis: {
+            type: 'category',
+            data: date,
+          },
+          yAxis: {
+            type: 'value',
+          },
+          // dataZoom: [
+          //   {
+          //     height: 10,
+          //     start: 0,
+          //     end: 100,
+          //     handleSize: '300%', // 设置滑块的大小
+          //     bottom: 15,
+          //   },
+          // ],
+          // toolbox: {
+          //   show: true,
+          //   feature: {
+          //     mark: { show: true },
+          //     saveAsImage: { show: true },
+          //   },
+          // },
+          series: seriesList,
+        };
+
+        chartInstance = echarts.init(graphGraphchart.value);
+        chartInstance.setOption(option);
+      });
+
+      // 下载图表
+      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 {
+        graphGraphchart,
+        downloadChart,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>