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

<template>
  <div
    v-show="!loading"
    id="dedustCss"
    style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
  >
    <FourBorderBg id="dedustEnvA">
      <div class="monitor-item" v-for="(data, index) in dedustEnvModalA" :key="index" :id="`dedustCss3D${index}`">
        <span class="monitor-title">{{ data.label }}：</span>
        <span class="monitor-val">{{ get(deviceInfo, data.prop, '-') }}</span>
      </div>
      <!-- <div class="title">
        {{ monitorData[groupNum - 1]['strname'] }}
      </div> -->
    </FourBorderBg>
    <FourBorderBg id="dedustEnvB">
      <div class="monitor-item" v-for="(data, index) in dedustEnvModalB" :key="index" :id="`dedustCss3D${index}`">
        <span class="monitor-title">{{ data.label }}：</span>
        <span class="monitor-val">{{ get(deviceInfo, data.prop, '-') }}</span>
      </div>
    </FourBorderBg>
  </div>
  <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>
      <ventBox1>
        <template #title>
          <div>环境参数</div>
        </template>
        <template #container>
          <List :labelWidth="200" v-bind="dedustEnvProp" />
        </template>
      </ventBox1>
    </div>
  </div>
</template>

<script setup lang="ts">
  import FourBorderBg from '/@/views/vent/comment/components/fourBorderBg.vue';
  import { onBeforeMount, ref, onMounted, onUnmounted, defineProps, computed } from 'vue';
  import { list } from '../dedust.api';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { mountedThree, destroy, setModelType } from '../dedust.threejs';
  // import { SvgIcon } from '/@/components/Icon';
  import {
    dedustEnvConfig,
    dedustEnvModalA,
    dedustEnvModalB,
    dedustMonitorConfig,
    dedustStatusConfigA,
    dedustStatusConfigB,
    dedustStatusConfigC,
    statusConfigA,
    statusConfigB,
    statusConfigC,
  } from '../dedust.data';
  import List from '/@/views/vent/gas/components/list/index.vue';
  import _ from 'lodash';
  import { get } from '../../../home/billboard/utils';

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

  const loading = ref(false);
  const deviceInfo = ref<any>({});

  // 将列表配置项转换为列表可用的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 dedustEnvProp = computed(() => {
    return {
      items: transConfigToProp(dedustEnvConfig, 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),
    };
  });

  // https获取监测数据
  let timer: NodeJS.Timeout;
  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID, type: 'all' });
    // 保留第一项数据
    _.forEach(_.get(res, 'deviceInfo.dedustefan.datalist', []), (e) => {
      Object.assign(e, e.readData);
      deviceInfo.value = e || { warnDes: '设备断开' };
      return -1;
    });
  }

  onBeforeMount(() => {});

  onMounted(() => {
    loading.value = true;
    mountedThree('#dedust3D', ['#dedustCss', '#dedustEnvA', '#dedustEnvB']).then(() => {
      setModelType('dedust').finally(() => {
        loading.value = false;
      });
    });
    timer = setInterval(() => {
      getDataSource(props.deviceId);
    }, 1000);
  });
  onUnmounted(() => {
    clearInterval(timer);
    destroy();
  });
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @import '/@/design/vent/modal.less';
  // @import '../less/tunFace.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;

  .monitor-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;

    .monitor-val {
      font-size: 14px;
    }
  }

  .monitor-title {
    width: 200px;
    color: var(--vent-font-action-link);
    font-weight: 400;
    font-size: 14px;
  }

  .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>