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

<template>
  <MonitorTable
    ref="monitorTable"
    :columns="gasPipeColumns"
    :dataSource="dataSource"
    design-scope="device_monitor"
    :isShowActionColumn="true"
    :isShowSelect="false"
    title="设备监测"
    :scroll="{ y: scroll.y - 60 }"
  >
    <template #action="{ record }">
      <TableAction
        :actions="[
          {
            ifShow: () => showDetailButton,
            label: '详情',
            onClick: () => $emit('detail', 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>
      <a-tag v-if="column.dataIndex === 'isBlock'" :color="record.isBlock == 0 ? 'green' : record.isBlock == 1 ? '#FF5812' : 'gray'">
        {{ record.isBlock == 0 ? '否' : record.isBlock == 1 ? '是' : '未监测' }}</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>
      <span v-if="column.dataIndex === 'isLeakage'" :color="record.isLeakage == '0' ? 'green' : '#f00'">
        {{ record.isLeakage == '0' ? '未泄露' : `${record.ld_x}m处泄露` }}
      </span>
    </template>
  </MonitorTable>
  <!-- <DeviceBaseInfo @register="registerModal" device-type="gaspipe" /> -->
</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 { onMounted } from 'vue';
  import { getGasDeviceInfo } from './comment.api';
  import { gasPipeColumns } from './comment.data';
  import { ref } from 'vue';
  import { forEach, get } from 'lodash-es';

  withDefaults(
    defineProps<{
      scroll: { y: number };
      showDetailButton?: boolean;
    }>(),
    {
      showDetailButton: false,
    }
  );

  defineEmits(['locate', 'detail']);

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

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

  const dataSource = ref<any[]>([]);

  function getDataSource() {
    getGasDeviceInfo({ devicetype: 'gasmonitor', pagetype: 'normal' }).then((res) => {
      dataSource.value = get(res, 'msgTxt[0].datalist', []).map((e) => {
        const start = {
          ...e.start.readData,
          ...e.start,
          readData: null,
        };
        const end = {
          ...e.end.readData,
          ...e.end,
          readData: null,
        };
        const gasGlFaultDia = JSON.parse(e.gasGlFaultDia);

        forEach(end, (val, key) => {
          end[`${key}_end`] = val;
          delete end[key];
        });

        return {
          ...start,
          ...end,
          ...gasGlFaultDia,
        };
      });
    });
  }

  onMounted(() => {
    getDataSource();
  });
</script>