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

<template>
  <div class="fireMonitor">
    <div class="top-box">
      <div class="table-box">
        <basicSensor :sensorTitle="sensorTitle" :sensorList="sensorList" :headList="headList" />
      </div>
      <div class="table-box">
        <basicSensor :sensorTitle="sensorTitle1" :sensorList="sensorList1" :headList="headList" />
      </div>
      <div class="table-box">
        <basicSensor :sensorTitle="sensorTitle2" :sensorList="sensorList2" :headList="headList" />
      </div>
    </div>
    <div class="bot-box">
      <div class="bot-item-title">
        <div class="item-left">光钎测温系统温度实时监测</div>
        <a-select style="width: 180px" :options="gxSelectList" size="small" placeholder="请选择" v-model:value="gxSelect"
          allowClear @change="pointChange"></a-select>
      </div>
      <div class="bot-item-content">
        <basicEchartLine :gridV="gridV" :echartData="echartDataGx"></basicEchartLine>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import basicSensor from '../../common/basicSensor.vue';
import { getYwRealData, getHyRealData, getPfmhRealData, getGxcwHistoryDataByPointCode, getInfosByAreaCode } from './fireMonitor.api'

let sensorTitle = ref('烟雾传感器监测');
let sensorTitle1 = ref('火焰传感器监测');
let sensorTitle2 = ref('电磁阀开关量监测');

let headList = reactive([
  { id: 0, title: '测点位置' },
  { id: 1, title: '预警级别' },
  { id: 2, title: '时间' },
]);

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

let gxSelect = ref('')
let gxSelectList = reactive<any[]>([])

let gridV = reactive({
  top: '8%',
  left: '3%',
  right: '3%',
  bottom: '10%',
})
let echartDataGx = reactive(
  {
    xData: [],
    yData: [],
    yData1: [],
    legendName: ['最高温度', '最低温度']
  }
)

//获取烟雾传感器监测数据
async function getYwRealDataList() {
  let res = await getYwRealData({ areaCode: 'zybds001' })
  console.log(res, '烟雾传感器数据------------')
  if(res.length!=0){
    sensorList.length=0
    res.forEach(el=>{
      el.isOpens=el.isOpen=='0' ? '正常' : '关闭'
      sensorList.push({name:el.pointName,warn:el.isOpens,times:el.time})
    })
  }
}
//获取火焰传感器监测数据
async function getHyRealDataList() {
  let res = await getHyRealData({ areaCode: 'zybds001' })
  console.log(res, '火焰传感器数据------')
  if(res.length!=0){
    sensorList1.length=0
    res.forEach(el=>{
      el.isOpens=el.isOpen=='0' ? '正常' : '关闭'
      sensorList1.push({name:el.pointName,warn:el.isOpens,times:el.time})
    })
  }
}
//获取喷粉灭火装置数据
async function getPfmhRealDataList() {
  let res = await getPfmhRealData({ areaCode: 'zybds001' })
  console.log(res, '喷粉灭火装置数据---')
  if(res.length!=0){
    sensorList2.length=0
    res.forEach(el=>{
      el.isOpens=el.isOpen=='0' ? '正常' : '关闭'
      sensorList2.push({name:el.pointName,warn:el.isOpens,times:el.time})
    })
  }
}

//获取工作面光钎条数及测点编号
async function getInfosByAreaCodeList() {
  let res = await getInfosByAreaCode({ areaCode: 'zybds001' })
  if (res.length != 0) {
    gxSelectList.length = 0
    res.forEach(el => {
      gxSelectList.push({
        label: el.pointName,
        value: el.pointCode,
      })
    })
    gxSelect.value = gxSelect.value ? gxSelect.value : res[0]['pointCode']
    //获取光钎测温图表数据
    getGxcwHistoryDataByPointCodeList()
  }
}
//获取光钎测温图表数据
async function getGxcwHistoryDataByPointCodeList() {
  let res = await getGxcwHistoryDataByPointCode({ pointCode: gxSelect.value })
  echartDataGx.xData.length = 0
  echartDataGx.yData.length = 0
  echartDataGx.yData1.length = 0
  res.time.forEach(el => {
    echartDataGx.xData.push(el)
  })
  res.maxValue.forEach(el => {
    echartDataGx.yData.push(el)
  })
  res.minValue.forEach(el => {
    echartDataGx.yData1.push(el)
  })
}
//工作面光钎测温测点编号选项切换
function pointChange(val) {
  gxSelect.value = val
  getGxcwHistoryDataByPointCodeList()
}
onMounted(() => {
  getYwRealDataList()
  getHyRealDataList()
  getPfmhRealDataList()
  getInfosByAreaCodeList()
})



</script>

<style lang="less" scoped>
.fireMonitor {
  position: relative;
  width: calc(100% - 20px);
  height: 928px;
  margin: 0 10px;
  background-color: rgb(27 35 39 / 80%);

  .top-box {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    height: calc(70% - 2px);
    margin-bottom: 2px;
    padding: 10px 0;


    .table-box {
      width: 33%;
      height: 100%;
    }
  }

  .bot-box {
    width: 100%;
    height: 30%;

    .bot-item-title {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding: 10px;
      background: rgb(41 49 53 / 80%);

      .item-left {
        color: #fff;
        font-family: "Microsoft YaHei", sans-serif;
        font-size: 16px;
      }
    }

    .bot-item-content {
      box-sizing: border-box;
      height: calc(100% - 30px);
      padding: 10px;
      background: rgb(41 49 53 / 80%);
    }
  }
}

:deep(.vMonitor-select-selector) {
  border: none !important;
  background-color: rgb(15 64 88) !important;
  color: #a1dff8 !important;
}

:deep(.vMonitor-select-selection-placeholder) {
  color: #a1dff8 !important;
}

:deep(.vMonitor-select-arrow) {
  color: #a1dff8 !important;
}
</style>