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="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">提交</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>
          </ventBox1>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>设备监测详情</div>
            </template>
            <template #container>
              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title" /><span>风窗</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">-</div>
                  <div class="unit">{{ item.unit }}</div>
                </div>
              </div>
              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title" /><span>均压局扇</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">-</div>
                  <div class="unit">{{ item.unit }}</div>
                </div>
              </div>
            </template>
          </ventBox1>
        </div>
        <div class="item-box vent-margin-t-10">
          <LivePlayer id="fm-player1" style="height: 250px" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
        </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 } from '../balancePress.data';
  import { list } from '../balancePress.api';
  import LivePlayer from '@liveqing/liveplayer-v3';

  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;
    //
  };

  const flvURL1 = () => {
    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
    // return ''
  };

  // 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);
            updateText(selectData);
          }
          if (timer) {
            timer = null;
          }
          await getMonitor();
          loading.value = false;
        },
        flag ? 0 : 1000
      );
    }
  }

  async function getDataSource(systemID) {
    const res = await list({ devicetype: 'sys', systemID });
    const result = res.msgTxt;
    result.forEach((item) => {
      if (item.type === 'sys') {
        // 硐室基本
        // fiberDataSource.value = item.filter((data: any) => {
        //   const readData = data.readData;
        //   return Object.assign(data, readData);
        // })
      }
    });
  }

  // 喷粉操作
  function handleDust() {
    //
  }

  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);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';
  @ventSpace: zxm;

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