gas-injection/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:value="formData[item.code]" 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:value="formData[item.code]" 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:value="formData[item.code]" 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 ml-auto">
        <div class="item-box sensor-container">
          <ventBox1 class="">
            <template #title>
              <div>设备监测详情</div>
            </template>
            <template #container>
              <div class="overflow-y-auto max-h-500px">
                <template v-for="monitor in windrectMonitorData" :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 windrectParam" 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>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
      <div class="lr right-box ml-5px">
        <div class="item-box sensor-container">
          <ventBox1>
            <template #title>
              <!-- <div>CO与O2监测</div> -->
              <div>传感器/安全监控监测</div>
            </template>
            <template #container>
              <div class="overflow-y-auto max-h-300px">
                <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>
              </div>
            </template>
          </ventBox1>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>设备监测详情</div>
            </template>
            <template #container>
              <div class="overflow-y-auto max-h-400px">
                <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>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script setup lang="ts" name="balancePressHome">
  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, windrectParam } from '../balancePress.data';
  import { list, submit, subList } 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 monitorParam = [
    {
      title: '监测值',
      code: 'readData.ss_analog_value',
      unit: '',
    },
  ];
  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[]>([]);
  const windrectMonitorData = ref<any[]>([]);

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID });
    const result = res.msgTxt;
    safetyMonitorData.value = [];
    fanlocalMonitorData.value = [];
    windowMonitorData.value = [];
    windrectMonitorData.value = [];
    result.forEach((item) => {
      if (item.type.startsWith('safetymonitor')) {
        safetyMonitorData.value.push(...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.push(...item.datalist);
      }
      if (item.type.startsWith('window')) {
        windowMonitorData.value.push(...item.datalist);
      }
      if (item.type.startsWith('windrect')) {
        windrectMonitorData.value.push(...item.datalist);
      }
    });
  }

  // 喷粉操作
  async function onSubmit() {
    let res = await submit(formData.value);
    if (res.code == 500) {
      message.success(res.message);
    } else {
      initParamList();
      message.success('提交成功');
    }
  }

  //获取低氧参数监测返显列表
  async function initParamList() {
    let res = await subList();
    if (res && res.records && res.records.length != 0) {
      formData.value = res.records[0];
    }
  }

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

  const formData = ref({
    coMaxStart: 0,
    o2MinStart: 0,
    coRiseStart: 0,
    o2DownStart: 0,
    windowAreaSetGrad: 0,
    windowSetTime: 0,
    windowMinArea: 0,
    windowAreaDef: 0,
    setMinTime: 0,
    coEnd: 0,
    coTimeEnd: 0,
    o2End: 0,
    o2TimeEnd: 0,
  });

  onBeforeMount(() => {});

  onMounted(() => {
    loading.value = true;
    mountedThree().then(async () => {
      await setModelType('balancePressBase'); //balancePressBase
      loading.value = false;
      timer = null;
      await initParamList();
      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>