监控中心各页面导出表格

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

@@ -18,6 +18,8 @@
 </template>
 
 <script lang="ts">
+  import ExcelJS from 'exceljs';
+  import FileSaver from 'file-saver';
   import { defineComponent, ref, inject, watch, onMounted } from 'vue';
 
   export default defineComponent({
@@ -130,6 +132,153 @@
         },
         { deep: true },
       );
+
+      // 导出excel文件
+      // 因为有多级表头，特殊处理，没有用公共方法
+      const export1 = () => {
+        if (!data.value || data.value.length == 0) {
+          return;
+        }
+
+        // 不需要合并序号
+        for (let i = 0; i < data.value.length; i++) {
+          data.value[i].index = i + 1;
+        }
+
+        // 创建工作簿
+        const workbook = new ExcelJS.Workbook();
+        // 添加工作表，名为sheet1
+        const sheet1 = workbook.addWorksheet('sheet1');
+
+        // 字段名
+        let filterVal = [
+          'name',
+          'value',
+          'yoyDiff',
+          'yoyRate',
+          'momDiff',
+          'momRate',
+          'zongxiangDiff',
+          'zongxiangRate',
+        ];
+        // 表格columns
+        // 添加多行表头
+        sheet1.addRows([
+          ['设备/节点', '统计值', '同比', '', '环比', '', '纵向对比', ''],
+          ['', '', '△差值', '增长率', '△差值', '增长率', '△差值', '增长率'],
+        ]);
+
+        // 合并单元格来实现多行表头
+        sheet1.mergeCells('A1:A2'); // 合并 '设备/节点' 单元格
+        sheet1.mergeCells('B1:B2'); // 合并 '统计值' 单元格
+        sheet1.mergeCells('C1:D1'); // 合并 '同比' 单元格
+        sheet1.mergeCells('E1:F1'); // 合并 '环比' 单元格
+        sheet1.mergeCells('G1:H1'); // 合并 '纵向对比' 单元格
+        //传入的数据
+        const list = data.value;
+
+        //格式化数据
+        const datas = formatJson(filterVal, list);
+
+        // 将数据写入工作表
+        datas.forEach((row: any) => {
+          // const values = Object.values(row);
+          sheet1.addRow(row);
+        });
+
+        let column = sheet1.columns;
+        for (let i = 0; i < column.length; i++) {
+          column[i].width = 20;
+        }
+
+        // 修改所有单元格样式
+        // 遍历每一行
+        sheet1.eachRow((row) => {
+          // 遍历每个单元格
+          row.eachCell((cell) => {
+            // 设置边框样式
+            cell.border = {
+              top: { style: 'thin' },
+              left: { style: 'thin' },
+              bottom: { style: 'thin' },
+              right: { style: 'thin' },
+            };
+            // 设置居中对齐
+            cell.alignment = {
+              vertical: 'middle',
+              horizontal: 'center',
+            };
+          });
+        });
+        // 获取标题行数据
+        const titleCell1 = sheet1.getRow(1);
+        // 设置行高为30
+        titleCell1.height = 30;
+        // 设置标题行单元格样式
+        titleCell1.eachCell((cell) => {
+          // 设置标题行背景颜色为黄色
+          cell.fill = {
+            type: 'pattern',
+            pattern: 'solid',
+            fgColor: { argb: 'FFFFFF' },
+          };
+          // 设置标题行字体
+          cell.font = {
+            // color: { argb: 'FF0000' }, //颜色为红色
+            bold: true, // 字体粗体
+            size: 18, // 设置字体大小为18
+          };
+        });
+        const titleCell2 = sheet1.getRow(2);
+        // 设置行高为30
+        titleCell2.height = 30;
+        // 设置标题行单元格样式
+        titleCell2.eachCell((cell) => {
+          // 设置标题行背景颜色为黄色
+          cell.fill = {
+            type: 'pattern',
+            pattern: 'solid',
+            fgColor: { argb: 'FFFFFF' },
+          };
+          // 设置标题行字体
+          cell.font = {
+            // color: { argb: 'FF0000' }, //颜色为红色
+            bold: true, // 字体粗体
+            size: 18, // 设置字体大小为18
+          };
+        });
+        // 获取第二行到最后一行的内容数据
+        const bodyRows = sheet1.getRows(3, sheet1.rowCount);
+        if (bodyRows) {
+          // 处理内容行的数据
+          bodyRows.forEach((bodyRow) => {
+            // 设置行高为20
+            bodyRow.height = 20;
+            bodyRow.eachCell((cell) => {
+              cell.font = {
+                size: 16, // 设置内容行字体大小为16
+              };
+            });
+          });
+        }
+
+        // 导出表格文件
+        workbook.xlsx
+          .writeBuffer()
+          .then((buffer) => {
+            let file = new Blob([buffer], { type: 'application/octet-stream' });
+            FileSaver.saveAs(file, '分析数据导出.xlsx');
+          })
+          .catch((error) => console.log('Error writing excel export', error));
+      };
+      /**
+       *  格式化表格数据
+       *  @filterVal  格式头
+       *  @jsonData  用来格式化的表格数据
+       */
+      function formatJson(filterVal: any, jsonData: any) {
+        return jsonData.map((v: any) => filterVal.map((j: any) => v[j]));
+      }
       onMounted(() => {
         // 深度拷贝
         data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
@@ -165,6 +314,7 @@
         rowSelection,
         selectedKey,
         setStandard,
+        export1,
       };
     },
   });