gas-injection/src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceDustHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box vent-margin-t-10">
        <ventBox1 class="vent-margin-t-10">
          <template #title>
            <div>煤机喷雾参数</div>
          </template>
          <template #container>
            <div v-for="(item, index) in coalMachineDustParam" class="input-item" style="padding: 4px 8px; margin: 6px 0" :key="index">
              <div class="title">{{ item.title }}</div>
              <template v-if="item.flag == 'sign'">
                <div class="value" :style="{ color: item.value == 1 ? '#61ddb1' : '#c4fdff' }">{{ item.value == 1 ? '链接' : '断开' }}</div>
              </template>
              <template v-else>
                <div class="value">{{ item.value }}</div>
              </template>
              <div class="unit">{{ item.unit }}</div>
            </div>
          </template>
        </ventBox1>
      </div>
      <div class="lr right-box">
        <ventBox1>
          <template #title>
            <div>除尘风机监测与控制</div>
          </template>
          <template #container>
            <div class="dust-fan-monitor">
              <div class="dust-fan-monitor-item" v-for="(item, index) in dustMonitor" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class=""
                  ><span class="value">{{ item.value }}</span> <span class="unit"> {{ item.unit }} </span></div
                >
              </div>
              <div class="dust-fan-monitor-item fault">
                <div class="title">风机故障诊断</div>
                <div class=""><span class="value">正常</span></div>
              </div>
            </div>

            <div class="parameter-title group-parameter-title vent-margin-t-10"
              ><SvgIcon class="icon" size="20" name="control-setting" /><span>设备基础参数</span></div
            >
            <div class="data-group">
              <div class="data-item" v-for="(item, index) in dustFanParam" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="value">{{ item.value }}</div>
              </div>
            </div>
            <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="20" name="control-setting" /><span>控制设备</span></div>
            <div class="input-item vent-flex-row-between">
              <div>除尘器控制：</div>
              <div class="vent-flex-row btn-box">
                <div class="btn btn1">启动</div>
                <div class="btn btn2">停机</div>
              </div>
            </div>
            <div v-for="(item, index) in dustFanSetting" :key="index" class="input-item vent-flex-row-between">
              <div class="title-auto">{{ item.title }}:</div>
              <div>
                <a-input class="input-value" v-model="item.inputNum" placeholder="" />
                <span class="btn btn1 vent-margin-l-8">保存</span>
              </div>
            </div>
          </template>
        </ventBox1>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
  import { list } from '../tunFace.api';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { SvgIcon } from '/@/components/Icon';
  import { dustFanParam, coalMachineDustParam, dustMonitor, dustFanSetting } from '../tunFace.data';

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

  const loading = ref(false);

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

  // 监测数据
  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: 'dustS' });
    const result = res.deviceInfo;
    for (const key in result) {
      const item = result[key];
      // ''.startsWith
      if (item.type.startsWith('gate')) {
        // 风门
        gateDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type.startsWith('window')) {
        // 风窗
        windowDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type.startsWith('windrect')) {
        // 测风
        windDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type === 'modelsensor_temperature') {
        // 温度
        temperatureDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
      if (item.type === 'modelsensor_fire') {
        // 火焰
        fireDataSource.value = item['datalist'].filter((data: any) => {
          const readData = data.readData;
          return Object.assign(data, readData);
        });
      }
    }
    loading.value = false;
    workFaceHistorySource.value = res['sysInfo']['history'];
    workFaceSource.value = Object.assign(res['sysInfo'], res['sysInfo']['readData']);
  }

  function toDetail() {}

  function changeType(e: Event, item) {
    item.value = e.target?.value;
  }

  onBeforeMount(() => {});

  onMounted(async () => {
    loading.value = true;
    timer = null;
    await getMonitor(true);
  });
  onUnmounted(() => {
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</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>