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

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

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

const data = [
  {
    key: '1',
    name: 'AC_002（暖通电表）',
    position: 'A 相电压',
    unit: 'V',
    date: '2023-12-01',
    '1:00': '3626',
  },
  {
    key: '1',
    name: 'AC_002（暖通电表）',
    position: 'A 相电压',
    unit: 'V',
    date: '2023-12-01',
    '1:00': '3626',
  },
  {
    key: '2',
    name: 'AC_003（照明电表）',
    position: 'A 相电压',
    unit: 'V',
    date: '2023-12-01',
    '1:00': '3626',
  },
  {
    key: '2',
    name: 'AC_003（照明电表）',
    position: 'A 相电压',
    unit: 'V',
    date: '2023-12-01',
    '1:00': '3626',
  },
  {
    key: '3',
    name: 'AC_004（给排水电表）',
    position: 'A 相电压',
    unit: 'V',
    date: '2023-12-01',
    '1:00': '3626',
  },
];

export default defineComponent({
  name: 'EnvironmentTable',
  setup() {
    const getRowSpan = (dataIndex: string, record, data, 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 columns: TableColumnType[] = [
    {
        title: '序号',
        dataIndex: 'key',
        customCell: (record, rowIndex) => {
          const rowSpan = getRowSpan('name', record, data);
          if (rowIndex != 0 && data[rowIndex-1].key == record.key) {
            return {
              rowSpan: 0,
              colSpan: 0,
            }
          }
          return {
            rowSpan: rowSpan,
          };
        
        },
      },
      {
        title: '设备名称',
        dataIndex: 'name',
        customCell: (record, rowIndex) => {
          const rowSpan = getRowSpan('name', record, data);
          if (rowIndex != 0 && data[rowIndex-1].name == record.name) {
            return {
              rowSpan: 0,
              colSpan: 0,
            }
          }
          return {
            rowSpan: rowSpan,
          };
          
          // if (rowIndex === data.indexOf(record)) {
          //   return {
          //     rowSpan: rowSpan,
          //   };
          // }
          // return {
          //   rowSpan: 0,
          //   colSpan: 0,
          // };
        },
      },
      {
        title: '设备点位',
        dataIndex: 'position',
        customCell: (record, rowIndex) => {
          const rowSpan = getRowSpan('position', record, data, ['name']);
          if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position) {
            return {
              rowSpan: 0,
              colSpan: 0,
            }
          }
          return {
            rowSpan: rowSpan,
          };
          // if (rowIndex === data.indexOf(record)) {
          //   return {
          //     rowSpan: rowSpan,
          //   };
          // }
          // return {
          //   rowSpan: 0,
          //   colSpan: 0,
          // };
        },
      },
      {
        title: '计量单位',
        dataIndex: 'unit',
        customCell: (record, rowIndex) => {
          const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
          if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) {
            return {
              rowSpan: 0,
              colSpan: 0,
            }
          }
          return {
            rowSpan: rowSpan,
          };
          // if (rowIndex === data.indexOf(record)) {
          //   return {
          //     rowSpan: rowSpan,
          //   };
          // }
          // return {
          //   rowSpan: 0,
          //   colSpan: 0,
          // };
        },
      },
      {
        title: '日期',
        dataIndex: 'date',
      },
      {
        title: '1:00',
        dataIndex: '1:00',
      },
    ];

    return {
      data,
      columns,
    };
  },
});
</script>

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