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

<template>
  <a-table
    row-key="id"
    :columns="columns"
    :data-source="data"
    bordered
    :pagination="false"
    :row-selection="rowSelection"
    style="width: 99%; margin-left: 0.5%">
    <template #bodyCell="{ column, record }">
      <template v-if="column.title === '操作'">
        <a-button type="link" @click="setStandard(record)" v-if="record.id != selectedKey[0]"
          >设为目标值</a-button
        >
      </template>
    </template>
  </a-table>
</template>

<script lang="ts">
  import ExcelJS from 'exceljs';
  import FileSaver from 'file-saver';
  import { defineComponent, ref, inject, watch, onMounted } from 'vue';

  export default defineComponent({
    name: 'AnalysisTable',
    setup() {
      const selectedKey = ref([]);
      const rowSelection = {
        type: 'radio',

        selectedRowKeys: selectedKey,
        // onChange: (selectedRowKeys: string[]) => {
        //   selectedKey.value = selectedRowKeys;
        //   debugger;
        // },
      };
      const columns = [
        {
          title: '设备/节点',
          dataIndex: 'name',
          align: 'center',
        },
        {
          title: '统计值',
          dataIndex: 'value',
          align: 'center',
        },
        {
          title: '同比',
          align: 'center',
          children: [
            {
              title: '△差值',
              dataIndex: 'yoyDiff',
              align: 'center',
            },
            {
              title: '增长率',
              dataIndex: 'yoyRate',
              align: 'center',
            },
          ],
        },
        {
          title: '环比',
          align: 'center',
          children: [
            {
              title: '△差值',
              dataIndex: 'momDiff',
              align: 'center',
            },
            {
              title: '增长率',
              dataIndex: 'momRate',
              align: 'center',
            },
          ],
        },
        {
          title: '纵向对比',
          align: 'center',
          children: [
            {
              title: '△差值',
              dataIndex: 'zongxiangDiff',
              align: 'center',
            },
            {
              title: '增长率',
              dataIndex: 'zongxiangRate',
              align: 'center',
            },
          ],
        },

        {
          title: '操作',
          align: 'center',
          // dataIndex: 'date',
        },
      ];
      let data = ref<any[]>([]);

      interface PageData {
        // 图表 表格数据
        graphTableList: any[];
        // 图表 表格表头
        graphTableColumns: any[];
        // 图表 图表数据
        graphGraphList: any[];
        // 分析 表格数据
        analysisTableList: any[];
        // 分析 图表数据
        analysisGraphList: any[];
      }
      const pageData = inject<PageData>('pageData');

      if (!pageData) {
        throw new Error('pageData is not provided');
      }
      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          // 深度拷贝
          data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
          if (data.value.length != 0) {
            setStandard(data.value[0]);
          }
        },
        { 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));
        // selectedKey.value = [data.value[0]];
        if (data.value.length != 0) {
          setStandard(data.value[0]);
        }
      });
      const setStandard = (record: any) => {
        selectedKey.value = [record.id];
        data.value.forEach((item) => {
          // id: 'HLlmTZp8_0805_0001';
          // momDiff: 38.28; 环比差值
          // momRate: '-171.58%'; 环比率
          // momValue: -22.31; 环比值
          // name: '总电表';
          // value: 10.56; 值
          // yoyDiff: 38.28; 同比差值
          // yoyRate: '-138.10%'; 同比率
          // yoyValue: -27.72; 同比值
          if (item.id == record.id) {
            item.zongxiangDiff = '——';
            item.zongxiangRate = '——';
          } else {
            item.zongxiangDiff = (item.value - record.value).toFixed(2);
            item.zongxiangRate = ((item.zongxiangDiff / record.value) * 100).toFixed(2) + '%';
          }
        });
      };
      return {
        data,
        columns,
        rowSelection,
        selectedKey,
        setStandard,
        export1,
      };
    },
  });
</script>

<style lang="less" scoped>
  :deep(
      .ant-table-tbody > tr.ant-table-row:hover > td,
      .ant-table-tbody > tr > td.ant-table-cell-row-hover
    ) {
    background: #f4f8ff !important;
  }
</style>