gas-injection/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 - 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="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';

  defineProps<{
    scroll: { y: number };
  }>();

  defineEmits(['locate']);

  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 item = {};
        const start = {
          ...e.start.readData,
          strinstallpos: e.start.strinstallpos,
          readData: null,
        };
        const end = {
          ...e.end.readData,
          strinstallpos: e.end.strinstallpos,
          readData: null,
        };
        forEach(start, (val, key) => {
          item[`${key}_start`] = val;
        });
        forEach(end, (val, key) => {
          item[`${key}_end`] = val;
        });

        return item;
      });
    });
  }

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