mky-vent-base/src/views/vent/monitorManager/balancePressMonitor/components/balancePressHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box">
        <div class="monitor-info item-box">
          <ventBox1>
            <template #title>
              <div>均压与低氧参数监测与设置</div>
            </template>
            <template #container>
              <div class="vent-flex-row-between auto-control">
                <div class="title">自动调节：</div>
                <a-radio-group v-model:value="isAutoControl" name="radioGroup" @change="changeType(isAutoControl)">
                  <a-radio value="1">关闭</a-radio>
                  <a-radio value="2">开启</a-radio>
                </a-radio-group>
              </div>
              <div class="input-box">
                <div class="divider-line">开始条件</div>
                <div v-for="(item, index) in settingParam1" class="input-item" :key="index">
                  <div class="title">{{ item.title }}：</div>
                  <a-input-number class="input-value" v-model="item.value" placeholder="" />
                  <div class="unit">{{ item.unit }}</div>
                </div>
                <div class="divider-line">调节参数</div>
                <div v-for="(item, index) in settingParam2" class="input-item" :key="index">
                  <div class="title">{{ item.title }}：</div>
                  <a-input-number class="input-value" v-model="item.value" placeholder="" />
                  <div class="unit">{{ item.unit }}</div>
                </div>
                <div class="divider-line">结束时间</div>
                <div v-for="(item, index) in settingParam3" class="input-item" :key="index">
                  <div class="title">{{ item.title }}：</div>
                  <a-input-number class="input-value" v-model="item.value" placeholder="" />
                  <div class="unit">{{ item.unit }}</div>
                </div>
              </div>
              <div class="btn-box" style="text-align: center">
                <div class="btn btn1" @click="onSubmit">提交</div>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
      <div class="lr right-box">
        <div class="item-box sensor-container">
          <ventBox1>
            <template #title>
              <div>CO与O2监测</div>
            </template>
            <template #container>
              <template v-for="monitor in safetyMonitorData" :key="monitor.deviceId">
                <div class="parameter-title group-parameter-title"
                  ><SvgIcon class="icon" size="14" name="fiber-title" />
                  <span>{{ monitor.strinstallpos }}</span>
                </div>
                <div class="input-box">
                  <div v-for="(item, index) in monitorParam" class="input-item" :key="index">
                    <div class="title">{{ item.title }}</div>
                    <div class="value" style="width: 50%">{{ get(monitor, item.code, '-') }}</div>
                  </div>
                </div>
              </template>
            </template>
          </ventBox1>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>设备监测详情</div>
            </template>
            <template #container>
              <template v-for="monitor in windowMonitorData" :key="monitor.deviceId">
                <div class="parameter-title group-parameter-title"
                  ><SvgIcon class="icon" size="14" name="fiber-title" />
                  <span>风窗：{{ monitor.strinstallpos }}</span>
                </div>
                <div class="input-box">
                  <div v-for="(item, index) in windowParam" class="input-item" :key="index">
                    <div class="title">{{ item.title }}</div>
                    <div class="value">{{ get(monitor, item.code, '-') }}</div>
                    <div class="unit">{{ item.unit }}</div>
                  </div>
                </div>
              </template>
              <template v-for="monitor in fanlocalMonitorData" :key="monitor.deviceId">
                <div class="parameter-title group-parameter-title"
                  ><SvgIcon class="icon" size="14" name="fiber-title" />
                  <span>局扇：{{ monitor.strinstallpos }}</span>
                </div>
                <div class="input-box">
                  <div v-for="(item, index) in localFanParam" class="input-item" :key="index">
                    <div class="title">{{ item.title }}</div>
                    <div class="value">{{ get(monitor, item.code, '-') }}</div>
                    <div class="unit">{{ item.unit }}</div>
                  </div>
                </div>
              </template>
            </template>
          </ventBox1>
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script setup lang="ts">
  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps, watch } from 'vue';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import { SvgIcon } from '/@/components/Icon';
  import { mountedThree, destroy, setModelType, updateText, play } from '../balancePress.threejs';
  import { settingParam1, settingParam2, settingParam3, windowParam, localFanParam, monitorParam, o2Param } from '../balancePress.data';
  import { list } from '../balancePress.api';
  import { message } from 'ant-design-vue';
  import { get } from 'lodash-es';

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

  const loading = ref(false);

  // 默认初始是第一行
  const isAutoControl = ref('1');

  // 监测数据
  const selectData = reactive({
    frontRearDP: '-',
    sourcePressure: '-',
    fault: '-',
  });

  const changeType = (isAutoControl) => {
    isAutoControl;
    //
  };

  // https获取监测数据
  let timer: any = 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);
            updateText(selectData);
          }
          if (timer) {
            timer = null;
          }
          await getMonitor();
          loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  const safetyMonitorData = ref<any[]>([]);
  const fanlocalMonitorData = ref<any[]>([]);
  const windowMonitorData = ref<any[]>([]);

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID });
    const result = res.msgTxt;
    result.forEach((item) => {
      if (item.type.startsWith('safetymonitor')) {
        safetyMonitorData.value = item.datalist;
      }
      if (item.type.startsWith('fanlocal')) {
        item.datalist.forEach((e) => {
          const f1Run = e.readData.Fan1StartStatus == '1';
          e.FanfHz = f1Run ? e.readData.Fan1_Frequency : e.readData.Fan2_Frequency;
          e.FanRun = f1Run ? '1#风机' : '2#风机';
        });
        fanlocalMonitorData.value = item.datalist;
      }
      if (item.type.startsWith('window')) {
        windowMonitorData.value = item.datalist;
      }
    });
  }

  // 喷粉操作
  function onSubmit() {
    message.success('提交成功');
  }

  watch(
    () => props.deviceId,
    (newVal, oldVal) => {
      if (newVal && oldVal != undefined) {
        setModelType('balancePressBase');
      }

      loading.value = true;
    }
  );

  onBeforeMount(() => {});

  onMounted(() => {
    // getMonitor()
    loading.value = true;
    mountedThree().then(async () => {
      await setModelType('balancePressBase');
      loading.value = false;
      timer = null;
      await getMonitor(true);
      play('startSmoke', 'top', 30, 'open', 0);
    });
  });

  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;
  .monitor-container {
    margin-top: 60px;
  }
  .lr {
    width: 340px !important;
  }
  .auto-control {
    padding: 10px 8px;
    margin: 0 4px 4px 4px;
    border-radius: 4px;
    border: 1px solid #ffffff05;
    background-image: linear-gradient(to left, #39deff15, #3977e500, #39deff15);
  }
  .divider-line {
    position: relative;
    color: aqua;
    padding-left: 20px;
    font-size: 14px;
    &::before {
      position: absolute;
      content: '';
      display: block;
      top: 10px;
      left: 0;
      height: 1px;
      width: 15px;
      background-color: #ffffff33;
    }
    &::after {
      position: absolute;
      content: '';
      display: block;
      top: 10px;
      right: 0;
      height: 1px;
      width: calc(100% - 85px);
      background-color: #ffffff33;
    }
  }
  .input-value {
    width: 120px !important;
  }
  .unit {
    text-align: right;
  }
  .btn-box {
    margin: 10px 4px;
    .btn1 {
      padding: 4px 0;
    }
  }

  :deep(.@{ventSpace}-tabs-tabpane-active) {
    overflow: auto;
  }

  :deep(.@{ventSpace}-input-number) {
    border-color: #ffffff88 !important;
  }
</style>