传感器监测报警分析，安全监控报警分析-提交

.env.development

@@ -6,8 +6,8 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
-VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"], ["/python", "http://127.0.0.1:8008"], ["/tun2D", "http://127.0.0.1:8088/micro-vent-2dModal/tun2D"]]
-# VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
+# VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"], ["/python", "http://127.0.0.1:8008"], ["/tun2D", "http://127.0.0.1:8088/micro-vent-2dModal/tun2D"]]
+VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
 # VITE_PROXY = [["/jeecgsystem","http://10.10.150.72:9999"],["/upload","http://localhost:3300/upload"],["/documents", "http://10.10.150.72:9050"],["/modelreq", "http://10.10.150.72:9999"],["/webRtc", "http://192.168.183.216:8051"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
@@ -29,7 +29,7 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088/", "micro-vent-2dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088/", "micro-vent-2dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

src/views/vent/monitorManager/alarmMonitor/common/closeWall.copy.vue

@@ -0,0 +1,348 @@
+<template>
+    <div class="closeWall">
+      <div class="top-area">
+        <internalFireTop1 :internalFireTopData="internalFireTopData" :temperatureData="temperatureData">
+        </internalFireTop1>
+      </div>
+      <div class="content">
+        <internalFireBot1 :internalFireBotData="internalFireBotData"></internalFireBot1>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { ref, reactive, watch, defineProps, inject, h } from 'vue';
+  import echartLine1 from './echartLine1.vue';
+  import warnZb from './warnZb.vue';
+  import PredictionCurve from './predictionCurve.vue';
+  import internalFireBot1 from './internal-fire-bot1.vue';
+  import { getMaxY, getMinY } from '../common.data'
+  // import { deviceControlApi } from '/@/api/vent/index';
+  import internalFireTop1 from './internal-fire-top1.vue'
+  
+  let props = defineProps({
+    listData: Object,
+  });
+  
+  const globalConfig = inject('globalConfig');
+  const shownChart = ref('default');
+  let maxY = ref<any>(0);
+  let minY = ref<any>(0)
+  // let selectSj = ref<any[]>([]);
+  
+  let internalFireTopData = ref<any[]>([])
+  let temperatureData = ref(0)
+  let internalFireBotData = ref<any[]>([])
+  // let selectList = reactive<any[]>([]);
+  let widthV = ref('75%');
+  let heightV = ref('80%');
+  let coordDw = ref<any[]>([31, 62, 110]);
+  let widthCanvas = ref(562);
+  let heightCanvas = ref(316);
+  //设备连接状态
+  let netStatus = ref(0);
+  
+  
+  
+  
+  //当前激活密闭参数类型
+  let type = ref('O₂');
+  
+  let echartDataSg1 = reactive({
+    xData: [],
+    yData: [],
+    lengedData: 'O₂',
+    lengedDataName: '(%)',
+  });
+  let echartDataSgList = reactive<any[]>([]);
+  
+  function getmax() {
+    getMaxY(echartDataSg1.yData)
+    getMinY(echartDataSg1.yData)
+    // maxY.value = echartDataSg1.yData.reduce((acr, cur) => {
+    //   return acr > cur ? acr : cur;
+    // });
+    // maxY.value =
+    //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
+    // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
+    //   maxY.value = 1;
+    // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
+    //   maxY.value = 10;
+    // } else if (maxY.value.length < 3) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 10;
+    // } else if (maxY.value.length < 4) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 100;
+    // } else if (maxY.value.length < 5) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 1000;
+    // } else if (maxY.value.length < 6) {
+    //   maxY.value = (Number(maxY.value[0]) + 1) * 10000;
+    // }
+  }
+  //密闭参数选项切换
+  function btnClick(item, ind) {
+    // debugger;
+    activeIndex.value = ind;
+    type.value = item.label;
+    echartDataSg1.xData.length = 0;
+    echartDataSg1.yData.length = 0;
+    echartDataSg1.lengedData = type.value;
+    echartDataSg1.lengedDataName = item.dw;
+  
+    const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
+    switch (type.value) {
+      case 'O₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.o2val);
+        });
+  
+        curveConfig.value = {
+          id: 'o2',
+          label: 'O₂',
+          time: echartDataSg1.xData,
+          data: [
+            // 氧气预测曲线
+            data.avgParam?.avg_o2_value || 0,
+            data.avgParam?.max_o2_value || 0,
+            data.avgParam?.min_o2_value || 0,
+            // data.readData?.o2val,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'C₂H₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.ch2val);
+        });
+        curveConfig.value = {
+          id: 'ch2',
+          label: 'C₂H₄',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_c2h4_value || 0,
+            data.avgParam?.max_c2h4_value || 0,
+            data.avgParam?.min_c2h4_value || 0,
+            // data.readData?.ch2val,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'CO':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.coval);
+        });
+        curveConfig.value = {
+          id: 'co',
+          label: 'CO',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_co_value || 0,
+            data.avgParam?.max_co_value || 0,
+            data.avgParam?.min_co_value || 0,
+            // data.readData?.coval,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'CH₄':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.gasval);
+        });
+        curveConfig.value = {
+          id: 'ch',
+          label: 'CH₄',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_ch4_value || 0,
+            data.avgParam?.max_ch4_value || 0,
+            data.avgParam?.min_ch4_value || 0,
+            // data.readData?.chval,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'CO₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.co2val);
+        });
+        curveConfig.value = {
+          id: 'co2',
+          label: 'CO₂',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_co2_value || 0,
+            data.avgParam?.max_co2_value || 0,
+            data.avgParam?.min_co2_value || 0,
+            // data.readData?.co2val,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+      case 'C₂H₂':
+        echartDataSgList.forEach((el) => {
+          echartDataSg1.xData.push(el.time);
+          echartDataSg1.yData.push(el.chval);
+        });
+        curveConfig.value = {
+          id: 'gas',
+          label: 'C₂H₂',
+          time: echartDataSg1.xData,
+          data: [
+            // 预测曲线
+            data.avgParam?.avg_c2h2_value || 0,
+            data.avgParam?.max_c2h2_value || 0,
+            data.avgParam?.min_c2h2_value || 0,
+            // data.readData?.gasval,
+          ],
+          monitorData: echartDataSg1.yData,
+        };
+        getmax();
+        break;
+    }
+  }
+  
+  
+  
+  
+  
+  /** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
+  const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+  
+  watch(
+    () => props.listData,
+    (val: any) => {
+      echartDataSg1.xData.length = 0;
+      echartDataSg1.yData.length = 0;
+      echartDataSgList.length = 0;
+      // selectList.length = 0;
+  
+      if (JSON.stringify(val) === '{}') return;
+      internalFireTopData.value = val.bundletube
+      temperatureData.value = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
+      internalFireBotData.value=val.bundletube
+  
+      if (val.bundletube.length != 0) {
+        // selectSj.value = val.bundletube;
+  
+  
+  
+  
+  
+      
+        netStatus.value = dataVal['netStatus'];
+        echartDataSgList = dataVal.history;
+        btnClick(
+          {
+            label: type.value,
+            dw: echartDataSg1.lengedDataName,
+          },
+          activeIndex.value
+        );
+        // dataVal.history.forEach((v) => {
+        //   echartDataSg1.xData.push(v.time);
+        //   if (echartDataSg1.lengedData == 'O₂') {
+        //     echartDataSg1.yData.push(v.o2val);
+        //   } else if (echartDataSg1.lengedData == 'C₂H₄') {
+        //     echartDataSg1.yData.push(v.ch2val);
+        //   } else if (echartDataSg1.lengedData == 'CO') {
+        //     echartDataSg1.yData.push(v.coval);
+        //   } else if (echartDataSg1.lengedData == 'CH₄') {
+        //     echartDataSg1.yData.push(v.chval);
+        //   } else if (echartDataSg1.lengedData == 'CO₂') {
+        //     echartDataSg1.yData.push(v.co2val);
+        //   } else if (echartDataSg1.lengedData == 'C₂H₂') {
+        //     echartDataSg1.yData.push(v.gasval);
+        //   }
+        //   echartDataSgList.push(v);
+        // });
+        getmax();
+      } else {
+  
+        mbList[0].nd = '--';
+        mbList[1].nd = '--';
+        mbList[2].nd = '--';
+        mbList[3].nd = '--';
+        mbList[4].nd = '--';
+        mbList[5].nd = '--';
+        mbList.forEach((el) => {
+          el.time1 = '--';
+          el.address = '--';
+        });
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  </script>
+  
+  <style lang="less" scoped>
+  @import '/@/design/theme.less';
+  
+  @{theme-deepblue} {
+    .closeWall {
+      --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+      --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+      --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+      --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+      --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+  }
+  
+  .closeWall {
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+  
+    .top-area {
+      width: 100%;
+      height: 17%;
+      margin-bottom: 20px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+    }
+  
+  
+  
+    .content {
+      width: 100%;
+      height: calc(83% - 20px);
+      padding: 10px;
+      background: var(--image-bj1) no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+    }
+  }
+  
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    border: 1px solid #3ad8ff77 !important;
+    background-color: #ffffff00 !important;
+  }
+  
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+  
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
+  </style>
+  

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-bot.vue

@@ -1,112 +1,112 @@
 <template>
-    <div class="internal-fire-bot">
-        <div class="title">
-            <div class="text">束管系统监测</div>
-            <div class="select-box flex">
-                <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
-                    <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
-                        }}</a-select-option>
-                </a-select>
-            </div>
+  <div class="internal-fire-bot">
+    <div class="title">
+      <div class="text">束管系统监测</div>
+      <div class="select-box flex">
+        <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
+          <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
+          }}</a-select-option>
+        </a-select>
+      </div>
+    </div>
+    <div class="content">
+      <div class="content-box">
+        <div class="box-item" @click="getSgClick('O₂', '(%)')">
+          <div class="content-title">
+            <span>O₂</span>
+            <span> (%)</span>
+          </div>
+          <div class="content-item">
+            <span>浓度 : </span>
+            <span class="bolds">{{ bunData.o2 }}</span>
+          </div>
+          <div class="content-item">
+            <span>时间 :</span>
+            <span class="bolds">{{ bunData.o2time }}</span>
+          </div>
+        </div>
+        <div class="box-item" @click="getSgClick('C₂H₄', '(ppm)')">
+          <div class="content-title">
+            <span> C₂H₄</span>
+            <span>(ppm)</span>
+          </div>
+          <div class="content-item">
+            <span>浓度 :</span>
+            <span class="bolds">{{ bunData.c2h4 }}</span>
+          </div>
+          <div class="content-item">
+            <span>时间 :</span>
+            <span class="bolds">{{ bunData.c2h4time }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="content-box">
+        <div class="box-item" @click="getSgClick('CO', '(ppm)')">
+          <div class="content-title">
+            <span>CO</span>
+            <span> (ppm)</span>
+          </div>
+          <div class="content-item">
+            <span>浓度 : </span>
+            <span class="bolds">{{ bunData.co }}</span>
+          </div>
+          <div class="content-item">
+            <span>时间 :</span>
+            <span class="bolds">{{ bunData.cotime }}</span>
+          </div>
         </div>
-        <div class="content">
-            <div class="content-box">
-                <div class="box-item" @click="getSgClick('O₂','(%)')">
-                    <div class="content-title">
-                        <span>O₂</span>
-                        <span> (%)</span>
-                    </div>
-                    <div class="content-item">
-                        <span>浓度 : </span>
-                        <span class="bolds">{{ bunData.o2 }}</span>
-                    </div>
-                    <div class="content-item">
-                        <span>时间 :</span>
-                        <span class="bolds">{{ bunData.o2time }}</span>
-                    </div>
-                </div>
-                <div class="box-item"  @click="getSgClick('C₂H₄','(ppm)')">
-                    <div class="content-title">
-                        <span> C₂H₄</span>
-                        <span>(ppm)</span>
-                    </div>
-                    <div class="content-item">
-                        <span>浓度 :</span>
-                        <span class="bolds">{{ bunData.c2h4 }}</span>
-                    </div>
-                    <div class="content-item">
-                        <span>时间 :</span>
-                        <span class="bolds">{{ bunData.c2h4time }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="content-box">
-                <div class="box-item" @click="getSgClick('CO','(ppm)')" >
-                    <div class="content-title">
-                        <span>CO</span>
-                        <span> (ppm)</span>
-                    </div>
-                    <div class="content-item">
-                        <span>浓度 : </span>
-                        <span class="bolds">{{ bunData.co }}</span>
-                    </div>
-                    <div class="content-item">
-                        <span>时间 :</span>
-                        <span class="bolds">{{ bunData.cotime }}</span>
-                    </div>
-                </div>
-                <div class="box-item" @click="getSgClick('CH₄','(ppm)')">
-                    <div class="content-title">
-                        <span> CH₄</span>
-                        <span>(ppm)</span>
-                    </div>
-                    <div class="content-item">
-                        <span>浓度 :</span>
-                        <span class="bolds">{{ bunData.ch4 }}</span>
-                    </div>
-                    <div class="content-item">
-                        <span>时间 :</span>
-                        <span class="bolds">{{ bunData.ch4time }}</span>
-                    </div>
-                </div>
-            </div>
-            <div class="content-box">
-                <div class="box-item" @click="getSgClick('CO₂','(%)')">
-                    <div class="content-title">
-                        <span>CO₂</span>
-                        <span> (%)</span>
-                    </div>
-                    <div class="content-item">
-                        <span>浓度 : </span>
-                        <span class="bolds">{{ bunData.co2 }}</span>
-                    </div>
-                    <div class="content-item">
-                        <span>时间 :</span>
-                        <span class="bolds">{{ bunData.co2time }}</span>
-                    </div>
-                </div>
-                <div class="box-item" @click="getSgClick('C₂H₂','(ppm)')">
-                    <div class="content-title">
-                        <span> C₂H₂</span>
-                        <span>(ppm)</span>
-                    </div>
-                    <div class="content-item">
-                        <span>浓度 :</span>
-                        <span class="bolds">{{ bunData.c2h2 }}</span>
-                    </div>
-                    <div class="content-item">
-                        <span>时间 :</span>
-                        <span class="bolds">{{ bunData.c2h2time }}</span>
-                    </div>
-                </div>
-            </div>
+        <div class="box-item" @click="getSgClick('CH₄', '(ppm)')">
+          <div class="content-title">
+            <span> CH₄</span>
+            <span>(ppm)</span>
+          </div>
+          <div class="content-item">
+            <span>浓度 :</span>
+            <span class="bolds">{{ bunData.ch4 }}</span>
+          </div>
+          <div class="content-item">
+            <span>时间 :</span>
+            <span class="bolds">{{ bunData.ch4time }}</span>
+          </div>
         </div>
-        <div class="echart-box">
-            <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
-            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1"
-                :lengedDataName="echartDataSg.lengedDataName" />
+      </div>
+      <div class="content-box">
+        <div class="box-item" @click="getSgClick('CO₂', '(%)')">
+          <div class="content-title">
+            <span>CO₂</span>
+            <span> (%)</span>
+          </div>
+          <div class="content-item">
+            <span>浓度 : </span>
+            <span class="bolds">{{ bunData.co2 }}</span>
+          </div>
+          <div class="content-item">
+            <span>时间 :</span>
+            <span class="bolds">{{ bunData.co2time }}</span>
+          </div>
         </div>
+        <div class="box-item" @click="getSgClick('C₂H₂', '(ppm)')">
+          <div class="content-title">
+            <span> C₂H₂</span>
+            <span>(ppm)</span>
+          </div>
+          <div class="content-item">
+            <span>浓度 :</span>
+            <span class="bolds">{{ bunData.c2h2 }}</span>
+          </div>
+          <div class="content-item">
+            <span>时间 :</span>
+            <span class="bolds">{{ bunData.c2h2time }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="echart-box">
+      <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
+      <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1"
+        :lengedDataName="echartDataSg.lengedDataName" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -115,12 +115,12 @@ import echartLine1 from './echartLine1.vue';
 import PredictionCurve from './predictionCurve.vue';
 
 let props = defineProps({
-    internalFireBotData: {
-        type: Array,
-        default: () => {
-            return []
-        }
+  internalFireBotData: {
+    type: Array,
+    default: () => {
+      return []
     }
+  }
 })
 const shownChart = ref('default');
 let selectData = ref('');//下拉选项数据
@@ -129,18 +129,18 @@ let selectList = ref<any[]>([]);//下拉选项列表
 let bundletubeData = ref<any[]>([]);
 
 let bunData = reactive({
-    o2: '--',
-    o2time: '--',
-    c2h4: '--',
-    c2h4time: '--',
-    co: '--',
-    cotime: '--',
-    ch4: '--',
-    ch4time: '--',
-    co2: '--',
-    co2time: '--',
-    c2h2: '--',
-    c2h2time: '--',
+  o2: '--',
+  o2time: '--',
+  c2h4: '--',
+  c2h4time: '--',
+  co: '--',
+  cotime: '--',
+  ch4: '--',
+  ch4time: '--',
+  co2: '--',
+  co2time: '--',
+  c2h2: '--',
+  c2h2time: '--',
 })
 
 //束管图表数据
@@ -160,25 +160,25 @@ const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0
 
 //下拉选项切换
 function changeSelect(val) {
-    selectData.value = val;
-    let data = bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0];
-    let time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
-    bunData.o2 = data.readData.o2val
-    bunData.o2time = time;
-    bunData.c2h4 = data.readData.ch2val
-    bunData.c2h4time = time;
-    bunData.co = data.readData.coval;
-    bunData.cotime = time;
-    bunData.ch4 = data.readData.gasval;
-    bunData.ch4time = time;
-    bunData.co2 = data.readData.co2val;
-    bunData.co2time = time;
-    bunData.c2h2 = data.readData.chval;
-    bunData.c2h2time = time;
+  selectData.value = val;
+  let data = bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0];
+  let time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
+  bunData.o2 = data.readData.o2val
+  bunData.o2time = time;
+  bunData.c2h4 = data.readData.ch2val
+  bunData.c2h4time = time;
+  bunData.co = data.readData.coval;
+  bunData.cotime = time;
+  bunData.ch4 = data.readData.gasval;
+  bunData.ch4time = time;
+  bunData.co2 = data.readData.co2val;
+  bunData.co2time = time;
+  bunData.c2h2 = data.readData.chval;
+  bunData.c2h2time = time;
 }
 
 //束管实时数据选项点击
-function getSgClick(title,dw) {
+function getSgClick(title, dw) {
   echartDataSg.xData.length = 0;
   echartDataSg.yData.length = 0;
   echartDataSg.lengedData = title;
@@ -332,138 +332,160 @@ function getmaxY() {
 }
 
 watch(() => props.internalFireBotData, (newV, oldV) => {
-    echartDataSg.xData.length = 0;
-    echartDataSg.yData.length = 0;
-    if (newV.length != 0) {
-        bundletubeData.value = newV;
-        //下拉选项列表
-        selectList.value = bundletubeData.value.map((el) => {
-            return { label: el.strinstallpos, value: el.strinstallpos };
-        });
-        //默认选中
-        selectData.value = selectData.value ? selectData.value : selectList.value[0].value;
-        let choiceData = selectData.value ? bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletubeData.value[0];
+  echartDataSg.xData.length = 0;
+  echartDataSg.yData.length = 0;
+  if (newV.length != 0) {
+    bundletubeData.value = newV;
+    //下拉选项列表
+    selectList.value = bundletubeData.value.map((el) => {
+      return { label: el.strinstallpos, value: el.strinstallpos };
+    });
+    //默认选中
+    selectData.value = selectData.value ? selectData.value : selectList.value[0].value;
+    let choiceData = selectData.value ? bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletubeData.value[0];
 
-        let time = choiceData.readTime.substring(0, choiceData.readTime.lastIndexOf(':'));
-        bunData.o2 = choiceData.readData.o2val
-        bunData.o2time = time;
-        bunData.c2h4 = choiceData.readData.ch2val
-        bunData.c2h4time = time;
-        bunData.co = choiceData.readData.coval;
-        bunData.cotime = time;
-        bunData.ch4 = choiceData.readData.gasval;
-        bunData.ch4time = time;
-        bunData.co2 = choiceData.readData.co2val;
-        bunData.co2time = time;
-        bunData.c2h2 = choiceData.readData.chval;
-        bunData.c2h2time = time;
+    let time = choiceData.readTime.substring(0, choiceData.readTime.lastIndexOf(':'));
+    bunData.o2 = choiceData.readData.o2val
+    bunData.o2time = time;
+    bunData.c2h4 = choiceData.readData.ch2val
+    bunData.c2h4time = time;
+    bunData.co = choiceData.readData.coval;
+    bunData.cotime = time;
+    bunData.ch4 = choiceData.readData.gasval;
+    bunData.ch4time = time;
+    bunData.co2 = choiceData.readData.co2val;
+    bunData.co2time = time;
+    bunData.c2h2 = choiceData.readData.chval;
+    bunData.c2h2time = time;
 
-        echartDataSgList.value = choiceData.history;
+    echartDataSgList.value = choiceData.history;
 
-        getSgClick(echartDataSg.lengedData,echartDataSg.lengedDataName);
-        getmaxY();
-    }
+    getSgClick(echartDataSg.lengedData, echartDataSg.lengedDataName);
+    getmaxY();
+  }
 }, { immediate: true })
 </script>
 
 <style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .internal-fire-bot {
+    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+    --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+    --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+    --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+    --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
+    --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+  }
+}
+
 .internal-fire-bot {
-    position: relative;
-    width: 100%;
-    height: 100%;
+  --image-bj1: url('/@/assets/images/fire/bj1.png');
+  --image-max: url('/@/assets/images/fire/max.svg');
+  --image-min: url('/@/assets/images/fire/min.svg');
+  --image-pj: url('/@/assets/images/fire/pj.svg');
+  --image-bj1: url('/@/assets/images/fire/bj1.png');
+  --image-14174: url('/@/assets/images/fire/14174.png');
+  --image-contetn: url('/@/assets/images/fire/contetn.png');
+  --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+  position: relative;
+  width: 100%;
+  height: 100%;
 
-    .title {
-        height: 35px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
+  .title {
+    height: 35px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
 
-        .text {
-            // height: 30px;
-            // line-height: 30px;
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-        }
+    .text {
+      // height: 30px;
+      // line-height: 30px;
+      font-family: 'douyuFont';
+      font-size: 14px;
+      color: #fff;
     }
+  }
 
-    .content {
-        height: calc(100% - 45px);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+  .content {
+    height: calc(100% - 45px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
-        .content-box {
-            width: 100%;
-            height: 29%;
-            display: flex;
-            justify-content: space-between;
-            margin-top: 0px !important;
+    .content-box {
+      width: 100%;
+      height: 29%;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 0px !important;
 
-            .box-item {
-                position: relative;
-                width: 16%;
-                height: 100%;
-                background: var(--image-14174) no-repeat center;
-                background-size: 100% 100%;
-                cursor: pointer;
+      .box-item {
+        position: relative;
+        width: 16%;
+        height: 100%;
+        background: var(--image-14174) no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
 
-                .content-title {
-                    position: absolute;
-                    left: 50%;
-                    top: 0;
-                    transform: translate(-50%);
-                    color: #fff;
-                    font-size: 14px;
-                }
+        .content-title {
+          position: absolute;
+          left: 50%;
+          top: 0;
+          transform: translate(-50%);
+          color: #fff;
+          font-size: 14px;
+        }
 
-                .content-item {
-                    position: absolute;
-                    width: 93%;
-                    height: 27%;
-                    display: flex;
-                    align-items: center;
-                    padding: 0px 10px;
-                    box-sizing: border-box;
-                    background: var(--image-contetn) no-repeat center;
-                    background-size: 100% 100%;
-                    color: #fff;
-                    font-size: 14px;
+        .content-item {
+          position: absolute;
+          width: 93%;
+          height: 27%;
+          display: flex;
+          align-items: center;
+          padding: 0px 10px;
+          box-sizing: border-box;
+          background: var(--image-contetn) no-repeat center;
+          background-size: 100% 100%;
+          color: #fff;
+          font-size: 14px;
 
-                    &:nth-child(2) {
-                        left: 50%;
-                        top: 28%;
-                        transform: translate(-50%);
-                        display: flex;
-                        justify-content: space-between;
-                    }
+          &:nth-child(2) {
+            left: 50%;
+            top: 28%;
+            transform: translate(-50%);
+            display: flex;
+            justify-content: space-between;
+          }
 
-                    &:nth-child(3) {
-                        left: 50%;
-                        top: 62%;
-                        transform: translate(-50%);
-                        display: flex;
-                        justify-content: space-between;
-                    }
+          &:nth-child(3) {
+            left: 50%;
+            top: 62%;
+            transform: translate(-50%);
+            display: flex;
+            justify-content: space-between;
+          }
 
-                    .bolds {
-                        font-family: 'douyuFont';
-                        color: var(--vent-table-action-link);
-                        font-size: 12px;
-                    }
-                }
-            }
+          .bolds {
+            font-family: 'douyuFont';
+            color: var(--vent-table-action-link);
+            font-size: 12px;
+          }
         }
+      }
     }
+  }
 
-    .echart-box {
-        position: absolute;
-        left: 50%;
-        top: 50px;
-        transform: translate(-50%, 0);
-        width: 66%;
-        height: calc(100% - 50px);
-    }
+  .echart-box {
+    position: absolute;
+    left: 50%;
+    top: 50px;
+    transform: translate(-50%, 0);
+    width: 66%;
+    height: calc(100% - 50px);
+  }
 }
 </style>

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-bot1.vue

@@ -0,0 +1,433 @@
+<template>
+    <div class="internal-fire-bot1">
+        <div class="title-b">采空区密闭参数</div>
+        <div class="card-btn">
+            <!-- <div :class="activeIndex == index ? 'box-container1' : 'box-container'" v-for="(item, index) in mbList"
+                :key="index" @click="btnClick(item, index)">
+                <div class="box-label">
+                    <span> {{ item.label }}</span>
+                    <span>{{ item.dw }}</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">{{ `${item.label1}:` }}</span>
+                    <span class="text-v">{{ item.nd }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">{{ `${item.label2}:` }}</span>
+                    <span class="text-v">{{ item.time1 }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">{{ `${item.label3}:` }}</span>
+                    <span class="text-v">{{ item.address }}</span>
+                </div>
+            </div> -->
+
+            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+                <div class="box-label">
+                    <span> O₂</span>
+                    <span>(%)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ bundleD.o2 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ bundleD.o2time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ bundleD.o2address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+                <div class="box-label">
+                    <span> CO</span>
+                    <span>(ppm)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ bundleD.co }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ bundleD.cotime }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ bundleD.coaddress }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+                <div class="box-label">
+                    <span> CO₂</span>
+                    <span>(%)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ bundleD.co2 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ bundleD.co2time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ bundleD.co2address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+                <div class="box-label">
+                    <span> CH₄</span>
+                    <span>(%)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ bundleD.ch4 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ bundleD.ch4time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ bundleD.ch4address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+                <div class="box-label">
+                    <span> C₂H₂</span>
+                    <span>(ppm)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ bundleD.c2h2 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ bundleD.c2h2time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ bundleD.c2h2address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == index ? 'box-container1' : 'box-container'" @click="btnClick(item, index)">
+                <div class="box-label">
+                    <span> C₂H₄</span>
+                    <span>(ppm)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ bundleD.c2h4 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ bundleD.c2h4time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ bundleD.c2h4address }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="echart-box">
+            <div class="left-echartbox">
+                <div class="title-f">
+                    <div class="title-text">
+                        {{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span>
+                    </div>
+
+                    <!-- <BaseTab
+              style="width: 180px; color: var(--vent-font-color)"
+              :tabs="[
+                { name: '实时监测', id: 'default' },
+                { name: '预测曲线', id: 'predict' },
+              ]"
+              v-model:id="shownChart"
+            /> -->
+                </div>
+                <div class="echarts-box">
+                    <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
+                    <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg1"
+                        :lengedDataName="echartDataSg1.lengedDataName" :maxY="maxY" :minY="minY" />
+                </div>
+            </div>
+            <div class="right-echartbox">
+                <warnZb :widthV="widthV" :heightV="heightV" :coordDw="coordDw" :widthCanvas="widthCanvas"
+                    :heightCanvas="heightCanvas" :warnLevel="topContent.warnLevel" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive,watch } from 'vue'
+
+let props=defineProps({
+    internalFireBotData:{
+        type:Array,
+        default:()=>{
+            return []
+        }
+    }
+})
+
+//当前密闭参数激活选项
+let activeIndex = ref(0);
+//密闭参数列表
+let bundleD=reactive({
+    o2:'',
+    o2time:'',
+    o2address:'',
+    co:'',
+    cotime:'',
+    coaddress:'',
+    co2:'',
+    co2time:'',
+    co2address:'',
+    ch4:'',
+    ch4time:'',
+    ch4address:'',
+    c2h2:'',
+    c2h2time:'',
+    c2h2address:'',
+    c2h4:'',
+    c2h4time:'',
+    c2h4address:'',
+})
+
+mbList[0].nd = dataVal.readData.o2val || '--';
+      mbList[1].nd = dataVal.readData.coval || '--';
+      mbList[2].nd = dataVal.readData.co2val || '--';
+      mbList[3].nd = dataVal.readData.gasval || '--';
+      mbList[4].nd = dataVal.readData.chval || '--';
+      mbList[5].nd = dataVal.readData.ch2val || '--';
+      mbList.forEach((el) => {
+        el.time1 = dataVal ? dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) : '--';
+        el.address = dataVal ? dataVal.strinstallpos : '--';
+      });
+
+      watch(()=>props.internalFireBotData,(newV,oldV)=>{
+        if(newV.length!=0){
+            bundleD.  o2=
+            bundleD.  o2time=
+            bundleD.  o2address=
+            bundleD.  co=
+            bundleD.   cotime=
+            bundleD.  coaddress=
+            bundleD.  co2=
+            bundleD.  co2time=
+            bundleD.  co2address=
+            bundleD.  ch4=
+            bundleD.   ch4time=
+            bundleD.   ch4address=
+            bundleD.  c2h2=
+            bundleD.   c2h2time=
+            bundleD.  c2h2address=
+            bundleD.  c2h4=
+            bundleD.  c2h4time=
+            bundleD.  c2h4address=
+        }
+      },{immediate:true})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .internal-fire-bot1 {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+}
+
+.internal-fire-bot1 {
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .title-b {
+        height: 30px;
+        line-height: 30px;
+        font-family: 'douyuFont';
+        font-size: 14px;
+        color: #fff;
+        // color: var(--vent-table-action-link);
+    }
+
+    .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+
+        .box-container {
+            position: relative;
+            width: 16%;
+            height: 100%;
+            background: var(--image-1) no-repeat center;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .box-label {
+                position: absolute;
+                left: 50%;
+                top: 2px;
+                transform: translate(-50%);
+                color: #fff;
+            }
+
+            .box-item {
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%, 0);
+                width: 89%;
+                height: 16%;
+                padding: 0px 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: var(--image-contetn) no-repeat center;
+                background-size: 100% 100%;
+
+                .text-t {
+                    width: 17%;
+                    color: #fff;
+                    font-size: 12px;
+                }
+
+                .text-v {
+                    width: 83%;
+                    font-family: 'douyuFont';
+                    font-size: 10px;
+                    color: var(--vent-table-action-link);
+                    display: flex;
+                    justify-content: flex-end;
+                }
+            }
+
+            .box-item1 {
+                top: 24%;
+            }
+
+            .box-item2 {
+                top: 50%;
+            }
+
+            .box-item3 {
+                top: 75%;
+            }
+        }
+
+        .box-container1 {
+            position: relative;
+            width: 16%;
+            height: 100%;
+            background: var(--image-2) no-repeat center;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .box-label {
+                position: absolute;
+                left: 50%;
+                top: 2px;
+                transform: translate(-50%);
+                color: #fff;
+            }
+
+            .box-item {
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%, 0);
+                width: 89%;
+                height: 16%;
+                padding: 0px 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: var(--image-contetn) no-repeat center;
+                background-size: 100% 100%;
+
+                .text-t {
+                    width: 17%;
+                    color: #fff;
+                    font-size: 12px;
+                }
+
+                .text-v {
+                    width: 83%;
+                    font-family: 'douyuFont';
+                    font-size: 10px;
+                    color: var(--vent-table-action-link);
+                    display: flex;
+                    justify-content: flex-end;
+                }
+            }
+
+            .box-item1 {
+                top: 19%;
+            }
+
+            .box-item2 {
+                top: 41%;
+            }
+
+            .box-item3 {
+                top: 63%;
+            }
+        }
+    }
+
+    .echart-box {
+        display: flex;
+        height: calc(72% - 41px);
+
+        .left-echartbox {
+            width: calc(50% - 6px);
+            margin-right: 6px;
+            border: 1px solid #114aac;
+            border-radius: 5px;
+
+            .title-f {
+                height: 40px;
+                padding: 0px 10px;
+                box-sizing: border-box;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .title-text {
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                    // color: var(--vent-table-action-link);
+                }
+            }
+
+            .echarts-box {
+                height: calc(100% - 40px);
+                padding: 0px 10px;
+                box-sizing: border-box;
+            }
+        }
+
+        .right-echartbox {
+            width: calc(50% - 6px);
+            margin-left: 6px;
+            border: 1px solid #114aac;
+            border-radius: 5px;
+        }
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-top1.vue

@@ -0,0 +1,335 @@
+<template>
+    <div class="internal-fire-top1">
+
+        <div class="box-container">
+            <div class="contents">
+                <div class="text">
+                    <div class="text-label">位置: </div>
+                    <!-- <div class="text-value">{{ topContent.position }}</div> -->
+                    <div class="text-value">
+                        <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
+                            <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{
+                                file.label
+                                }}</a-select-option>
+                        </a-select>
+                    </div>
+                </div>
+                <div class="text">
+                    <span class="text-label">时间 : </span>
+                    <span class="text-value">{{ topContent.time }}</span>
+                </div>
+            </div>
+            <div class="contents">
+                <img src="@/assets/images/fire/pie.png" alt="" />
+                <span class="text">{{ topContent.temperature }}</span>
+                <span class="dw">°C</span>
+            </div>
+        </div>
+        <div class="box-container">
+            <div class="text1">
+                <span>预警等级 : </span>
+                <span :class="{
+                    value1: topContent.warnLevel == '绿色预警',
+                    value2: topContent.warnLevel == '黄色预警',
+                    value3: topContent.warnLevel == '红色预警',
+                    value4: topContent.warnLevel == '橙色预警',
+                }">{{ topContent.warnLevel || '-' }}</span>
+            </div>
+            <div class="text1">
+                <span>煤自燃阶段 : </span>
+                <span>{{ topContent.smokeJd || '-' }}</span>
+            </div>
+        </div>
+        <div class="pl-10px pr-10px">
+            <div class="mb-10px">
+                <AButton class="w-full" type="primary" @click="controlDevice('dianwei', 'zhi')">应急启动</AButton>
+            </div>
+            <div>
+                <AButton class="w-full" type="primary" @click="controlDevice('dianwei', 'zhi')">应急关闭</AButton>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch,h } from 'vue'
+import { Modal, Input } from 'ant-design-vue';
+
+let props = defineProps({
+    internalFireTopData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    },
+    temperatureData: {
+        type: Number,
+        default: ''
+    }
+})
+
+let selectData = ref('');//下拉默认选中
+let selectList = ref<any[]>([]);//下拉列表
+
+
+let topContent = reactive({
+    temperature: 0,
+    position: '',
+    time: '',
+    warnLevel: '',
+    smokeJd: '',
+});
+
+let bundletube = ref<any[]>([])
+
+
+//选项切换
+function changeSelect(val) {
+  selectData.value = val;
+  let data = bundletube.value.filter((v) => v.strinstallpos == selectData.value)[0];
+  topContent.time = data.readTime || '--';
+  topContent.warnLevel = data.syswarnLevel_str;
+  topContent.smokeJd = data.syswarnLevel_des;
+
+//   mbList[0].nd = data.readData.o2val || '--';
+//   mbList[1].nd = data.readData.coval || '--';
+//   mbList[2].nd = data.readData.co2val || '--';
+//   mbList[3].nd = data.readData.gasval || '--';
+//   mbList[4].nd = data.readData.chval || '--';
+//   mbList[5].nd = data.readData.ch2val || '--';
+//   mbList.forEach((el) => {
+//     el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
+//     el.address = data ? data.strinstallpos : '--';
+//   });
+//   netStatus.value = data['netStatus'];
+}
+// 设备控制
+function controlDevice(code, value?) {
+    const passWord = ref('');
+    Modal.confirm({
+        title: '是否确认执行该操作？',
+        maskClosable: true,
+        content: () => {
+            return h(Input, {
+                placeholder: '请输入密码',
+                type: 'password',
+                modelValue: passWord.value,
+                'onUpdate:value'(val) {
+                    passWord.value = val;
+                },
+            });
+        },
+        onOk() {
+            console.log('OK', passWord);
+        },
+    });
+    // Promise.all(
+    //   [].map(({ deviceID, deviceType }) => {
+    //     return deviceControlApi({
+    //       deviceid: deviceID,
+    //       devicetype: deviceType,
+    //       paramcode: code,
+    //       value,
+    //       // password: passWord || globalConfig?.simulatedPassword,
+    //     });
+    //   })
+    // ).then((res) => {
+    //   // 模拟时开启
+    //   if (res.success) {
+    //     if (globalConfig.History_Type == 'remote') {
+    //       message.success('指令已下发至生产管控平台成功！');
+    //     } else {
+    //       message.success('指令已下发成功！');
+    //     }
+    //   } else {
+    //     message.error(res.message);
+    //   }
+    // });
+}
+
+watch(() => props.internalFireTopData, (newV, oldV) => {
+    if (newV.length != 0) {
+        bundletube.value = newV
+        //下拉列表
+        selectList.value = bundletube.value.map((el) => {
+            return { label: el.strinstallpos, value: el.strinstallpos }
+        });
+        //下拉默认选中
+        selectData.value = selectData.value ? selectData.value : selectList[0].value;
+
+        let dataVal = selectData.value ? bundletube.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletube.value[0];
+        topContent.temperature = props.temperatureData;
+        topContent.time = dataVal.readTime || '--';
+        topContent.warnLevel = dataVal.syswarnLevel_str;
+        topContent.smokeJd = dataVal.syswarnLevel_des;
+    } else {
+        topContent.temperature = 0;
+        // topContent.position = '--';
+        topContent.time = '--';
+        topContent.warnLevel = '--';
+        topContent.smokeJd = '--';
+    }
+}, { immediate: true })
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .internal-fire-top1 {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+}
+
+.internal-fire-top1 {
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+
+    .box-container {
+        display: flex;
+
+        &:nth-child(1) {
+            justify-content: space-between;
+            align-items: center;
+            padding: 0px 40px;
+            flex: 2;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 1 1 1;
+        }
+
+        &:nth-child(2) {
+            flex-direction: column;
+            flex: 1;
+            justify-content: space-around;
+            align-items: center;
+            height: 73%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 1 1 1;
+        }
+
+        .contents {
+            height: 73%;
+
+            &:nth-child(1) {
+                width: 50%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+
+                .text {
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+
+                    .text-label {
+                        color: #b3b8cc;
+                        font-weight: bold;
+                    }
+
+                    .text-value {
+                        font-family: 'douyuFont';
+                        color: var(--vent-table-action-link);
+                        margin-left: 10px;
+                    }
+                }
+            }
+
+            &:nth-child(2) {
+                width: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                img {
+                    position: relative;
+                    width: 90px;
+                    height: 100%;
+                    background: var(--image-pj) no-repeat center;
+                    background-size: 90px 50%;
+                }
+
+                .text {
+                    font-family: 'douyuFont';
+                    font-size: 28px;
+                    margin: 0px 15px;
+                    color: var(--vent-table-action-link);
+                }
+
+                .dw {
+                    font-size: 14px;
+                    color: #b3b8cc;
+                }
+            }
+        }
+
+        .text1 {
+            width: 90%;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            color: #b3b8cc;
+            font-weight: bold;
+
+            span {
+                display: inline-block;
+
+                &:nth-child(1) {
+                    width: 160px;
+                    text-align: right;
+                }
+
+                &:nth-child(2) {
+                    font-family: 'douyuFont';
+                    color: var(--vent-table-action-link);
+                    margin-left: 10px;
+                }
+            }
+
+            .value1 {
+                color: rgb(145, 230, 9) !important;
+            }
+
+            .value2 {
+                // color: rgb(0, 242, 255) !important;
+                color: #ffff35 !important;
+            }
+
+            .value3 {
+                // color: #ffff35 !important;
+                color: #ff0000 !important;
+            }
+
+            .value4 {
+                color: orange !important;
+            }
+
+            .value5 {
+                color: #ff6f00 !important;
+            }
+
+            .value6 {
+                color: #ff0000 !important;
+            }
+        }
+    }
+
+}
+</style>

src/views/vent/monitorManager/comment/safetyWarnAnalysis.vue

@@ -33,11 +33,12 @@
             </div>
         </div>
         <div class="warn-content">
-            <a-table :columns="analysisColumns" :data-source="tableData" size="small" :scroll="{ y: 500 }"
+            <a-spin :spinning="loading">
+                <a-table :columns="analysisColumns" :data-source="tableData" size="small" :scroll="{ y: 500 }"
                 class="tableW" :pagination="pagination" @change="changePaper">
                 <template #bodyCell="{ column, text }"></template>
-
             </a-table>
+            </a-spin >
         </div>
     </div>
 </template>
@@ -48,7 +49,7 @@ import { analysisColumns } from './comment.data'
 import { defHttp } from '/@/utils/http/axios';
 import dayjs from 'dayjs';
 import { message } from 'ant-design-vue';
-import { resetEcharts } from '../mainFanMonitor/main.threejs';
+
 
 let props = defineProps({
     deviceType: {
@@ -58,8 +59,9 @@ let props = defineProps({
 })
 const getAlarmHistoryDataCount = (params) => defHttp.post({ url: '/ventanaly-device/monitor/history/getAlarmHistoryDataCount', params })
 const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/codeDict', params });
+let loading=ref(false)
 let dataTypeName = ref('')
-let startTime = ref(dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'))
+let startTime = ref(dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'))
 let endTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 //设备下拉选项列表
 let deviceOptions = ref<any[]>([])
@@ -78,6 +80,7 @@ let tableData = ref<any[]>([])
 //查询
 async function getSearch() {
     if (dataTypeName.value) {
+        loading.value=true
         let res = await getAlarmHistoryDataCount({
             "pageNo": pagination.current,
             "pageSize": pagination.pageSize,
@@ -85,7 +88,9 @@ async function getSearch() {
             "endTime": endTime.value,
             "dataTypeName": dataTypeName.value
         })
-        let data = res.result
+        if(res){
+            loading.value=false
+            let data = res.result
         typeList.value = Object.keys(data.exceptionType).map(el => {
             return {
                 label: el,
@@ -94,6 +99,8 @@ async function getSearch() {
         })
         tableData.value = data.exceptionType[typeList.value[activeIndex.value].label]['records']
         pagination.total = typeList.value[activeIndex.value].value
+        }
+       
     } else {
         message.warning('请选择设备类型!')
     }
@@ -153,13 +160,14 @@ onMounted(() => {
         height: 130px;
         margin: 15px;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
 
         .tag-item-N {
             position: relative;
             width: 215px;
             height: 128px;
+            margin:0px 120px
             background: url('../../../../assets/images/choice-N.png') no-repeat center;
             background-size: 100%;
         }
@@ -168,6 +176,7 @@ onMounted(() => {
             position: relative;
             width: 215px;
             height: 128px;
+            margin:0px 120px
             background: url('../../../../assets/images/choice-Y.png') no-repeat center;
             background-size: 100%;
         }

src/views/vent/monitorManager/comment/warnAnalysis.vue

@@ -33,11 +33,12 @@
             </div>
         </div>
         <div class="warn-content">
-            <a-table :columns="analysisColumns" :data-source="tableData" size="small" :scroll="{ y: 500 }"
+            <a-spin :spinning="loading">
+                <a-table :columns="analysisColumns" :data-source="tableData" size="small" :scroll="{ y: 500 }"
                 class="tableW" :pagination="pagination" @change="changePaper">
                 <template #bodyCell="{ column, text }"></template>
-
             </a-table>
+            </a-spin>
         </div>
     </div>
 </template>
@@ -48,6 +49,7 @@ import { analysisColumns } from './comment.data'
 import { defHttp } from '/@/utils/http/axios';
 import dayjs from 'dayjs';
 import { message } from 'ant-design-vue';
+import ceshi from './ceshi.json'
 
 let props = defineProps({
     deviceType: {
@@ -57,8 +59,9 @@ let props = defineProps({
 })
 const getAlarmHistoryDataCount = (params) => defHttp.post({ url: '/ventanaly-device/monitor/history/getAlarmHistoryDataCount', params })
 const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
+let loading=ref(false)
 let dataTypeName = ref('')
-let startTime = ref(dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'))
+let startTime = ref(dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'))
 let endTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 //设备下拉选项列表
 let deviceOptions = ref<any[]>([])
@@ -77,6 +80,7 @@ let tableData = ref<any[]>([])
 //查询
 async function getSearch() {
     if (dataTypeName.value) {
+        loading.value=true
         let res = await getAlarmHistoryDataCount({
             "pageNo": pagination.current,
             "pageSize": pagination.pageSize,
@@ -84,6 +88,8 @@ async function getSearch() {
             "endTime": endTime.value,
             "dataTypeName": dataTypeName.value
         })
+       if(res){
+        loading.value=false
         let data = res.result
         typeList.value = Object.keys(data.exceptionType).map(el => {
             return {
@@ -93,9 +99,11 @@ async function getSearch() {
         })
         tableData.value = data.exceptionType[typeList.value[activeIndex.value].label]['records']
         pagination.total = typeList.value[activeIndex.value].value
+       }
     } else {
         message.warning('请选择设备类型!')
     }
+ 
 }
 //选项切换
 function typeClick(index) {
@@ -164,13 +172,14 @@ onMounted(() => {
         height: 130px;
         margin: 15px;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
 
         .tag-item-N {
             position: relative;
             width: 215px;
             height: 128px;
+            margin:0px 120px;
             background: url('../../../../assets/images/choice-N.png') no-repeat center;
             background-size: 100%;
         }
@@ -179,6 +188,7 @@ onMounted(() => {
             position: relative;
             width: 215px;
             height: 128px;
+            margin:0px 120px;
             background: url('../../../../assets/images/choice-Y.png') no-repeat center;
             background-size: 100%;
         }