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

<template>
  <div class="fireHome">
    <!-- 模型区域 -->
    <div class="moduleArea">
      <iframe src="http://82.157.13.146:18224/" width="100%" height="100%" frameborder="0"></iframe>
    </div>
    <div class="main-container">
      <div class="left-area">
        <!-- 左上区域 -->
        <div class="left-t">
          <div class="tcontent-area">
            <div class="tcontent-l">
              <div>全矿井</div>
              <div>监测区域</div>
            </div>
            <div class="tcontent-c">
              <div style="margin-bottom: 10px; color: #1fb3f7; font-size: 24px">低风险</div>
              <div style="color: #fff; font-size: 14px">自燃倾向性等级 : 容易自燃</div>
            </div>
            <div class="tcontent-r">火灾风险</div>
          </div>
        </div>
        <!-- 左中区域 -->
        <div class="left-c">
          <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '372px' }">
            <workJc :heightT="'45%'" :heightB="'55%'" :echartData="echartDataWork" :cardData="cardData" />
          </DanelBd>
        </div>
        <!-- 左下区域 -->
        <div class="left-b">
          <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
            :selectList="selectListMb" @changeSelect="changeSelect">
            <emptyJc :emptyData="emptyData" />
          </DanelBd>
        </div>
        <!-- 左底部区域 -->
        <div class="left-f">
          <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
        </div>
      </div>
      <div class="center-area">
        <div class="center-b">
          <DanelBd :moduleName="'工作面束管监测'" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '332px' }"
            commonTitle="selected" :selectList="selectList" @changeSelect="changeSelect">
            <fiberBunbleJc :bunbleData="bunbleData" />
          </DanelBd>
        </div>
      </div>
      <div class="right-area">
        <!-- 右上区域 -->
        <div class="right-t">
          <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
            <systemJc />
          </DanelBd>
        </div>
        <!-- 右中区域 -->
        <div class="right-c">
          <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
            :selectList="selectListDs" @changeSelect="changeSelect">
            <outFireJc :outFireData="outFireData" />
          </DanelBd>
        </div>
        <!-- 右下区域 -->
        <div class="right-b">
          <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
            :selectList="selectListBd" @changeSelect="changeSelect">
            <substationJc :echartDatas="echartDatas" />
          </DanelBd>
        </div>
        <!-- 右底部区域 -->
        <div class="right-f">
          <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
            :selectList="selectListAq" @changeSelect="changeSelect">
            <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
          </DanelBd>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import DanelBd from '../../common/danelBd.vue';
import workJc from './components/workJc.vue';
import emptyJc from './components/emptyJc.vue';
import fiberBunbleJc from './components/fiberBunbleJc.vue';
import systemJc from './components/systemJc.vue';
import outFireJc from './components/outFireJc.vue';
import substationJc from './components/substationJc.vue';
import safetyJc from './components/safetyJc.vue';
import { getFireAreaInfo, getMbRealData, getSgjcPointInfo, getSgjcRealDataByPointCode, getInfosByAreaCode, getGxcwHistoryDataByPointCode, getZcHfWd, getHeadingFace, getMainTrafficYw, getDsWd } from './firehome.api'

let moduleSelect = reactive([
  { label: '工作面束管监测' },
  // { label: '工作面光钎监测' },

])

let areaCode = ref('')
let pointCode = ref('')
let areaCodeMb = ref('')
let dsCode = ref('')
let areaCodeBd = ref('')
let pointCodeBd = ref('')
let pointCodeAq = ref('')

//工作面风险监测数据
let echartDataWork = reactive<any[]>([])
let cardData = reactive<any[]>([])
let selectList = reactive<any[]>([])
let bunbleData = reactive<any[]>([])

//密闭采空区数据
let selectListMb = reactive<any[]>([])
let emptyData = reactive<any>([])

//带式输送机防灭火监控系统
let selectListDs = reactive<any[]>([])
let outFireData = reactive<any[]>([])

//变电硐室
let selectListBd = reactive<any[]>([])
let echartDatas = reactive({
  xData: [],
  yData: [],
  yData1: []
})

//安全监控
let selectListAq = reactive<any[]>([
  { label: "综放工作面传感器监测", value: 'one' },
  { label: "掘进工作面传感器监测", value: 'two' },
  { label: "主运输系统传感器监测", value: 'three' },
  { label: '机电硐室及配电点传感器监测', value: 'four' }
])
let safetyHead = reactive<any[]>([])
let safetyList = reactive<any[]>([])

//下拉选项切换
function changeSelect(data) {
  console.log(data, '下拉------')
  switch (data.label) {
    case '密闭采空区监测系统':
      areaCodeMb.value = data.value
      getMbRealDataList()
      break;
    case '工作面束管监测':
      pointCode.value = data.value
      getSgjcRealDataByPointCodeList()
      break;
    case '带式输送机防灭火监控系统':
      dsCode.value = data.value
      getFireAreaInfoListDs()
      break;
    case '变电硐室防灭火监控系统':
      pointCodeBd.value = data.value
      getGxcwHistoryDataByPointCodeList()
      break;
    case '安全监控系统':
      pointCodeAq.value = data.value
      getTableList()
      break;
  }

}

//获取工作面风险监测数据
async function getFireAreaInfoList() {
  echartDataWork.length = 0
  cardData.length = 0
  let res = await getFireAreaInfo({ fireCauseType: 2 })

  if (res.length != 0) {
    let data = res.filter(v => v.areaType == 2)

    data.forEach(el => {
      cardData.push({
        title: '风险',
        val: el.warningLevel == 1 ? '低' : el.warningLevel == 2 ? '中' : el.warningLevel == 3 ? '较大' : el.warningLevel == 4 ? '重大' : '--',
        label: el.areaName,
        title1: '温度最大值',
        val1: el.infoTypeTwo.maxTemperature,
      },)
    })
    areaCode.value = data[0].areaCode
    //工作面束管监测
    getSgjcPointInfoList()
  }
}

//获取密闭下拉列表
async function getFireAreaInfoListMb() {
  selectListMb.length = 0
  let res = await getFireAreaInfo({ fireCauseType: 2 })
  console.log(res, '密闭数据')
  if (res.length != 0) {
    let dataMb = res.filter(m => m.areaType == 1)
    dataMb.forEach(m => {
      selectListMb.push({ label: m.areaName, value: m.areaCode })
    })
    areaCodeMb.value = selectListMb[0]['value']
    //获取密闭监测实时信息
    getMbRealDataList()
  }
}
//获取密闭监测实时信息
async function getMbRealDataList() {
  emptyData.length = 0
  let res = await getMbRealData({ areaCode: areaCodeMb.value })
  console.log(res, '密闭监测实时信息')
  res.forEach(el => {
    emptyData.push({ label: el.name, val: el.currentValue },)
  })
}

//工作面束管监测
async function getSgjcPointInfoList() {
  selectList.length = 0
  let res = await getSgjcPointInfo({ areaCode: areaCode.value })
  console.log(res, '工作面束管列表---')
  if (res.length != 0) {
    res.forEach(el => {
      selectList.push({ label: el.pointName, value: el.pointCode })
    })
    pointCode.value = selectList[0]['value']
    //获取工作面束管测点实时数据  
    getSgjcRealDataByPointCodeList()
  }
}
//获取工作面束管测点实时数据
async function getSgjcRealDataByPointCodeList() {
  bunbleData.length = 0
  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
  console.log(res, '束管测点实时数据---')
  if (res.length != 0) {
    res.forEach(el => {
      bunbleData.push({
        type: el.type,
        label: '最大浓度',
        val: el.currentValue,
        label1: '位置',
        val1: el.position,
        label2: '时间',
        val2: el.time,
      })
    })
  }
}

//带式输送机防灭火监控系统
async function getFireAreaInfoListDs() {
  selectListDs.length = 0
  outFireData.length = 0
  const res = await getFireAreaInfo({})
  if (res.length != 0) {
    let dataDs = res.filter(m => m.areaType == 4)
    console.log(dataDs, '带式输送机防灭火')
    dataDs.forEach(el => {
      selectListDs.push({ label: el.areaName, value: el.areaName })
    })
    if (dsCode.value) {
      let dataName = dataDs.filter(v => v.areaName == dsCode.value)[0]
      console.log(dataName, '0000000=======')
      outFireData.push(
        { title: '光钎预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
        { title: '一氧化碳预警', val: dataName.infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
        { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
      )
    } else {
      outFireData.push(
        { title: '光钎预警', val: dataDs[0].infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
        { title: '一氧化碳预警', val: dataDs[0].infoTypeTwo.returnAirCornerCO, dw: 'ppm', label: '最高浓度' },
        { title: '烟雾预警', val: dataDs[0].infoTypeTwo.hazard, dw: '', label: '状态' },
      )
    }



  }

}

//变电硐室防灭火监控系统
async function getFireAreaInfoListBd() {
  const res = await getFireAreaInfo({})
  if (res.length != 0) {
    let dataBd = res.filter(m => m.areaType == 5)
    console.log(dataBd, '变电硐室-----')
    areaCodeBd.value = dataBd[0].areaCode
    //获取光钎条数及测点编号
    getInfosByAreaCodeList()
  }
}
//获取光钎条数及测点编号
async function getInfosByAreaCodeList() {
  selectListBd.length = 0
  let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value })
  console.log(res, 'res000999')
  if (res.length != 0) {
    res.forEach(el => {
      selectListBd.push({
        label: el.pointName,
        value: el.pointCode
      })
    })
    pointCodeBd.value = selectListBd[0].value
    //获取光钎测温图表数据
    getGxcwHistoryDataByPointCodeList()
  }
}

//获取光钎测温图表数据
async function getGxcwHistoryDataByPointCodeList() {
  echartDatas.xData.length = 0
  echartDatas.yData.length = 0
  echartDatas.yData1.length = 0
  let res = await getGxcwHistoryDataByPointCode({ pointCode: pointCodeBd.value })
  console.log(res, '光钎测温图表数据-------')
  res.time.forEach(el => {
    echartDatas.xData.push(el)
  })
  res.maxValue.forEach(el => {
    echartDatas.yData.push(el)
  })
  res.minValue.forEach(el => {
    echartDatas.yData1.push(el)
  })
}

//获取安全监控列表数据
function getTableList() {
  switch (pointCodeAq.value) {
    case 'one':
      getZcHfWdList()
      break;
    case 'two':
      getHeadingFaceList()
      break;
    case 'three':
      getMainTrafficYwList()
      break;
    case 'four':
      getDsWdList()
      break;
    default:
      getZcHfWdList()
      break
  }
}
//获取综放工作面传感器监测数据
async function getZcHfWdList() {
  safetyHead.length = 0
  safetyList.length = 0
  let res = await getZcHfWd()
  console.log(res, '综放工作面传感器监测数据')
  safetyHead.push(
    { label: '测点位置' },
    { label: '温度(°C)' },
    { label: '预警级别' },
    { label: '时间' }
  )
  if (res.length != 0) {
    res.forEach(el => {
      safetyList.push({ address: el.nodePlacement, temp: el.detectValue + '', grade: el.warningMsg, time: el.dateTime })
    })
  }
}

//获取掘进工作面传感器监测数据
async function getHeadingFaceList() {
  safetyHead.length = 0
  safetyList.length = 0
  let res = await getHeadingFace()
  safetyHead.push(
    { label: '测点位置' },
    { label: 'CO浓度(%)' },
    { label: '温度' },
    { label: '预警级别' },
    { label: '时间' },
  )
  console.log(res, '掘进工作面传感器监测数据')
  if (res.length != 0) {
    res.forEach(el => {
      safetyList.push({ address: el.name, nd: el.co + '', temp: el.wd + '', grade: el.warningMsg, time: el.dateTime })
    })
  }
}
//获取运输系统烟雾传感器数据
async function getMainTrafficYwList() {
  safetyHead.length = 0
  safetyList.length = 0
  let res = await getMainTrafficYw()
  safetyHead.push(
    { label: '测点位置' },
    { label: '温度(°C)' },
    { label: '预警级别' },
    { label: '时间' }
  )
  console.log(res, '运输系统烟雾传感器数据')
  if (res.length != 0) {
    res.forEach(el => {
      safetyList.push({ address: el.nodePlacement, temp: el.detectValue + '', grade: el.warningMsg, time: el.dateTime })
    })
  }
}

//获取机电硐室传感器数据
async function getDsWdList() {
  safetyHead.length = 0
  safetyList.length = 0
  let res = await getDsWd()
  console.log(res, '机电硐室传感器数据')
  safetyHead.push(
    { label: '测点位置' },
    { label: '温度(°C)' },
    { label: '预警级别' },
    { label: '时间' }
  )
  if (res.length != 0) {
    res.forEach(el => {
      safetyList.push({ address: el.nodePlacement, temp: el.detectValue + '', grade: el.warningMsg, time: el.dateTime })
    })
  }
}


onMounted(() => {
  //工作面
  getFireAreaInfoList()
  //密闭
  getFireAreaInfoListMb()
  //带式
  getFireAreaInfoListDs()
  //变电硐室
  getFireAreaInfoListBd()

  //安全监控
  getTableList()
})
</script>

<style lang="less" scoped>
@font-face {
  font-family: douyuFont;
  src: url('@/assets/font/douyuFont.otf');
}

.fireHome {
  position: relative;
  // width: calc(100% - 20px);
  // height: calc(100vh - 82px);
  width: 100%;
  // height: calc(100vh - 70px);
  height: 875px;
  margin-top: 50px;

  .moduleArea {
    width: 100%;
    height: 100%;
  }

  .main-container {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 15px 10px;

    .left-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 30%;
      height: 100%;
      margin-right: 15px;

      .left-t {
        position: relative;
        width: 100%;
        height: 121px;
        background: url('@/assets/images/fire/firehome/qkjaq.png') no-repeat center;
        background-size: 100% 100%;

        .tcontent-area {
          display: flex;
          position: absolute;
          top: 50%;
          left: 0;
          box-sizing: border-box;
          align-items: center;
          justify-content: space-around;
          width: 100%;
          height: 90px;
          padding: 0 20px;
          transform: translate(0, -50%);

          .tcontent-l {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #9da5aa;
            font-size: 16px;
            letter-spacing: 3px;
          }

          .tcontent-c {
            display: flex;
            flex: 3;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
          }

          .tcontent-r {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #9da5aa;
            font-size: 16px;
            letter-spacing: 3px;
          }
        }
      }

      .left-c {
        width: 100%;
      }

      .left-b {
        width: 100%;
      }

      .left-f {
        width: 100%;
      }
    }

    .center-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      width: calc(40% - 30px);

      .center-b {
        width: 100%;
      }
    }

    .right-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 30%;
      height: 100%;
      margin-left: 15px;

      .right-t {
        width: 100%;
      }

      .right-c {
        width: 100%;
      }

      .right-b {
        width: 100%;
      }

      .right-f {
        width: 100%;
      }
    }
  }
}
</style>