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">提交</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 } 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({});

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() {
  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
    }, 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()
  });
});

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>