vent-template/src/views/vent/monitorManager/beltTunMonitor/components/beltTunGasHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box">
        <ventBox1>
          <template #title>
            <div>工作面瓦斯监控</div>
          </template>
          <template #container>
            <div class="data-group">
              <div class="data-item" v-for="(item, index) in gasMonitor" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="value">-</div>
              </div>
            </div>
          </template>
        </ventBox1>
        <ventBox1 class="vent-margin-t-10"> 
          <template #title>
            <div>当前抽采地质测定 (<span class="param-set"> 参数设定 </span> ) </div>
          </template>
          <template #container>
            <div class="data-group">
              <div class="data-item" v-for="(item, index) in currentGasMonitor" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="value">-</div>
              </div>
            </div>
          </template>
        </ventBox1>
        <ventBox1 class="vent-margin-t-10"> 
          <template #title>
            <div>工作面瓦斯抽采基础属性参数</div>
          </template>
          <template #container>
            <div class="data-group">
              <div class="data-item" v-for="(item, index) in gasParamData" :key="index">
                <div class="title">{{ item.title }}</div>
                <div class="value">-</div>
              </div>
            </div>
          </template>
        </ventBox1>
        
      </div>
      <div class="lr right-box">
        <div class="item-box sensor-container">
          <ventBox1>
            <template #title>
              <div>瓦斯抽采监测与控制</div>
            </template>
            <template #container>
              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>抽采泵监测与控制</span></div>
              <div class="vent-margin-b-10 vent-padding-lr-5">
                <div class="vent-flex-row-between vent-padding-lr-5 gas-pump-item" v-for="(item, index) in gasPump" :key="index">
                  <div class="title">{{ item.title }}</div>
                  <div><span class="signal-round vent-margin-r-8" :class="{ 'signal-round-gry': item.value == '0', 'signal-round-blue': item.value == '1' }"></span>{{ item.value == '0' ? '关闭' : '开启' }}</div>
                  <a-switch v-model:checked="gasPumpCtr[item.ctrCode]" checked-children="开启" un-checked-children="关闭" checkedValue="1" unCheckedValue="0" />
                </div>
              </div>
              <div class="parameter-title group-parameter-title vent-margin-t-15"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>阀门开度管理</span></div>
              <div class="input-box">
                <div v-for="(item, index) in gasPumpValve" :key="index" class="input-item">
                  <div class="">{{ item.title }}</div>
                  <div class="value">-</div>
                  <a-input class="input-value" v-model="item.inputNum" placeholder="" />
                  <span class="btn btn1">保存</span>
                </div>
              </div>
              <div class="parameter-title group-parameter-title vent-margin-t-15"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>高负压管路监测与控制</span></div>
              <div  v-for="num in highTensionNum" :key="num">
                <div class="vent-flex-row-between">
                  <span class="base-title">抽采单元{{ num }}</span>
                  <div class="detail">详情</div>
                </div>
                <div class="data-group vent-padding-lr-5">
                  <div class="data-item" v-for="(item, index) in gasExtractionUnit" :key="index">
                    <div class="title">{{ item.title }}</div>
                    <div class="value">-</div>
                  </div>
                </div>
              </div>
              <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>低负压管路监测与控制</span></div>
              <div v-for="num in lowTensionNum" :key="num">
                <div class="vent-flex-row-between">
                  <span class="base-title">抽采单元{{ num }}</span>
                  <span class="detail">详情</span>
                </div>
                <div class="data-group vent-padding-lr-5">
                  <div class="data-item" v-for="(item, index) in gasExtractionUnit" :key="index">
                    <div class="title">{{ item.title }}</div>
                    <div class="value">-</div>
                  </div>
                </div>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">

import { onBeforeMount, ref, onMounted, onUnmounted, reactive, defineProps } from 'vue';
import { ArrowRightOutlined } from '@ant-design/icons-vue';
import ventBox1 from '/@/components/vent/ventBox1.vue'
import { SvgIcon } from '/@/components/Icon';
import { list } from '../beltTun.api';
import { gasMonitor, gasParamData, currentGasMonitor, gasPumpValve, gasPump, gasExtractionUnit, highTensionNum, lowTensionNum, gasPumpCtr } from '../beltTun.data'

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

const loading = ref(false)

// 默认初始是第一行
const beltTunSource = ref({});
const beltTunHistorySource = 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 });
  const result = res.msgTxt;
  result.forEach(item => {
    // ''.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);
      })
    }
    if (item.type === 'sys') {
      beltTunSource.value = Object.assign(item['datalist'][0], item['datalist'][0].readData);
    }
    if (item.type === 'surface_history') {
      beltTunHistorySource.value = item['datalist'][0]
    }
    loading.value = false;
  })
}

function toDetail() {

}


onBeforeMount(() => {

});

onMounted(async () => {
  loading.value = true;
  timer = null
  await getMonitor(true)
});
onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

<style lang="less">
  @import '/@/design/vent/modal.less';

  .@{ventSpace}-select-dropdown {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(236, 236, 236, 0.4);
    backdrop-filter: blur(10px);
    .@{ventSpace}-select-item-option-selected,
    .@{ventSpace}-select-item-option-active {
      background-color: #ffffff33 !important;
    }

    .@{ventSpace}-select-item:hover {
      background-color: #ffffff33 !important;
    }
  }
</style>

<style lang="less" scoped>
  @ventSpace: zxm;
  @import '/@/design/vent/modal.less';
  @import '../../comment/less/workFace.less';

  .left-box{
    width: 360px;
  }
  .gas-pump-item{
    padding: 3px 0;
  }

  .param-set{
    color: #45d3fd;
    cursor: pointer;
    &:hover{
      color: #38a6c8;
    }
  }

  .input-item{
    margin: 3px 0 !important;
    .value{
      width: 80px;
      text-align: center;
    }
  }
  .data-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 8px;
    .data-item{
      width: calc(50% - 10px);
      display: flex;
      justify-content: space-between;
      line-height: 24px;
      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
      margin: 4px 0;
    }
    .value{
      color: #00eefffe;
    }
    .data-item1{
      width: 100%;
      line-height: 24px;
      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10, #39A3FF02);
      margin: 4px 0;
    }
  }

  .base-title{
    line-height: 26px;
    position: relative;
    padding-left: 15px;
    color: #9bf2ff;
    &::after{
      content: '';
      position: absolute;
      display: block;
      width: 4px;
      height: 12px;
      top: 8px;
      left: 5px;
      background: #45d3fd;
      border-radius: 4px;
    }
  }

  .detail{
    border: 1px solid #9bf2ff88;
    padding: 0 5px;
    background-color: #ffffff11;
    margin-right: 4px;
    &:hover{
      background-color: #ffffff05;
    }
  }
  
</style>