预警管控通风监测预警及火灾监测预警修改

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

@@ -26,6 +26,8 @@ export const centerAreaListB1 = [
 
 //内外因火灾菜单列表
 export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' }, { name: '火灾指标' }];
+//通风选项菜单列表
+export const typeMenuListTf = [{ name: '通风监测' },{ name: '巷道阻力分析' }];
 //瓦斯监测菜单列表
 export function getMonitorComponent() {
   const { sysOrgCode } = useGlobSetting();

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

@@ -244,7 +244,7 @@
   }
   //密闭参数选项切换
   function btnClick(item, ind) {
-    debugger;
+    // debugger;
     activeIndex.value = ind;
     type.value = item.label;
     echartDataSg1.xData.length = 0;

src/views/vent/monitorManager/alarmMonitor/warn/fireWarn.vue

@@ -1,398 +1,418 @@
 <template>
   <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 火灾监测预警 </customHeader>
   <div class="fireWarn">
-    <a-button
-      v-if="!hasPermission('fireWarn:return')"
-      preIcon="ant-design:rollback-outlined"
-      type="text"
-      size="small"
-      style="position: absolute; left: 15px; top: 15px; color: var(--vent-font-color)"
-      @click="getBack"
-      >返回</a-button
-    >
+    <a-button v-if="!hasPermission('fireWarn:return')" preIcon="ant-design:rollback-outlined" type="text" size="small"
+      style="position: absolute; left: 15px; top: 15px; color: var(--vent-font-color)" @click="getBack">返回</a-button>
     <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="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="fire-content">
-      <component :is="componentName[currentLoad]" :listData="listData" :strType="strType" :tableList="tableLists" />
+      <a-spin :spinning="loading">
+        <component :is="componentName[currentLoad]" :listData="listData" :strType="strType" :tableList="tableLists" />
+      </a-spin>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted, onUnmounted, defineAsyncComponent } from 'vue';
-  import { typeMenuList, componentName } from '../common.data';
-  import { sysTypeWarnList, sysWarn } from '../common.api';
-  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { useRouter } from 'vue-router';
-  import CustomHeader from '/@/components/vent/customHeader.vue';
-  import { usePermission } from '/@/hooks/web/usePermission';
+import { ref, reactive, onMounted, onUnmounted, defineAsyncComponent } from 'vue';
+import { typeMenuList, componentName } from '../common.data';
+import { sysTypeWarnList, sysWarn } from '../common.api';
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useRouter } from 'vue-router';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+import { usePermission } from '/@/hooks/web/usePermission';
 
-  const { hasPermission } = usePermission();
-  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-  //当前加载组件
-  let currentLoad = ref('');
-  //内外因火灾激活索引
-  let activeIndex = ref(0);
-  //当前激活菜单的索引
-  let activeIndex1 = ref(0);
-  let menuList = reactive<any[]>([]); //左侧菜单列表
-  let menuList1 = reactive({
-    external: [],
-    internal: [],
-    info: [],
-  });
-  //详情数据
-  let listData = reactive({
-    common: {},
-    bundletube: [],
-    fiber: [],
-    fire: [],
-    co: [],
-    smoke: [],
-    spray: [],
-    temperature: [],
-  }); //详情数据
-  let strType = ref(''); //火灾外因-区别工作面和煤层
-  let router = useRouter();
-  let tableLists = ref<any[]>([]);
+let loading = ref(false)//加载状态
+const { hasPermission } = usePermission();
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+//当前加载组件
+let currentLoad = ref('');
+//内外因火灾激活索引
+let activeIndex = ref(0);
+//当前激活菜单的索引
+let activeIndex1 = ref(0);
+let menuList = reactive<any[]>([]); //左侧菜单列表
+let menuList1 = reactive({
+  external: [],
+  internal: [],
+  info: [],
+});
+//详情数据
+let listData = reactive({
+  common: {},
+  bundletube: [],
+  fiber: [],
+  fire: [],
+  co: [],
+  smoke: [],
+  spray: [],
+  temperature: [],
+}); //详情数据
+let strType = ref(''); //火灾外因-区别工作面和煤层
+let router = useRouter();
+let tableLists = ref<any[]>([]);
 
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-      async () => {
-        await getSysWarnList(deviceID, 'fire');
-        if (timer) {
-          timer = null;
-        }
-        getMonitor(deviceID);
-      },
-      flag ? 0 : 1000
-    );
-  }
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID, flag?) {
+  timer = setTimeout(
+    async () => {
+      await getSysWarnList(deviceID, 'fire');
+      if (timer) {
+        timer = null;
+      }
+      getMonitor(deviceID);
+    },
+    flag ? 0 : 1000
+  );
+}
 
-  //返回首页
-  function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home');
-  }
+//返回首页
+function getBack() {
+  router.push('/monitorChannel/monitor-alarm-home');
+}
 
-  //获取左侧菜单列表
-  async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'fire' });
-    console.log(res, '火灾左侧菜单列表-------');
-    if (res.length != 0) {
-      menuList.length = 0;
-      menuList1.external = res.external;
-      menuList1.internal = res.internal;
-      menuList1.info = res.info;
-      if (menuList1.internal && menuList1.internal.length > 0) {
-        menuList1.internal.forEach((el) => {
-          menuList.push({
-            name: el.systemname,
-            warn: '低风险',
-            type: 'on',
-            deviceID: el.id,
-            strtype: el.strtype,
-          });
+//获取左侧菜单列表
+async function getMenuList() {
+  let res = await sysTypeWarnList({ type: 'fire' });
+  console.log(res, '火灾左侧菜单列表-------');
+  if (res.length != 0) {
+    menuList.length = 0;
+    menuList1.external = res.external;
+    menuList1.internal = res.internal;
+    menuList1.info = res.info;
+    if (menuList1.internal && menuList1.internal.length > 0) {
+      menuList1.internal.forEach((el) => {
+        menuList.push({
+          name: el.systemname,
+          warn: '低风险',
+          type: 'on',
+          deviceID: el.id,
+          strtype: el.strtype,
         });
-      }
-
-      getMonitor(menuList[0].deviceID, true);
+      });
     }
+    getMonitor(menuList[0].deviceID, true);
   }
+}
 
-  //获取预警详情弹窗右侧数据
-  function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-      listData.bundletube = res.bundletube;
-      listData.fiber = res.fiber;
-      listData.fire = res.fire;
-      listData.co = res.co;
-      listData.smoke = res.smoke;
-      listData.spray = res.spray;
-      listData.temperature = res.temperature;
-      loadZj();
-    });
-  }
-  //内外因火灾、预警指标选项切换
-  function btnClick(ind) {
-    activeIndex.value = ind;
-    switch (ind) {
-      case 0:
-        activeIndex1.value = 0;
-        menuList.length = 0;
-        currentLoad.value = '';
-        menuList1.internal.forEach((el) => {
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+  sysWarn({ sysid: id, type: type }).then((res) => {
+    listData.bundletube = res.bundletube;
+    listData.fiber = res.fiber;
+    listData.fire = res.fire;
+    listData.co = res.co;
+    listData.smoke = res.smoke;
+    listData.spray = res.spray;
+    listData.temperature = res.temperature;
+    loadZj();
+  });
+}
+//内外因火灾、预警指标选项切换
+function btnClick(ind) {
+  activeIndex.value = ind;
+  switch (ind) {
+    case 0:
+      
+      loading.value = true;
+    setTimeout(() => {
+   activeIndex1.value = 0;
+      menuList.length = 0;
+      getClearList();
+      clearTimeout(timer);
+      currentLoad.value = '';
+      menuList1.internal.forEach((el) => {
+        menuList.push({
+          name: el.systemname,
+          warn: '低风险',
+          type: 'on',
+          deviceID: el.id,
+          strtype: el.strtype,
+        });
+      });
+      getMonitor(menuList[0].deviceID, true);
+      loading.value = false;
+    }, 1000);
+      break;
+    case 1:
+      loading.value = true;
+    setTimeout(() => {
+      activeIndex1.value = 0;
+      menuList.length = 0;
+      clearTimeout(timer);
+      getClearList();
+      currentLoad.value = '';
+      if (menuList1.external.length != 0) {
+        menuList1.external.forEach((el) => {
           menuList.push({
             name: el.systemname,
             warn: '低风险',
-            type: 'on',
+            type: 'out',
             deviceID: el.id,
             strtype: el.strtype,
           });
         });
-        clearTimeout(timer);
-        getClearList();
         getMonitor(menuList[0].deviceID, true);
-        break;
-      case 1:
-        activeIndex1.value = 0;
+        strType.value = menuList[0].strtype;
+      } else {
         menuList.length = 0;
-        currentLoad.value = '';
-        if (menuList1.external.length != 0) {
-          menuList1.external.forEach((el) => {
-            menuList.push({
-              name: el.systemname,
-              warn: '低风险',
-              type: 'out',
-              deviceID: el.id,
-              strtype: el.strtype,
-            });
-          });
-          clearTimeout(timer);
-          getClearList();
-          getMonitor(menuList[0].deviceID, true);
-          strType.value = menuList[0].strtype;
-        } else {
-          menuList.length = 0;
-          clearTimeout(timer);
-          currentLoad.value = '';
-        }
-        break;
-      case 2:
         clearTimeout(timer);
-        menuList.length = 0;
-        activeIndex1.value = 0;
-        menuList1.info.forEach((el) => {
-          menuList.push({
-            name: el.sysname,
-            warn: '正常',
-            deviceID: el.sysid,
-            strtype: '',
-          });
+        currentLoad.value = '';
+      }
+      loading.value = false;
+    }, 1000);
+      break;
+    case 2:
+      loading.value = true;
+    setTimeout(() => {
+      clearTimeout(timer);
+      menuList.length = 0;
+      activeIndex1.value = 0;
+      menuList1.info.forEach((el) => {
+        menuList.push({
+          name: el.sysname,
+          warn: '正常',
+          deviceID: el.sysid,
+          strtype: '',
         });
-        loadZb();
-        break;
-    }
+      });
+      tableLists.value = menuList1.info[0].list;
+      loadZb();
+      loading.value = false;
+    }, 1000);
+      break;
   }
-  //加载预警指标组件
-  function loadZb() {
-    tableLists.value = menuList1.info[0].list;
-    const { sysOrgCode } = useGlobSetting();
-    switch (sysOrgCode) {
-      case 'sdmtjtbdmk': // 宝德
-        currentLoad.value = 'warnFireBd';
-        return currentLoad.value;
-      case 'sdmtjtbetmk': // 布尔台
-        currentLoad.value = 'warnFireBrt';
-        return currentLoad.value;
-      default:
-        currentLoad.value = 'warnFireBrt';
-        return currentLoad.value;
-    }
+}
+//加载预警指标组件
+function loadZb() {
+  const { sysOrgCode } = useGlobSetting();
+  switch (sysOrgCode) {
+    case 'sdmtjtbdmk': // 宝德
+      currentLoad.value = 'warnFireBd';
+      return currentLoad.value;
+    case 'sdmtjtbetmk': // 布尔台
+      currentLoad.value = 'warnFireBrt';
+      return currentLoad.value;
+    default:
+      currentLoad.value = 'warnFireBrt';
+      return currentLoad.value;
   }
-  //菜单选项切换
-  function cardClick(ind, item) {
-    if (activeIndex.value != 2) {
-      activeIndex1.value = ind;
-      strType.value = item.strtype;
-      clearTimeout(timer);
-      getClearList();
-      currentLoad.value = '';
-      getMonitor(item.deviceID, true);
-    } else {
-      clearTimeout(timer);
+}
+//菜单选项切换
+function cardClick(ind, item) {
+  if (activeIndex.value != 2) {
+    loading.value = true;
+    setTimeout(() => {
       activeIndex1.value = ind;
-      tableLists.value = menuList1.info[ind].list;
-    }
-  }
-  //加载组件
-  function loadZj() {
-    if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
-      currentLoad.value = 'fireWork';
-    } else if (!activeIndex.value && listData.bundletube.length != 0) {
-      currentLoad.value = 'closeWall';
-    } else if (activeIndex.value && activeIndex.value != 2) {
-      currentLoad.value = 'mainWell';
-    } else {
-      currentLoad.value = '';
-    }
+    clearTimeout(timer);
+    getClearList();
+    strType.value = item.strtype;
+    currentLoad.value = '';
+    getMonitor(item.deviceID, true);
+      loading.value = false;
+    }, 1000);
+  } else {
+    clearTimeout(timer);
+    activeIndex1.value = ind;
+    tableLists.value = menuList1.info[ind].list;
   }
-  //清空数据
-  function getClearList() {
-    listData.common = {};
-    listData.bundletube.length = 0;
-    listData.fiber.length = 0;
-    listData.fire.length = 0;
-    listData.co.length = 0;
-    listData.smoke.length = 0;
-    listData.spray.length = 0;
-    listData.temperature.length = 0;
+}
+//加载组件
+function loadZj() {
+  if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
+    currentLoad.value = 'fireWork';
+  } else if (!activeIndex.value && listData.bundletube.length != 0) {
+    currentLoad.value = 'closeWall';
+  } else if (activeIndex.value && activeIndex.value != 2) {
+    currentLoad.value = 'mainWell';
+  } else {
+    currentLoad.value = '';
   }
+}
+//清空数据
+function getClearList() {
+  listData.common = {};
+  listData.bundletube.length = 0;
+  listData.fiber.length = 0;
+  listData.fire.length = 0;
+  listData.co.length = 0;
+  listData.smoke.length = 0;
+  listData.spray.length = 0;
+  listData.temperature.length = 0;
+}
 
-  onMounted(() => {
-    getMenuList();
-  });
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
+onMounted(() => {
+  getMenuList();
+});
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
 </script>
 
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @{theme-deepblue} {
-    .fireWarn {
-      --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
-      --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
-      --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
-    }
+@{theme-deepblue} {
+  .fireWarn {
+    --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
+    --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
+    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
   }
+}
 
-  .fireWarn {
-    --image-no-choice: url('/@/assets/images/fire/no-choice.png');
-    --image-choice: url('/@/assets/images/fire/choice.png');
-    --image-border: url('/@/assets/images/fire/border.png');
-    width: 100%;
+.fireWarn {
+  --image-no-choice: url('/@/assets/images/fire/no-choice.png');
+  --image-choice: url('/@/assets/images/fire/choice.png');
+  --image-border: url('/@/assets/images/fire/border.png');
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+
+  .alarm-menu {
     height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
+    width: 15%;
 
-    .alarm-menu {
-      height: 100%;
-      width: 15%;
+    .type-btn {
+      width: 100%;
+      height: 28px;
+      line-height: 28px;
+      background-color: var(--vent-warn-tab-bg);
+      border: 2px solid var(--vent-warn-tab-border);
+      margin-bottom: 20px;
+      border-radius: 5px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
 
-      .type-btn {
-        width: 100%;
-        height: 28px;
-        line-height: 28px;
-        background-color: var(--vent-warn-tab-bg);
-        border: 2px solid var(--vent-warn-tab-border);
-        margin-bottom: 20px;
-        border-radius: 5px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
+      .btn {
+        width: 33%;
+        height: 24px;
+        line-height: 24px;
+        font-size: 14px;
+        text-align: center;
+        color: var(--vent-font-color);
+        cursor: pointer;
+      }
 
-        .btn {
-          width: 33%;
-          height: 24px;
-          line-height: 24px;
-          font-size: 14px;
+      .btn1 {
+        width: 33%;
+        height: 24px;
+        line-height: 24px;
+        font-size: 14px;
+        color: var(--vent-font-color);
+        text-align: center;
+        border-radius: 2px;
+        background: var(--vent-warn-tab-bg-actived);
+        cursor: pointer;
+      }
+    }
+
+    .card-btn {
+      width: 100%;
+      height: calc(100% - 48px);
+      overflow-y: auto;
+
+      .btn {
+        position: relative;
+        width: 81%;
+        height: 14%;
+        margin-bottom: 10%;
+        font-family: 'douyuFont';
+        background: var(--image-no-choice) no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+
+        .text {
+          width: 80%;
+          position: absolute;
+          left: 50%;
+          top: 28px;
+          font-size: 16px;
+          color: var(--vent-table-action-link);
           text-align: center;
-          color: var(--vent-font-color);
-          cursor: pointer;
+          transform: translate(-50%, 0);
         }
 
-        .btn1 {
-          width: 33%;
-          height: 24px;
-          line-height: 24px;
+        .warn {
+          width: 100%;
+          position: absolute;
+          left: 50%;
+          bottom: 14px;
           font-size: 14px;
           color: var(--vent-font-color);
           text-align: center;
-          border-radius: 2px;
-          background: var(--vent-warn-tab-bg-actived);
-          cursor: pointer;
+          transform: translate(-50%, 0);
         }
       }
 
-      .card-btn {
+      .btn1 {
+        position: relative;
         width: 100%;
-        height: calc(100% - 48px);
-        overflow-y: auto;
-
-        .btn {
-          position: relative;
-          width: 81%;
-          height: 14%;
-          margin-bottom: 10%;
-          font-family: 'douyuFont';
-          background: var(--image-no-choice) no-repeat;
-          background-size: 100% 100%;
-          cursor: pointer;
+        height: 14%;
+        margin-bottom: 10%;
+        font-family: 'douyuFont';
+        background: var(--image-choice) no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
 
-          .text {
-            width: 80%;
-            position: absolute;
-            left: 50%;
-            top: 28px;
-            font-size: 16px;
-            color: var(--vent-table-action-link);
-            text-align: center;
-            transform: translate(-50%, 0);
-          }
-
-          .warn {
-            width: 100%;
-            position: absolute;
-            left: 50%;
-            bottom: 14px;
-            font-size: 14px;
-            color: var(--vent-font-color);
-            text-align: center;
-            transform: translate(-50%, 0);
-          }
+        .text {
+          width: 80%;
+          position: absolute;
+          left: 50%;
+          top: 28px;
+          font-size: 16px;
+          color: var(--vent-table-action-link);
+          text-align: center;
+          transform: translate(-62%, 0);
         }
 
-        .btn1 {
-          position: relative;
+        .warn {
           width: 100%;
-          height: 14%;
-          margin-bottom: 10%;
-          font-family: 'douyuFont';
-          background: var(--image-choice) no-repeat;
-          background-size: 100% 100%;
-          cursor: pointer;
-
-          .text {
-            width: 80%;
-            position: absolute;
-            left: 50%;
-            top: 28px;
-            font-size: 16px;
-            color: var(--vent-table-action-link);
-            text-align: center;
-            transform: translate(-62%, 0);
-          }
-
-          .warn {
-            width: 100%;
-            position: absolute;
-            left: 50%;
-            bottom: 14px;
-            font-size: 14px;
-            color: var(--vent-font-color);
-            text-align: center;
-            transform: translate(-60%, 0);
-          }
+          position: absolute;
+          left: 50%;
+          bottom: 14px;
+          font-size: 14px;
+          color: var(--vent-font-color);
+          text-align: center;
+          transform: translate(-60%, 0);
         }
       }
     }
+  }
 
-    .fire-content {
-      width: calc(85% - 10px);
-      height: 100%;
-      margin-left: 10px;
-      background: var(--image-border) no-repeat;
-      background-size: 100% 100%;
-    }
+  .fire-content {
+    width: calc(85% - 10px);
+    height: 100%;
+    margin-left: 10px;
+    background: var(--image-border) no-repeat;
+    background-size: 100% 100%;
   }
+}
+::v-deep .zxm-spin-nested-loading{
+  height:100%;
+}
+::v-deep .zxm-spin-container{
+  height:100%
+}
 </style>