mky-vent-base/src/views/vent/monitorManager/obfurageMonitor/components/obfurageHome.vue

<template>
  <a-spin tip="Loading..." :spinning="loading">
    <div class="monitor-container">
      <div class="lr left-box">
        <div class="warning-group">
          <div class="fire-analysis1 ">
            <div class="analysis-item warning3">
              <div class="title">火灾风险预警</div>
              <div class="value">高风险</div>
            </div>
          </div>
          <ventBox1 class="vent-margin-t-10">
            <template #title>
              <div>近一月报警情况</div>
            </template>
            <template #container>
              <div class="monitor-box">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="alarm-icon"/><span>报警信息</span></div>
                <div class="item-group">
                  <div class="item-col">
                    <SvgIcon class="icon" size="24" name="alarm-fire" />
                    <span class="title">火焰传感器</span>
                    <span class="value">无</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="24" name="alarm-smoke" />
                    <span class="title">烟雾传感器</span>
                    <span class="value" style="color: #FF3823; font-weight: 600;">15</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="24" name="alarm-temperature" />
                    <span class="title">温度传感器</span>
                    <span class="value">无</span>
                  </div>
                </div>
              </div>
              <div class="monitor-box">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="42" name="warning-icon"/><span>预警信息</span></div>
                <div class="item-group">
                  <div class="item-col">
                    <SvgIcon class="icon" size="22" name="warning-fire" />
                    <span class="title">火焰传感器</span>
                    <span class="value">无</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="22" name="warning-smoke" />
                    <span class="title">烟雾传感器</span>
                    <span class="value" style="color: #FF9B17; font-weight: 600;">15</span>
                  </div>
                  <div class="item-col">
                    <SvgIcon class="icon" size="22" name="warning-temperature" />
                    <span class="title">温度传感器</span>
                    <span class="value">无</span>
                  </div>
                </div>
                <div class="alarm-box">
                  <!-- <dv-scroll-board ref="scrollBoard" :config="warningConfig"
                    style="width: 100%; height: 240px; overflow-y: auto; " /> -->
                </div>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
      <div class="lr right-box">
        <div class="item-box sensor-container">
          <ventBox1>
            <template #title>
              <div>采空区火灾监测预警</div>
            </template>
            <template #container>
              <div class="temperature-box">
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="fiber-title"/><span>光纤测温系统</span></div>
                <div class="temperature-group">
                  <div class="light-group">
                    <div class="light-bg"></div>
                    <div class="light-item">
                      <SvgIcon class="icon" size="25" name="aveg-temperature" />
                      <div class="light">
                        <div class="light-icon"></div>
                        <div class="light-title">平均温度</div>
                        <div class="light-val-box">
                          <div class="light-val-icon"></div>
                          <div class="light-val">56.99</div>
                        </div>
                      </div>
                    </div>
                    <div class="light-item">
                      <SvgIcon class="icon" size="25" name="max-temperature" />
                      <div class="light">
                        <div class="light-icon"></div>
                        <div class="light-title">最高温度</div>
                        <div class="light-val-box">
                          <div class="light-val-icon"></div>
                          <div class="light-val">56.99</div>
                        </div>
                      </div>
                    </div>
                    <div class="light-item">
                      <SvgIcon class="icon" size="25" name="min-temperature" />
                      <div class="light">
                        <div class="light-icon"></div>
                        <div class="light-title">最低温度</div>
                        <div class="light-val-box">
                          <div class="light-val-icon"></div>
                          <div class="light-val">56.99</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="warning-state-detail">
                  最大值产生于 <span class="state-color">2013-05-24 15:52:42</span> 时刻 <span class="state-color">15212胶运顺槽600m</span> 处
                </div>
              </div>
              <div>
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="beamTube-title"/><span>束管监测系统</span></div>
                <div class="state-item" v-for="(data, index) in beamTubeColumns" :key="index">
                  <div class="item-col">
                    <span class="state-title">{{ Object.values(data)[0] }} :</span>
                    <span class="state-val">{{ (bundleTubeDataSource[Object.keys(data)[0]])
                      >= 0 ? bundleTubeDataSource[Object.keys(data)[0]] : '-' }}</span>
                  </div>
                  <div class="item-col" v-if="Object.keys(data)[1]">
                    <span class="state-title">{{ Object.values(data)[1] }} :</span>
                    <span class="state-val">{{ (bundleTubeDataSource[Object.keys(data)[1]])
                      >= 0 ? bundleTubeDataSource[Object.keys(data)[1]] : '-' }}</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="pulp-title"/><span>注浆系统</span></div>
                <div class="state-item" v-for="(data, index) in groutColumns" :key="index">
                  <div class="item-col">
                    <span class="state-title">{{ Object.values(data)[0] }} :</span>
                    <span class="state-val">{{ (pulpingDataSource[Object.keys(data)[0]])
                      >= 0 ? pulpingDataSource[Object.keys(data)[0]] : '-' }}</span>
                  </div>
                  <div class="item-col" v-if="Object.keys(data)[1]">
                    <span class="state-title">{{ Object.values(data)[1] }} :</span>
                    <span class="state-val">{{ (pulpingDataSource[Object.keys(data)[1]])
                      >= 0 ? pulpingDataSource[Object.keys(data)[1]] : '-' }}</span>
                  </div>
                </div>
                <div class="input-item vent-flex-row" style="margin-bottom: 15px;">
                  <div>设备控制：</div>
                  <div class="vent-flex-row btn-box">
                    <div class="btn btn1">一键启动</div>
                    <div class="btn btn2">一键停止</div>
                  </div>
                </div>
              </div>
              <div>
                <div class="parameter-title group-parameter-title"><SvgIcon class="icon" size="14" name="nitrogen-title"/><span>注氮系统</span></div>
                <div class="state-item" v-for="(data, index) in nitrogenColumns" :key="index">
                  <div class="item-col">
                    <span class="state-title">{{ Object.values(data)[0] }} :</span>
                    <span class="state-val">{{ (nitrogenDataSource[Object.keys(data)[0]])
                      >= 0 ? nitrogenDataSource[Object.keys(data)[0]] : '-' }}</span>
                  </div>
                  <div class="item-col" v-if="Object.keys(data)[1]">
                    <span class="state-title">{{ Object.values(data)[1] }} :</span>
                    <span class="state-val">{{ (nitrogenDataSource[Object.keys(data)[1]])
                      >= 0 ? nitrogenDataSource[Object.keys(data)[1]] : '-' }}</span>
                  </div>
                </div>
                <div class="input-item vent-flex-row">
                  <div>设备控制：</div>
                  <div class="vent-flex-row btn-box">
                    <div class="btn btn1">一键启动</div>
                    <div class="btn btn2">一键停止</div>
                  </div>
                </div>
              </div>
            </template>
          </ventBox1>
          
        </div>
        <!-- <div class="item-box" >
          <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 MonitorTable from '../comment/MonitorTable.vue';
import { ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
import ventBox1 from '/@/components/vent/ventBox1.vue'
import { mountedThree, destroy, addChamberText, setModelType } from '../obfurage.threejs';
import { SvgIcon } from '/@/components/Icon';
import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
import { beamTubeColumns, groutColumns, nitrogenColumns } from '../obfurage.data'
import { list } from '../obfurage.api';
import LivePlayer from '@liveqing/liveplayer-v3';

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

const loading = ref(false);

// 默认初始是第一行
const sprayDataSource = ref([]);
const bundleTubeDataSource = ref({});
const pulpingDataSource = ref([]);
const nitrogenDataSource = ref([]);
const fiberDataSource = ref([]);

// 监测数据
const selectData = reactive({});

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); 
      }
      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.startsWith('spray_auto')) {
      // 喷淋
      sprayDataSource.value = item['datalist'].filter((data: any) => {
        const readData = data.readData;
        return Object.assign(data, readData);
      })
    }
    if (item.type.startsWith('"bundletube_auto"')) {
      // 束管
      bundleTubeDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
    }
    if (item.type === 'pulping_auto') {
      // 注浆
      pulpingDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
    }
    if (item.type === 'nitrogen_auto') {
      // 注氮
      nitrogenDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
    }
    if (item.type === 'fiber_normal') {
      // 注氮
      fiberDataSource.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData'])
    }

    if (item.type === 'sys') {
      // 硐室基本
      // fiberDataSource.value = item.filter((data: any) => {
      //   const readData = data.readData;
      //   return Object.assign(data, readData);
      // })
    }
  })
}

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

watch(() => props.deviceId, () => {
  setModelType('obfurageBase')
  loading.value = true
})

onBeforeMount(() => {

});

onMounted(() => {
  loading.value = true;

  // getMonitor(true)
  mountedThree().then(async () => {
    await setModelType('obfurage');
    loading.value = false;
    timer = null
    await getMonitor(true)
  });
});

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;

.warning-group {
  padding: 10px 0;
}
.monitor-box {
  width: 100%;
  margin-bottom: 20px;
  .parameter-title{
    position: relative;
    width: 100%;
    height: 16px;
    margin-top: 10px;
    margin-bottom: 5px;
    .icon, span{
      position: absolute;
      top: -10px;
    }
  }
  .group-parameter-title{
    // background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
    .icon{
      left: -12px;
      top: -20px;
    }
    span{
      left: 24px;
    }
  }
  .item-group{
    display: flex;
    flex-wrap: wrap;
    .item-col{
      width: calc(50% - 5px);
      background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
      position: relative;
      // display: flex;
      // align-items: center;
      &:nth-child(even){
        margin-left: 10px;
      }
      padding: 2px 0;
      margin: 3px 0;
      .title{
        margin-left: 5px;
      }
      .value{
        position: absolute;
        right: 10px;
        top: 5px;
      }
    }
  }
}
.alarm-box{
  margin-top: 10px;
}


// .monitor-container {
//   width: 100%;
//   height: 100%;
//   // height: 550px;
//   // border: 1px solid #fff;
//   margin-top: 20px;
//   padding-top: 20px;
//   display: flex;
//   justify-content: space-between;

//   .lr {
//     width: 350px;
//     height: 100%;
//     display: flex;
//     flex-direction: column;
//     margin-top: 10px;
//     pointer-events: auto;

//   }

//   .right-box {
//     width: 320px;
//   }

//   .left-box {
//     margin-top: 30px;

//     .monitor-info {
//       .temperature-group {
//         width: 100%;
//         margin-top: 10px;
//         .light-group{
//           display: flex;
//           flex-direction: row;
//           justify-content: space-between;
//           position: relative;
//           .light-bg{
//             width: 331px;
//             height: 42px;
//             background: url('/@/assets/images/vent/plane-bg.png') no-repeat;
//             background-size: contain;
//             position: absolute;
//             z-index: -1;
//             top: 44px;
//           }
//           .temperature-item {
//             width: 120px;
//             display: flex;
//             flex-direction: column;
//             justify-content: center;
//             align-items: center;
//             position: reactive;
//             .icon {
//               display: block;
//               position: absolute;
//               top: -5px;
//             }

//             .temperature {
//               display: flex;
//               flex-direction: column;
//               justify-content: center;
//               align-items: center;
//               .temperature-icon{
//                 width: 90px;
//                 height: 58px;
//                 background: url('/@/assets/images/vent/ligth-q.png');
//               }
//               .temperature-title{
//                 position: relative;
//                 top: -15px;
//               }
              
//               .temperature-val-box{
//                 display: flex;
//                 flex-direction: column;
//                 justify-content: center;
//                 align-items: center;
//                 position: relative;
//                 top: -10px;
//                 .temperature-val-icon{
//                   width: 2px;
//                   height: 18px;
//                   background: #00d8ff;
//                   position: relative;
//                   &::after{
//                     content: '';
//                     display: block;
//                     position: absolute;
//                     width: 6px;
//                     height: 6px;
//                     border-radius: 3px;
//                     background: #00d8ff;
//                     bottom: -2px;
//                     left: -2px;
//                   }

//                 }
//                 .temperature-val{
//                   position: relative;
//                   font-family: 'douyuFont';
//                   color: #20dbfd;
//                   text-shadow: 0 0 25px #00d8ff;
//                   font-size: 13px;
//                   border: 1px solid #40B7F3;
//                   padding: 5px 8px 2px 8px;
//                   top: 2px;
//                   &::after{
//                     width: calc(100% - 4px);
//                     height: calc(100% - 4px);
//                     content: '';
//                     position: absolute;
//                     top: 2px;
//                     left: 2px;
//                     display: block;
//                     border: 1px solid #006EA6;
//                   }
//                 }
//               }
              
//             }
//           }
//         }

        
//       }

//     }
//     .warning-group {
//       padding: 10px 0;
//     }
//     .monitor-box {
//       width: 100%;
//       margin-bottom: 20px;
//       .parameter-title{
//         position: relative;
//         width: 100%;
//         height: 16px;
//         margin-top: 10px;
//         margin-bottom: 5px;
//         .icon, span{
//           position: absolute;
//           top: -10px;
//         }
//       }
//       .group-parameter-title{
//         background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
        
//         .icon{
//           left: -12px;
//           top: -20px;
//         }
//         span{
//           left: 20px;
//         }
        
//       }
//       .item-group{
//         display: flex;
//         flex-wrap: wrap;
//         .item-col{
//           width: calc(50% - 5px);
//           background-image: linear-gradient(to right, #39A3FF00, #39A3FF10);
//           position: relative;
//           // display: flex;
//           // align-items: center;
//           &:nth-child(even){
//             margin-left: 10px;
//           }
//           padding: 2px 0;
//           margin: 3px 0;
//           .title{
//             margin-left: 5px;
//           }
//           .value{
//             position: absolute;
//             right: 10px;
//             top: 5px;
//           }
//         }
//       }
      
      
      
//     }
//     .alarm-box{
//       margin-top: 10px;
//     }
//   }
//   .box-title{
//     color: #fff;
//     margin-bottom: 8px;
//     padding-left: 10px;
//     position: relative;
//     font-size: 16px;
//     &::after{
//       content: '';
//       position: absolute;
//       display: block;
//       width: 4px;
//       height: 12px;
//       top: 7px;
//       left: 0px;
//       background: #45d3fd;
//       border-radius: 4px;
//     }
//   }

// }

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

// .input-box {
//   display: flex;
//   align-items: center;
//   padding-left: 10px;

//   .input-title {
//     color: #73e8fe;
//     width: auto;
//   }

//   .@{ventSpace}-input-number {
//     border-color: #ffffff88 !important;
//   }

//   margin-right: 10px;
// }

</style>