预警管控系统-通风，粉尘，火灾详情界面接口对接提交

package.json

@@ -51,6 +51,7 @@
     "enquire.js": "^2.1.6",
     "gsap": "^3.11.3",
     "intro.js": "^7.2.0",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash.get": "^4.4.2",
     "md5": "^2.3.0",

src/design/public.less

@@ -9,8 +9,8 @@
 // =================================
 
 ::-webkit-scrollbar {
-  width: 4px;
-  height: 8px;
+  width: 2px;
+  height: 4px;
 }
 
 // ::-webkit-scrollbar-track {
@@ -18,13 +18,15 @@
 // }
 
 ::-webkit-scrollbar-track {
-  background-color: rgba(0, 0, 0, 0.05);
+  // background-color: rgba(0, 0, 0, 0.05);lxh
+  background-color: rgba(7, 40, 77,.3);
 }
 
 ::-webkit-scrollbar-thumb {
   // background: rgba(0, 0, 0, 0.6);
-  background-color: rgba(144, 147, 153, 0.3);
+  // background-color: rgba(144, 147, 153, 0.3);lxh
   // background-color: rgba(144, 147, 153, 0.3);
+  background-color: rgba(0, 88, 238);
   border-radius: 2px;
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
 }

src/views/vent/monitorManager/alarmMonitor/DetailModalFire.vue

@@ -1,27 +1,25 @@
 <template>
-  <BasicModal @register="register" :title="titleName" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
+  <BasicModal @register="register" :title="titleName" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit"
+    :defaultFullscreen="true">
     <div class="alarm-modal">
       <div class="containers">
         <div class="alarm-menu">
           <div class="type-btn" v-if="isShowModule">
-            <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuList" :key="index" @click="btnClick(index)">
+            <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuList" :key="index"
+              @click="btnClick(index)">
               {{ item.name }}
             </div>
           </div>
           <div class="card-btn">
-            <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
+            <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+              @click="cardClick(ind, item)">
               <div class="text">{{ item.name }}</div>
               <div class="warn">{{ item.warn }}</div>
             </div>
           </div>
         </div>
         <div class="alarm-content">
-          <!-- <div class="toggle-btn">
-            <div :class="activeIndex2 == ind ? 'btn-item1' : 'btn-item'" v-for="(items, ind) in btnList" :key="ind"
-              @click="toggleClick(ind)">
-              {{ items.label }}
-            </div>
-          </div> -->
+
           <component :is="componentName[current]" :listData="listData" />
         </div>
       </div>
@@ -29,393 +27,472 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { typeMenuList, componentName } from './fire.data';
-  import { sysTypeWarnList, sysWarn } from './alarm.api';
-
-  let props = defineProps({
-    moduleName: String,
-  });
-
-  let listData = ref({}); //详情数据
-  let isShowModule = ref(true); //是否显示内外因火灾切换按钮
-  let titleName = ref('');
-  let menuList = reactive<any[]>([]); //左侧菜单列表
-  //内外因火灾激活索引
-  let activeIndex = ref(0);
-  //当前激活菜单的索引
-  let activeIndex1 = ref(0);
-  //当前加载组件
-  let current = ref('fireWork');
-  //实时/历史数据激活索引
-  let activeIndex2 = ref(0);
-  // //实时历史数据按钮列表
-  // let btnList = reactive([{ label: '实时' }]);
-
-  const emit = defineEmits(['close', 'register']);
-
-  // 注册 modal
-  const [register, { closeModal }] = useModalInner();
-
-  async function onSubmit() {
-    emit('close');
-    closeModal();
+import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { typeMenuList, componentName } from './fire.data';
+import { sysTypeWarnList, sysWarn } from './alarm.api';
+
+let props = defineProps({
+  moduleName: String,
+});
+
+let timer: null | NodeJS.Timeout = null;
+let listData = reactive({
+  common: {},
+  bundletube: [],
+  fiber: [],
+  fire: [],
+  smoke: [],
+  spray: [],
+  temperature: [],
+}); //详情数据
+let isShowModule = ref(true); //是否显示内外因火灾切换按钮
+let titleName = ref('');
+let menuList = reactive<any[]>([]); //左侧菜单列表
+let menuList1 = reactive({
+  external: [],
+  internal: []
+})
+//内外因火灾激活索引
+let activeIndex = ref(0);
+//当前激活菜单的索引
+let activeIndex1 = ref(0);
+//当前加载组件
+let current = ref('');
+
+
+const emit = defineEmits(['close', 'register']);
+
+// 注册 modal
+const [register, { closeModal }] = useModalInner();
+
+async function onSubmit() {
+  activeIndex1.value = 0;
+  clearInterval(timer)
+  emit('close');
+  closeModal();
+
+}
+//内外因火灾选项切换
+function btnClick(ind) {
+  activeIndex.value = ind;
+  console.log(activeIndex, '000999')
+  switch (ind) {
+    case 0:
+      activeIndex1.value = 0;
+      menuList = menuList1.internal.map(el => {
+        return {
+          name: el.systemname,
+          warn: '低风险',
+          type: 'on',
+          deviceID: el.id,
+        }
+      })
+      clearInterval(timer)
+      getSysWarnList(menuList[0].deviceID, 'fire');
+      break;
+    case 1:
+      activeIndex1.value = 0;
+      menuList = menuList1.external.map(el => {
+        return {
+          name: el.systemname,
+          warn: '低风险',
+          type: 'out',
+          deviceID: el.id,
+        }
+      })
+      clearInterval(timer)
+      getSysWarnList(menuList[0].deviceID, 'fire');
+      break;
+  }
+}
+//菜单选项切换
+function cardClick(ind, item) {
+  activeIndex1.value = ind;
+  if (props.moduleName == 'fire') {
+    // switch (ind) {
+    //   case 0:
+    //     current.value = item.type == 'on' ? 'fireWork' : 'mainWell';
+    //     break;
+    //   case 1:
+    //     current.value = item.type == 'on' ? 'closeWall' : 'subStation';
+    //     // current.value = item.type == 'on' ? 'closeWall' : 'fireWork';
+    //     break;
+    //   case 2:
+    //     current.value = item.type == 'on' ? 'otherMonitor' : 'otherMonitor';
+    //     break;
+    // }
+    clearInterval(timer)
+    getSysWarnList(item.deviceID, 'fire');
+  } else if (props.moduleName == 'vent') {
+    clearInterval(timer)
+    getSysWarnList(item.deviceID, 'vent');
+  } else if (props.moduleName == 'dust') {
+    clearInterval(timer)
+    getSysWarnList(item.deviceID, 'dust');
+  } else if (props.moduleName == 'gas') {
+    clearInterval(timer)
+    getSysWarnList(item.deviceID, 'gas');
+  }
+}
+
+//加载组件
+function loadZj() {
+  if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
+    current.value = 'fireWork'
+  } else if (!activeIndex.value && listData.bundletube.length != 0) {
+    current.value = 'closeWall'
+  } else if (activeIndex.value) {
+    current.value = 'mainWell'
+  }else {
+    current.value = ''
   }
-  //内外因火灾选项切换
-  function btnClick(ind) {
-    activeIndex.value = ind;
-    switch (ind) {
-      case 0:
-        activeIndex1.value = 0;
-        current.value = 'fireWork';
-        menuList.forEach((el) => {
-          el.type = 'on';
+}
+
+//获取预警详情弹窗左侧数据
+function getSysTypeWarnList(data) {
+  sysTypeWarnList({ type: data }).then((res) => {
+    menuList.length = 0;
+    if (props.moduleName == 'vent') {
+      res.forEach((el) => {
+        menuList.push({
+          name: el.deviceName,
+          warn: el.netStatus ? '高风险' : '低风险',
+          type: 'on',
+          deviceID: el.deviceID,
         });
-        break;
-      case 1:
-        activeIndex1.value = 0;
-        current.value = 'mainWell';
-        menuList.forEach((el) => {
-          el.type = 'out';
+      });
+      clearInterval(timer)
+      getSysWarnList(menuList[0].deviceID, 'vent');
+    } else if (props.moduleName == 'fire') {
+      menuList1.external = res.external
+      menuList1.internal = res.internal
+      menuList1.internal.forEach(el => {
+        menuList.push({
+          name: el.systemname,
+          warn: '低风险',
+          type: 'on',
+          deviceID: el.id,
         });
-        break;
+      })
+      clearInterval(timer)
+      getSysWarnList(menuList[0].deviceID, 'fire');
+    } else if (props.moduleName == 'dust') {
+      res.forEach((el) => {
+        menuList.push({
+          name: el.systemname,
+          warn: '低风险',
+          type: 'on',
+          deviceID: el.id,
+        });
+      });
+      clearInterval(timer)
+      getSysWarnList(menuList[0].deviceID, 'dust');
+    } else if (props.moduleName == 'gas') {
+      res.forEach((el) => {
+        menuList.push({
+          name: el.systemname,
+          warn: '低风险',
+          type: 'on',
+          deviceID: el.id,
+        });
+      });
+      clearInterval(timer)
+      getSysWarnList(menuList[0].deviceID, 'gas');
     }
-  }
-  //菜单选项切换
-  function cardClick(ind, item) {
-    console.log(ind, 'index');
-    activeIndex1.value = ind;
-    if (props.moduleName == 'fire') {
-      switch (ind) {
-        case 0:
-          current.value = item.type == 'on' ? 'fireWork' : 'mainWell';
-          break;
-        case 1:
-          current.value = item.type == 'on' ? 'closeWall' : 'subStation';
-          break;
-        case 2:
-          current.value = item.type == 'on' ? 'otherMonitor' : 'otherOut';
-          break;
+  });
+}
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+  timer = setInterval(() => {
+    sysWarn({ sysid: id, type: type }).then((res) => {
+      if (type == 'fire') {
+        listData.bundletube = res.bundletube,
+          listData.fiber = res.fiber
+        listData.fire = res.fire,
+          listData.smoke = res.smoke,
+          listData.spray = res.spray,
+          listData.temperature = res.temperature,
+          console.log(listData, '火灾详情弹窗右侧数据');
+        loadZj()
+      } else if (type == 'vent' || type == 'dust' || type == 'gas') {
+        console.log(res, '详情')
+        listData.common = res
       }
-    } else if (props.moduleName == 'tf') {
-      getSysWarnList(item.deviceID, 'vent');
-    }
-  }
 
-  //获取预警详情弹窗左侧数据
-  function getSysTypeWarnList(data) {
-    sysTypeWarnList({ type: data }).then((res) => {
-      menuList.length = 0;
-      if (props.moduleName == 'tf') {
-        res.forEach((el) => {
-          menuList.push({
-            name: el.deviceName,
-            warn: el.netStatus ? '高风险' : '低风险',
-            type: 'on',
-            deviceID: el.deviceID,
-          });
-        });
-        getSysWarnList(menuList[0].deviceID, 'vent');
-        console.log(menuList, '通风预警详情');
-      }
-    });
-  }
-  //获取预警详情弹窗右侧数据
-  function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-      console.log(res, '预警详情弹窗右侧数据');
-      listData.value = res;
     });
-  }
+  }, 1000)
+
+}
+
+watch(
+  () => props.moduleName,
+  (val) => {
+    if (val == 'fire') {
+      current.value = '';
+      titleName.value = '火灾监测';
+      isShowModule.value = true;
+      getSysTypeWarnList('fire');
+    } else if (val == 'dust') {
+      current.value = '';
+      titleName.value = '粉尘监测';
+      isShowModule.value = false;
+      current.value = 'dustPage';
+      getSysTypeWarnList('dust');
+
+    } else if (val == 'vent') {
+      current.value = '';
+      titleName.value = '通风监测';
+      isShowModule.value = false;
+      current.value = 'ventilate';
+      getSysTypeWarnList('vent');
+    } else if (val == 'gas') {
+      current.value = '';
+      titleName.value = '瓦斯监测';
+      isShowModule.value = false;
+      current.value = 'gasPage';
+      getSysTypeWarnList('gas');
+    }
+  },
+  { immediate: true, deep: true }
+);
 
-  watch(
-    () => props.moduleName,
-    (val) => {
-      if (val == 'fire') {
-        titleName.value = '火灾监测';
-        isShowModule.value = true;
-        getSysTypeWarnList('fire');
-        current.value = 'fireWork';
-      } else if (val == 'dust') {
-        titleName.value = '粉尘监测';
-        isShowModule.value = false;
-        getSysTypeWarnList('dust');
-        current.value = 'dustPage';
-      } else if (val == 'tf') {
-        titleName.value = '通风监测';
-        isShowModule.value = false;
-        current.value = 'ventilate';
-        getSysTypeWarnList('vent');
-      } else {
-        titleName.value = '瓦斯监测';
-        isShowModule.value = false;
-        getSysTypeWarnList('gas');
-        current.value = 'gasPage';
-      }
-    },
-    { immediate: true }
-  );
+onMounted(async () => { });
 
-  onMounted(async () => {});
-  onUnmounted(() => {});
 </script>
 <style scoped lang="less">
-  @import '/@/design/vent/color.less';
-  @import '/@/design/vent/modal.less';
+@import '/@/design/vent/color.less';
+@import '/@/design/vent/modal.less';
 
-  .alarm-modal {
-    position: relative;
-    z-index: 999;
+.alarm-modal {
+  position: relative;
+  z-index: 999;
 
-    max-height: calc(100vh - 150px);
+  max-height: calc(100vh - 150px);
 
-    .@{ventSpace}-tabs {
-      max-height: calc(100vh - 100px);
-    }
+  .@{ventSpace}-tabs {
+    max-height: calc(100vh - 100px);
+  }
+
+  .containers {
+    width: 100%;
+    height: calc(100vh - 159px);
+    display: flex;
+    justify-content: space-between;
+
+    .alarm-menu {
+      height: 100%;
+      width: 272px;
+
+      .type-btn {
+        width: 192px;
+        height: 28px;
+        line-height: 28px;
+        border: 1px solid #0058ee;
+        margin-bottom: 20px;
+        border-radius: 5px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+
+        .btn {
+          width: 50%;
+          height: 100%;
+          font-size: 14px;
+          text-align: center;
+          color: #fff;
+          cursor: pointer;
+        }
+
+        .btn1 {
+          width: 50%;
+          height: 100%;
+          font-size: 14px;
+          color: #fff;
+          text-align: center;
+          border-radius: 2px;
+          background: #0058ee;
+          cursor: pointer;
+        }
+      }
 
-    .containers {
-      width: 100%;
-      height: calc(100vh - 159px);
-      display: flex;
-      justify-content: space-between;
-
-      .alarm-menu {
-        height: 100%;
-        width: 262px;
-
-        .type-btn {
-          width: 192px;
-          height: 28px;
-          line-height: 28px;
-          border: 1px solid #0058ee;
-          margin-bottom: 20px;
-          border-radius: 5px;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-
-          .btn {
-            width: 50%;
-            height: 100%;
-            font-size: 14px;
+      .card-btn {
+        width: 100%;
+        height: calc(100% - 48px);
+        overflow-y: auto;
+
+        .btn {
+          position: relative;
+          width: 212px;
+          height: 99px;
+          margin-bottom: 30px;
+          font-family: 'douyuFont';
+          background: url('../../../../assets/images/fire/no-choice.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 22px;
+            font-size: 16px;
+            color: #01fefc;
             text-align: center;
-            color: #fff;
-            cursor: pointer;
+            transform: translate(-50%, 0);
           }
 
-          .btn1 {
-            width: 50%;
-            height: 100%;
-            font-size: 14px;
+          .warn {
+            width: 100%;
+            position: absolute;
+            left: 50%;
+            top: 68px;
+            font-size: 16px;
             color: #fff;
             text-align: center;
-            border-radius: 2px;
-            background: #0058ee;
-            cursor: pointer;
+            transform: translate(-50%, 0);
           }
         }
 
-        .card-btn {
-          width: 100%;
-          height: calc(100% - 48px);
-          overflow-y: auto;
-
-          .btn {
-            position: relative;
-            width: 212px;
-            height: 99px;
-            margin-bottom: 30px;
-            font-family: 'douyuFont';
-            background: url('../../../../assets/images/fire/no-choice.png') no-repeat;
-            background-size: 100% 100%;
-            cursor: pointer;
-
-            .text {
-              width: 80%;
-              position: absolute;
-              left: 50%;
-              top: 22px;
-              font-size: 16px;
-              color: #01fefc;
-              text-align: center;
-              transform: translate(-50%, 0);
-            }
-
-            .warn {
-              width: 100%;
-              position: absolute;
-              left: 50%;
-              top: 68px;
-              font-size: 16px;
-              color: #fff;
-              text-align: center;
-              transform: translate(-50%, 0);
-            }
+        .btn1 {
+          position: relative;
+          width: 262px;
+          height: 99px;
+          margin-bottom: 30px;
+          font-family: 'douyuFont';
+          background: url('../../../../assets//images//fire/choice.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 22px;
+            font-size: 16px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-62%, 0);
           }
 
-          .btn1 {
-            position: relative;
-            width: 262px;
-            height: 99px;
-            margin-bottom: 30px;
-            font-family: 'douyuFont';
-            background: url('../../../../assets//images//fire/choice.png') no-repeat;
-            background-size: 100% 100%;
-            cursor: pointer;
-
-            .text {
-              width: 80%;
-              position: absolute;
-              left: 50%;
-              top: 22px;
-              font-size: 16px;
-              color: #01fefc;
-              text-align: center;
-              transform: translate(-62%, 0);
-            }
-
-            .warn {
-              width: 100%;
-              position: absolute;
-              left: 50%;
-              top: 68px;
-              font-size: 16px;
-              color: #fff;
-              text-align: center;
-              transform: translate(-60%, 0);
-            }
+          .warn {
+            width: 100%;
+            position: absolute;
+            left: 50%;
+            top: 68px;
+            font-size: 16px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-60%, 0);
           }
         }
       }
+    }
+
+    .alarm-content {
+      width: calc(100% - 282px);
+      height: 100%;
+      margin-left: 10px;
+      background: url('../../../../assets//images/fire/border.png') no-repeat;
+      background-size: 100% 100%;
+
 
-      .alarm-content {
-        width: calc(100% - 282px);
-        height: 100%;
-        margin-left: 20px;
-        background: url('../../../../assets//images/fire/border.png') no-repeat;
-        background-size: 100% 100%;
-
-        // .toggle-btn {
-        //   position: absolute;
-        //   right: 10px;
-        //   top: -34px;
-        //   display: flex;
-
-        //   .btn-item {
-        //     width: 157px;
-        //     height: 36px;
-        //     line-height: 36px;
-        //     text-align: center;
-        //     color: #fff;
-        //     font-size: 14px;
-        //     cursor: pointer;
-        //     background: url('../../../../assets//images//fire/tab-2.png') no-repeat;
-        //   }
-
-        //   .btn-item1 {
-        //     width: 157px;
-        //     height: 36px;
-        //     line-height: 36px;
-        //     text-align: center;
-        //     color: #fff;
-        //     font-size: 14px;
-        //     cursor: pointer;
-        //     background: url('../../../../assets/images//fire/tab-1.png') no-repeat;
-        //   }
-        // }
-      }
     }
-  }
 
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
   }
+}
 
-  :deep(.@{ventSpace}-tabs-card) {
-    .@{ventSpace}-tabs-tab {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
-      border-color: #74e9fe;
-      border-radius: 0%;
 
-      &:hover {
-        color: #64d5ff;
-      }
-    }
 
-    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-      color: aqua;
-    }
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  height: 100%;
+}
 
-    .@{ventSpace}-tabs-nav::before {
-      border-color: #74e9fe;
+:deep(.@{ventSpace}-tabs-card) {
+  .@{ventSpace}-tabs-tab {
+    background: linear-gradient(#2cd1ff55, #1eb0ff55);
+    border-color: #74e9fe;
+    border-radius: 0%;
+
+    &:hover {
+      color: #64d5ff;
     }
+  }
 
-    .@{ventSpace}-picker,
-    .@{ventSpace}-select-selector {
-      width: 100% !important;
-      background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
+  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+    color: aqua;
+  }
 
-      input,
-      .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-picker-suffix {
-        color: #fff !important;
-      }
+  .@{ventSpace}-tabs-nav::before {
+    border-color: #74e9fe;
+  }
 
-      .@{ventSpace}-select-selection-placeholder {
-        color: #b7b7b7 !important;
-      }
-    }
+  .@{ventSpace}-picker,
+  .@{ventSpace}-select-selector {
+    width: 100% !important;
+    background: #00000017 !important;
+    border: 1px solid @vent-form-item-boder !important;
 
-    .@{ventSpace}-pagination-next,
-    .action,
-    .@{ventSpace}-select-arrow,
-    .@{ventSpace}-picker-separator {
+    input,
+    .@{ventSpace}-select-selection-item,
+    .@{ventSpace}-picker-suffix {
       color: #fff !important;
     }
 
-    .@{ventSpace}-table-cell-row-hover {
-      background: #264d8833 !important;
+    .@{ventSpace}-select-selection-placeholder {
+      color: #b7b7b7 !important;
     }
+  }
 
-    .@{ventSpace}-table-row-selected {
-      background: #00c0a311 !important;
+  .@{ventSpace}-pagination-next,
+  .action,
+  .@{ventSpace}-select-arrow,
+  .@{ventSpace}-picker-separator {
+    color: #fff !important;
+  }
 
-      td {
-        background-color: #00000000 !important;
-      }
-    }
+  .@{ventSpace}-table-cell-row-hover {
+    background: #264d8833 !important;
+  }
 
-    .@{ventSpace}-table-thead {
-      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d !important;
-
-      & > tr > th,
-      .@{ventSpace}-table-column-title {
-        // color: #70f9fc !important;
-        border-color: #84f2ff !important;
-        border-left: none !important;
-        border-right: none !important;
-        padding: 7px;
-      }
+  .@{ventSpace}-table-row-selected {
+    background: #00c0a311 !important;
+
+    td {
+      background-color: #00000000 !important;
     }
+  }
 
-    .@{ventSpace}-table-tbody {
-      tr > td {
-        padding: 12px;
-      }
+  .@{ventSpace}-table-thead {
+    // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
+    background: #3d9dd45d !important;
+
+    &>tr>th,
+    .@{ventSpace}-table-column-title {
+      // color: #70f9fc !important;
+      border-color: #84f2ff !important;
+      border-left: none !important;
+      border-right: none !important;
+      padding: 7px;
     }
+  }
 
-    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
-      background-color: #26648855 !important;
+  .@{ventSpace}-table-tbody {
+    tr>td {
+      padding: 12px;
     }
+  }
 
-    .jeecg-basic-table-row__striped {
-      // background: #97efff11 !important;
-      td {
-        background-color: #97efff11 !important;
-      }
+  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
+    background-color: #26648855 !important;
+  }
+
+  .jeecg-basic-table-row__striped {
+
+    // background: #97efff11 !important;
+    td {
+      background-color: #97efff11 !important;
     }
   }
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/alarm.data.ts

@@ -467,7 +467,7 @@ export const chartsColumns = [
 
 export const option = {
   grid: {
-    top: '10px',
+    top: '20px',
     bottom: 15,
     right: 20,
     left: 10,

src/views/vent/monitorManager/alarmMonitor/fire.data.ts

@@ -1,7 +1,5 @@
 import { reactive, markRaw, defineAsyncComponent } from 'vue';
-import { BasicColumn, FormSchema } from '/@/components/Table';
-import echarts from '/@/utils/lib/echarts';
-import type { EChartsOption } from 'echarts';
+
 import { getAssetURL } from '/@/utils/ui';
 
 //内外因火灾菜单列表
@@ -28,7 +26,7 @@ export const topList = [
     id: 0,
     label: '最高温度(°C)',
     imgSrc: true,
-    value: 10,
+    value: '--',
     text: '',
     list: [],
   },
@@ -36,7 +34,7 @@ export const topList = [
     id: 1,
     label: '最低温度(°C)',
     imgSrc: true,
-    value: 20,
+    value: '--',
     text: '',
     list: [],
   },
@@ -44,11 +42,11 @@ export const topList = [
     id: 2,
     label: '平均温度(°C)',
     imgSrc: true,
-    value: 15,
+    value: '--',
     text: '',
     list: [],
   },
-  { id: 3, imgSrc: false, label: '', value: null, text: '无自然发火征兆和隐患', list: [] },
+  { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
   {
     id: 4,
     imgSrc: false,
@@ -70,22 +68,10 @@ export const pointList = [
 
 //光钎图表数据
 export const echartDataGq = {
-  maxData: [45, 42, 43, 46, 44, 41, 42, 45, 47, 46, 48],
-  minData: [25, 22, 23, 26, 24, 21, 22, 25, 27, 26, 28],
-  aveValue: [35, 32, 33, 36, 34, 31, 32, 35, 37, 36, 38],
-  xData: [
-    '2023-09-12 11:22',
-    '2023-09-12 11:23',
-    '2023-09-12 11:24',
-    '2023-09-12 11:25',
-    '2023-09-12 11:26',
-    '2023-09-12 11:27',
-    '2023-09-12 11:28',
-    '2023-09-12 11:29',
-    '2023-09-12 11:30',
-    '2023-09-12 11:31',
-    '2023-09-12 11:32',
-  ],
+  maxData: [],
+  minData: [],
+  aveValue: [],
+  xData: [],
 };
 
 //束管监测-测点编号列表
@@ -103,17 +89,17 @@ export const contentList = [
         id: '0-0',
         title: 'O2',
         label: '浓度 : ',
-        value: 10,
+        value: 0,
         label1: '时间 : ',
-        time: '2023-09-12 14:00',
+        time: '',
       },
       {
         id: '0-1',
         title: 'C2H4',
         label: '浓度 : ',
-        value: 10,
+        value: 0,
         label1: '时间 : ',
-        time: '2023-09-12 14:01',
+        time: '',
       },
     ],
   },
@@ -124,17 +110,17 @@ export const contentList = [
         id: '1-0',
         title: 'CO',
         label: '浓度 : ',
-        value: 20,
+        value: 0,
         label1: '时间 : ',
-        time: '2023-09-12 14:02',
+        time: '',
       },
       {
         id: '1-1',
         title: 'CH4',
         label: '浓度 : ',
-        value: 20,
+        value: 0,
         label1: '时间 : ',
-        time: '2023-09-12 14:03',
+        time: '',
       },
     ],
   },
@@ -145,76 +131,23 @@ export const contentList = [
         id: '2-0',
         title: 'CO2',
         label: '浓度 : ',
-        value: 30,
+        value: 0,
         label1: '时间 : ',
-        time: '2023-09-12 14:04',
+        time: '',
       },
       {
         id: '2-1',
         title: 'C2H2',
         label: '浓度 : ',
-        value: 30,
+        value: 0,
         label1: '时间 : ',
-        time: '2023-09-12 14:05',
+        time: '',
       },
     ],
   },
 ];
 
-//束管监测-图表数据
-export const echartDataSg = {
-  xData: [
-    '2023-09-12 13:40',
-    '2023-09-12 13:41',
-    '2023-09-12 13:42',
-    '2023-09-12 13:43',
-    '2023-09-12 13:44',
-    '2023-09-12 13:45',
-    '2023-09-12 13:46',
-    '2023-09-12 13:47',
-    '2023-09-12 13:40',
-    '2023-09-12 13:41',
-    '2023-09-12 13:42',
-    '2023-09-12 13:43',
-    '2023-09-12 13:44',
-    '2023-09-12 13:45',
-    '2023-09-12 13:46',
-    '2023-09-12 13:47',
-    '2023-09-12 13:40',
-    '2023-09-12 13:41',
-    '2023-09-12 13:42',
-    '2023-09-12 13:43',
-    '2023-09-12 13:44',
-    '2023-09-12 13:45',
-    '2023-09-12 13:46',
-    '2023-09-12 13:47',
-    '2023-09-12 13:40',
-    '2023-09-12 13:41',
-    '2023-09-12 13:42',
-    '2023-09-12 13:43',
-    '2023-09-12 13:44',
-    '2023-09-12 13:45',
-    '2023-09-12 13:46',
-    '2023-09-12 13:47',
-    '2023-09-12 13:40',
-    '2023-09-12 13:41',
-    '2023-09-12 13:42',
-    '2023-09-12 13:43',
-    '2023-09-12 13:44',
-    '2023-09-12 13:45',
-    '2023-09-12 13:46',
-    '2023-09-12 13:47',
-    '2023-09-12 13:40',
-    '2023-09-12 13:41',
-    '2023-09-12 13:42',
-    '2023-09-12 13:43',
-    '2023-09-12 13:44',
-    '2023-09-12 13:45',
-    '2023-09-12 13:46',
-    '2023-09-12 13:47',
-  ],
-  yData: [42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43],
-};
+
 
 //密闭参数列表
 export const mbList = [
@@ -223,54 +156,54 @@ export const mbList = [
     label1: '浓度',
     label2: '时间',
     label3: '位置',
-    nd: 4.45,
-    time1: '2023-09-12 15:04',
-    address: '综采工作面45联巷密闭',
+    nd: 0,
+    time1: '',
+    address: '',
   },
   {
     label: 'CO',
     label1: '浓度',
     label2: '时间',
     label3: '位置',
-    nd: 2.2,
-    time1: '2023-09-12 15:04',
-    address: '综采工作面45联巷密闭',
+    nd: 0,
+    time1: '',
+    address: '',
   },
   {
     label: 'CO2',
     label1: '浓度',
     label2: '时间',
     label3: '位置',
-    nd: 0.28,
-    time1: '2023-09-12 15:04',
-    address: '综采工作面45联巷密闭',
+    nd: 0,
+    time1: '',
+    address: '',
   },
   {
     label: 'CH4',
     label1: '浓度',
     label2: '时间',
     label3: '位置',
-    nd: 0.29,
-    time1: '2023-09-12 15:04',
-    address: '综采工作面45联巷密闭',
+    nd: 0,
+    time1: '',
+    address: '',
   },
   {
-    label: 'DP',
+    label: 'C2H2',
     label1: '浓度',
     label2: '时间',
     label3: '位置',
     nd: 0,
-    time1: '2023-09-12 15:04',
-    address: '综采工作面45联巷密闭',
+    time1: '',
+    address: '',
   },
   {
-    label: 'T',
+    label: 'C2H4',
     label1: '浓度',
     label2: '时间',
     label3: '位置',
-    nd: 16.48,
-    time1: '2023-09-12 15:04',
-    address: '综采工作面45联巷密闭',
+    nd: 0,
+    time1: '',
+    address: '',
   },
 ];
 
@@ -292,24 +225,24 @@ export const topOutList = [
     id: 0,
     imgSrc: true,
     label: '最高温度(°C)',
-    value: 17.69,
+    value: '0',
     text: '',
   },
   {
     id: 1,
     imgSrc: true,
     label: '最低温度(°C)',
-    value: 14.26,
+    value: '0',
     text: '',
   },
   {
     id: 2,
     imgSrc: true,
     label: '平均温度(°C)',
-    value: 16.78,
+    value: '0',
     text: '',
   },
-  { id: 3, imgSrc: false, label: '', value: null, text: '无自然发火征兆和隐患' },
+  { id: 3, imgSrc: false, label: '', value: null, text: '' },
   {
     id: 4,
     imgSrc: false,
@@ -328,9 +261,9 @@ export const tabList = [
 
 //外因火灾-传感器table列
 export const columns = [
-  { rowIndex: 1, dataIndex: 'pointName', title: '名称', type: '1', align: 'center' },
-  { rowIndex: 2, dataIndex: 'isOpen', title: '状态', type: '1', align: 'center' },
-  { rowIndex: 3, dataIndex: 'time', title: '时间', type: '1', align: 'center' },
+  { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
+  { rowIndex: 2, dataIndex: 'warnFlag', title: '状态', type: '1', align: 'center' },
+  { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
 ];
 
 //外因火灾温度监测-测点列表
@@ -339,22 +272,7 @@ export const pointOutList = [
   { label: '测点2', value: 1 },
 ];
 
-//外因火灾温度监测-图表数据
-export const echartDataWd = {
-  xData: [
-    '2023-09-13 10:15',
-    '2023-09-13 10:16',
-    '2023-09-13 10:17',
-    '2023-09-13 10:18',
-    '2023-09-13 10:19',
-    '2023-09-13 10:20',
-    '2023-09-13 10:21',
-    '2023-09-13 10:22',
-  ],
-  maxData: [32, 33, 31, 33, 34, 36, 35, 37],
-  minData: [13, 15, 14, 12, 16, 15, 17, 19],
-  aveaData: [21, 24, 23, 22, 26, 24, 25, 23],
-};
+
 
 //井下消防材料库列表
 export const dataList = [
@@ -686,45 +604,13 @@ export const columnsJd = [
 ];
 
 //粉尘
-//顶部区域数据-粉尘
-export const topAreaList = [
-  {
-    id: 0,
-    title: '15218采煤工作面粉尘',
-    content: [
-      { ids: 0, label: '温度(°C)', value: 16.3 },
-      { ids: 1, label: '粉尘浓度(%)', value: 16.3 },
-      { ids: 2, label: '喷雾水压', value: 16.3 },
-      { ids: 3, label: '喷雾装置', value: 16.3 },
-    ],
-  },
-  {
-    id: 1,
-    title: '15218采煤工作面粉尘',
-    content: [
-      { ids: 0, label: '温度(°C)', value: 16.3 },
-      { ids: 1, label: '粉尘浓度(%)', value: 16.3 },
-      { ids: 2, label: '喷雾水压', value: 16.3 },
-      { ids: 3, label: '喷雾装置', value: 16.3 },
-    ],
-  },
-  {
-    id: 2,
-    title: '15218采煤工作面粉尘',
-    content: [
-      { ids: 0, label: '温度(°C)', value: 16.3 },
-      { ids: 1, label: '粉尘浓度(%)', value: 16.3 },
-      { ids: 2, label: '喷雾水压', value: 16.3 },
-      { ids: 3, label: '喷雾装置', value: 16.3 },
-    ],
-  },
-];
+
 //中间区域数据-粉尘
 export const centerAreaListT = [
   { id: 0, label: '粉尘浓度(mg/m³)' },
-  { id: 1, label: '总尘浓度(mg/m³)' },
+  { id: 1, label: '总尘浓度(%)' },
   { id: 2, label: '呼尘加权容许浓度(mg/m³)' },
-  { id: 3, label: '爆炸浓度(mg/m³)' },
+  { id: 3, label: '喷雾状态' },
 ];
 //中间区域数据-通风
 export const centerAreaListT1 = [
@@ -732,25 +618,7 @@ export const centerAreaListT1 = [
   { id: 1, label: '回风量(m³/min)' },
   { id: 2, label: '需风量(m³/min)' },
 ];
-//中间区域底部数据-粉尘
-export const centerAreaListB = [
-  {
-    id: 0,
-    content: [{ label: '0.00' }],
-  },
-  {
-    id: 1,
-    content: [{ label: '1.00' }, { label: '2.00' }],
-  },
-  {
-    id: 2,
-    content: [{ label: '0.00' }],
-  },
-  {
-    id: 3,
-    content: [{ label: '0.00' }],
-  },
-];
+
 //中间区域底部数据-通风
 export const centerAreaListB1 = [
   {
@@ -767,25 +635,7 @@ export const centerAreaListB1 = [
   },
   
 ];
-//粉尘图表数据
-export const echartDataFc = {
-  maxData: [45, 42, 43, 46, 44, 41, 42, 45, 47, 46, 48],
-  minData: [25, 22, 23, 26, 24, 21, 22, 25, 27, 26, 28],
-  aveValue: [35, 32, 33, 36, 34, 31, 32, 35, 37, 36, 38],
-  xData: [
-    '2023-09-12 11:22',
-    '2023-09-12 11:23',
-    '2023-09-12 11:24',
-    '2023-09-12 11:25',
-    '2023-09-12 11:26',
-    '2023-09-12 11:27',
-    '2023-09-12 11:28',
-    '2023-09-12 11:29',
-    '2023-09-12 11:30',
-    '2023-09-12 11:31',
-    '2023-09-12 11:32',
-  ],
-}
+
 
 //瓦斯
 //瓦斯顶部区域数据

src/views/vent/monitorManager/alarmMonitor/fire/closeWall.vue

@@ -19,7 +19,7 @@
                 </div>
             </div>
             <div class="box">
-                <div class="text1">无自然发火征兆和隐患</div>
+                <div class="text1">{{ topContent.warn }}</div>
             </div>
         </div>
         <div class="content">
@@ -44,12 +44,12 @@
             </div>
             <div class="echart-box">
                 <div class="title-f">
-                    <div class="title-text">O2趋势</div>
+                    <div class="title-text">{{ `${type}趋势` }}</div>
                     <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
                         :placeholder="['开始时间', '终止时间']" @change="onDataChange" />
                 </div>
                 <div class="echarts-box">
-                    <echartLine1 :echartDataSg="echartDataSg"></echartLine1>
+                    <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
                 </div>
             </div>
         </div>
@@ -57,35 +57,125 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
-import {echartDataSg,mbList} from '../fire.data'
+import { onMounted, ref, reactive, watch, defineProps } from 'vue';
+import { mbList } from '../fire.data'
 import echartLine1 from './common/echartLine1.vue'
 
+let props = defineProps({
+    listData: Object,
+});
+
 //密闭-顶部区域数据
 let topContent = reactive({
-    temperature: '16.88',
-    position: '51207综采工作面45联巷密闭',
-    time: '2023-09-12 15:04:36'
+    temperature: 0,
+    position: '',
+    time: '',
+    warn: '',
 })
 //当前密闭参数激活选项
 let activeIndex = ref(0)
 //当前激活密闭参数类型
-let type = ref('')
+let type = ref('O2')
 //时间查询参数
 let TimeRange = reactive<any>([])
 
+let echartDataSg1 = reactive({
+    xData: [],
+    yData: [],
+})
+let echartDataSgList = reactive<any[]>([])
+
 //密闭参数选项切换
 function btnClick(item, ind) {
     activeIndex.value = ind
     type.value = item.label
-    //   this.getMbHistoryDataList()
+    echartDataSg1.xData.length = 0
+    echartDataSg1.yData.length = 0
+    switch (type.value) {
+        case 'O2':
+            echartDataSgList.forEach(el => {
+                echartDataSg1.xData.push(el.time)
+                echartDataSg1.yData.push(el.o2val)
+
+            })
+            break;
+        case 'C2H4':
+            echartDataSgList.forEach(el => {
+                echartDataSg1.xData.push(el.time)
+                echartDataSg1.yData.push(el.ch2val)
+
+            })
+            break;
+        case 'CO':
+            echartDataSgList.forEach(el => {
+                echartDataSg1.xData.push(el.time)
+                echartDataSg1.yData.push(el.coval)
+
+            })
+            break;
+        case 'CH4':
+            echartDataSgList.forEach(el => {
+                echartDataSg1.xData.push(el.time)
+                echartDataSg1.yData.push(el.chval)
+
+            })
+            break;
+        case 'CO2':
+            echartDataSgList.forEach(el => {
+                echartDataSg1.xData.push(el.time)
+                echartDataSg1.yData.push(el.co2val)
+
+            })
+            break;
+        case 'C2H2':
+            echartDataSgList.forEach(el => {
+                echartDataSg1.xData.push(el.time)
+                echartDataSg1.yData.push(el.gasval)
+
+            })
+            break;
+    }
+
 }
 //时间选项切换
 function onDataChange(value, dateString) {
     TimeRange = [dateString[0], dateString[1]]
-    //   this.getMbHistoryDataList()
 }
 
+watch(() => props.listData, (val) => {
+    if (JSON.stringify(val) != '{}') {
+        if (val.bundletube.length != 0) {
+            topContent.temperature = val.temperature[0].readData.temperature
+            topContent.position = val.bundletube[0].stationname
+            topContent.time = val.bundletube[0].warnTime
+            topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '低风险' : val.bundletube[0].warnLevel == 102 ? '中风险' : val.bundletube[0].warnLevel == 103 ? '高风险' : '报警'
+
+            mbList[0].nd = val.bundletube[0].readData.o2val
+            mbList[1].nd = val.bundletube[0].readData.coval
+            mbList[2].nd = val.bundletube[0].readData.co2val
+            mbList[3].nd = val.bundletube[0].readData.chval
+            mbList[4].nd = val.bundletube[0].readData.ch2val
+            mbList[5].nd = val.bundletube[0].readData.gasval
+            mbList.forEach(el => {
+                el.time1 = val.bundletube[0].warnTime
+                el.address = val.bundletube[0].stationname
+            })
+
+            echartDataSg1.xData.length = 0
+            echartDataSg1.yData.length = 0
+            echartDataSgList.length = 0
+            val.bundletube[0].history.forEach(v => {
+                echartDataSg1.xData.push(v.time)
+                echartDataSg1.yData.push(v.o2val)
+                echartDataSgList.push(v)
+            })
+
+
+        }
+    }
+
+}, { immediate: true, deep: true })
+
 
 
 

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-  import {defineProps, onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+  import {defineProps,  ref,  nextTick, reactive,  watch,  } from 'vue';
   import * as echarts from 'echarts';
 
   let props = defineProps({
@@ -19,7 +19,6 @@
   watch(
     () => props.echartDataGq,
     (data) => {
-      console.log(data, '光钎图表数据');
       echartDataGqs=Object.assign({},data)
       getOption();
     },
@@ -31,9 +30,9 @@
       let option = {
         grid: {
           top: '6%',
-          left: '4%',
-          bottom: '8%',
-          right: '5%',
+          left: '2%',
+          bottom: '6%',
+          right: '2%',
             containLabel: true,
         },
         tooltip: {
@@ -73,7 +72,7 @@
           {
             boundaryGap: false,
             type: 'value',
-            max: 5000,
+            max: 50,
             axisLabel: {
               textStyle: {
                 color: '#b3b8cc',

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine1.vue

@@ -6,23 +6,20 @@
   
 <script lang="ts" setup>
 import * as echarts from 'echarts'
-import { onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import {  ref, nextTick, reactive, watch,defineProps } from 'vue';
 let props = defineProps({
     echartDataSg: {
         type: Object,
-        default: () => {
-            return {}
-        }
     }
 })
 
 //获取dom元素节点
 let line = ref<any>()
-watch(() => props.echartDataSg, (data: never[]) => {
-    console.log(data, '束管图表数据')
-    // props.echartDataGq = data
+let echartDataSgs=reactive({})
+watch(() => props.echartDataSg, (data) => {
+    echartDataSgs = Object.assign({},data)
     getOption()
-}, { immediate: true })
+}, { immediate: true,deep:true })
 
 
 
@@ -79,7 +76,6 @@ function getOption() {
                                     newParamsName.value += tempStr // 最终拼成的字符串
                                 }
                             } else {
-                                alert('1')
                                 // 将旧标签的值赋给新标签
                                 newParamsName.value = params
                             }
@@ -103,7 +99,7 @@ function getOption() {
                     axisTick: {
                         show: false,
                     },
-                    data: props.echartDataSg.xData,
+                    data: echartDataSgs.xData,
                 },
             ],
             yAxis: [
@@ -182,7 +178,7 @@ function getOption() {
                             ),
                         },
                     },
-                    data: props.echartDataSg.yData,
+                    data: echartDataSgs.yData,
                 },
             ],
         }

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine2.vue

@@ -6,25 +6,22 @@
   
 <script lang="ts" setup>
 import * as echarts from 'echarts'
-import { onMounted, ref, defineEmits, nextTick, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import {  ref,  nextTick,reactive,  watch, defineProps } from 'vue';
 
 let props = defineProps({
     echartDataWd: {
         type: Object,
-        default: () => {
-            return {}
-        }
     }
 })
 
 //获取dom元素节点
 let work = ref<any>()
+let echartDataWds=reactive({})
 
-watch(() => props.echartDataWd, (data: never[]) => {
-    console.log(data, '温度图表数据')
-    // props.echartDataGq = data
+watch(() => props.echartDataWd, (data) => {
+    echartDataWds=Object.assign({},data)
     getOption()
-}, { immediate: true })
+}, { immediate: true ,deep:true})
 
 function getOption() {
     nextTick(() => {
@@ -103,7 +100,7 @@ function getOption() {
                     axisTick: {
                         show: false,
                     },
-                    data: props.echartDataWd.xData,
+                    data: echartDataWds.xData,
                 },
             ],
 
@@ -116,7 +113,7 @@ function getOption() {
                         padding: 0,
                     },
                     min: 0,
-                    max: 50,
+                    max: 100,
                     splitLine: {
                         show: true,
                         lineStyle: {
@@ -167,7 +164,7 @@ function getOption() {
                         borderColor: '#646ace',
                         borderWidth: 0,
                     },
-                    data: props.echartDataWd.maxData,
+                    data: echartDataWds.maxData,
                 },
                 {
                     name: '最小值',
@@ -188,7 +185,7 @@ function getOption() {
                         borderColor: '#646ace',
                         borderWidth: 0,
                     },
-                    data: props.echartDataWd.minData,
+                    data: echartDataWds.minData,
                 },
                 {
                     name: '平均值',
@@ -209,7 +206,7 @@ function getOption() {
                         borderColor: '#646ace',
                         borderWidth: 0,
                     },
-                    data: props.echartDataWd.aveaData,
+                    data: echartDataWds.aveaData,
                 },
             ],
         }

src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

@@ -20,7 +20,7 @@
             </div>
             <div class="center-b">
                 <div class="b-box" v-for="(item, index) in centerAreaListB" :key="index">
-                    <div class="box-label" v-for="(items, ind) in item.content" :key="ind">{{ items.label }}</div>
+                    <div class="box-label">{{ item.content }}</div>
                 </div>
             </div>
         </div>
@@ -31,17 +31,110 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
-import { topAreaList, centerAreaListT, centerAreaListB, echartDataFc } from '../fire.data'
+import { ref, computed, reactive, watch, defineProps } from 'vue';
+import { centerAreaListT, } from '../fire.data'
 import echartLine from './common/echartLine.vue'
+
+let props = defineProps({
+    listData: Object,
+});
+
+//顶部区域数据
+let topAreaList = reactive<any[]>([])
+
 //顶部区域激活选项
 let activeIndex = ref(0)
 
+//中间区域数据
+let centerAreaListB = reactive<any[]>([])
+let choiceData = reactive<any[]>([])
+
+//粉尘图表数据
+let echartDataFc = reactive({
+    maxData: [],
+    minData: [],
+    aveValue: [],
+    xData: []
+})
+
 //顶部区域选项切换
 function topAreaClick(index) {
     activeIndex.value = index
+    centerAreaListB.length = 0
+    echartDataFc.maxData.length = 0
+    echartDataFc.minData.length = 0
+    echartDataFc.aveValue.length = 0
+    echartDataFc.xData.length = 0
+    centerAreaListB.push(
+        { content: choiceData[index].readData.dustval },
+        { content: choiceData[index].readData.totalDust },
+        { content: choiceData[index].readData.breathWeighted },
+        { content: choiceData[index].readData.atomizingState },
+    )
+    choiceData[index].history.forEach(el => {
+        echartDataFc.maxData.push(el.dustval)
+        echartDataFc.minData.push(el.ratio)
+        echartDataFc.aveValue.push(el.totalDust)
+        echartDataFc.xData.push(el.time)
+    })
 }
 
+watch(() => props.listData, (val) => {
+    if (JSON.stringify(val.common) != '{}') {
+        topAreaList.length = 0
+        val.common.dust.forEach(el => {
+            topAreaList.push({
+                title: el.strinstallpos,
+                content: [
+                    { ids: 0, label: '温度(°C)', value: el.readData.temperature, },
+                    { ids: 1, label: '粉尘浓度(%)', value: el.readData.dustval, },
+                    { ids: 2, label: '喷雾水压', value: el.readData.waterPressure, },
+                    { ids: 3, label: '喷雾状态', value: el.readData.atomizingState, },
+                ],
+            },)
+        })
+        choiceData = val.common.dust
+        centerAreaListB.length = 0
+        echartDataFc.maxData.length = 0
+        echartDataFc.minData.length = 0
+        echartDataFc.aveValue.length = 0
+        echartDataFc.xData.length = 0
+        if (choiceData[activeIndex.value]) {
+            centerAreaListB.push(
+                { content: choiceData[activeIndex.value].readData.dustval },
+                { content: choiceData[activeIndex.value].readData.totalDust },
+                { content: choiceData[activeIndex.value].readData.breathWeighted },
+                { content: choiceData[activeIndex.value].readData.atomizingState },
+            )
+
+            choiceData[activeIndex.value].history.forEach(el => {
+                echartDataFc.maxData.push(el.dustval)
+                echartDataFc.minData.push(el.ratio)
+                echartDataFc.aveValue.push(el.totalDust)
+                echartDataFc.xData.push(el.time)
+            })
+
+
+        } else {
+            activeIndex.value = 0
+            centerAreaListB.push(
+                { content: choiceData[activeIndex.value].readData.dustval },
+                { content: choiceData[activeIndex.value].readData.totalDust },
+                { content: choiceData[activeIndex.value].readData.breathWeighted },
+                { content: choiceData[activeIndex.value].readData.atomizingState },
+            )
+            choiceData[activeIndex.value].history.forEach(el => {
+                echartDataFc.maxData.push(el.dustval)
+                echartDataFc.minData.push(el.ratio)
+                echartDataFc.aveValue.push(el.totalDust)
+                echartDataFc.xData.push(el.time)
+            })
+        }
+
+
+    }
+}, { deep: true })
+
 
 </script>
 
@@ -55,7 +148,8 @@ function topAreaClick(index) {
     .top-area {
         height: 183px;
         display: flex;
-        justify-content: space-between;
+        // justify-content: space-between;
+        justify-content: flex-start;
         margin-bottom: 10px;
 
         .top-box {
@@ -63,6 +157,7 @@ function topAreaClick(index) {
             width: 480px;
             height: 160px;
             background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
+            margin: 0px 20px;
 
             .top-title {
                 position: absolute;
@@ -115,6 +210,7 @@ function topAreaClick(index) {
             width: 480px;
             height: 183px;
             background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
+            margin: 0px 20px;
 
             .top-title {
                 position: absolute;

src/views/vent/monitorManager/alarmMonitor/fire/fireWork.vue

@@ -76,12 +76,22 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import { onMounted, ref, reactive, watch, defineProps } from 'vue';
 import imgUrl from '../../../../../assets/images/fire/pie.png'
 import echartLine from './common/echartLine.vue'
 import echartLine1 from './common/echartLine1.vue'
-import {  topList,pointList,echartDataGq,pointList1,contentList,echartDataSg} from '../fire.data'
-
+import { topList, pointList, echartDataGq, pointList1, contentList, } from '../fire.data'
+
+let props = defineProps({
+    listData: Object,
+});
+
+//束管监测-图表数据
+let echartDataSg = reactive({
+    xData: [],
+    yData: [],
+})
+let echartDataSgList = reactive<any[]>([])
 //光钎测温测点编号
 let pointCode = ref('')
 //束管监测-查询时间
@@ -92,7 +102,6 @@ let pointCode1 = ref('')
 
 //光钎测温测点编号选项切换
 function handleChange(val) {
-    console.log(val, '光钎测温测点编号')
     pointCode.value = val
 }
 //束管监测-时间选项切换
@@ -106,11 +115,95 @@ function handleChange1(val) {
 }
 //束管实时数据选项点击
 function getSgClick(items) {
-    console.log(items, '000000')
-    //   this.sgType = items.title
-    //   this.getSgjcHistoryDataList()
+    echartDataSg.xData.length = 0
+    echartDataSg.yData.length = 0
+    switch (items.title) {
+        case 'O2':
+            echartDataSgList.forEach(el => {
+                echartDataSg.xData.push(el.time)
+                echartDataSg.yData.push(el.o2val)
+
+            })
+            break;
+        case 'C2H4':
+            echartDataSgList.forEach(el => {
+                echartDataSg.xData.push(el.time)
+                echartDataSg.yData.push(el.ch2val)
+
+            })
+            break;
+        case 'CO':
+            echartDataSgList.forEach(el => {
+                echartDataSg.xData.push(el.time)
+                echartDataSg.yData.push(el.coval)
+
+            })
+            break;
+        case 'CH4':
+            echartDataSgList.forEach(el => {
+                echartDataSg.xData.push(el.time)
+                echartDataSg.yData.push(el.chval)
+
+            })
+            break;
+        case 'CO2':
+            echartDataSgList.forEach(el => {
+                echartDataSg.xData.push(el.time)
+                echartDataSg.yData.push(el.co2val)
+
+            })
+            break;
+        case 'C2H2':
+            echartDataSgList.forEach(el => {
+                echartDataSg.xData.push(el.time)
+                echartDataSg.yData.push(el.gasval)
+
+            })
+            break;
+    }
 }
 
+watch(() => props.listData, (val, val1) => {
+    console.log(val, '火灾详情')
+    if (JSON.stringify(val) != '{}') {
+        if (val.fiber.length != 0) {
+            topList[0].value = val.fiber[0].readData.fmax
+            topList[1].value = val.fiber[0].readData.fmin
+            topList[2].value = val.fiber[0].readData.favg
+            topList[3].text = val.fiber[0].warnFlag ? '报警' : '未报警'
+            echartDataGq.xData.length = 0
+            echartDataGq.maxData.length = 0
+            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
+                echartDataGq.xData.push(el.pos)
+                echartDataGq.maxData.push(el.value)
+            })
+
+        }
+
+        if (val.bundletube.length != 0) {
+            contentList[0].list[0].value = val.bundletube[0].readData.o2val
+            contentList[0].list[1].value = val.bundletube[0].readData.ch2val
+            contentList[1].list[0].value = val.bundletube[0].readData.coval
+            contentList[1].list[1].value = val.bundletube[0].readData.chval
+            contentList[2].list[0].value = val.bundletube[0].readData.co2val
+            contentList[2].list[1].value = val.bundletube[0].readData.gasval
+            contentList.forEach(el => {
+                el.list.forEach(v => {
+                    v.time = val.bundletube[0].warnTime.substring(0,val.bundletube[0].warnTime.lastIndexOf(':'))
+                })
+            })
+            echartDataSgList.length = 0
+            echartDataSg.xData.length=0
+            echartDataSg.yData.length=0
+            val.bundletube[0].history.forEach(el => {
+                echartDataSg.xData.push(el.time)
+                echartDataSg.yData.push(el.o2val)
+                echartDataSgList.push(el)
+            })
+        }
+    }
+}, { deep: true })
+
 
 </script>
 

src/views/vent/monitorManager/alarmMonitor/fire/mainWell.vue

@@ -19,19 +19,16 @@
                     <span class="details">{{ `${items.details}>>` }}</span>
                 </div>
                 <div class="content">
-                    <a-table v-if="index == 0" ref="table" :row-selection="rowSelectionYw" size="small"
-                        :scroll="monitorscroll2" :columns="columns" :data-source="monitorlistYw" :pagination="false"
-                        :loading="loading">
-                        <span slot="action" slot-scope="text, record"> </span>
+                    <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x:0,y: 273 }" :columns="columns"
+                        :data-source="monitorlistYw" :pagination="false">
+                        <span slot="action" slot-scope="text, record"></span>
                     </a-table>
-                    <a-table v-if="index == 1" ref="table1" :row-selection="rowSelectionHy" size="small"
-                        :scroll="monitorscroll2" :columns="columns" :data-source="monitorlistHy" :pagination="false"
-                        :loading="loading">
+                    <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
+                        :pagination="false" :scroll="{ y: 273 }">
                         <span slot="action" slot-scope="text, record"> </span>
                     </a-table>
-                    <a-table v-if="index == 2" ref="table" :row-selection="rowSelectionPl" size="small"
-                        :scroll="monitorscroll2" :columns="columns" :data-source="monitorlistPl" :pagination="false"
-                        :loading="loading">
+                    <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
+                        :data-source="monitorlistPl" :pagination="false">
                         <span slot="action" slot-scope="text, record"> </span>
                     </a-table>
                 </div>
@@ -39,7 +36,7 @@
         </div>
         <div class="footer-box">
             <div class="footer-title">
-                <div class="echart-label">实时温度监测</div>
+                <div class="echart-label">光钎测温系统实时温度监测</div>
                 <a-select style="width: 240px; margin-left: 10px" v-model="pointCode" allowClear class="code-mode-select"
                     placeholder="请选择" @change="handleChange">
                     <a-select-option v-for="device in pointOutList" :key="device.value" :value="device.value">{{
@@ -56,72 +53,32 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
-import { topOutList, tabList,columns, pointOutList, echartDataWd } from '../fire.data'
+import { ref, computed, reactive, watch, defineProps } from 'vue';
+import { topOutList, tabList, columns, pointOutList, } from '../fire.data'
 import imgUrl from '../../../../../assets/images/fire/pie.png'
 import echartLine2 from './common/echartLine2.vue'
 
-//滚动条高度
-let monitorscroll2 = reactive({ y: 'calc(100% - 150px)' })
-//列表加载状态
-let loading = ref(false)
+let props = defineProps({
+    listData: Object,
+});
+
+//外因火灾温度监测-图表数据
+ let echartDataWd =reactive({
+  xData: [],
+  maxData: [],
+}) 
 
 //烟雾传感器列表数据
 let monitorlistYw = reactive([])
-//烟雾传感器列表当前选中数据
-let selectedRow = reactive([])
-//烟雾传感器-多选操作
-let rowSelectionYw = computed(() => {
-    return {
-        onChange: (selectedRowKeys, selectedRows) => {
-            selectedRow = selectedRows
-            console.log(`selectedRowKeys: ${selectedRowKeys}`, '烟雾传感器: ', selectedRow)
-        },
-        getCheckboxProps: (record) => ({
-            props: {
-                realId: record.realId,
-            },
-        }),
-    }
-})
+
 
 //火焰传感器列表数据
 let monitorlistHy = reactive([])
-//火焰传感器当前选中数据
-let selectedRowHy = reactive([])
-//火焰传感器-多选操作
-let rowSelectionHy = computed(() => {
-    return {
-        onChange: (selectedRowKeys, selectedRows) => {
-            selectedRowHy = selectedRows
-            console.log(`selectedRowKeys: ${selectedRowKeys}`, '火焰传感器: ', selectedRowHy)
-        },
-        getCheckboxProps: (record) => ({
-            props: {
-                realId: record.realId,
-            },
-        }),
-    }
-})
+
 
 //喷淋装置列表数据
 let monitorlistPl = reactive([])
-//喷淋装置当前选中数据
-let selectedRowPl = reactive([])
-//喷淋装置-多选操作
-let rowSelectionPl = computed(() => {
-    return {
-        onChange: (selectedRowKeys, selectedRows) => {
-            selectedRowPl = selectedRows
-            console.log(`selectedRowKeys: ${selectedRowKeys}`, '喷淋装置: ', selectedRowPl)
-        },
-        getCheckboxProps: (record) => ({
-            props: {
-                realId: record.realId,
-            },
-        }),
-    }
-})
+
 
 //温度监测-测点编码
 let pointCode = ref('')
@@ -130,9 +87,56 @@ let pointCode = ref('')
 function handleChange(val) {
     console.log(val, '测点编码')
     pointCode.value = val
-    //   this.getGxcwHistoryDataByPointCodeLists()
 }
 
+watch(() => props.listData, (val) => {
+    console.log(val, 'val---------------')
+    if (JSON.stringify(val) != '{}') {
+        if (val.fiber.length != 0) {
+            topOutList[0].value = val.fiber[0].readData.fmax
+            topOutList[1].value = val.fiber[0].readData.fmin
+            topOutList[2].value = val.fiber[0].readData.favg
+            topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常'
+            console.log(JSON.parse(val.fiber[0].readData.fibreTemperature),'---000')
+            echartDataWd.xData.length=0
+            echartDataWd.maxData.length=0
+            JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el=>{
+                echartDataWd.xData.push(el.pos)
+                echartDataWd.maxData.push(el.value)
+            })
+
+
+
+        }
+        if (val.smoke.length != 0) {
+            monitorlistYw.length = 0
+            val.smoke.forEach(el => {
+                el.warnFlag = el.warnFlag ? '存在风险' : '正常'
+                monitorlistYw.push(el)
+            })
+        }
+
+
+        if (val.fire.length != 0) {
+            monitorlistHy.length = 0
+            val.fire.forEach(el => {
+                el.warnFlag = el.warnFlag ? '存在风险' : '正常'
+                monitorlistHy.push(el)
+            })
+        }
+
+        if (val.spray.length != 0) {
+            monitorlistPl.length = 0
+            val.spray.forEach(el => {
+                el.warnFlag = el.warnFlag ? '存在风险' : '正常'
+                monitorlistPl.push(el)
+            })
+        }
+
+    }
+
+}, { immediate: true, deep: true })
+
 
 </script>
 
@@ -289,7 +293,7 @@ function handleChange(val) {
             }
 
             .content {
-                height: calc(100% - 60px);
+                height: calc(100% - 40px);
                 margin-bottom: 10px;
             }
         }
@@ -318,4 +322,5 @@ function handleChange(val) {
         }
     }
 }
+
 </style>

src/views/vent/monitorManager/alarmMonitor/fire/ventilate.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dustPage">
-    <div class="top-area" v-if="isShowTop">
-      <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
+    <div class="top-area">
+      <div class="top-box" v-for="(item, index) in topAreaList" :key="index">
         <div class="top-title">{{ item.title }}</div>
         <div class="top-content">
           <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
@@ -23,280 +23,297 @@
         </div>
       </div>
     </div>
-    <div :class="isShowTop ? 'bot-area' : 'bot-area1'">
-      <echartLine v-if="alive" :echartDataGq="echartDataFc1" />
+    <div class="bot-area">
+      <echartLine :echartDataGq="echartDataFc1" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, nextTick,  reactive, watch, defineProps } from 'vue';
-  import { centerAreaListT1, centerAreaListB1 } from '../fire.data';
-  import echartLine from './common/echartLine.vue';
-
-  let props = defineProps({
-    listData: Object,
-  });
-
-  //是否显示报警区域
-  let isShowTop = ref(true);
-  //报警区域数据
-  let topAreaList = reactive<any[]>([]);
-  //顶部区域激活选项
-  let activeIndex = ref(0);
-  //通风图表数据
-  const echartDataFc1 = reactive({
-    maxData: [],
-    minData: [],
-    aveValue: [],
-    xData: [],
-  });
-
-  let alive = ref(true);
-  //顶部区域选项切换
-  function topAreaClick(index) {
-    activeIndex.value = index;
-  }
+import { ref, nextTick, reactive, watch, defineProps } from 'vue';
+import { centerAreaListT1, centerAreaListB1 } from '../fire.data';
+import echartLine from './common/echartLine.vue';
+
+let props = defineProps({
+  listData: Object,
+});
+
+//是否显示报警区域
+// let isShowTop = ref(true);
+//报警区域数据
+let topAreaList = reactive<any[]>([]);
+//顶部区域激活选项
+// let activeIndex = ref(0);
+//通风图表数据
+const echartDataFc1 = reactive({
+  maxData: [],
+  minData: [],
+  aveValue: [],
+  xData: [],
+});
+
+// let alive = ref(true);
+//顶部区域选项切换
+// function topAreaClick(index) {
+//   activeIndex.value = index;
+// }
 
-  watch(
-    () => props.listData,
-    (val) => {
-      console.log(val, '详情数据');
-      if (JSON.stringify(val) != '{}') {
-        isShowTop.value = val.warnFlag;
-        alive.value = false;
-        nextTick(() => {
-          alive.value = true;
-          topAreaList.length = 0;
-          val.warnDevices.forEach((el) => {
-            topAreaList.push({
-              title: el.typeName,
-              content: [
-                { ids: 0, label: '设备类型', value: el.datalist[0].typeName },
-                {
-                  ids: 1,
-                  label: '报警等级',
-                  value:
-                    el.datalist[0].warnLevel == 0
-                      ? '正常'
-                      : el.datalist[0].warnLevel == 101
+watch(
+  () => props.listData,
+  (val) => {
+    console.log(val, '详情数据');
+    if (JSON.stringify(val.common) != '{}') {
+      // isShowTop.value = val.common.warnFlag;
+      // alive.value = false;
+      echartDataFc1.maxData.length = 0;
+      echartDataFc1.minData.length = 0;
+      echartDataFc1.xData.length = 0;
+      topAreaList.length = 0;
+      if (val.common.warnDevices.length != 0) {
+        val.common.warnDevices.forEach((el) => {
+          topAreaList.push({
+            title: el.typeName,
+            content: [
+              { ids: 0, label: '设备类型', value: el.datalist[0].typeName },
+              {
+                ids: 1,
+                label: '报警等级',
+                value:
+                  el.datalist[0].warnLevel == 101
+                    ? '正常'
+                    : el.datalist[0].warnLevel == 102
                       ? '低风险'
-                      : el.datalist[0].warnLevel == 102
-                      ? '中风险'
                       : el.datalist[0].warnLevel == 103
-                      ? '高风险'
-                      : '报警',
-                },
-                { ids: 2, label: '报警描述', value: el.datalist[0].warnDes },
-              ],
-            });
-          });
-          centerAreaListB1[0].content = val.jin;
-          centerAreaListB1[1].content = val.hui;
-          centerAreaListB1[2].content = val.xufengliang;
-          echartDataFc1.maxData.length = 0;
-          echartDataFc1.minData.length = 0;
-          echartDataFc1.xData.length = 0;
-          val.history.forEach((v) => {
-            echartDataFc1.maxData.push(parseFloat(v.jin));
-            echartDataFc1.minData.push(parseFloat(v.hui));
-            echartDataFc1.xData.push(v.time);
+                        ? '中风险'
+                        : el.datalist[0].warnLevel == 104
+                          ? '高风险'
+                          : '报警',
+              },
+              { ids: 2, label: '报警描述', value: el.datalist[0].warnDes },
+            ],
           });
         });
+      } else {
+        topAreaList.push({
+          title: '工作面',
+          content: [
+            { ids: 0, label: '设备类型', value: '--' },
+            {
+              ids: 1,
+              label: '报警等级',
+              value: '--',
+            },
+            { ids: 2, label: '报警描述', value: '--' },
+          ],
+        });
+
       }
-    },
-    { immediate: true }
-  );
+
+      centerAreaListB1[0].content = val.common.jin;
+      centerAreaListB1[1].content = val.common.hui;
+      centerAreaListB1[2].content = val.common.xufengliang;
+
+      val.common.history.forEach((v) => {
+        echartDataFc1.maxData.push(parseFloat(v.jin));
+        echartDataFc1.minData.push(parseFloat(v.hui));
+        echartDataFc1.xData.push(v.time);
+      });
+
+    }
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="less" scoped>
-  .dustPage {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
+.dustPage {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .top-area {
+    height: 183px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    padding: 0px 15px;
     box-sizing: border-box;
 
-    .top-area {
-      height: 183px;
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 10px;
-      padding: 0px 15px;
-      box-sizing: border-box;
-
-      .top-box {
-        position: relative;
-        width: 480px;
-        height: 160px;
-        background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
-
-        .top-title {
-          position: absolute;
-          left: 50%;
-          top: 6px;
-          transform: translate(-50%, 0);
-        }
+    .top-box {
+      position: relative;
+      width: 480px;
+      height: 160px;
+      background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
 
-        .top-content {
-          position: absolute;
-          top: 33px;
-          left: 0;
-          width: 100%;
-          height: calc(100% - 33px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          cursor: pointer;
-
-          .content-item {
-            position: relative;
-            width: 50%;
-            height: 50%;
-            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-
-            .item-label {
-              position: absolute;
-              left: 52px;
-              top: 50%;
-              transform: translate(0, -44%);
-              font-size: 12px;
-            }
-
-            .item-value {
-              position: absolute;
-              right: 52px;
-              top: 50%;
-              transform: translate(0, -44%);
-              font-size: 12px;
-              font-family: 'douyuFont';
-              color: #3df6ff;
-            }
-          }
-        }
+      .top-title {
+        position: absolute;
+        left: 50%;
+        top: 6px;
+        transform: translate(-50%, 0);
       }
 
-      .top-box1 {
-        position: relative;
-        width: 480px;
-        height: 183px;
-        background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
-
-        .top-title {
-          position: absolute;
-          left: 50%;
-          top: 6px;
-          transform: translate(-50%, 0);
-        }
+      .top-content {
+        position: absolute;
+        top: 33px;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 33px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        cursor: pointer;
+
+        .content-item {
+          position: relative;
+          width: 50%;
+          height: 50%;
+          background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
 
-        .top-content {
-          position: absolute;
-          top: 33px;
-          left: 0;
-          width: 100%;
-          height: calc(100% - 33px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          padding-bottom: 20px;
-          box-sizing: border-box;
-          cursor: pointer;
-
-          .content-item {
-            position: relative;
-            width: 50%;
-            height: 50%;
-            background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-
-            .item-label {
-              position: absolute;
-              left: 52px;
-              top: 50%;
-              transform: translate(0, -44%);
-              font-size: 12px;
-            }
-
-            .item-value {
-              position: absolute;
-              right: 52px;
-              top: 50%;
-              transform: translate(0, -44%);
-              font-size: 12px;
-              font-family: 'douyuFont';
-              color: #3df6ff;
-            }
+          .item-label {
+            position: absolute;
+            left: 52px;
+            top: 50%;
+            transform: translate(0, -44%);
+            font-size: 12px;
+          }
+
+          .item-value {
+            position: absolute;
+            right: 52px;
+            top: 50%;
+            transform: translate(0, -44%);
+            font-size: 12px;
+            font-family: 'douyuFont';
+            color: #3df6ff;
           }
         }
       }
     }
 
-    .center-area {
-      height: 258px;
-      margin-bottom: 20px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-      background-size: 100% 100%;
+    // .top-box1 {
+    //   position: relative;
+    //   width: 480px;
+    //   height: 183px;
+    //   background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
 
-      .center-t {
-        height: 50%;
-        // padding: 0px 80px;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        background: url('../../../../../assets/images/fire/dz.png') no-repeat;
-        background-size: 100% 100%;
-        // box-sizing: border-box;
+    //   .top-title {
+    //     position: absolute;
+    //     left: 50%;
+    //     top: 6px;
+    //     transform: translate(-50%, 0);
+    //   }
 
-        .t-box {
-          width: 218px;
-          height: 97px;
-          background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
+    //   .top-content {
+    //     position: absolute;
+    //     top: 33px;
+    //     left: 0;
+    //     width: 100%;
+    //     height: calc(100% - 33px);
+    //     display: flex;
+    //     justify-content: flex-start;
+    //     align-items: flex-start;
+    //     flex-wrap: wrap;
+    //     padding-bottom: 20px;
+    //     box-sizing: border-box;
+    //     cursor: pointer;
 
-          .box-label {
-            text-align: center;
-          }
+    //     .content-item {
+    //       position: relative;
+    //       width: 50%;
+    //       height: 50%;
+    //       background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+
+    //       .item-label {
+    //         position: absolute;
+    //         left: 52px;
+    //         top: 50%;
+    //         transform: translate(0, -44%);
+    //         font-size: 12px;
+    //       }
+
+    //       .item-value {
+    //         position: absolute;
+    //         right: 52px;
+    //         top: 50%;
+    //         transform: translate(0, -44%);
+    //         font-size: 12px;
+    //         font-family: 'douyuFont';
+    //         color: #3df6ff;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+
+  .center-area {
+    height: 258px;
+    margin-bottom: 20px;
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+    background-size: 100% 100%;
+
+    .center-t {
+      height: 50%;
+      // padding: 0px 80px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: url('../../../../../assets/images/fire/dz.png') no-repeat;
+      background-size: 100% 100%;
+      // box-sizing: border-box;
+
+      .t-box {
+        width: 218px;
+        height: 97px;
+        background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
+
+        .box-label {
+          text-align: center;
         }
       }
+    }
 
-      .center-b {
-        height: 50%;
-        // padding: 0px 80px;
+    .center-b {
+      height: 50%;
+      // padding: 0px 80px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      // box-sizing: border-box;
+
+      .b-box {
+        width: 218px;
+        height: 97px;
         display: flex;
-        justify-content: space-around;
+        flex-direction: column;
+        justify-content: center;
         align-items: center;
-        // box-sizing: border-box;
-
-        .b-box {
-          width: 218px;
-          height: 97px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-
-          .box-label {
-            width: 169px;
-            height: 42px;
-            line-height: 42px;
-            text-align: center;
-            margin-bottom: 5px;
-            color: #3df6ff;
-            font-family: 'douyuFont';
-            background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
-          }
+
+        .box-label {
+          width: 169px;
+          height: 42px;
+          line-height: 42px;
+          text-align: center;
+          margin-bottom: 5px;
+          color: #3df6ff;
+          font-family: 'douyuFont';
+          background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
         }
       }
     }
+  }
 
-    .bot-area {
-      height: calc(100% - 471px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-      background-size: 100% 100%;
-    }
-    .bot-area1 {
-      height: calc(100% - 278px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-      background-size: 100% 100%;
-    }
+  .bot-area {
+    height: calc(100% - 471px);
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .bot-area1 {
+    height: calc(100% - 278px);
+    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+    background-size: 100% 100%;
   }
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -4,7 +4,7 @@
     <div class="lr left-box">
       <ventBox1>
         <template #title>
-          <div class="monitor-title" @click="showModal('tf')">通风监测</div>
+          <div class="monitor-title" @click="showModal('vent')">通风监测</div>
         </template>
         <template #container>
           <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
@@ -76,22 +76,22 @@
               <div
                 class="level-text"
                 :class="{
-                  'level-text-1': item.level == 0,
-                  'level-text-2': item.level == 101,
-                  'level-text-3': item.level == 102,
-                  'level-text-4': item.level == 103,
-                  'level-text-5': item.level == 104,
+                  'level-text-1': item.level == 101,
+                  'level-text-2': item.level == 102,
+                  'level-text-3': item.level == 103,
+                  'level-text-4': item.level == 104,
+                  'level-text-5': item.level == 201,
                 }"
                 >{{
-                  item.level == 0
+                  item.level == 101
                     ? '正常'
-                    : item.level == 101
-                    ? '低风险'
                     : item.level == 102
-                    ? '中风险'
+                    ? '低风险'
                     : item.level == 103
-                    ? '高风险'
+                    ? '中风险'
                     : item.level == 104
+                    ? '高风险'
+                    : item.level == 201
                     ? '报警'
                     : ''
                 }}</div
@@ -107,11 +107,11 @@
         <div
           class="bottom"
           :class="{
-            bottom1: centerData.levels == 0,
-            bottom2: centerData.levels == 101,
-            bottom3: centerData.levels == 102,
-            bottom4: centerData.levels == 103,
-            bottom5: centerData.levels == 104,
+            bottom1: centerData.levels == 101,
+            bottom2: centerData.levels == 102,
+            bottom3: centerData.levels == 103,
+            bottom4: centerData.levels == 104,
+            bottom5: centerData.levels == 201,
           }"
         >
           <div class="animation1">
@@ -146,15 +146,15 @@
           </div>
           <div class="text-box">
             <div class="text1">{{
-              centerData.levels == 0
+              centerData.levels == 101
                 ? '正常'
-                : centerData.levels == 101
-                ? '低风险'
                 : centerData.levels == 102
-                ? '中风险'
+                ? '低风险'
                 : centerData.levels == 103
-                ? '高风险'
+                ? '中风险'
                 : centerData.levels == 104
+                ? '高风险'
+                : centerData.levels == 201
                 ? '报警'
                 : '--'
             }}</div>
@@ -426,11 +426,11 @@
     fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val.value;
     fireMonitor[4].value = res.info.sysInfo.fireS.summaryInfo.external.co2val.value;
     fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val.value;
-    fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.coval.value;
-    fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.chval.value;
-    fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value;
-    fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val.value;
-    fireMonitor1[5].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val.value;
+    fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval.value;
+    fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.chval.value;
+    fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value;
+    fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val.value;
+    fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val.value;
   }
 
   onMounted(async () => {