gasInjection-project/src/views/vent/monitorManager/comment/DustingTable.vue

<template>
  <MonitorTable
    ref="monitorTable"
    :columnsType="`${deviceType}_monitor`"
    :dataSource="dataSource"
    design-scope="device_monitor"
    :isShowActionColumn="true"
    :isShowSelect="false"
    title="设备监测"
    :scroll="{ y: scroll.y - 30 }"
  >
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            label: '报表录入',
            onClick: (e) => deviceEdit(e, 'reportInfo', record),
          },
          {
            label: '定位',
            onClick: () => $emit('locate', record),
          },
        ]"
      />
    </template>
    <template #filterCell="{ column, record }">
      <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
        {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}
      </a-tag>
      <template v-else-if="column.dataIndex === 'warnLevel'">
        <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
        <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
        <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
        <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
        <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
        <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
        <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
        <a-tag v-else color="green">正常</a-tag>
      </template>
      <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">
        {{ record.netStatus == '0' ? '断开' : '连接' }}
      </a-tag>
    </template>
  </MonitorTable>
  <DeviceBaseInfo @register="registerModal" :device-type="deviceType" />
</template>

<script lang="ts" setup>
  import MonitorTable from './MonitorTable.vue';
  import DeviceBaseInfo from './components/DeviceBaseInfo.vue';
  import { TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  //   import { ref } from 'vue';

  defineProps<{
    deviceType: string;
    dataSource: any[];
    scroll: { y: number };
  }>();

  defineEmits(['locate']);

  const [registerModal, { openModal }] = useModal();

  function deviceEdit(e: Event, type: string, record) {
    e.stopPropagation();
    openModal(true, {
      type,
      deviceId: record['deviceID'],
    });
  }
</script>