预警管控系统-粉尘，瓦斯监测详情添加

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

@@ -1,18 +1,15 @@
 <template>
-  <BasicModal @register="register" title="火灾监测" 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">
-            <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuList" :key="index"
-              @click="btnClick(index)">
+          <div class="type-btn" v-if="isShowModule">
+            <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>
@@ -25,348 +22,366 @@
               {{ items.label }}
             </div>
           </div> -->
-          <component :is="componentName[current]"></component>
+          <component :is="componentName[current]" />
         </div>
       </div>
     </div>
   </BasicModal>
 </template>
 <script lang="ts" setup>
-import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { typeMenuList, menuList, componentName } from './fire.data'
-
-//内外因火灾激活索引
-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();
-}
-//内外因火灾选项切换
-function btnClick(ind) {
-  activeIndex.value = ind;
-  switch (ind) {
-    case 0:
-      activeIndex1.value = 0;
-      current.value = 'fireWork';
-      menuList.forEach(el => {
-        el.type = 'on'
-      })
-      //   this.getFireAreaInfoList()
-      break;
-    case 1:
-      activeIndex1.value = 0;
-      current.value = 'mainWell';
-      menuList.forEach(el => {
-        el.type = 'out'
-      })
-      //   this.getFireAreaInfoList()
-      break;
+  import { onMounted, ref, defineEmits, reactive, onUnmounted, watch, markRaw, defineAsyncComponent, defineProps } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { typeMenuList, componentName } from './fire.data';
+
+  let props = defineProps({
+    moduleName: String,
+  });
+
+  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();
   }
-}
-//菜单选项切换
-function cardClick(ind, item) {
-  console.log(ind, 'index');
-  activeIndex1.value = ind;
-  switch (ind) {
-    case 0:
-      current.value = item.type == 'on' ? 'fireWork' : 'mainWell';
-      //   this.getFireAreaInfoList()
-      break;
-    case 1:
-      current.value = item.type == 'on' ? 'closeWall' : 'subStation';
-      //   this.getFireAreaInfoList()
-      break;
-    case 2:
-      current.value = item.type == 'on' ? 'otherMonitor' : 'otherOut';
-      //   this.getFireAreaInfoList()
-      break;
-    case 3:
-      current.value = item.type == 'on' ? 'dustPage' : '';
-      break;
-    case 4:
-    current.value = item.type == 'on' ? 'gasPage' : '';
-      break;
+  //内外因火灾选项切换
+  function btnClick(ind) {
+    activeIndex.value = ind;
+    switch (ind) {
+      case 0:
+        activeIndex1.value = 0;
+        current.value = 'fireWork';
+        menuList.forEach((el) => {
+          el.type = 'on';
+        });
+        break;
+      case 1:
+        activeIndex1.value = 0;
+        current.value = 'mainWell';
+        menuList.forEach((el) => {
+          el.type = 'out';
+        });
+        break;
+    }
+  }
+  //菜单选项切换
+  function cardClick(ind, item) {
+    console.log(ind, 'index');
+    activeIndex1.value = ind;
+    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;
+    }
   }
-}
 
-onMounted(async () => { });
-onUnmounted(() => { });
+  watch(
+    () => props.moduleName,
+    (val) => {
+      if (val == 'fire') {
+        titleName.value = '火灾监测';
+        isShowModule.value = true;
+        menuList = [
+          { name: '综采工作面1', warn: '低风险', type: 'on' },
+          { name: '密闭工作面1', warn: '低风险', type: 'on' },
+          { name: '其他工作面1', warn: '低风险', type: 'on' },
+        ];
+      } else if (val == 'dust') {
+        titleName.value = '粉尘监测';
+        isShowModule.value = false;
+        menuList = [{ name: '粉尘', warn: '低风险', type: 'on' }];
+        current.value = 'dustPage';
+      } else {
+        titleName.value = '瓦斯监测';
+        isShowModule.value = false;
+        menuList = [{ name: '瓦斯', warn: '低风险', type: 'on' }];
+        current.value = 'gasPage';
+      }
+    },
+    {immediate:true}
+  );
+
+  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);
-  }
-
-  .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;
-          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;
-        }
-      }
+    .@{ventSpace}-tabs {
+      max-height: calc(100vh - 100px);
+    }
 
-      .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;
+    .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;
             text-align: center;
-            transform: translate(-50%, 0);
+            color: #fff;
+            cursor: pointer;
           }
 
-          .warn {
-            width: 100%;
-            position: absolute;
-            left: 50%;
-            top: 68px;
-            font-size: 16px;
+          .btn1 {
+            width: 50%;
+            height: 100%;
+            font-size: 14px;
             color: #fff;
             text-align: center;
-            transform: translate(-50%, 0);
+            border-radius: 2px;
+            background: #0058ee;
+            cursor: pointer;
           }
         }
 
-        .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);
+        .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);
+            }
           }
 
-          .warn {
-            width: 100%;
-            position: absolute;
-            left: 50%;
-            top: 68px;
-            font-size: 16px;
-            color: #fff;
-            text-align: center;
-            transform: translate(-60%, 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);
+            }
           }
         }
       }
-    }
 
-    .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;
-      //   }
-      // }
+      .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%;
 
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
+      &:hover {
+        color: #64d5ff;
+      }
+    }
 
-:deep(.@{ventSpace}-tabs-card) {
-  .@{ventSpace}-tabs-tab {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55);
-    border-color: #74e9fe;
-    border-radius: 0%;
+    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
+      color: aqua;
+    }
 
-    &:hover {
-      color: #64d5ff;
+    .@{ventSpace}-tabs-nav::before {
+      border-color: #74e9fe;
     }
-  }
 
-  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-    color: aqua;
-  }
+    .@{ventSpace}-picker,
+    .@{ventSpace}-select-selector {
+      width: 100% !important;
+      background: #00000017 !important;
+      border: 1px solid @vent-form-item-boder !important;
 
-  .@{ventSpace}-tabs-nav::before {
-    border-color: #74e9fe;
-  }
+      input,
+      .@{ventSpace}-select-selection-item,
+      .@{ventSpace}-picker-suffix {
+        color: #fff !important;
+      }
 
-  .@{ventSpace}-picker,
-  .@{ventSpace}-select-selector {
-    width: 100% !important;
-    background: #00000017 !important;
-    border: 1px solid @vent-form-item-boder !important;
+      .@{ventSpace}-select-selection-placeholder {
+        color: #b7b7b7 !important;
+      }
+    }
 
-    input,
-    .@{ventSpace}-select-selection-item,
-    .@{ventSpace}-picker-suffix {
+    .@{ventSpace}-pagination-next,
+    .action,
+    .@{ventSpace}-select-arrow,
+    .@{ventSpace}-picker-separator {
       color: #fff !important;
     }
 
-    .@{ventSpace}-select-selection-placeholder {
-      color: #b7b7b7 !important;
+    .@{ventSpace}-table-cell-row-hover {
+      background: #264d8833 !important;
     }
-  }
-
-  .@{ventSpace}-pagination-next,
-  .action,
-  .@{ventSpace}-select-arrow,
-  .@{ventSpace}-picker-separator {
-    color: #fff !important;
-  }
-
-  .@{ventSpace}-table-cell-row-hover {
-    background: #264d8833 !important;
-  }
 
-  .@{ventSpace}-table-row-selected {
-    background: #00c0a311 !important;
+    .@{ventSpace}-table-row-selected {
+      background: #00c0a311 !important;
 
-    td {
-      background-color: #00000000 !important;
+      td {
+        background-color: #00000000 !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-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>td {
-      padding: 12px;
+    .@{ventSpace}-table-tbody {
+      tr > td {
+        padding: 12px;
+      }
     }
-  }
-
-  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
-    background-color: #26648855 !important;
-  }
 
-  .jeecg-basic-table-row__striped {
+    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
+      background-color: #26648855 !important;
+    }
 
-    // background: #97efff11 !important;
-    td {
-      background-color: #97efff11 !important;
+    .jeecg-basic-table-row__striped {
+      // background: #97efff11 !important;
+      td {
+        background-color: #97efff11 !important;
+      }
     }
   }
-}
 </style>
-  

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

@@ -6,14 +6,7 @@ import { getAssetURL } from '/@/utils/ui';
 
 //内外因火灾菜单列表
 export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' }];
-//菜单列表
-export const menuList = [
-  { name: '综采工作面1', warn: '低风险', type: 'on' },
-  { name: '密闭工作面1', warn: '低风险', type: 'on' },
-  { name: '其他工作面1', warn: '低风险', type: 'on' },
-  { name: '粉尘', warn: '低风险', type: 'on' },
-  { name: '瓦斯', warn: '低风险', type: 'on' },
-];
+
 
 //当前加载组件
 export const componentName = {

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()">通风监测</div>
+            <div class="monitor-title" @click="showModal('tf')">通风监测</div>
           </template>
           <template #container>
             <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
@@ -63,7 +63,7 @@
         </ventBox1>
         <ventBox1 class="vent-margin-t-10">
           <template #title>
-            <div class="monitor-title" @click="showModal()">设备预警监测</div>
+            <div class="monitor-title" @click="showModal('sbyj')">设备预警监测</div>
           </template>
           <template #container>
             <div class="icons-box" @mouseleave="resetScroll">
@@ -160,7 +160,7 @@
        
       </div>
       <div class="fire-monitor">
-        <div class="monitor-title top" @click="showModal1()">火灾监测</div>
+        <div class="monitor-title top" @click="showModal('fire')">火灾监测</div>
         <div class="container">
           <div class="item">
             <div class="icon"></div>
@@ -183,7 +183,7 @@
     <div class="lr right-box">
       <ventBox1>
         <template #title>
-          <div class="monitor-title" @click="showModal()">粉尘监测</div>
+          <div class="monitor-title" @click="showModal('dust')">粉尘监测</div>
         </template>
         <template #container>
           <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
@@ -209,7 +209,7 @@
 
       <ventBox1 class="vent-margin-t-10">
         <template #title>
-          <div class="monitor-title" @click="showModal()">瓦斯监测</div>
+          <div class="monitor-title" @click="showModal('gas')">瓦斯监测</div>
         </template>
         <template #container>
           <div class="gas-box">
@@ -243,9 +243,9 @@
       </ventBox1>
     </div>
   </div>
-  <DetailModal v-model:visible="modalVisible" :monitor-data="dataSource" @register="register" @close="hideModal" />
+  <DetailModal v-if="isShowDialog" v-model:visible="modalVisible" :monitor-data="dataSource" @register="register" @close="hideModal" />
   <!-- 火灾监测弹框 -->
-  <DetailModalFire v-model:visible="modalVisible1" @register="register"  @close="hideModal1" />
+  <DetailModalFire v-else v-model:visible="modalVisible" @register="register" :moduleName="moduleName"  @close="hideModal" />
 </template>
 
 <script setup lang="ts">
@@ -260,10 +260,11 @@
   import { rainBg } from '/@/utils/ui.js'
   import { useModal } from '/@/components/Modal';
 
+  let isShowDialog=ref(true)//切换弹窗显示
+  let moduleName=ref<any>('')//火灾、粉尘、瓦斯模块名
   const alarmCounts = ref()
   const dataSource = ref([]);
   const modalVisible = ref(false)
-  const modalVisible1=ref(false)//控制火灾监测弹窗的显示与隐藏
 
   const resetScroll = (e: Event) => {
     if(e.target && e.target)
@@ -272,23 +273,17 @@
 
   const [register, { openModal }] = useModal()
 
-  function showModal() {
+  function showModal(data) {
+    isShowDialog.value=data=='tf' || data=='sbyj' ? true : false
+    moduleName.value=data
     modalVisible.value = true
     openModal()
   }
-  //打开火灾监测控制弹窗
-  function showModal1() {
-    modalVisible1.value = true
-    openModal()
-  }
 
   function hideModal() {
     modalVisible.value = false
   }
-  //关闭火灾监测控制弹窗
-  function hideModal1() {
-    modalVisible1.value = false
-  }
+ 
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;