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

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

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 {