vent-template/src/views/vent/monitorManager/comment/GroupMonitorTable.vue

<template>
  <div class="vent-table">
    <a-radio-group v-model:value="selectRowIndex" @change="setSelectedRowKeys" style="width: 100%">
      <a-table :columns="columns" :pagination="false" :data-source="dataTableSource" bordered style="margin-top: 5px">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'isCheck'">
            <a-radio :value="record.deviceID" />
          </template>
          <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
            record.warnFlag == 0 ? '正常' : '报警'
          }}</a-tag>
          <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
            record.netStatus == 0 ? '断开' : '连接'
          }}</a-tag>
        </template>
      </a-table>
    </a-radio-group>
  </div>
</template>

<script lang="ts" setup>
  //ts语法
  import { defineExpose, toRaw, watch, ref, onMounted, onUnmounted } from 'vue';
  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
  const props = defineProps({
    columnsType: {
      type: String,
      required: true,
    },
    dataSource: {
      type: Array,
      required: true,
    },
    deviceType: {
      type: String,
    },
    designScope: {
      type: String,
    },
    title: {
      type: String,
    },
  });

  const emits = defineEmits(['selectRow']);
  const dataTableSource = ref<any[]>([]);
  const loading = ref(true);

  // 默认初始是第一行
  const selectRowIndex = ref(0);

  const setSelectedRowKeys = (target) => {
    console.log(target, Object.prototype.toString.call(target));

    if (Object.prototype.toString.call(target) === '[object String]') {
      selectRowIndex.value = target;
      emits('selectRow', target);
    } else if (Object.prototype.toString.call(target) === '[object Object]') {
      const data = target.target.value;
      selectRowIndex.value = data;
      emits('selectRow', data);
    }
  };

  /** 定义table Columns */
  function setColumns() {
    const isCheckColumn = {
      title: '',
      dataIndex: 'isCheck',
      width: 60,
      align: 'center',
      customCell: (_, index) => {
        if (index % 2 == 0) {
          return { rowSpan: 2 };
        } else {
          return { rowSpan: 0 };
        }
      },
    };
    const runDevice = {
      title: '运行风机',
      dataIndex: 'runDevice',
      width: 80,
      align: 'center',
    };
    let columns: any[] = getTableHeaderColumns(props.columnsType);
    const strinstallpos = columns.find((item) => {
      return item.dataIndex === 'strinstallpos' || item.dataIndex === 'strname';
    });
    if (strinstallpos) {
      strinstallpos.customCell = (_, index) => {
        if (index % 2 == 0) {
          return { rowSpan: 2 };
        } else {
          return { rowSpan: 0 };
        }
      };
    }
    columns.splice(1, 0, runDevice);
    columns = [isCheckColumn, ...columns];
    return columns;
  }
  const columns = setColumns();
  console.log('[ columns ] >', columns);

  watch(
    () => {
      return props.dataSource;
    },
    (newVal, oldVal) => {
      const list: unknown[] = [];
      newVal.forEach((item) => {
        const data: any = toRaw(item);
        const resultData1 = {};
        const resultData2 = {};
        // 将主风机、备风机的数据进行拆分
        columns.forEach((column) => {
          const columnKey = column.dataIndex;
          // data.f
          if (columnKey.startsWith('Fan')) {
            const key1 = columnKey.replace('Fan', 'Fan1');
            const key2 = columnKey.replace('Fan', 'Fan2');
            resultData1[columnKey] = data[key1];
            resultData2[columnKey] = data[key2];
          } else {
            resultData1[columnKey] = resultData2[columnKey] = data[columnKey];
          }
        });
        resultData1['deviceID'] = resultData2['deviceID'] = data['deviceID'];
        resultData1['runDevice'] = '主机';
        resultData2['runDevice'] = '备机';

        list.push(resultData1, resultData2);

        // const emptyData = new Object();
        // for (const key in data) {
        //   if (
        //     Object.prototype.hasOwnProperty.call(data, key) &&
        //     key !== 'deviceID' &&
        //     key !== 'Fan1StartStatus' &&
        //     key !== 'Fan2StartStatus' &&
        //     key !== 'strinstallpos' &&
        //     key !== 'readTime'
        //   ) {
        //     emptyData[key] = '-';
        //   } else {
        //     emptyData[key] = data[key];
        //   }
        // }
        // if (data.Fan1StartStatus == 1) {
        //   // 主风机启动
        //   data['runDevice'] = '主机';
        //   emptyData['runDevice'] = '备机';
        //   list.push(data, emptyData);
        // } else if (data.Fan2StartStatus == 1) {
        //   // 备风机启动
        //   data['runDevice'] = '备机';
        //   emptyData['runDevice'] = '主机';
        //   list.push(emptyData, data);
        // } else {
        //   list.push({ ...emptyData, runDevice: '主机' }, { ...emptyData, runDevice: '备机' });
        // }
      });

      if (oldVal.length < 1) {
        // 第一次
        setSelectedRowKeys(list[0]['deviceID']);
      }

      dataTableSource.value = list;
      loading.value = false;
    }
  );

  onMounted(() => {
    // 如果是https
    // 反之是websocket
  });

  onUnmounted(() => {});
</script>

<style scoped lang="less">
  :deep(.ant-table-body) {
    height: auto !important;
  }
  :deep(.jeecg-basic-table .ant-table-wrapper .ant-table-title) {
    min-height: 0;
  }
</style>