gas-injection/src/views/vent/monitorManager/dedustMonitor/components/DedustHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div style="position: absolute; height: 40px; width: 100%; top: calc(50%-20px); font-size: 20px; color: red; text-align: center">
        {{ deviceInfo.warnDes }}
      </div>
      <div class="lr left-box vent-margin-t-10">
        <ventBox1>
          <template #title>
            <div>除尘机状态</div>
          </template>
          <template #container>
            <List icon="warning-title" type="status-light" :labelWidth="130" layout="double-columns" title="故障状态" v-bind="dedustStatusPropA" />
            <List icon="warning-title" type="status-light" :labelWidth="300" title="报警状态" v-bind="dedustStatusPropB" />
            <List icon="warning-title" type="status-light" :labelWidth="280" title="激活状态" v-bind="dedustStatusPropC" />
          </template>
        </ventBox1>
      </div>
      <div class="lr right-box">
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>监测参数</div>
          </template>
          <template #container>
            <List :labelWidth="200" v-bind="dedustMonitorProp" />
          </template>
        </ventBox1>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, computed } from 'vue';
  import { list } from '../dedust.api';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  // import { SvgIcon } from '/@/components/Icon';
  import {
    dedustMonitorConfig,
    dedustStatusConfigA,
    dedustStatusConfigB,
    dedustStatusConfigC,
    statusConfigA,
    statusConfigB,
    statusConfigC,
  } from '../dedust.data';
  import List from '/@/views/vent/gas/components/list/index.vue';
  import _ from 'lodash';

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
  });

  const loading = ref(false);

  // 默认初始是第一行
  // const openDust = ref(false);
  const deviceInfo = ref<any>({});
  const workFaceSource = ref({});
  const workFaceHistorySource = ref([]);
  // const gateDataSource = ref([]);
  // const windowDataSource = ref([]);
  // const windDataSource = ref([]);
  // const temperatureDataSource = ref([]);
  // const fireDataSource = ref([]);

  // 将列表配置项转换为列表可用的prop
  function transConfigToProp(config, source) {
    return config.map((c) => {
      if (c.type === 'default' && c.status) {
        return {
          ...c,
          value: c.status.find((e) => _.get(source, c.prop) === e.value)?.label,
          label: c.label,
        };
      }
      return {
        ...c,
        value: _.get(source, c.prop),
        label: c.label,
      };
    });
  }

  // 各个模块的配置项
  const dedustMonitorProp = computed(() => {
    return {
      items: transConfigToProp(dedustMonitorConfig, deviceInfo.value),
    };
  });
  const dedustStatusPropA = computed(() => {
    return {
      status: statusConfigA as any,
      items: transConfigToProp(dedustStatusConfigA, deviceInfo.value),
    };
  });
  const dedustStatusPropB = computed(() => {
    return {
      status: statusConfigB as any,
      items: transConfigToProp(dedustStatusConfigB, deviceInfo.value),
    };
  });
  const dedustStatusPropC = computed(() => {
    return {
      status: statusConfigC as any,
      items: transConfigToProp(dedustStatusConfigC, deviceInfo.value),
    };
  });

  // 监测数据
  const selectData = reactive({});

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      timer = setTimeout(
        async () => {
          if (props.deviceId) {
            const data = await getDataSource(props.deviceId);
            Object.assign(selectData, data);
          }
          if (timer) {
            timer = null;
          }
          await getMonitor();
          loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
    res.deviceInfo.dedustefan.datalist.forEach((e: any) => {
      Object.assign(e, e.readData);
      e.readData = null;
    });
    deviceInfo.value = _.get(res, 'deviceInfo.dedustefan.datalist[0]', { warnDes: '设备断开' });
    workFaceHistorySource.value = res.sysInfo.history;
    workFaceSource.value = Object.assign(res.sysInfo, res.sysInfo.readData);
    loading.value = false;
  }

  onBeforeMount(() => {});

  onMounted(async () => {
    loading.value = true;
    timer = null;
    await getMonitor(true);
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  // @import '../less/tunFace.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;

  .dust-fan-monitor {
    display: flex;
    flex-wrap: wrap;
  }
  .dust-fan-monitor-item {
    width: 152px;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(25, 251, 255, 0.4);
    box-shadow: inset 0 0 20px rgba(0, 197, 255, 0.4);
    background: rgba(0, 0, 0, 0.06666667);
    margin-bottom: 5px;
    padding: 8px 0;
    &:nth-child(2n) {
      margin-left: 12px;
    }
    .title {
      color: #5dfaff;
    }
    .unit {
      font-size: 13px;
      color: #ffffffaa;
    }
    .value {
      color: #ffb212;
    }
  }

  .fault {
    .title {
      color: #c4fdff;
    }
    .value {
      // color: #FFB212;
      color: #61ddb1;
    }
  }
</style>