[Feat 0000]蓝色预警监测页面数据展示问题修改

src/views/vent/home/configurable/blue/warnMonitor.vue

@@ -24,161 +24,161 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, reactive, ref } from 'vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import ModuleDustNew from './components/ModuleDustNew.vue';
-  import CenterAreaWarn from './components/center-area-warn.vue';
-  import { useRoute } from 'vue-router';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { testConfigWarnMonitor } from '../configurable.data';
-  import NewNav from './components/NewNavFire.vue';
-  import { getTotal, getDisasterProportion } from '../configurable.api';
-  const { title = '智能通风管控系统' } = useGlobSetting();
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { data, updateData } = useInitPage(title);
-  const route = useRoute();
-  const paramData = reactive<any>({});
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag = false) {
-    timer = setTimeout(
-      async () => {
-        getTotal({}).then(updateData);
-        getCenterList();
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      },
-      flag ? 0 : 20000
-    );
-  }
-  async function getCenterList() {
-    let res = await getTotal({});
-    paramData.fire = res.info.sysInfo.fireS.maxLevel;
-    paramData.tf = res.info.sysInfo.ventS.maxLevel;
-    paramData.ws = res.info.sysInfo.gasS.maxLevel;
-    paramData.sb = res.info.deviceWarnInfo.maxLevel;
-    paramData.fc = res.info.sysInfo.dustS.maxLevel;
-    paramData.riskLevel = res.info.riskLevel;
-    let Levels = Object.assign({}, await getDisasterProportion({}));
-    paramData.levels =
-      Levels.level > 0 && Levels.level <= 1
-        ? 101
-        : Levels.level > 1 && Levels.level <= 2
-        ? 102
-        : Levels.level > 2 && Levels.level <= 3
-        ? 103
-        : Levels.level > 3 && Levels.level <= 4
-        ? 104
-        : 0;
-    paramData.riskData = [
-      { name: '通风', value: Levels.vent },
-      { name: '火灾', value: Levels.fire },
-      { name: '瓦斯', value: Levels.gas },
-      { name: '粉尘', value: Levels.dust },
-    ];
-  }
-  onMounted(() => {
-    fetchConfigs('fusion-warn-green').then(() => {
-      configs.value = testConfigWarnMonitor;
-      // updateEnhancedConfigs(configs.value);
-      // Promise.resolve(BDFireMock).then(updateData);
-      getMonitor(true);
-    });
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import ModuleDustNew from './components/ModuleWarnMonitor.vue';
+import CenterAreaWarn from './components/center-area-warn.vue';
+import { useRoute } from 'vue-router';
+import { useGlobSetting } from '/@/hooks/setting';
+import { testConfigWarnMonitor } from '../configurable.data';
+import NewNav from './components/NewNavFire.vue';
+import { getTotal, getDisasterProportion } from '../configurable.api';
+const { title = '智能通风管控系统' } = useGlobSetting();
+const { configs, fetchConfigs } = useInitConfigs();
+const { data, updateData } = useInitPage(title);
+const route = useRoute();
+const paramData = reactive<any>({});
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag = false) {
+  timer = setTimeout(
+    async () => {
+      getTotal({}).then(updateData);
+      getCenterList();
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    flag ? 0 : 20000
+  );
+}
+async function getCenterList() {
+  let res = await getTotal({});
+  paramData.fire = res.info.sysInfo.fireS.maxLevel;
+  paramData.tf = res.info.sysInfo.ventS.maxLevel;
+  paramData.ws = res.info.sysInfo.gasS.maxLevel;
+  paramData.sb = res.info.deviceWarnInfo.maxLevel;
+  paramData.fc = res.info.sysInfo.dustS.maxLevel;
+  paramData.riskLevel = res.info.riskLevel;
+  let Levels = Object.assign({}, await getDisasterProportion({}));
+  paramData.levels =
+    Levels.level > 0 && Levels.level <= 1
+      ? 101
+      : Levels.level > 1 && Levels.level <= 2
+      ? 102
+      : Levels.level > 2 && Levels.level <= 3
+      ? 103
+      : Levels.level > 3 && Levels.level <= 4
+      ? 104
+      : 0;
+  paramData.riskData = [
+    { name: '通风', value: Levels.vent },
+    { name: '火灾', value: Levels.fire },
+    { name: '瓦斯', value: Levels.gas },
+    { name: '粉尘', value: Levels.dust },
+  ];
+}
+onMounted(() => {
+  fetchConfigs('fusion-warn-green').then(() => {
+    configs.value = testConfigWarnMonitor;
+    // updateEnhancedConfigs(configs.value);
+    // Promise.resolve(BDFireMock).then(updateData);
+    getMonitor(true);
   });
+});
 
-  onUnmounted(() => {
-    clearTimeout(timer);
-    timer = undefined;
-  });
+onUnmounted(() => {
+  clearTimeout(timer);
+  timer = undefined;
+});
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
-  }
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
 
-  .fusion-home {
-    width: 100%;
-    height: 100%;
-    position: relative;
+.fusion-home {
+  width: 100%;
+  height: 100%;
+  position: relative;
 
-    .top-bg {
-      width: 100%;
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    background: url('@/assets/images/home-warn/1-1.png') no-repeat center;
+    position: absolute;
+    z-index: 1;
+    .main-title {
       height: 56px;
-      background: url('@/assets/images/home-warn/1-1.png') no-repeat center;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .top-nav {
       position: absolute;
-      z-index: 1;
-      .main-title {
-        height: 56px;
-        color: #fff;
-        font-family: 'douyuFont';
-        font-size: 20px;
-        letter-spacing: 2px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .top-nav {
-        position: absolute;
-        top: 0;
-        width: 880px;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-      }
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
     }
-    .main-container {
-      width: 100%;
+  }
+  .main-container {
+    width: 100%;
+    height: 100%;
+    background: url('@/assets/images/home-warn/bg.png') no-repeat;
+    background-size: 100% 100%;
+    .left-area {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 420px;
       height: 100%;
-      background: url('@/assets/images/home-warn/bg.png') no-repeat;
-      background-size: 100% 100%;
-      .left-area {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 420px;
-        height: 100%;
-        padding: 15px;
-        box-sizing: border-box;
-        overflow-y: auto;
-      }
-
-      .bottom-area {
-        position: absolute;
-        left: 435px;
-        bottom: 0;
-        width: calc(100% - 435px);
-        height: 290px;
-        padding: 15px;
-        box-sizing: border-box;
-      }
+      padding: 15px;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
 
-      .right-area {
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 420px;
-        height: calc(100% - 305px);
-        padding: 15px 15px 0px 15px;
-        box-sizing: border-box;
-        overflow-y: auto;
-      }
+    .bottom-area {
+      position: absolute;
+      left: 435px;
+      bottom: 0;
+      width: calc(100% - 435px);
+      height: 290px;
+      padding: 15px;
+      box-sizing: border-box;
     }
 
-    .center-area {
+    .right-area {
       position: absolute;
-      left: 450px;
-      top: 0;
-      width: calc(100% - 900px);
-      height: calc(100% - 270px);
+      right: 0px;
+      top: 0px;
+      width: 420px;
+      height: calc(100% - 305px);
+      padding: 15px 15px 0px 15px;
+      box-sizing: border-box;
+      overflow-y: auto;
     }
   }
 
-  :deep(.loading-box) {
-    position: unset;
+  .center-area {
+    position: absolute;
+    left: 450px;
+    top: 0;
+    width: calc(100% - 900px);
+    height: calc(100% - 270px);
   }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
 </style>