监控中心各页面导出表格

hx-ai-intelligent/src/util/ExcelUtil.js

@@ -10,10 +10,43 @@ import FileSaver from 'file-saver';
 // export default exportExcel;
 
 // 导出excel文件
-export function exportExcel (tableColumns,data,fillName,isMerge,start,end) {
+/**
+ * 
+ * @param {*} tableColumns 表头
+ * @param {*} data 数据
+ * @param {*} fillName 文件名
+ * @param {*} isMerge 是否合并单元格
+ * @param {*} firstKey 第一个字段的key，用来判断序号列是否合并
+ * @param {*} start 合并单元格开始列
+ * @param {*} end 合并单元格结束列
+ * @returns 
+ */
+export function exportExcel (tableColumns,data,fillName,isMerge = false, firstKey = '',start = 0, end = 0) {
+  debugger
   if (!data || data.length == 0) {
     return;
   }
+  if (isMerge) {
+    // 需要合并序号
+    for (let i = 0; i < data.length; i++) {
+      // 自定义单元格内容，这里返回序号
+      if (i == 0) {
+        data[i].index = 1;
+        // return 1;
+      } else if (data[i - 1][firstKey] == data[i][firstKey]) {
+        data[i].index = data[i - 1].index;
+        // return data.value[index].index;
+      } else {
+        data[i].index = data[i - 1].index + 1;
+      }
+    }
+  } else {
+    // 不需要合并序号
+    for (let i = 0; i < data.length; i++) {
+      data[i].index = i + 1;
+    }
+  }
+
   // 创建工作簿
   const workbook = new ExcelJS.Workbook();
   // 添加工作表，名为sheet1
@@ -33,27 +66,22 @@ export function exportExcel (tableColumns,data,fillName,isMerge,start,end) {
       columns.push({
         header: tableColumns[i].title,
         key: tableColumns[i].dataIndex,
-        width: tableColumns[i].width / 5,
+        width: tableColumns[i].width ? tableColumns[i].width / 5 : 20,
       });
     }
   }
   //传入的数据
   const list = data;
 
+  //格式化数据
   const datas = formatJson(filterVal, list);
 
-  // // 导出数据列表
-  // const data = [
-  //   { 姓名: '张三', 年龄: 18, 身高: 175, 体重: 74 },
-  //   { 姓名: '李四', 年龄: 22, 身高: 177, 体重: 84 },
-  //   { 姓名: '王五', 年龄: 53, 身高: 155, 体重: 64 },
-  // ];
   // 获取表头所有键
   // const headers = Object.keys(data[0]);
 
+  // 获取表头
   sheet1.columns = columns;
-  // // 将标题写入第一行
+
-  // sheet1.addRow(tHeader);
   // 将数据写入工作表
   datas.forEach((row) => {
     // const values = Object.values(row);
@@ -62,80 +90,30 @@ export function exportExcel (tableColumns,data,fillName,isMerge,start,end) {
 
   // 判断是否合并单元格
   if (isMerge) {
-    debugger
+    // 遍历列，从 start 列到 end 列
-    // 遍历列，从第一列到 end 列
     for (let col = start; col <= end; col++) {
-      // let mergeStartRow = 2; // 每次新列开始时，重置起始行
       for (let row = 3; row <= datas.length + 1; row++) {
         const currentCellValue = sheet1.getCell(row, col).value;
         const previousCellValue = sheet1.getCell(row - 1, col).value;
 
-        let currentCellValue_1 = ''
+        // 从第二列开始就要看前一列是否已经合并
-        let previousCellValue_1 = ''
+        let isMerged = true
         if (col > 1) {
-          currentCellValue_1 = sheet1.getCell(row, col-1).value;
+          isMerged = ifMerged(sheet1,row - 1, col-1,row, col-1)
-          previousCellValue_1 = sheet1.getCell(row - 1, col-1).value;
         }
   
-        if (currentCellValue === previousCellValue && currentCellValue_1 === previousCellValue_1) {
+        if (currentCellValue === previousCellValue && isMerged) {
-          // 当前列有变化，检查是否需要合并前面的单元格
+          // 检查是上边需要合并的单元格是否已经合并
-          // if (mergeStartRow < row - 1) {
+            const mergeInfo = getMergeInfo(sheet1, row - 1, col)
-            // 只有在前面的行有超过1个时才合并
+            if ( mergeInfo.isMerged ) {
-            sheet1.mergeCells(row, col, row - 1, col);
+              sheet1.unMergeCells( mergeInfo.startRow, col, row - 1, col);
-          // }
+              sheet1.mergeCells(mergeInfo.startRow, col, row, col);
-          // 更新起始行
+            } else {
-          // mergeStartRow = row;
+              sheet1.mergeCells(row, col, row - 1, col);
+            }
         }
-  
-        // // 如果是最后一行，检查是否需要合并
-        // if (row === datas.length + 1 && mergeStartRow < row) {
-        //   sheet1.mergeCells(mergeStartRow, col, row, col);
-        // }
       }
     }
-      // 从第一列开始逐列检查，前提是前面的列已合并
-    // for (let col = start; col <= end; col++) {
-    //   let startRow = 2; // 从数据开始的第二行开始检查
-    //   let endRow = 2;
-
-    //   while (endRow <= sheet1.rowCount) {
-    //     let currentValue = sheet1.getCell(endRow, col).value;
-    //     let prevValue = sheet1.getCell(endRow - 1, col).value;
-
-    //     // 如果当前值等于前一个值，且前面的列是合并的，则继续合并
-    //     if (currentValue === prevValue) {
-    //       let mergeAllowed = true;
-    //       for (let prevCol = 1; prevCol < col; prevCol++) {
-    //         let range = sheet1.getCell(endRow - 1, prevCol).master;
-    //         if (range && range.row !== startRow) {
-    //           mergeAllowed = false;
-    //           break;
-    //         }
-    //       }
-
-    //       if (mergeAllowed) {
-    //         endRow++;
-    //       } else {
-    //         // 不允许合并，直接移动起始行到当前行
-    //         startRow = endRow;
-    //         endRow++;
-    //       }
-    //     } else {
-    //       // 当前值不等于前一个值或合并不允许，进行合并操作
-    //       if (startRow < endRow - 1) {
-    //         sheet1.mergeCells(startRow, col, endRow - 1, col);
-    //       }
-    //       startRow = endRow;
-    //       endRow++;
-    //     }
-    //   }
-
-    //   // 处理最后一段相同的单元格
-    //   if (startRow < endRow - 1) {
-    //     sheet1.mergeCells(startRow, col, endRow - 1, col);
-    //   }
-    // }
-
   }
     
 
@@ -208,3 +186,43 @@ function formatJson (filterVal, jsonData)  {
   return jsonData.map((v) => filterVal.map((j) => v[j]));
 };
 
+/**
+ * 获取给定行和列的单元格是否为合并单元格，并返回合并起始行
+ * @param {Worksheet} worksheet - ExcelJS 工作表对象
+ * @param {number} row - 单元格的行号 (从 1 开始)
+ * @param {number} col - 单元格的列号 (从 1 开始)
+ * @returns {Object} - 返回一个对象，包含 isMerged 和 startRow 属性
+ */
+function getMergeInfo(worksheet, row, col) {
+  // 遍历所有的合并范围
+  for (const mergeRange in worksheet._merges) {
+    if (worksheet._merges.hasOwnProperty(mergeRange)) {
+      const { top, left, bottom, right } = worksheet._merges[mergeRange];
+
+      // 检查行列是否在当前合并范围内
+      if (row >= top && row <= bottom && col >= left && col <= right) {
+        return { isMerged: true, startRow: top }; // 找到合并范围，返回合并信息
+      }
+    }
+  }
+  return { isMerged: false, startRow: null }; // 单元格不在任何合并范围内
+}
+
+
+// 函数：检查两个单元格是否属于同一个合并区域
+function ifMerged(worksheet, row1, col1, row2, col2) {
+  const merges = worksheet._merges; // 获取所有的合并区域
+  for (let mergeAddress in merges) {
+      const mergeRange = merges[mergeAddress];
+      const { top, left, bottom, right } = mergeRange;
+
+      const isCell1InRange = (row1 >= top && row1 <= bottom && col1 >= left && col1 <= right);
+      const isCell2InRange = (row2 >= top && row2 <= bottom && col2 >= left && col2 <= right);
+      
+      if (isCell1InRange && isCell2InRange) {
+          return true;
+      }
+  }
+  return false;
+}
+

hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue

@@ -52,6 +52,10 @@
       if (graphRef.value) {
         graphRef.value.downloadChart();
       }
+    } else {
+      if (tableRef.value) {
+        tableRef.value.export1();
+      }
     }
   };
 

hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script lang="ts">
+  import { exportExcel } from '/@/util/ExcelUtil.js';
   import { defineComponent, watch, ref, onMounted } from 'vue';
   import type { TableColumnType } from 'ant-design-vue';
   import { Pagination } from 'ant-design-vue';
@@ -245,6 +246,9 @@
         columns.value = columnA;
         total.value = dataList.value.length;
         onChange(1, 10);
+      }; // 导出excel文件
+      const export1 = () => {
+        exportExcel(columns.value, dataList.value, '历史数据导出', true, 'deviceName', 1, 4);
       };
       onMounted(() => {
         init();
@@ -257,6 +261,7 @@
         total,
         onChange,
         x,
+        export1,
       };
     },
   });

hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue

@@ -15,17 +15,17 @@
       :tree-data="treeData1"
       @change="changeDeviceType" />
 
-    <a-spin :spinning="treeLoading">
+    <!-- <a-spin :spinning="treeLoading"> -->
-      <a-tree
+    <a-tree
-        v-model:expandedKeys="expandedKeys"
+      v-model:expandedKeys="expandedKeys"
-        v-model:selectedKeys="selectedKeys"
+      v-model:selectedKeys="selectedKeys"
-        v-model:checkedKeys="checkedKeys"
+      v-model:checkedKeys="checkedKeys"
-        :show-line="{ showLeafIcon: false }"
+      :show-line="{ showLeafIcon: false }"
-        checkable
+      checkable
-        :height="560"
+      :height="560"
-        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
+      style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
-        :tree-data="treeData2" />
+      :tree-data="treeData2" />
-    </a-spin>
+    <!-- </a-spin> -->
 
     <!-- <div class="fixed-bottom"> -->
     <div>

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,
       };
     },
   });

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

@@ -16,6 +16,7 @@
 </template>
 
 <script lang="ts">
+  import { exportExcel } from '/@/util/ExcelUtil.js';
   import { defineComponent, watch, inject, ref, onMounted } from 'vue';
   import type { TableColumnType } from 'ant-design-vue';
   import { Pagination } from 'ant-design-vue';
@@ -152,6 +153,9 @@
         columns.value = columnA;
         total.value = dataList.value.length;
         onChange(1, 10);
+      }; // 导出excel文件
+      const export1 = () => {
+        exportExcel(columns.value, dataList.value, '图表数据导出');
       };
       onMounted(() => {
         init();
@@ -167,6 +171,7 @@
         columns,
         total,
         onChange,
+        export1,
       };
     },
   });

hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue

@@ -28,7 +28,7 @@
               </template> -->
             </a-tabs>
             <div class="button">
-              <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
+              <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="download" />
               <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
             </div>
           </div>
@@ -74,14 +74,26 @@
     name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
   });
 
-  const downloadChart = () => {
+  const download = () => {
-    if (activeKey.value == '1' && isGraph) {
+    if (activeKey.value == '1') {
-      if (graphRef.value) {
+      if (isGraph.value) {
-        graphRef.value.downloadChart();
+        if (graphRef.value) {
+          graphRef.value.downloadChart();
+        }
+      } else {
+        if (tableRef.value) {
+          tableRef.value.export1();
+        }
       }
     } else {
-      if (analysisGraphRef.value) {
+      if (isGraph.value) {
-        analysisGraphRef.value.downloadChart();
+        if (analysisGraphRef.value) {
+          analysisGraphRef.value.downloadChart();
+        }
+      } else {
+        if (analysisTableRef.value) {
+          analysisTableRef.value.export1();
+        }
       }
     }
   };

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

@@ -35,17 +35,17 @@
       v-if="mode == '0'"
       @change="changeMode" />
     <a-input v-model:value="pointName" placeholder="请输入节点名称" v-else @change="changeMode" />
-    <a-spin :spinning="treeLoading">
+    <!-- <a-spin :spinning="treeLoading"> -->
-      <a-tree
+    <a-tree
-        v-model:expandedKeys="expandedKeys"
+      v-model:expandedKeys="expandedKeys"
-        v-model:selectedKeys="selectedKeys"
+      v-model:selectedKeys="selectedKeys"
-        v-model:checkedKeys="checkedKeys"
+      v-model:checkedKeys="checkedKeys"
-        :show-line="{ showLeafIcon: false }"
+      :show-line="{ showLeafIcon: false }"
-        checkable
+      checkable
-        :height="600"
+      :height="500"
-        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
+      style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
-        :tree-data="treeData2">
+      :tree-data="treeData2">
-        <!-- <template #title="{ title }">
+      <!-- <template #title="{ title }">
           <span v-if="title.indexOf(mode == '0' ? deviceName : pointName) > -1">
             {{ title.substr(0, title.indexOf(mode == '0' ? deviceName : pointName)) }}
             <span style="color: #f50">{{ mode == '0' ? deviceName : pointName }}</span>
@@ -58,8 +58,8 @@
           </span>
           <span v-else>{{ title }}</span>
         </template> -->
-      </a-tree>
+    </a-tree>
-    </a-spin>
+    <!-- </a-spin> -->
 
     <!-- <div class="fixed-bottom"> -->
     <div>

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

@@ -206,10 +206,7 @@
   };
   // 导出excel文件
   const export1 = () => {
-    for (let i = 0; i < data.value.length; i++) {
+    exportExcel(tableColumns.value, data.value, '平均数据导出');
-      data.value[i].index = i + 1;
-    }
-    exportExcel(tableColumns.value, data.value, '平均数据导出', false);
   };
   onMounted(async () => {
     // 获取频率

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

@@ -288,6 +288,10 @@
   // 获取表格数据
   const getTableList = () => {
     loading.value = true;
+    tableColumns.value = [];
+    data.value = [];
+    total.value = 0;
+    pageData.value = [];
     let environmentType = '';
     for (let i = 0; i < typeList.value.length; i++) {
       if (typeList.value[i].value == typeValue.value) {
@@ -353,7 +357,7 @@
   };
   // 导出excel文件
   const export1 = () => {
-    exportExcel(tableColumns.value, data.value, '历史数据导出', true, 1, 3);
+    exportExcel(tableColumns.value, data.value, '历史数据导出', true, 'location', 1, 3);
   };
   onMounted(async () => {
     // 获取频率