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

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    bordered
    :pagination="false"
    style="width: 99%; height: 75%; margin-left: 0.5%"
    :scroll="{ x: x, y: 450 }" />
  <a-pagination
    :total="total"
    :show-total="(total, range) => ` 共 ${total} 条`"
    show-size-changer
    show-quick-jumper
    @change="onChange"
    style="display: flex; justify-content: right; margin-top: 10px; margin-right: 30px" />
</template>

<script lang="ts">
  import { defineComponent, watch, ref, onMounted } from 'vue';
  import type { TableColumnType } from 'ant-design-vue';
  import { Pagination } from 'ant-design-vue';
  import { inject } from 'vue';

  // defineOptions({
  //   name: 'EnvironmentTable', // 与页面路由name一致缓存才可生效
  //   components: {
  //     'a-pagination': Pagination,
  //   },
  // });
  export default defineComponent({
    name: 'EnvironmentTable',
    components: {
      'a-pagination': Pagination,
    },
    setup() {
      const total = ref<number>();
      // 分页后的展示数据
      let data = ref<any[]>([]);

      const x = ref(2000);
      // 原始数据
      let dataList = ref<any[]>([]);
      let columns = ref<TableColumnType[]>([]);

      let index = ref(0);

      interface PageData {
        tableList: any[];
        tableColumns: any[];
        graphList: any[];
      }
      const pageData = inject<PageData>('pageData');

      if (!pageData) {
        throw new Error('pageData is not provided');
      }
      // 分页器
      const onChange = (pageNumber: number, size: number) => {
        const start = (pageNumber - 1) * size;
        const end = start + size;
        data.value = dataList.value.slice(start, end);
      };
      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          // data.value = pageData.tableList;

          // let columnA: any[] = [...column];
          // columnA.push(...pageData.tableColumns);
          // columns.value = columnA;
          // // pageData.graphList;
          // // 执行你的逻辑代码
          init();
        },
        { deep: true },
      );

      const getRowSpan = (dataIndex: string, record: any, data: any, dependents: string[] = []) => {
        let rowSpan = 1;
        for (let i = data.indexOf(record) + 1; i < data.length; i++) {
          let shouldMerge = true;
          for (const dependent of dependents) {
            if (data[i][dependent] !== record[dependent]) {
              shouldMerge = false;
              break;
            }
          }
          if (shouldMerge && data[i][dataIndex] === record[dataIndex]) {
            rowSpan++;
          } else {
            break;
          }
        }
        return rowSpan;
      };

      const column: TableColumnType[] = [
        {
          title: '序号',
          width: 50,
          align: 'center',
          customRender: ({ record, index }) => {
            // 自定义单元格内容，这里返回序号
            if (index == 0) {
              data.value[index].index = 1;
              // return 1;
            } else if (data.value[index - 1].deviceName == record.deviceName) {
              data.value[index].index = data.value[index - 1].index;
              // return data.value[index].index;
            } else {
              data.value[index].index = data.value[index - 1].index + 1;
            }
            return data.value[index].index;
          },
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('deviceName', record, data.value);
            if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
        // {
        //   title: '序号',
        //   customRender: (text: any) => {
        //     index.value += 1;
        //     return index.value;
        //   },
        // },
        {
          title: '设备名称',
          dataIndex: 'deviceName',
          width: 100,
          align: 'center',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('deviceName', record, data.value);
            if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
        {
          title: '设备点位',
          dataIndex: 'devicePositionName',
          width: 100,
          align: 'center',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('devicePositionName', record, data.value, ['deviceName']);
            if (
              rowIndex != 0 &&
              data.value[rowIndex - 1].deviceName == record.deviceName &&
              data.value[rowIndex - 1].devicePositionName == record.devicePositionName
            ) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
        {
          title: '计量单位',
          dataIndex: 'devicePositionUnit',
          width: 100,
          align: 'center',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('devicePositionUnit', record, data.value, [
              'deviceName',
              'devicePositionName',
            ]);
            if (
              rowIndex != 0 &&
              data.value[rowIndex - 1].deviceName == record.deviceName &&
              data.value[rowIndex - 1].devicePositionName == record.devicePositionName &&
              data.value[rowIndex - 1].devicePositionUnit == record.devicePositionUnit
            ) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
        {
          title: '日期',
          dataIndex: 'time',
          width: 100,
          align: 'center',
        },
      ];

      const init = () => {
        index.value = 0;
        dataList.value = pageData.tableList;

        let columnA: any[] = [...column];
        let columnB: any[] = [];
        pageData.tableColumns.forEach((item) => {
          columnB.push({ title: item, dataIndex: item, width: 60, align: 'center' });
        });
        x.value = 450 + pageData.tableColumns.length * 60;
        columnA.push(...columnB);
        columns.value = columnA;
        total.value = dataList.value.length;
        onChange(1, 10);
      };
      onMounted(() => {
        init();
      });
      return {
        data,
        column,
        columns,
        pageData,
        total,
        onChange,
        x,
      };
    },
  });
</script>

<style lang="less" scoped>
  ::v-deep .ant-table-container table > thead > tr:first-child th:last-child {
    display: none !important;
  }
</style>