SaaS-lib/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index copy.vue

<template>
  <a-table :columns="columns" :data-source="data" bordered />
</template>

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

  // let data: any[] = [];

  export default defineComponent({
    name: 'EnvironmentTable',
    setup() {
      let data = ref<any[]>([]);
      let columns = ref<TableColumnType[]>([]);

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

      if (!pageData) {
        throw new Error('pageData is not provided');
      }
      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          data.value = pageData.tableList;

          let columnA: any[] = [...column];
          columnA.push(...pageData.tableColumns);
          columns.value = columnA;
          // pageData.graphList;
          // 执行你的逻辑代码
        },
        { 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: '序号',
          dataIndex: 'key',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('name', record, data.value);
            if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
        {
          title: '设备名称',
          dataIndex: 'name',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('name', record, data.value);
            if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
        {
          title: '设备点位',
          dataIndex: 'position',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('position', record, data.value, ['name']);
            if (
              rowIndex != 0 &&
              data.value[rowIndex - 1].name == record.name &&
              data.value[rowIndex - 1].position == record.position
            ) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
        {
          title: '计量单位',
          dataIndex: 'unit',
          customCell: (record, rowIndex) => {
            if (rowIndex == undefined) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
            if (
              rowIndex != 0 &&
              data.value[rowIndex - 1].name == record.name &&
              data.value[rowIndex - 1].position == record.position &&
              data.value[rowIndex - 1].unit == record.unit
            ) {
              return {
                rowSpan: 0,
                colSpan: 0,
              };
            }
            return {
              rowSpan: rowSpan,
            };
          },
        },
      ];

      onMounted(() => {
        data.value = pageData.tableList;

        let columnA: any[] = [...column];
        columnA.push(...pageData.tableColumns);
        columns.value = columnA;
      });
      return {
        data,
        column,
        columns,
        pageData,
      };
    },
  });
</script>

<style lang="less" scoped></style>