Merge branch 'master' of http://182.92.126.35:3000/hrx/vent-forewarn-micro

src/api/sys/monitor.ts

@@ -89,10 +89,12 @@ export function getMonitorSite(params: MonitorSiteParams, mode: ErrorMessageMode
 export const monitorSiteOperationUrl = 'http://82.157.13.146:18224/valkyrja/';
 
 /** 发送测点操作指令 */
-export function postMonitorOperation(el, params: MonitorSiteOperationParams) {
+export function postMonitorOperation(el: Window, params: MonitorSiteOperationParams) {
+  if (!el) return;
   el.postMessage(JSON.stringify(params), '*');
 }
 
+/** 处理测点操作反馈信息及其他相关的反馈信息 */
 export function handleMonitorOperation(
   raw: MessageEvent<string>,
   callback: (data: MonitorSiteOperation) => void,

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,7 +23,12 @@
         <!-- 左中区域 -->
         <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>
         <!-- 左下区域 -->
@@ -35,12 +40,21 @@
         </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"
@@ -59,22 +73,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>
@@ -84,111 +116,92 @@
 </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>([])
+  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 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 () => {
+  //变电硐室
+  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);
   }
 
 }
@@ -318,21 +331,38 @@ async function getFireAreaInfoListDs() {
     //   )
     // }
   }
-}
 
-//变电硐室防灭火监控系统
-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 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 getInfosByAreaCodeList() {
 
   let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value })
   console.log(res, 'res000999')
@@ -348,300 +378,434 @@ async function getInfosByAreaCodeList() {
     //获取光钎测温图表数据
     getGxcwHistoryDataByPointCodeList()
   }
-}
+  //获取密闭监测实时信息
+  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 getGxcwHistoryDataByPointCodeList() {
+  //工作面束管监测
+  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 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,
+        });
+      });
+    }
+  }
 
-  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 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: '状态' },
+        );
+      }
+    }
+  }
 
-//获取安全监控列表数据
-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 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 })
-    })
+  //获取光钎测温图表数据
+  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 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 })
-    })
+  //获取安全监控列表数据
+  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() {
+    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;
 
-    .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;
-          }
+          // 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>

src/views/vent/monitor/site/components/siteFilter.vue

@@ -5,6 +5,7 @@
       <Input
         v-model:value="formData.keyword"
         placeholder="输入关键词，回车以搜索"
+        :disabled="disabled"
         @press-enter="submit"
       />
     </FormItem>
@@ -12,8 +13,7 @@
       <CheckableTag
         v-for="tag in tags"
         :key="tag.value"
-        class="ml-2px mr-2px"
-        :style="{ color: tag.color }"
+        :style="{ color: tag.color, cursor: disabled ? 'not-allowed' : 'pointer' }"
         :checked="formData.tag === tag.value"
         @change="changeHandler(tag.value)"
       >
@@ -28,6 +28,7 @@
   import { ref, defineEmits } from 'vue';
 
   // props & emits
+  const props = defineProps<{ disabled: boolean }>();
   const emit = defineEmits<{ submit: [value: MonitorSiteTreeParams] }>();
 
   // 配置项
@@ -37,41 +38,49 @@
       label: '全部',
       color: 'white',
       value: defaltTag,
+      checked: false,
     },
     {
       label: '正常',
       color: 'green',
       value: 'normal',
+      checked: false,
     },
     {
       label: '报警',
       color: 'red',
       value: 'warn',
+      checked: false,
     },
     {
       label: '未知',
       color: 'blue',
       value: 'unknown',
+      checked: false,
     },
     {
       label: '故障',
       color: 'orange',
       value: 'fault',
+      checked: false,
     },
     {
       label: '未接入',
       color: 'purple',
       value: 'offline',
+      checked: false,
     },
     {
       label: '失败',
       color: 'gray',
       value: 'fail',
+      checked: false,
     },
     {
       label: '无效',
       color: 'white',
       value: 'none',
+      checked: false,
     },
   ];
 
@@ -86,6 +95,7 @@
   }
 
   function changeHandler(value: string) {
+    if (props.disabled) return;
     formData.value.tag = value;
     submit();
   }

src/views/vent/monitor/site/components/siteForm.vue

@@ -1,31 +1,28 @@
 <template>
   <!-- 测点操作表单 -->
-  <div>
-    <BasicForm
-      :model="site"
-      :schemas="schemas"
-      :label-col="{ span: 8 }"
-      :wrapper-col="{ span: 16 }"
-      label-align="right"
-      :showActionButtonGroup="false"
-      @register="register"
-    >
-      <template #create-btn>
-        <Button type="primary" :rounded="true" @click="createSite">新建测点</Button>
-      </template>
-      <template #copy-btn>
+  <BasicForm
+    :model="site"
+    :schemas="schemas"
+    :label-col="{ span: 9 }"
+    :wrapper-col="{ span: 15 }"
+    :showActionButtonGroup="false"
+    size="small"
+    label-align="right"
+    @register="register"
+  >
+    <template #create-btn>
+      <Button type="primary" :rounded="true" @click="createSite">新建测点</Button>
+    </template>
+    <template #edit-btn>
+      <Button type="primary" :rounded="true" @click="editSite">编辑测点</Button>
+    </template>
+    <!-- <template #copy-btn>
         <Button type="primary" :rounded="true" @click="copySite">复制测点</Button>
-      </template>
-      <template #edit-btn>
-        <Button type="primary" :rounded="true" @click="editSite">编辑测点</Button>
-      </template>
-    </BasicForm>
-    <Button type="primary" shape="circle" @click="targetSite">
-      <template #icon>
-        <Icon icon="mdi:target" />
-      </template>
-    </Button>
-  </div>
+      </template> -->
+    <template #pick-btn>
+      <Button type="primary" :rounded="true" @click="pickSite">拾取坐标</Button>
+    </template>
+  </BasicForm>
 </template>
 <script setup lang="ts">
   import {
@@ -37,13 +34,12 @@
   import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
   import { Button } from 'ant-design-vue';
   import { SensorDict, SystemSourceDict } from '../const';
-  import Icon from '@/components/Icon/Icon.vue';
 
   // props & emits
-  defineProps<{ site?: MonitorSiteTreeNode }>();
+  defineProps<{ site: Partial<MonitorSiteTreeNode> }>();
   const emit = defineEmits<{
     save: [value: SaveMonitorSiteParams];
-    message: [value: MonitorSiteOperationParams];
+    operation: [value: MonitorSiteOperationParams];
   }>();
 
   // 生成输入类表单项的帮助函数
@@ -132,13 +128,14 @@
     generateInputSchema({ field: 'sensorStatus', label: '测点使用状态', required: true }),
     generateInputSchema({ field: 'pos', label: '所属位置', required: true }),
     generateInputSchema({ field: 'x', label: 'X', required: true, span: 3 }),
-    generateButtonSchema({ slot: 'copy-btn' }),
+    generateButtonSchema({ slot: 'edit-btn' }),
     generateSelectSchema({ field: 'srouce', label: '系统来源', dict: SystemSourceDict }),
     generateInputSchema({ field: 'data_type', label: '数据类型', required: true }),
     generateInputSchema({ field: 'nuit', label: '单位', required: true }),
     generateInputSchema({ field: 'distance', label: '巷道距离' }),
     generateInputSchema({ field: 'y', label: 'Y', required: true, span: 3 }),
-    generateButtonSchema({ slot: 'edit-btn' }),
+    // generateButtonSchema({ slot: 'copy-btn' }),
+    generateButtonSchema({ slot: 'pick-btn' }),
     generateInputSchema({ field: 'max_messure', label: '高量程' }),
     generateInputSchema({ field: 'min_messure', label: '低量程' }),
     generateInputSchema({ field: 'warn_limit', label: '报警上限', required: true }),
@@ -157,11 +154,11 @@
   }
 
   // 提交复制测点所需的数据
-  function copySite() {
-    validate().then((v) => {
-      emit('save', v as SaveMonitorSiteParams);
-    });
-  }
+  // function copySite() {
+  //   validate().then((v) => {
+  //     emit('save', v as SaveMonitorSiteParams);
+  //   });
+  // }
 
   // 提交编辑测点所需的数据
   function editSite() {
@@ -170,9 +167,9 @@
     });
   }
 
-  // 定位测点
-  function targetSite() {
-    emit('message', {
+  // 拾取测点
+  function pickSite() {
+    emit('operation', {
       clickType: 'pickPiont', // 拾取坐标
       from: 'tank',
     });

src/views/vent/monitor/site/index.vue

@@ -2,29 +2,29 @@
   <!-- 监测-测点页面 -->
   <div class="monitor-site flex">
     <!-- 左侧内容 -->
-    <div class="h-850px flex-basis-415px p-10px">
+    <div class="h-860px flex-basis-420px p-10px flex-shrink-0">
       <!-- 测点过滤器 -->
-      <SiteFilter class="w-full h-100px" @submit="refreshTree" />
+      <SiteFilter class="w-full h-100px" :disabled="true" @submit="refreshTree" />
       <!-- 测点树 -->
       <SiteTree class="w-full h-700px" :tree-data="treeData" @select="focusOnSite" />
     </div>
-    <!-- 右侧内容 主要内容 -->
-    <div class="h-850px flex-grow-1 relative">
+    <!-- 右侧内容，即主要内容 -->
+    <div class="h-860px flex-grow-1">
+      <!-- 操作测点的表单 -->
+      <SiteForm
+        class="w-full bg-#0960bd44 p-10px"
+        :site="selectedSite"
+        @operation="handleOperation"
+        @save="handleSave"
+      />
       <!-- 测点图 -->
       <IFrame
         ref="iframeRef"
-        class="w-full h-760px"
+        class="w-full"
         :frame-src="monitorSiteOperationUrl"
-        :height="850"
+        :height="700"
         @message="handleMessage"
       />
-      <!-- 操作测点的表单 -->
-      <SiteForm
-        class="absolute w-full bg-#0960bd44 p-10px top-0"
-        :site="selectedSite"
-        @message="handleSubmit"
-        @save="handleSave"
-      />
     </div>
   </div>
 </template>
@@ -43,7 +43,6 @@
     getMonitorSiteTree,
     postMonitorOperation,
     monitorSiteOperationUrl,
-    handleMonitorOperation,
     saveMonitorSite,
   } from '@/api/sys/monitor';
   import IFrame from '@/views/sys/iframe/index.vue';
@@ -61,7 +60,7 @@
   }
 
   // 选中的测点
-  const selectedSite = ref<MonitorSiteTreeNode>();
+  const selectedSite = ref<Partial<MonitorSiteTreeNode>>({});
 
   // 聚焦到测点上
   function focusOnSite(site: MonitorSiteTreeNode) {
@@ -77,13 +76,12 @@
 
   // 处理测点图返回的数据
   function handleMessage(msg: any) {
-    handleMonitorOperation(msg, (d) => {
-      console.log(d);
-    });
+    const data = JSON.parse(msg);
+    selectedSite.value = { ...selectedSite.value, ...data };
   }
 
   // 提交一些与iframe操作的请求
-  function handleSubmit(formData: MonitorSiteOperationParams) {
+  function handleOperation(formData: MonitorSiteOperationParams) {
     postMonitorOperation(iframeRef.value!, formData);
   }
 
@@ -105,14 +103,14 @@
     refreshTree,
     focusOnSite,
     handleMessage,
-    handleSubmit,
+    handleOperation,
   });
 </script>
 <style scoped>
   .monitor-site {
     position: relative;
     width: 100%;
-    height: calc(100vh - 70px);
+    height: calc(100vh - 60px);
     margin-top: 50px;
   }
 </style>