1.能耗监测 - 分析 下载图表

2.环境监测 - 综合数据 前台页面

hx-ai-intelligent/src/router/monitor.ts

@@ -5,25 +5,25 @@ const equipment = {
   meta: { title: '监控中心', icon: 'jiankongzhongxin', index: 1 },
   redirect: { name: 'EnvironmentMonitor' },
   children: [
-    // {
-    //   path: 'environmentMonitor',
-    //   name: 'EnvironmentMonitor',
-    //   meta: { title: '环境监测', hideChildren: true, icon: 'huanjingjiance' },
-    //   component: Base,
-    //   redirect: { name: 'EnvironmentMonitorIndex' },
-    //   children: [
-    //     {
-    //       path: 'index',
-    //       name: 'EnvironmentMonitorIndex',
-    //       component: () => import('/@/view/monitor/environmentMonitor/index.vue'),
-    //       meta: {
-    //         title: '环境监测',
-    //         keepAlive: true,
-    //         // backApi: [],
-    //       },
-    //     },
-    //   ],
-    // },
+    {
+      path: 'environmentMonitor',
+      name: 'EnvironmentMonitor',
+      meta: { title: '环境监测', hideChildren: true, icon: 'huanjingjiance' },
+      component: Base,
+      redirect: { name: 'EnvironmentMonitorIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'EnvironmentMonitorIndex',
+          component: () => import('/@/view/monitor/environmentMonitor/index.vue'),
+          meta: {
+            title: '环境监测',
+            keepAlive: true,
+            // backApi: [],
+          },
+        },
+      ],
+    },
     {
       path: 'deviceMonitor',
       name: 'DeviceMonitor',

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

@@ -48,6 +48,8 @@
 <script lang="ts">
   import { defineComponent, onMounted, ref, inject, watch } from 'vue';
   import * as echarts from 'echarts';
+  import JSZip from 'jszip';
+  import { saveAs } from 'file-saver';
 
   export default defineComponent({
     name: 'AnalysisGraph',
@@ -413,17 +415,45 @@
       });
 
       // 下载图表
-      const downloadChart = () => {
-        if (chartInstance) {
-          const base64 = chartInstance.getDataURL({
-            type: 'png',
-            backgroundColor: '#fff',
+      const downloadChart = async () => {
+        // if (chartInstance) {
+        //   const base64 = chartInstance.getDataURL({
+        //     type: 'png',
+        //     backgroundColor: '#fff',
+        //   });
+        //   const link = document.createElement('a');
+        //   link.href = base64;
+        //   link.download = 'chart.png';
+        //   link.click();
+        // }
+        const zip = new JSZip();
+        const chartInstances = [chartInstance, chartRight1, chartRight2];
+        const imagePromises = chartInstances.map((chart: any, index) => {
+          return new Promise((resolve) => {
+            const base64 = chart.getDataURL({
+              type: 'png',
+              backgroundColor: '#fff',
+            });
+            // 将 Base64 转换为二进制
+            const binary = atob(base64.split(',')[1]);
+            const array = [];
+            for (let i = 0; i < binary.length; i++) {
+              array.push(binary.charCodeAt(i));
+            }
+            const uint8Array = new Uint8Array(array);
+            resolve({ name: `chart${index + 1}.png`, data: uint8Array });
           });
-          const link = document.createElement('a');
-          link.href = base64;
-          link.download = 'chart.png';
-          link.click();
-        }
+        });
+
+        const images = await Promise.all(imagePromises);
+
+        images.forEach((image: any) => {
+          zip.file(image.name, image.data);
+        });
+
+        zip.generateAsync({ type: 'blob' }).then((content) => {
+          saveAs(content, 'charts.zip'); // 使用 FileSaver.js 保存 ZIP 文件
+        });
       };
 
       return {

hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <a-tabs v-model:activeKey="activeKey" style="height: 5%">
+    <a-tab-pane key="1" tab="综合数据" />
+    <a-tab-pane key="2" tab="历史数据" force-render>Content of Tab Pane 2</a-tab-pane>
+    <a-tab-pane key="3" tab="平均数据">Content of Tab Pane 3</a-tab-pane>
+  </a-tabs>
+  <!-- <ns-view-list-table v-bind="tableConfig" v-if="activeKey == '1'" /> -->
+
+  <aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { tableConfig } from './config';
+  import aggregateData from './aggregateData/index.vue';
+
+  const aggregateDataRef = ref();
+
+  var activeKey = ref('1');
+
+  defineOptions({
+    name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
+  });
+</script>
+<style lang="less" scoped></style>