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

<template>
  <div class="workPlaceWarn">
    <div class="workPlace-left-box">
      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
    </div>
    <div class="workPlace-right-box">
      <div style="width:100%;height:100%"
        v-if="workBtnList.length != 0 || echartDataGx.xData.length != 0 || echartDataGx.yData.length != 0 || echartDataGx.yData1.length != 0 || card3List.length != 0 || echartData.xData.length != 0 || echartData.yData.length != 0 || echartData.yData1.length != 0">
        <!-- 光钎 -->
        <div class="top-box-card" v-if="flagShow == 'gx' || flagShow == 'all'">
          <basicCard :cardContentList="cardContentList" />
        </div>
        <div class="top-box-btn" v-if="flagShow == 'gx' || flagShow == 'all'">
          <basicWorkBtn :workBtnList="workBtnList" @btnToggle="btnToggle" />
        </div>
        <div class="center-box" v-if="flagShow == 'gx' || flagShow == 'all'">
          <basicEchartLine :gridV="gridV" :echartData="echartDataGx" />
        </div>


        <!-- 束管 -->
        <div class="composite-top-box" v-if="flagShow == 'sg' || flagShow == 'all'">
          <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
        </div>
        <div class="composite-bot-box" v-if="flagShow == 'sg' || flagShow == 'all'">
          <div class="search-area">
            <div class="area-title">束管系统监测</div>
            <RangePicker v-model="TimeRange" size="small" style="width: 260px" :show-time="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']" @change="onDataChange" />
          </div>
          <div class="content-area">
            <basicEchartLine :gridV="gridV" :echartData="echartData"></basicEchartLine>
          </div>

        </div>
        <!-- 通用 -->
        <div :class="flagShow == 'sg' ? 'bot-box1' : 'bot-box'">
          <div class="bot-box-card" v-for="(item, index) in botCardList" :key="index">
            <basicSensor :sensorTitle="item.title" :sensorList="item.sensorList" :headList="headList" />
          </div>
        </div>
      </div>
      <div style="display: flex;align-items: center;justify-content: center;width:100%;height:100%;" v-else>
        <img style="width:252px; height:172px" src="../../../../assets/images/nodata.png" alt="">
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { getAssetURL } from '../../../../utils/ui';
import basicCard from '../../common/basicCard.vue';
import basicWorkBtn from '../../common/basicWorkBtn.vue';
import basicEchartLine from '../../common/basicEchartLine.vue';
import basicSensor from '../../common/basicSensor.vue';
import basicTree from '../../common/basicTree.vue'
import { getFireAreaInfo, getInfosByAreaCode, getGxcwHistoryDataByPointCode, getYwRealData, getHyRealData, getPlzzRealData, getSgjcPointInfo, getSgjcRealDataByPointCode, getSgjcHistoryData } from './workeFace.api'
import dayjs from 'dayjs';
import { RangePicker, Select } from 'ant-design-vue';
import basicCard3 from '../../common/basicCard3.vue';

let areaCode = ref('')
let warningLevel = ref('')
let flagShow = ref('')
let gxSelect = ref('')
let pointCode = ref('')
let gasType = ref('')
let card3List = reactive<any[]>([])
let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
let cardContentList = reactive([
  { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度(℃)', val: '' },
  { id: 1, imgSrc: getAssetURL('workPlaceWarn/jd-zdwd.png'), label: '最低温度(℃)', val: '' },
  {
    id: 2,
    imgSrc: getAssetURL('workPlaceWarn/jd-pjwd.png'),
    label: '平均温度',
    val: '',
  },
  { id: 3, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度(ppm)', val: '' },

]);

let workBtnList = reactive<any[]>([]);

let botCardList = reactive([
  {
    title: '烟雾传感器', sensorList: []
  },
  {
    title: '火焰传感器', sensorList: []
  },
  {
    title: '自动喷淋灭火装置', sensorList: []
  },
]);
let headList = reactive([
  { id: 0, title: '名称' },
  { id: 1, title: '状态' },
  { id: 3, title: '时间' },
]);

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

let gridV = reactive({
  top: '15%',
  left: '3%',
  right: '3%',
  bottom: '10%',
})

let echartData = reactive({
  xData: [],
  yData: [],
  yData1: [],
  legendName: ['实时值', '预测值']
})

let echartDataGx = reactive(
  {
    xData: [],
    yData: [],
    yData1: [],
    legendName: ['最高温度', '最低温度']
  }
)

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

//时间选项切换
function onDataChange(value, dateString) {
  TimeRange.value = [dateString[0], dateString[1]]
  console.log(TimeRange, 'TimeRange')
}

//获取左侧菜单树
async function getFireAreaInfos() {
  const res = await getFireAreaInfo({})
  if (res.length != 0) {
    treeData.length = 0
    res.forEach((el, ind) => {
      if (el.areaType == 4) {
        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 })
      }
    })
    areaCode.value = areaCode.value ? areaCode.value : treeData[0]['areaCode']
    warningLevel.value = treeData[0].warningLevel == 1 ? '低风险' : treeData[0].warningLevel == 2 ? '中风险' : treeData[0].warningLevel == 3 ? '较高风险' : treeData[0].warningLevel == 4 ? '重大风险' : '--'
    console.log(treeData, 'treeData-------')
    cardContentList[0]['val'] = treeData[0].infoTypeTwo.maxTemperature
    cardContentList[1]['val'] = treeData[0].infoTypeTwo.minTemperature
    cardContentList[2]['val'] = treeData[0].infoTypeTwo.aveTemperature
    cardContentList[3]['val'] = treeData[0].infoTypeTwo.returnAirCornerCO
    //获取烟雾传感器数据
    getYwRealDataList()
    //获取火焰传感器监测数据
    getHyRealDataList()
    //获取自动喷淋灭火装置数据
    getPlzzRealDataList()
    if (treeData[0]['gxcwCnt'] > 0 && treeData[0]['sgjcCnt'] > 0) {
      flagShow.value = 'all'
      //获取工作面光钎条数及测点编号
      getInfosByAreaCodeList()
      // //获取工作面束管测点编号列表
      getSgjcPointInfoList()
    } else if (treeData[0]['gxcwCnt'] > 0) {
      flagShow.value = 'gx'
      //获取光钎条数及测点编号
      getInfosByAreaCodeList()
    } else if (treeData[0]['sgjcCnt'] > 0) {
      flagShow.value = 'sg'
      //获取工作面束管测点编号列表
      getSgjcPointInfoList()
    }
  }
}

//点击左侧树节点
function selectChange(treeNode) {
  console.log(treeNode, 'treeNode---')
  areaCode.value = treeData.filter((v) => v.name == treeNode.node.dataRef.title)[0]['areaCode']
  let level = treeData.filter((m) => m.name == treeNode.node.dataRef.title)[0]['warningLevel']
  warningLevel.value = level == 1 ? '低风险' : level == 2 ? '中风险' : level == 3 ? '较高风险' : level == 4 ? '重大风险' : '--'
  let data = treeData.filter((a) => a.name == treeNode.node.dataRef.title)[0]
  cardContentList[0]['val'] = data.infoTypeTwo.maxTemperature
  cardContentList[1]['val'] = data.infoTypeTwo.minTemperature
  cardContentList[2]['val'] = data.infoTypeTwo.aveTemperature
  cardContentList[3]['val'] = data.infoTypeTwo.returnAirCornerCO
  //获取烟雾传感器数据
  getYwRealDataList()
  //获取火焰传感器监测数据
  getHyRealDataList()
  //获取自动喷淋灭火装置数据
  getPlzzRealDataList()
  let gxcwCnt = treeData.filter((g) => g.name == treeNode.node.dataRef.title)[0]['gxcwCnt']
  let sgjcCnt = treeData.filter((s) => s.name == treeNode.node.dataRef.title)[0]['sgjcCnt']
  if (gxcwCnt > 0 && sgjcCnt > 0) {
    flagShow.value = 'all'
    //获取工作面光钎条数及测点编号
    getInfosByAreaCodeList()
    //获取工作面束管测点编号列表
    getSgjcPointInfoList()
  } else if (gxcwCnt > 0) {
    flagShow.value = 'gx'
    //获取工作面光钎条数及测点编号
    getInfosByAreaCodeList()

  } else if (sgjcCnt > 0) {
    flagShow.value = 'sg'
    //获取工作面束管测点编号列表
    getSgjcPointInfoList()
  }
}

//获取光钎条数及测点编号
async function getInfosByAreaCodeList() {

  let res = await getInfosByAreaCode({ areaCode: areaCode.value })
  console.log(res, '光钎条数及测点编号')
  if (res.length != 0) {
    workBtnList.length = 0
    res.forEach(el => {
      workBtnList.push({
        label: el.pointName,
        value: el.pointCode,
      })
    })
    gxSelect.value = gxSelect.value ? gxSelect.value : res[0]['pointCode']
    //获取光钎测温图表数据
    getGxcwHistoryDataByPointCodeList()
  }
}

//光钎选项切换
function btnToggle(item) {
  console.log(item, 'item----=====')
  gxSelect.value = item.value
  getGxcwHistoryDataByPointCodeList()
}

//获取光钎测温图表数据
async function getGxcwHistoryDataByPointCodeList() {

  let res = await getGxcwHistoryDataByPointCode({ pointCode: gxSelect.value })
  console.log(res, '光钎测温图表数据')
  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)
  })
}

//获取烟雾传感器监测数据
async function getYwRealDataList() {

  let res = await getYwRealData({ areaCode: areaCode.value })
  console.log(res, '烟雾传感器监测数据')
  if (res.length != 0) {
    botCardList[0].sensorList.length = 0
    res.forEach(el => {
      el.isOpen = el.isOpen == '0' ? '无烟' : '有烟'
      botCardList[0].sensorList.push({ name: el.pointName, status: el.isOpen, times: el.time })
    })

  }
}

//获取火焰传感器监测数据
async function getHyRealDataList() {

  let res = await getHyRealData({ areaCode: areaCode.value })
  console.log(res, '火焰传感器监测数据')
  if (res.length != 0) {
    botCardList[1].sensorList.length = 0
    res.forEach(el => {
      el.isOpen = el.isOpen == '0' ? '无火' : '有火'
      botCardList[1].sensorList.push({ name: el.pointName, status: el.isOpen, times: el.time })
    })

  }
}

//获取喷淋设备监测数据
async function getPlzzRealDataList() {

  let res = await getPlzzRealData({ areaCode: areaCode.value })
  console.log(res, '自动喷淋灭火装置数据')
  if (res.length != 0) {
    botCardList[2].sensorList.length = 0
    res.forEach(el => {
      el.isOpen = el.isOpen == '0' ? '正常' : '异常'
      botCardList[2].sensorList.push({ name: el.pointName, status: el.isOpen, times: el.time })
    })

  }

}

//获取束管测点编号列表
async function getSgjcPointInfoList() {
  let res = await getSgjcPointInfo({ areaCode: areaCode.value })
  console.log(res, '束管测点编号列表')
  if (res.length != 0) {
    pointCode.value = res[0]['pointCode']
    //获取束管测点实时数据  
    getSgjcRealDataByPointCodeList()
  }
}

//束管选项切换
function toggleChange(title) {
  gasType.value = title
  getSgjcHistoryDataList()
}

//获取束管测点实时数据
async function getSgjcRealDataByPointCodeList() {

  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
  console.log(res, '束管测点实时数据======')
  if (res.length != 0) {
    card3List.length = 0
    res.forEach(el => {
      card3List.push({ title: el.type, ndLabel: '浓度', ndVal: el.currentValue, tLabel: '时间', tVal: el.time, aLabel: '位置', aVal: el.position })
    })
    gasType.value = gasType.value ? gasType.value : card3List[0]['title']
    //获取束管曲线数据
    getSgjcHistoryDataList()
  }
}

//获取束管曲线数据
async function getSgjcHistoryDataList() {

  let res = await getSgjcHistoryData({ pointCode: pointCode.value, type: gasType.value, startTime: TimeRange.value[0], endTime: TimeRange.value[1] })
  console.log(res, '束管曲线数据-------')
  echartData.xData.length = 0
  echartData.yData.length = 0
  echartData.yData1.length = 0
  res.time.forEach(el => {
    echartData.xData.push(el)
  })
  res.value.forEach(el => {
    echartData.yData.push(el)
  })
}

onMounted(() => {
  getFireAreaInfos()
  getMonitor()
})
</script>

<style lang="less" scoped>
.workPlaceWarn {
  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;

  .workPlace-left-box {
    width: 220px;
    height: 100%;
    background-color: rgb(27 35 39 / 80%);
  }

  .workPlace-right-box {
    box-sizing: border-box;
    width: calc(100% - 230px);
    height: 100%;
    margin-left: 10px;
    padding: 15px 10px;
    overflow-y: auto;
    background-color: rgb(27 35 39 / 80%);

    .top-box-card {
      width: 100%;
      height: 110px;
      margin-bottom: 15px;
    }

    .top-box-btn {
      width: 100%;
      height: 100px;
    }

    .center-box {
      width: 100%;
      height: 260px;
      margin-bottom: 15px;
      border: 1px solid #1e96cd;
    }

    .bot-box {
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      height: calc(100% - 500px);
      overflow-x: auto;

      .bot-box-card {
        width: 540px;
        height: 100%;
      }
    }

    .bot-box1 {
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      height: calc(100% - 545px);
      overflow-x: auto;

      .bot-box-card {
        width: 540px;
        height: 100%;
      }
    }

    .composite-top-box {
      width: 100%;
      height: 235px;
      margin-bottom: 15px;
    }

    .composite-bot-box {
      box-sizing: border-box;
      width: 100%;
      // height: calc(100% - 250px);
      height: 280px;
      margin-bottom: 15px;
      padding: 10px 15px;
      border: 1px solid #1e96cd;
      background-color: rgb(41 49 53 / 80%);

      .search-area {
        display: flex;
        box-sizing: border-box;
        align-items: center;
        justify-content: space-between;
        height: 30px;

        .area-title {
          color: #fff;
          // font-family: douyuFont;
          font-family: "Microsoft YaHei", sans-serif;
          font-size: 16px;
        }
      }

      .content-area {
        height: calc(100% - 30px);
      }
    }
  }
}

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

:deep(.vMonitor-picker-input >input) {
  color: #a1dff8 !important;
  text-align: center !important;
}



:deep(.vMonitor-picker-separator) {
  color: #a1dff8 !important;
}

:deep(.vMonitor-picker-active-bar) {
  display: none !important;
}

:deep(.vMonitor-picker-suffix) {
  color: #a1dff8 !important;
}

: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>