vent-forewarn-micro/src/views/vent/fire/fireDistributionPoint/index.vue

<template>
  <div class="fireDistributionPoint">
    <div class="fireDis-right-box">
      <div class="woke-item-box">
        <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
      </div>
      <div class="woke-item-box1">
        <basicSensor :sensorTitle="sensorTitleJj" :sensorList="sensorList1" :headList="headList1" />
      </div>
      <div class="woke-item-box2">
        <basicSensor :sensorTitle="sensorTitleZys" :sensorList="sensorList2" :headList="headList" />
      </div>
      <div class="woke-item-box3">
        <basicSensor :sensorTitle="sensorTitleJD" :sensorList="sensorList3" :headList="headList" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted,onUnmounted } from 'vue';
import basicSensor from '../../common/basicSensor.vue';
import { getFireAreaInfo, getZcHfWd, getHeadingFace, getDsWd, getMainTrafficYw } from './firePoint.api'

let sensorTitle = ref('综放工作面传感器监测');
let sensorTitleJj = ref('掘进工作面传感器监测');
let sensorTitleZys = ref('主运输系统传感器监测');
let sensorTitleJD = ref('机电硐室及配电点传感器监测');

let headList = reactive([
  { id: 0, title: '测点位置' },
  { id: 1, title: '监测值' },
  { id: 2, title: '预警级别' },
  { id: 3, title: '时间' },
]);
let headList1 = reactive([
  { id: 0, title: '测点位置' },
  { id: 1, title: 'CO浓度(%)' },
  { id: 2, title: '温度' },
  { id: 3, title: '预警级别' },
  { id: 4, title: '时间' },
]);


let sensorList = reactive<any[]>([]);
let sensorList1 = reactive<any[]>([])
let sensorList2 = reactive<any[]>([])
let sensorList3 = reactive<any[]>([])

//数据随便写的，不符合实际情况，因为懒得改
const treeData = reactive<any[]>([])

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor() {
  timer = setTimeout(
    async () => {
      //工作面
      await getFireAreaInfos()
      if (timer) {
        timer = null;
      }
      getMonitor();
    },
    5000
  );
}


//获取左侧菜单树
async function getFireAreaInfos() {
  const res = await getFireAreaInfo({})
  if (res.length != 0) {
    res.forEach((el, ind) => {
      treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, gxcwCnt: el.gxcwCnt, sgjcCnt: el.sgjcCnt, infoTypeTwo: el.infoTypeTwo })
    })
    console.log(treeData, 'treeData-------')
    getZcHfWdList()
    getHeadingFaceList()
    getMainTrafficYwList()
    getDsWdList()

  }
}

//获取综放工作面传感器监测数据
async function getZcHfWdList() {
  let res = await getZcHfWd()
  console.log(res, '综放工作面传感器监测数据')
  if (res.length != 0) {
    sensorList.length=0
    res.forEach(el => {
      sensorList.push({ name: el.nodePlacement, status: el.detectValue + ' ('+ el.unit + ')', warn: el.warningMsg, times: el.dateTime })
    })
  }
}

//获取掘进工作面传感器监测数据
async function getHeadingFaceList() {
  let res = await getHeadingFace()
  console.log(res, '掘进工作面传感器监测数据')
  if (res.length != 0) {
    sensorList1.length=0
    res.forEach(el => {
      sensorList1.push({ name: el.name, nd: el.co + '', status: el.wd + '', warn: el.warningMsg, times: el.dateTime })
    })
  }
}

//获取运输系统烟雾传感器数据
async function getMainTrafficYwList() {
  let res = await getMainTrafficYw()
  console.log(res, '运输系统烟雾传感器数据')
  if (res.length != 0) {
    sensorList2.length=0
    res.forEach(el => {
      sensorList2.push({ name: el.nodePlacement, status:el.detectValue + ' ('+ el.unit + ')', warn: el.warningMsg, times: el.dateTime })
    })
  }
}

//获取机电硐室传感器数据
async function getDsWdList() {
  let res = await getDsWd()
  console.log(res, '机电硐室传感器数据')
  if (res.length != 0) {
    sensorList3.length=0
    res.forEach(el => {
      sensorList3.push({ name: el.nodePlacement, status: el.detectValue + ' ('+ el.unit + ')', warn: el.warningMsg, times: el.dateTime })
    })
  }
}

onMounted(() => {
  getFireAreaInfos()
  getMonitor()
  
})

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
});

</script>
<style lang="less" scoped>
.fireDistributionPoint {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 20px);
  // height: calc(100vh - 82px);
  height: 880px;
  margin: 0 10px;
  background: #282828;

  

  .fireDis-right-box {
    display: flex;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    margin-left: 10px;
    padding: 15px 10px;
    background-color: rgb(27 35 39 / 80%);

    .woke-item-box {
      width: calc(50% - 10px);
      height: calc(50% - 10px);
      margin-right: 10px;
      margin-bottom: 20px;
    }

    .woke-item-box1 {
      width: calc(50% - 10px);
      height: calc(50% - 10px);
      margin-bottom: 20px;
      margin-left: 10px;
    }

    .woke-item-box2 {
      width: calc(50% - 10px);
      height: calc(50% - 10px);
      margin-right: 10px;
    }

    .woke-item-box3 {
      width: calc(50% - 10px);
      height: calc(50% - 10px);
      margin-left: 10px;
    }
  }


}
</style>