修改gis路径

src/views/vent/dust/dustHome/index.vue

@@ -2,7 +2,7 @@
   <div class="dustHome">
     <!-- 模型区域 -->
     <!-- <div class="moduleArea">
-      <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
+      <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
     </div> -->
     <div class="main-container">
       <div class="left-area">
@@ -23,21 +23,41 @@
         <!-- 左中区域 -->
         <div class="left-c">
           <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '645px' }">
-            <workJc :heightT="'22%'" :heightB="'78%'" :cardData="cardData" :echartData="echartDataWork" />
+            <workJc
+              :heightT="'22%'"
+              :heightB="'78%'"
+              :cardData="cardData"
+              :echartData="echartDataWork"
+            />
           </DanelBd>
         </div>
         <!-- 左底部区域 -->
         <div class="left-f">
-          <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
+          <DanelBd
+            :moduleName="'GIS重点区域风险监测'"
+            :contentStyle="{ contentH: '0px' }"
+            commonTitle="switchs"
+          />
         </div>
       </div>
       <div class="center-area">
         <div class="center-t">
-          <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
+          <iframe
+            src="http://82.157.13.146:18224/valkyrja/"
+            width="100%"
+            height="100%"
+            frameborder="0"
+          ></iframe>
         </div>
         <div class="center-b">
-          <DanelBd :moduleName="'综放工作面粉尘浓度'" :contentStyle="{ contentH: '288px' }" :commonTitle="'selected'"
-            :selectList="selectListBd" :selectValue="sensorCode" @changeSelect="changeSelect">
+          <DanelBd
+            :moduleName="'综放工作面粉尘浓度'"
+            :contentStyle="{ contentH: '288px' }"
+            :commonTitle="'selected'"
+            :selectList="selectListBd"
+            :selectValue="sensorCode"
+            @change-select="changeSelect"
+          >
             <multipleDust :echartData="echartData" />
           </DanelBd>
         </div>
@@ -46,20 +66,35 @@
         <!-- 右上区域 -->
         <div class="right-t">
           <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '305px' }">
-            <dustFallDevice :deviceTotal="deviceTotal" :pwTotal="pwTotal" :interTotal="interTotal"
-              :unInterTotal="unInterTotal" :pwData="pwData" />
+            <dustFallDevice
+              :deviceTotal="deviceTotal"
+              :pwTotal="pwTotal"
+              :interTotal="interTotal"
+              :unInterTotal="unInterTotal"
+              :pwData="pwData"
+            />
           </DanelBd>
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '250px' }" commonTitle="selected"
-            :selectList="selectListBd" :selectValue="sensorCode" @changeSelect="changeSelect1">
+          <DanelBd
+            :moduleName="'粉尘关联指标'"
+            :contentStyle="{ contentH: '250px' }"
+            commonTitle="selected"
+            :selectList="selectListBd"
+            :selectValue="sensorCode"
+            @change-select="changeSelect1"
+          >
             <dustGlzb :dustGlzbData="dustGlzbData" />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '160px' }" commonTitle="selected">
+          <DanelBd
+            :moduleName="'粉尘静态指标'"
+            :contentStyle="{ contentH: '160px' }"
+            commonTitle="selected"
+          >
             <dustJtzb />
           </DanelBd>
         </div>
@@ -69,325 +104,335 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import DanelBd from '../../common/danelBd.vue';
-import workJc from '../../fire/fireHome/components/workJc.vue';
-import multipleDust from './components/multipleDust.vue';
-import dustFallDevice from './components/dustFallDevice.vue';
-import dustGlzb from './components/dustGlzb.vue';
-import dustJtzb from './components/dustJtzb.vue';
-import { getAreaTypeList, getRealSensorDataByType, getDustInfos, historyAndForecast, realData } from './dustHome.api'
-
-//工作面风险监测数据
-let cardData = reactive<any[]>([])
-let echartDataWork = reactive<any[]>([])
-let areaType = ref('')
-
-//综放工作面粉尘浓度数据
-let selectListBd = reactive<any[]>([])
-let sensorCode = ref('')
-let echartData = reactive({
-  xData: [],
-  yData: [],
-  legendName: ['实时值']
-})
-
-//智能喷雾降尘装置数据
-let deviceTotal = ref(0)
-let pwTotal = ref(0)
-let interTotal = ref(0)
-let unInterTotal = ref(0)
-let pwData = reactive<any[]>([])
-
-//粉尘关联指标数据
-let dustGlzbData = reactive<any[]>([
-  { label: '最高温度(℃)', val: 0 },
-  { label: '环境湿度(%)', val: 0 },
-  { label: '风速(m/s)', val: 0 },
-  { label: '采煤机', val: 0 },
-  { label: '水压(Mpa)', val: 0 },
-  { label: '水阀', val: 0 },
-])
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor() {
-  timer = setTimeout(
-    async () => {
-      await getFireAreaInfoList()
-      await getRealDataList()
+  import { ref, reactive, onMounted } from 'vue';
+  import DanelBd from '../../common/danelBd.vue';
+  import workJc from '../../fire/fireHome/components/workJc.vue';
+  import multipleDust from './components/multipleDust.vue';
+  import dustFallDevice from './components/dustFallDevice.vue';
+  import dustGlzb from './components/dustGlzb.vue';
+  import dustJtzb from './components/dustJtzb.vue';
+  import {
+    getAreaTypeList,
+    getRealSensorDataByType,
+    getDustInfos,
+    historyAndForecast,
+    realData,
+  } from './dustHome.api';
+
+  //工作面风险监测数据
+  let cardData = reactive<any[]>([]);
+  let echartDataWork = reactive<any[]>([]);
+  let areaType = ref('');
+
+  //综放工作面粉尘浓度数据
+  let selectListBd = reactive<any[]>([]);
+  let sensorCode = ref('');
+  let echartData = reactive({
+    xData: [],
+    yData: [],
+    legendName: ['实时值'],
+  });
+
+  //智能喷雾降尘装置数据
+  let deviceTotal = ref(0);
+  let pwTotal = ref(0);
+  let interTotal = ref(0);
+  let unInterTotal = ref(0);
+  let pwData = reactive<any[]>([]);
+
+  //粉尘关联指标数据
+  let dustGlzbData = reactive<any[]>([
+    { label: '最高温度(℃)', val: 0 },
+    { label: '环境湿度(%)', val: 0 },
+    { label: '风速(m/s)', val: 0 },
+    { label: '采煤机', val: 0 },
+    { label: '水压(Mpa)', val: 0 },
+    { label: '水阀', val: 0 },
+  ]);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor() {
+    timer = setTimeout(async () => {
+      await getFireAreaInfoList();
+      await getRealDataList();
       if (timer) {
         timer = null;
       }
       getMonitor();
-    },
-    5000
-  );
-}
-
-//综放工作面下拉选项切换
-function changeSelect(data) {
-  console.log(data, '下拉选项-----')
-  sensorCode.value = data.value
-  getDustInfosList()
-}
-//粉尘关联指标下拉选项切换
-function changeSelect1(data) {
-  console.log(data, '下拉选项-----')
-  let param = selectListBd.filter(v => v.value == data.value)[0]
-  console.log(param, 'param------')
-  dustGlzbData[0].val = param['temperature'] || '--'
-  dustGlzbData[1].val = param['humidity'] || '--'
-  dustGlzbData[2].val = param['windSpeed'] || '--'
-  dustGlzbData[3].val = '--'
-  dustGlzbData[4].val = param['waterPressure'] || '--'
-  dustGlzbData[5].val = '--'
-}
-//获取工作面风险监测数据
-async function getFireAreaInfoList() {
-
-  let res = await getAreaTypeList()
-  console.log(res, '工作面风险监测数据')
-  if (res.length != 0) {
-    cardData.length = 0
-    echartDataWork.length = 0
-    res.forEach(el => {
-      cardData.push({
-        title: '风险',
-        val: el.warningLevel == 1 ? '低' : el.warningLevel == 2 ? '中' : el.warningLevel == 3 ? '较大' : el.warningLevel == 4 ? '重大' : '--',
-        label: el.typeName,
-        title1: '最大值',
-        val1: el.maxValue,
-      })
-    })
-    areaType.value = res[0]['areaType']
-    //获取粉尘选项数据
-    getRealSensorDataByTypeList()
+    }, 5000);
   }
-}
-//获取粉尘选项数据
-async function getRealSensorDataByTypeList() {
-
-  let res = await getRealSensorDataByType({ areaType: areaType.value })
-  console.log(res, '下拉选项数据---')
-  if (res.length != 0) {
-    selectListBd.length = 0
-    res.forEach(el => {
-      selectListBd.push({
-        label: el.name, value: el.code, temperature: el.temperature, humidity: el.humidity, windSpeed: el.windSpeed, waterPressure: el.waterPressure,
-      })
-    })
-    sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value']
-    dustGlzbData[0].val = selectListBd[0]['temperature'] || '--'
-    dustGlzbData[1].val = selectListBd[0]['humidity'] || '--'
-    dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--'
-    dustGlzbData[3].val = '--'
-    dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--'
-    dustGlzbData[5].val = '--'
 
-    //获取单项数据
-    getDustInfosList()
+  //综放工作面下拉选项切换
+  function changeSelect(data) {
+    console.log(data, '下拉选项-----');
+    sensorCode.value = data.value;
+    getDustInfosList();
+  }
+  //粉尘关联指标下拉选项切换
+  function changeSelect1(data) {
+    console.log(data, '下拉选项-----');
+    let param = selectListBd.filter((v) => v.value == data.value)[0];
+    console.log(param, 'param------');
+    dustGlzbData[0].val = param['temperature'] || '--';
+    dustGlzbData[1].val = param['humidity'] || '--';
+    dustGlzbData[2].val = param['windSpeed'] || '--';
+    dustGlzbData[3].val = '--';
+    dustGlzbData[4].val = param['waterPressure'] || '--';
+    dustGlzbData[5].val = '--';
+  }
+  //获取工作面风险监测数据
+  async function getFireAreaInfoList() {
+    let res = await getAreaTypeList();
+    console.log(res, '工作面风险监测数据');
+    if (res.length != 0) {
+      cardData.length = 0;
+      echartDataWork.length = 0;
+      res.forEach((el) => {
+        cardData.push({
+          title: '风险',
+          val:
+            el.warningLevel == 1
+              ? '低'
+              : el.warningLevel == 2
+                ? '中'
+                : el.warningLevel == 3
+                  ? '较大'
+                  : el.warningLevel == 4
+                    ? '重大'
+                    : '--',
+          label: el.typeName,
+          title1: '最大值',
+          val1: el.maxValue,
+        });
+      });
+      areaType.value = res[0]['areaType'];
+      //获取粉尘选项数据
+      getRealSensorDataByTypeList();
+    }
+  }
+  //获取粉尘选项数据
+  async function getRealSensorDataByTypeList() {
+    let res = await getRealSensorDataByType({ areaType: areaType.value });
+    console.log(res, '下拉选项数据---');
+    if (res.length != 0) {
+      selectListBd.length = 0;
+      res.forEach((el) => {
+        selectListBd.push({
+          label: el.name,
+          value: el.code,
+          temperature: el.temperature,
+          humidity: el.humidity,
+          windSpeed: el.windSpeed,
+          waterPressure: el.waterPressure,
+        });
+      });
+      sensorCode.value = sensorCode.value ? sensorCode.value : selectListBd[0]['value'];
+      dustGlzbData[0].val = selectListBd[0]['temperature'] || '--';
+      dustGlzbData[1].val = selectListBd[0]['humidity'] || '--';
+      dustGlzbData[2].val = selectListBd[0]['windSpeed'] || '--';
+      dustGlzbData[3].val = '--';
+      dustGlzbData[4].val = selectListBd[0]['waterPressure'] || '--';
+      dustGlzbData[5].val = '--';
+
+      //获取单项数据
+      getDustInfosList();
+    }
+  }
+  //获取单项数据
+  async function getDustInfosList() {
+    let res = await getDustInfos({ sensorCode: sensorCode.value });
+    console.log(res, '单项数据------');
+    //获取粉尘图表数据
+    historyAndForecastList(res.areaCode);
   }
-}
-//获取单项数据
-async function getDustInfosList() {
-  let res = await getDustInfos({ sensorCode: sensorCode.value })
-  console.log(res, '单项数据------')
   //获取粉尘图表数据
-  historyAndForecastList(res.areaCode)
-}
-//获取粉尘图表数据
-async function historyAndForecastList(params) {
-
-
-  let res = await historyAndForecast({ areaCode: params })
-  console.log(res, '粉尘图表数据----')
-  if (res.lineData.length != 0) {
-    echartData.xData.length = 0
-    echartData.yData.length = 0
-    res.lineData.forEach(el => {
-      echartData.xData.push(el.time)
-      echartData.yData.push(el.value || 0)
-    })
+  async function historyAndForecastList(params) {
+    let res = await historyAndForecast({ areaCode: params });
+    console.log(res, '粉尘图表数据----');
+    if (res.lineData.length != 0) {
+      echartData.xData.length = 0;
+      echartData.yData.length = 0;
+      res.lineData.forEach((el) => {
+        echartData.xData.push(el.time);
+        echartData.yData.push(el.value || 0);
+      });
+    }
   }
-}
-
-//获取智能喷雾降尘装置数据
-async function getRealDataList() {
 
-  let res = await realData({ type: "DustPw" })
-  console.log(res, '智能喷雾降尘装置数据')
-  if (res.length != 0) {
-    pwData.length = 0
-    deviceTotal.value = res.length
-    pwTotal.value = res.filter(v => v.deviceState == '1').length
-    interTotal.value = res.filter(v => v.stateConn == '1').length
-    unInterTotal.value = res.filter(v => v.stateConn != '1').length
-    res.forEach((el, index) => {
-      el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关'
-      el.stateConn = el.stateConn == '1' ? '链接' : '未链接'
-      pwData.push(el)
-    })
+  //获取智能喷雾降尘装置数据
+  async function getRealDataList() {
+    let res = await realData({ type: 'DustPw' });
+    console.log(res, '智能喷雾降尘装置数据');
+    if (res.length != 0) {
+      pwData.length = 0;
+      deviceTotal.value = res.length;
+      pwTotal.value = res.filter((v) => v.deviceState == '1').length;
+      interTotal.value = res.filter((v) => v.stateConn == '1').length;
+      unInterTotal.value = res.filter((v) => v.stateConn != '1').length;
+      res.forEach((el, index) => {
+        el.stateSpray = el.stateSpray == '1' ? '喷雾开' : '喷雾关';
+        el.stateConn = el.stateConn == '1' ? '链接' : '未链接';
+        pwData.push(el);
+      });
+    }
   }
-}
-
-
-onMounted(() => {
-  getFireAreaInfoList()
-  getRealDataList()
-  getMonitor()
-})
 
+  onMounted(() => {
+    getFireAreaInfoList();
+    getRealDataList();
+    getMonitor();
+  });
 </script>
 
 <style lang="less" scoped>
-@font-face {
-  font-family: douyuFont;
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.dustHome {
-  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%;
+  @font-face {
+    font-family: douyuFont;
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .main-container {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    justify-content: space-between;
+  .dustHome {
+    position: relative;
+    // width: calc(100% - 20px);
+    // height: calc(100vh - 82px);
     width: 100%;
-    height: 100%;
-    padding: 15px 10px;
+    // height: calc(100vh - 70px);
+    height: 875px;
+    margin-top: 50px;
 
-    .left-area {
+    .moduleArea {
+      width: 100%;
+      height: 100%;
+    }
+
+    .main-container {
       display: flex;
-      flex-direction: column;
-      align-items: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
       justify-content: space-between;
-      // width: 30%;
-      width: 392px;
+      width: 100%;
       height: 100%;
-      margin-right: 15px;
-
-      .left-t {
-        position: relative;
-        width: 100%;
-        // height: 121px;
-        height: 100px;
-        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;
+      padding: 15px 10px;
+
+      .left-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        // width: 30%;
+        width: 392px;
+        height: 100%;
+        margin-right: 15px;
+
+        .left-t {
+          position: relative;
           width: 100%;
-          height: 90px;
-          padding: 0 15px;
-          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: 14px;
-            letter-spacing: 2px;
-          }
-
-          .tcontent-c {
-            display: flex;
-            flex: 3;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-          }
+          // height: 121px;
+          height: 100px;
+          background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+          background-size: 100% 100%;
 
-          .tcontent-r {
+          .tcontent-area {
             display: flex;
-            flex: 1;
-            flex-direction: column;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            box-sizing: border-box;
             align-items: center;
-            justify-content: center;
-            height: 100%;
-            color: #9da5aa;
-            font-size: 14px;
-            letter-spacing: 2px;
+            justify-content: space-around;
+            width: 100%;
+            height: 90px;
+            padding: 0 15px;
+            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: 14px;
+              letter-spacing: 2px;
+            }
+
+            .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: 14px;
+              letter-spacing: 2px;
+            }
           }
         }
-      }
 
-      .left-c {
-        width: 100%;
-      }
+        .left-c {
+          width: 100%;
+        }
 
-      .left-f {
-        width: 100%;
+        .left-f {
+          width: 100%;
+        }
       }
-    }
 
-    .center-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      width: calc(100% - 814px);
+      .center-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        width: calc(100% - 814px);
 
-      .center-t {
-        width: 100%;
-        height: 60%;
-        margin-bottom: 15px;
-        overflow: hidden;
-      }
+        .center-t {
+          width: 100%;
+          height: 60%;
+          margin-bottom: 15px;
+          overflow: hidden;
+        }
 
-      .center-b {
-        width: 100%;
-        height: calc(40% - 15px);
+        .center-b {
+          width: 100%;
+          height: calc(40% - 15px);
+        }
       }
-    }
-
-    .right-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      // width: 30%;
-      width: 392px;
-      height: 100%;
-      margin-left: 15px;
 
-      .right-t {
-        width: 100%;
-      }
+      .right-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        // width: 30%;
+        width: 392px;
+        height: 100%;
+        margin-left: 15px;
+
+        .right-t {
+          width: 100%;
+        }
 
-      .right-c {
-        width: 100%;
-      }
+        .right-c {
+          width: 100%;
+        }
 
-      .right-b {
-        width: 100%;
+        .right-b {
+          width: 100%;
+        }
       }
     }
   }
-}
 </style>

src/views/vent/fire/fireHome/index.vue

@@ -2,7 +2,7 @@
   <div class="fireHome">
     <!-- 模型区域 -->
     <!-- <div class="moduleArea">
-      <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
+      <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
     </div> -->
     <div class="main-container">
       <div class="left-area">
@@ -23,28 +23,55 @@
         <!-- 左中区域 -->
         <div class="left-c">
           <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '430px' }">
-            <workJc :heightT="'30%'" :heightB="'70%'" :echartData="echartDataWork" :cardData="cardData" />
+            <workJc
+              :heightT="'30%'"
+              :heightB="'70%'"
+              :echartData="echartDataWork"
+              :cardData="cardData"
+            />
           </DanelBd>
         </div>
         <!-- 左下区域 -->
         <div class="left-b">
-          <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '170px' }" commonTitle="selected"
-           :selectValue="areaCodeMb" :selectList="selectListMb" @changeSelect="changeSelect">
+          <DanelBd
+            :moduleName="'密闭采空区监测系统'"
+            :contentStyle="{ contentH: '170px' }"
+            commonTitle="selected"
+            :selectValue="areaCodeMb"
+            :selectList="selectListMb"
+            @change-select="changeSelect"
+          >
             <emptyJc :emptyData="emptyData" />
           </DanelBd>
         </div>
         <!-- 左底部区域 -->
         <div class="left-f">
-          <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
+          <DanelBd
+            :moduleName="'GIS重点区域风险监测'"
+            :contentStyle="{ contentH: '0px' }"
+            commonTitle="switchs"
+          />
         </div>
       </div>
       <div class="center-area">
         <div class="center-t">
-          <iframe src="http://82.157.13.146:18224/valkyrja" width="100%" height="100%" frameborder="0"></iframe>
+          <iframe
+            src="http://82.157.13.146:18224/valkyrja/"
+            width="100%"
+            height="100%"
+            frameborder="0"
+          ></iframe>
         </div>
         <div class="center-b">
-          <DanelBd :moduleName="'工作面束管监测'" :selectValue="pointCode" :moduleSelect="moduleSelect" :contentStyle="{ contentH: '289px' }"
-            commonTitle="selected" :selectList="selectList" @changeSelect="changeSelect">
+          <DanelBd
+            :moduleName="'工作面束管监测'"
+            :selectValue="pointCode"
+            :moduleSelect="moduleSelect"
+            :contentStyle="{ contentH: '289px' }"
+            commonTitle="selected"
+            :selectList="selectList"
+            @change-select="changeSelect"
+          >
             <fiberBunbleJc :bunbleData="bunbleData" />
           </DanelBd>
         </div>
@@ -58,22 +85,40 @@
         </div>
         <!-- 右中区域 -->
         <div class="right-c">
-          <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
-            :selectList="selectListDs" :selectValue="dsCode" @changeSelect="changeSelect">
+          <DanelBd
+            :moduleName="'带式输送机防灭火监控系统'"
+            :contentStyle="{ contentH: '180px' }"
+            commonTitle="selected"
+            :selectList="selectListDs"
+            :selectValue="dsCode"
+            @change-select="changeSelect"
+          >
             <outFireJc :outFireData="outFireData" />
           </DanelBd>
         </div>
         <!-- 右下区域 -->
         <div class="right-b">
-          <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected"
-            :selectList="selectListBd" :selectValue="pointCodeBd" @changeSelect="changeSelect">
+          <DanelBd
+            :moduleName="'变电硐室防灭火监控系统'"
+            :contentStyle="{ contentH: '180px' }"
+            commonTitle="selected"
+            :selectList="selectListBd"
+            :selectValue="pointCodeBd"
+            @change-select="changeSelect"
+          >
             <substationJc :echartDatas="echartDatas" />
           </DanelBd>
         </div>
         <!-- 右底部区域 -->
         <div class="right-f">
-          <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '215px' }" commonTitle="selected"
-            :selectList="selectListAq" :selectValue="pointCodeAq" @changeSelect="changeSelect">
+          <DanelBd
+            :moduleName="'安全监控系统'"
+            :contentStyle="{ contentH: '215px' }"
+            commonTitle="selected"
+            :selectList="selectListAq"
+            :selectValue="pointCodeAq"
+            @change-select="changeSelect"
+          >
             <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
           </DanelBd>
         </div>
@@ -83,555 +128,597 @@
 </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('one')
-
-//工作面风险监测数据
-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[]>([])
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor() {
-  timer = setTimeout(
-    async () => {
+  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('one');
+
+  //工作面风险监测数据
+  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[]>([]);
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor() {
+    timer = setTimeout(async () => {
       //工作面
-      await getFireAreaInfoList()
+      await getFireAreaInfoList();
       //密闭
-      await getFireAreaInfoListMb()
+      await getFireAreaInfoListMb();
       //带式
-      await getFireAreaInfoListDs()
+      await getFireAreaInfoListDs();
       //变电硐室
-      await getFireAreaInfoListBd()
+      await getFireAreaInfoListBd();
       //安全监控
-      await getTableList()
+      await getTableList();
       if (timer) {
         timer = null;
       }
       getMonitor();
-    },
-    5000
-  );
-}
-
-//下拉选项切换
-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;
+    }, 5000);
   }
 
-}
-
-//获取工作面风险监测数据
-async function getFireAreaInfoList() {
-
-  let res = await getFireAreaInfo({ fireCauseType: 2 })
-
-  if (res.length != 0) {
-    echartDataWork.length = 0
-    cardData.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()
+  //下拉选项切换
+  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 getFireAreaInfoListMb() {
-
-  let res = await getFireAreaInfo({ fireCauseType: 2 })
-  console.log(res, '密闭数据')
-  if (res.length != 0) {
-    selectListMb.length = 0
-    let dataMb = res.filter(m => m.areaType == 1)
-    dataMb.forEach(m => {
-      selectListMb.push({ label: m.areaName, value: m.areaCode })
-    })
-   
-    areaCodeMb.value =areaCodeMb.value ?  areaCodeMb.value : selectListMb[0]['value']
-    //获取密闭监测实时信息
-    getMbRealDataList()
+
+  //获取工作面风险监测数据
+  async function getFireAreaInfoList() {
+    let res = await getFireAreaInfo({ fireCauseType: 2 });
+
+    if (res.length != 0) {
+      echartDataWork.length = 0;
+      cardData.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 getMbRealDataList() {
-
-  let res = await getMbRealData({ areaCode: areaCodeMb.value })
-  console.log(res, '密闭监测实时信息')
-  emptyData.length = 0
-  res.forEach(el => {
-    emptyData.push({ label: el.name, val: el.currentValue },)
-  })
-}
-
-//工作面束管监测
-async function getSgjcPointInfoList() {
-
-  let res = await getSgjcPointInfo({ areaCode: areaCode.value })
-  console.log(res, '工作面束管列表---')
-  if (res.length != 0) {
-    selectList.length = 0
-    res.forEach(el => {
-      selectList.push({ label: el.pointName, value: el.pointCode })
-    })
-    pointCode.value = pointCode.value ? pointCode.value : selectList[0]['value']
-    //获取工作面束管测点实时数据  
-    getSgjcRealDataByPointCodeList()
+
+  //获取密闭下拉列表
+  async function getFireAreaInfoListMb() {
+    let res = await getFireAreaInfo({ fireCauseType: 2 });
+    console.log(res, '密闭数据');
+    if (res.length != 0) {
+      selectListMb.length = 0;
+      let dataMb = res.filter((m) => m.areaType == 1);
+      dataMb.forEach((m) => {
+        selectListMb.push({ label: m.areaName, value: m.areaCode });
+      });
+
+      areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value'];
+      //获取密闭监测实时信息
+      getMbRealDataList();
+    }
   }
-}
-//获取工作面束管测点实时数据
-async function getSgjcRealDataByPointCodeList() {
-
-  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value })
-  console.log(res, '束管测点实时数据---')
-  if (res.length != 0) {
-    bunbleData.length = 0
-    res.forEach(el => {
-      bunbleData.push({
-        type: el.type,
-        label: '最大浓度',
-        val: el.currentValue,
-        label1: '位置',
-        val1: el.position,
-        label2: '时间',
-        val2: el.time,
-      })
-    })
+  //获取密闭监测实时信息
+  async function getMbRealDataList() {
+    let res = await getMbRealData({ areaCode: areaCodeMb.value });
+    console.log(res, '密闭监测实时信息');
+    emptyData.length = 0;
+    res.forEach((el) => {
+      emptyData.push({ label: el.name, val: el.currentValue });
+    });
   }
-}
-
-//带式输送机防灭火监控系统
-async function getFireAreaInfoListDs() {
-
-  const res = await getFireAreaInfo({})
-  if (res.length != 0) {
-    selectListDs.length = 0
-    outFireData.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 getSgjcPointInfoList() {
+    let res = await getSgjcPointInfo({ areaCode: areaCode.value });
+    console.log(res, '工作面束管列表---');
+    if (res.length != 0) {
+      selectList.length = 0;
+      res.forEach((el) => {
+        selectList.push({ label: el.pointName, value: el.pointCode });
+      });
+      pointCode.value = pointCode.value ? pointCode.value : selectList[0]['value'];
+      //获取工作面束管测点实时数据
+      getSgjcRealDataByPointCodeList();
     }
   }
-}
-
-//变电硐室防灭火监控系统
-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 getSgjcRealDataByPointCodeList() {
+    let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value });
+    console.log(res, '束管测点实时数据---');
+    if (res.length != 0) {
+      bunbleData.length = 0;
+      res.forEach((el) => {
+        bunbleData.push({
+          type: el.type,
+          label: '最大浓度',
+          val: el.currentValue,
+          label1: '位置',
+          val1: el.position,
+          label2: '时间',
+          val2: el.time,
+        });
+      });
+    }
   }
-}
-//获取光钎条数及测点编号
-async function getInfosByAreaCodeList() {
-
-  let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value })
-  console.log(res, 'res000999')
-  if (res.length != 0) {
-    selectListBd.length = 0
-    res.forEach(el => {
-      selectListBd.push({
-        label: el.pointName,
-        value: el.pointCode
-      })
-    })
-    pointCodeBd.value =pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value
-    //获取光钎测温图表数据
-    getGxcwHistoryDataByPointCodeList()
+
+  //带式输送机防灭火监控系统
+  async function getFireAreaInfoListDs() {
+    const res = await getFireAreaInfo({});
+    if (res.length != 0) {
+      selectListDs.length = 0;
+      outFireData.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 getGxcwHistoryDataByPointCodeList() {
-
-  let res = await getGxcwHistoryDataByPointCode({ pointCode: pointCodeBd.value })
-  console.log(res, '光钎测温图表数据-------')
-  echartDatas.xData.length = 0
-  echartDatas.yData.length = 0
-  echartDatas.yData1.length = 0
-  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 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 getZcHfWdList() {
-
-  let res = await getZcHfWd()
-  console.log(res, '综放工作面传感器监测数据')
-  safetyHead.length = 0
-  safetyList.length = 0
-  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 getInfosByAreaCodeList() {
+    let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value });
+    console.log(res, 'res000999');
+    if (res.length != 0) {
+      selectListBd.length = 0;
+      res.forEach((el) => {
+        selectListBd.push({
+          label: el.pointName,
+          value: el.pointCode,
+        });
+      });
+      pointCodeBd.value = pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value;
+      //获取光钎测温图表数据
+      getGxcwHistoryDataByPointCodeList();
+    }
   }
-}
-
-//获取掘进工作面传感器监测数据
-async function getHeadingFaceList() {
-
-  let res = await getHeadingFace()
-  safetyHead.length = 0
-  safetyList.length = 0
-  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 getGxcwHistoryDataByPointCodeList() {
+    let res = await getGxcwHistoryDataByPointCode({ pointCode: pointCodeBd.value });
+    console.log(res, '光钎测温图表数据-------');
+    echartDatas.xData.length = 0;
+    echartDatas.yData.length = 0;
+    echartDatas.yData1.length = 0;
+    res.time.forEach((el) => {
+      echartDatas.xData.push(el);
+    });
+    res.maxValue.forEach((el) => {
+      echartDatas.yData.push(el);
+    });
+    res.minValue.forEach((el) => {
+      echartDatas.yData1.push(el);
+    });
   }
-}
-//获取运输系统烟雾传感器数据
-async function getMainTrafficYwList() {
-
-  let res = await getMainTrafficYw()
-  safetyHead.length = 0
-  safetyList.length = 0
-  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 })
-    })
+
+  //获取安全监控列表数据
+  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 getDsWdList() {
-
-  let res = await getDsWd()
-  console.log(res, '机电硐室传感器数据')
-  safetyHead.length = 0
-  safetyList.length = 0
-  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 getZcHfWdList() {
+    let res = await getZcHfWd();
+    console.log(res, '综放工作面传感器监测数据');
+    safetyHead.length = 0;
+    safetyList.length = 0;
+    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() {
+    let res = await getHeadingFace();
+    safetyHead.length = 0;
+    safetyList.length = 0;
+    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() {
+    let res = await getMainTrafficYw();
+    safetyHead.length = 0;
+    safetyList.length = 0;
+    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,
+        });
+      });
+    }
+  }
 
-onMounted(() => {
-  //工作面
-  getFireAreaInfoList()
-  //密闭
-  getFireAreaInfoListMb()
-  //带式
-  getFireAreaInfoListDs()
-  //变电硐室
-  getFireAreaInfoListBd()
-  //安全监控
-  getTableList()
-  getMonitor()
+  //获取机电硐室传感器数据
+  async function getDsWdList() {
+    let res = await getDsWd();
+    console.log(res, '机电硐室传感器数据');
+    safetyHead.length = 0;
+    safetyList.length = 0;
+    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();
+    getMonitor();
+  });
 </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%;
+  @font-face {
+    font-family: douyuFont;
+    src: url('../../../../assets/font/douyuFont.otf');
   }
 
-  .main-container {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    justify-content: space-between;
+  .fireHome {
+    position: relative;
+    // width: calc(100% - 20px);
+    // height: calc(100vh - 82px);
     width: 100%;
-    height: 100%;
-    padding: 15px 10px;
+    // height: calc(100vh - 70px);
+    height: 875px;
+    margin-top: 50px;
+
+    .moduleArea {
+      width: 100%;
+      height: 100%;
+    }
 
-    .left-area {
+    .main-container {
       display: flex;
-      flex-direction: column;
-      align-items: center;
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
       justify-content: space-between;
-      // width: 30%;
-      width: 392px;
+      width: 100%;
       height: 100%;
-      margin-right: 15px;
-
-      .left-t {
-        position: relative;
-        width: 100%;
-        // height: 121px;
-        height: 100px;
-        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;
+      padding: 15px 10px;
+
+      .left-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        // width: 30%;
+        width: 392px;
+        height: 100%;
+        margin-right: 15px;
+
+        .left-t {
+          position: relative;
           width: 100%;
-          height: 90px;
-          padding: 0 15px;
-          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: 14px;
-            letter-spacing: 2px;
-          }
+          // height: 121px;
+          height: 100px;
+          background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+          background-size: 100% 100%;
 
-          .tcontent-c {
+          .tcontent-area {
             display: flex;
-            flex: 3;
-            flex-direction: column;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            box-sizing: border-box;
             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: 14px;
-            letter-spacing: 2px;
+            justify-content: space-around;
+            width: 100%;
+            height: 90px;
+            padding: 0 15px;
+            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: 14px;
+              letter-spacing: 2px;
+            }
+
+            .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: 14px;
+              letter-spacing: 2px;
+            }
           }
         }
-      }
 
-      .left-c {
-        width: 100%;
-      }
+        .left-c {
+          width: 100%;
+        }
 
-      .left-b {
-        width: 100%;
-      }
+        .left-b {
+          width: 100%;
+        }
 
-      .left-f {
-        width: 100%;
+        .left-f {
+          width: 100%;
+        }
       }
-    }
 
-    .center-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      width: calc(100% - 814px);
+      .center-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        width: calc(100% - 814px);
 
-      .center-t {
-        width: 100%;
-        height: 60%;
-        margin-bottom: 15px;
-        overflow: hidden;
-      }
+        .center-t {
+          width: 100%;
+          height: 60%;
+          margin-bottom: 15px;
+          overflow: hidden;
+        }
 
-      .center-b {
-        width: 100%;
-        height: calc(40% - 15px);
+        .center-b {
+          width: 100%;
+          height: calc(40% - 15px);
+        }
       }
-    }
 
-    .right-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      // width: 30%;
-      width: 392px;
-      height: 100%;
-      margin-left: 15px;
-
-      .right-t {
-        width: 100%;
-      }
+      .right-area {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        // width: 30%;
+        width: 392px;
+        height: 100%;
+        margin-left: 15px;
+
+        .right-t {
+          width: 100%;
+        }
 
-      .right-c {
-        width: 100%;
-      }
+        .right-c {
+          width: 100%;
+        }
 
-      .right-b {
-        width: 100%;
-      }
+        .right-b {
+          width: 100%;
+        }
 
-      .right-f {
-        width: 100%;
+        .right-f {
+          width: 100%;
+        }
       }
     }
   }
-}
 </style>