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

<template>
  <div class="fireGoaf">
    <div class="composite-left-box">
      <basicTree :treeData="treeData" @selectChange="selectChange"></basicTree>
    </div>
    <div class="composite-right-box">
      <div class="composite-top-box">
        <basicCard3 :card3List="card3List" :warningLevel="warningLevel" @toggleChange="toggleChange"></basicCard3>
      </div>
      <div class="composite-bot-box">

        <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>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted,onUnmounted } from 'vue'
import basicCard3 from '../../common/basicCard3.vue';
import basicEchartLine from '../../common/basicEchartLine.vue';
import basicTree from '../../common/basicTree.vue'
import { RangePicker, } from 'ant-design-vue';
import dayjs from 'dayjs';
import { getFireAreaInfo, getMbRealData, getMbHistoryData } from './goaf.api'


let TimeRange = ref<any>([dayjs().subtract(60, 'minute').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')])  //查询时间
let card3List = reactive<any[]>([])

//左侧菜单树
const treeData = reactive<any[]>([])
let areaCode = ref('')
let warningLevel = ref('')//风险等级
let type = ref('')

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

let echartData = 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')
}

//点击左侧树节点
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 ? '重大风险' : '--'
  getMbRealDataList()
}

//获取左侧菜单树
async function getFireAreaInfos() {
  const res = await getFireAreaInfo({ fireCauseType: 2 })
  if (res.length != 0) {
    treeData.length = 0
    res.forEach((el, ind) => {
      if (el.areaType == 1) {
        treeData.push({ name: el.areaName, value: el.ind, id: el.ind, pid: null, areaCode: el.areaCode, warningLevel: el.warningLevel })
      }
    })
    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-------')
    getMbRealDataList()
  }
}

//获取密闭监测实时数据
async function getMbRealDataList() {

  let res = await getMbRealData({ areaCode: areaCode.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 })
    })
    type.value = type.value ? type.value : card3List[0]['title']
    //获取密闭图表数据
    getMbHistoryDataList()
  }
}
//密闭实时数据选项切换
function toggleChange(title) {
  console.log(title, 'title---------')
  type.value = title
  getMbHistoryDataList()
}
//获取密闭图表数据
async function getMbHistoryDataList() {
 
  let res = await getMbHistoryData({ areaCode: areaCode.value, type: type.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()

})

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

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

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

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

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

    .composite-bot-box {
      box-sizing: border-box;
      width: 100%;
      height: calc(100% - 265px);
      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-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;
}
</style>