监控中心各页面导出表格

2024-08-29 15:26:37 +08:00
parent ce97741978
commit 583347ba70
10 changed files with 304 additions and 109 deletions
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
+++ b/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();
+      }
    }
  };

--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
+++ b/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,
      };
    },
  });
--- a/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
+++ b/hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
@@ -15,17 +15,17 @@
      :tree-data="treeData1"
      @change="changeDeviceType" />

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

    <!-- <div class="fixed-bottom"> -->
    <div>
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue
+++ b/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,
      };
    },
  });
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
+++ b/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,
      };
    },
  });
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
+++ b/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 = () => {
-    if (activeKey.value == '1' && isGraph) {
-      if (graphRef.value) {
-        graphRef.value.downloadChart();
+  const download = () => {
+    if (activeKey.value == '1') {
+      if (isGraph.value) {
+        if (graphRef.value) {
+          graphRef.value.downloadChart();
+        }
+      } else {
+        if (tableRef.value) {
+          tableRef.value.export1();
+        }
      }
    } else {
-      if (analysisGraphRef.value) {
-        analysisGraphRef.value.downloadChart();
+      if (isGraph.value) {
+        if (analysisGraphRef.value) {
+          analysisGraphRef.value.downloadChart();
+        }
+      } else {
+        if (analysisTableRef.value) {
+          analysisTableRef.value.export1();
+        }
      }
    }
  };
--- a/hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
+++ b/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-tree
-        v-model:expandedKeys="expandedKeys"
-        v-model:selectedKeys="selectedKeys"
-        v-model:checkedKeys="checkedKeys"
-        :show-line="{ showLeafIcon: false }"
-        checkable
-        :height="600"
-        style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
-        :tree-data="treeData2">
-        <!-- <template #title="{ title }">
+    <!-- <a-spin :spinning="treeLoading"> -->
+    <a-tree
+      v-model:expandedKeys="expandedKeys"
+      v-model:selectedKeys="selectedKeys"
+      v-model:checkedKeys="checkedKeys"
+      :show-line="{ showLeafIcon: false }"
+      checkable
+      :height="500"
+      style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
+      :tree-data="treeData2">
+      <!-- <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-spin>
+    </a-tree>
+    <!-- </a-spin> -->

    <!-- <div class="fixed-bottom"> -->
    <div>
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
+++ b/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++) {
-      data.value[i].index = i + 1;
-    }
-    exportExcel(tableColumns.value, data.value, '平均数据导出', false);
+    exportExcel(tableColumns.value, data.value, '平均数据导出');
  };
  onMounted(async () => {
    // 获取频率
--- a/hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
+++ b/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 () => {
    // 获取频率