5.5首页有效风量率-更新提交

src/views/vent/home/colliery/index.vue

@@ -7,9 +7,8 @@
           <span>{{ nowTimeWeek }}</span>
           <span>{{ nowTime }}</span>
         </div>
-        <div class="main-title"
-          ><img v-if="hasPermission('home:logo')" class="logo" :src="`${baseUrl}/sys/common/static/${logoUrl}`" />{{ title }}</div
-        >
+        <div class="main-title"><img v-if="hasPermission('home:logo')" class="logo"
+            :src="`${baseUrl}/sys/common/static/${logoUrl}`" />{{ title }}</div>
       </div>
       <div class="home-contents">
         <div class="left-content">
@@ -47,10 +46,8 @@
               <!-- <div class="btn-icon" @click="goModalDetail"></div> -->
               <!-- 展会不显示按钮 -->
               <div v-if="sysOrgCode !== 'mkyzhpt'" class="btn-icon" @click="goModalDetail"></div>
-              <VentModal
-                ref="centerModalRef"
-                style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; background-color: #fff"
-              />
+              <VentModal ref="centerModalRef"
+                style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute; background-color: #fff" />
             </div>
           </div>
           <!-- 风量监测 -->
@@ -75,522 +72,520 @@
       </div>
     </div>
   </div>
-  <Network ref="NetworkRef" v-if="pageType == 'timesolution'" :pageResult="pageResult" @changePageType="changePageType" style="position: absolute" />
-  <VentModal
-    v-if="pageType == 'model3D' || pageType == 'timesolution'"
-    ref="fullModalRef"
-    style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute"
-  />
+  <Network ref="NetworkRef" v-if="pageType == 'timesolution'" :pageResult="pageResult" @changePageType="changePageType"
+    style="position: absolute" />
+  <VentModal v-if="pageType == 'model3D' || pageType == 'timesolution'" ref="fullModalRef"
+    style="width: calc(100% - 30px); height: calc(100% - 30px); position: absolute" />
 </template>
 <script lang="ts" setup>
-  import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';
-  import fanMonitor from './components/fan-monitor.vue';
-  import mainMonitor from './components/main-monitor.vue';
-  import windDevice from './components/wind-device.vue';
-  import windMonitor from './components/wind-monitor.vue';
-  import windLine from './components/wind-line.vue';
-  import workMonitor from './components/work-monitor.vue';
-  import deviceWarn from './components/device-warn.vue';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { list } from './clique.api';
-  import Network from '../../monitorManager/deviceMonitor/components/network/index.vue';
-  import { useRouter } from 'vue-router';
-  import { router } from '/@/router';
-  // import { Modal } from 'ant-design-vue';
-  // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-  import dayjs from 'dayjs';
-  import { getActions } from '/@/qiankun/state';
-  import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
-  import { getDate } from './clique.data';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  const { currentRoute } = useRouter();
-  const { hasPermission } = usePermission();
-
-  const { title, logoUrl, sysOrgCode } = useGlobSetting();
-  const baseUrl = VUE_APP_URL.baseUrl;
-  const actions = getActions();
-  let timer: NodeJS.Timeout | null = null;
-  let fanLocalList = reactive<any[]>([]); //局部风机数据
-  let mainList = ref<any[]>([]); //主通风机数据
-  let centerList = reactive<any[]>([]); //中间区域数据
-  let flList = ref<any[]>([]); //风量监测数据
-  let lineList = ref<any>([]); //关键路线数据
-  let workList = ref<any>([]); //工作面数据
-  let warnData = ref<any>([]); //预警数据
-  let deviceData = ref<any>({}); //设备监测数据
-  let navList = reactive([
-    { name: '总回风量(m³/min)', isShow: true, valList: [] },
-    { name: '总进风量(m³/min)', isShow: true, valList: [] },
-    { name: '计划风量(m³/min)', isShow: true, valList: [] },
-    // { name: '有效风量(m³/min)', isShow: true, valList: [] },
-    // { name: '等积孔(m²)', isShow: true, valList: [] },
-    // { name: '外部漏风率', isShow: false, val: 0 },
-    { name: '有效风量率', isShow: false, val: '0%' },
-  ]);
-  let nowTimeYear = ref('');
-  let nowTimeWeek = ref('');
-  let nowTime = ref('');
-
-  const centerModalRef = ref();
-  const fullModalRef = ref();
-
-  const globSetting = useGlobSetting();
-  const pageType = ref('');
-  let router = useRouter();
-  const pageResult = ref({});
-
-  function goDetail(deviceType) {
-    //lxh
-    // pageType.value = deviceType;
-    if (deviceType == 'fanMain') {
-      router.push('/monitorChannel/monitor-fanmain');
-    } else if (deviceType == 'fanLocal') {
-      if (sysOrgCode !== 'ymdnymdn') {
-        router.push('/monitorChannel/monitor-fanlocal');
-      } else {
-        router.push('/fanlocal-page/home');
-      }
-    } else if (deviceType == 'windrect') {
-      router.push('/monitorChannel/monitor-windrect');
-    } else if (deviceType == 'warning') {
-      router.push('/monitorChannel/monitor-alarm-home');
+import { reactive, onMounted, ref, nextTick, computed, unref, inject, onBeforeUnmount, onUnmounted } from 'vue';
+import fanMonitor from './components/fan-monitor.vue';
+import mainMonitor from './components/main-monitor.vue';
+import windDevice from './components/wind-device.vue';
+import windMonitor from './components/wind-monitor.vue';
+import windLine from './components/wind-line.vue';
+import workMonitor from './components/work-monitor.vue';
+import deviceWarn from './components/device-warn.vue';
+import { useGlobSetting } from '/@/hooks/setting';
+import { list } from './clique.api';
+import Network from '../../monitorManager/deviceMonitor/components/network/index.vue';
+import { useRouter } from 'vue-router';
+import { router } from '/@/router';
+// import { Modal } from 'ant-design-vue';
+// import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import dayjs from 'dayjs';
+import { getActions } from '/@/qiankun/state';
+import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
+import { getDate } from './clique.data';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { usePermission } from '/@/hooks/web/usePermission';
+
+const { currentRoute } = useRouter();
+const { hasPermission } = usePermission();
+
+const { title, logoUrl, sysOrgCode } = useGlobSetting();
+const baseUrl = VUE_APP_URL.baseUrl;
+const actions = getActions();
+let timer: NodeJS.Timeout | null = null;
+let fanLocalList = reactive<any[]>([]); //局部风机数据
+let mainList = ref<any[]>([]); //主通风机数据
+let centerList = reactive<any[]>([]); //中间区域数据
+let flList = ref<any[]>([]); //风量监测数据
+let lineList = ref<any>([]); //关键路线数据
+let workList = ref<any>([]); //工作面数据
+let warnData = ref<any>([]); //预警数据
+let deviceData = ref<any>({}); //设备监测数据
+let navList = reactive([
+  { name: '总回风量(m³/min)', isShow: true, valList: [] },
+  { name: '总进风量(m³/min)', isShow: true, valList: [] },
+  { name: '计划风量(m³/min)', isShow: true, valList: [] },
+  // { name: '有效风量(m³/min)', isShow: true, valList: [] },
+  // { name: '等积孔(m²)', isShow: true, valList: [] },
+  // { name: '外部漏风率', isShow: false, val: 0 },
+  { name: '有效风量率', isShow: false, val: '0%' },
+]);
+let nowTimeYear = ref('');
+let nowTimeWeek = ref('');
+let nowTime = ref('');
+
+const centerModalRef = ref();
+const fullModalRef = ref();
+
+const globSetting = useGlobSetting();
+const pageType = ref('');
+let router = useRouter();
+const pageResult = ref({});
+
+function goDetail(deviceType) {
+  //lxh
+  // pageType.value = deviceType;
+  if (deviceType == 'fanMain') {
+    router.push('/monitorChannel/monitor-fanmain');
+  } else if (deviceType == 'fanLocal') {
+    if (sysOrgCode !== 'ymdnymdn') {
+      router.push('/monitorChannel/monitor-fanlocal');
+    } else {
+      router.push('/fanlocal-page/home');
     }
+  } else if (deviceType == 'windrect') {
+    router.push('/monitorChannel/monitor-windrect');
+  } else if (deviceType == 'warning') {
+    router.push('/monitorChannel/monitor-alarm-home');
   }
-  function goHome() {
-    pageType.value = 'home';
-  }
-
-  function getList() {
-    list({}).then((res) => {
-      console.log(res, 'res-----------');
-      fanLocalList.length = 0;
-      fanLocalList.push(res.fanlocal);
-      mainList.value = res.fanmain;
-      centerList = res.midinfo[0].sysdata;
-      // 窝兔沟模拟风量
-      // centerList = {
-      //   zongfengliang: "8010", // 总风量
-      //   xufengliang: '7232', // 有效风量
-      //   zonghuifeng: '8188' // 总会风
-      // }
-      // 总回
-      navList[0].valList =
-        centerList && centerList.zonghuifeng
-          ? centerList.zonghuifeng.split('').map((el) => {
-              return { val: el };
-            })
-          : [];
-      // 总进
-      navList[1].valList =
-        centerList && centerList.zongjinfeng
-          ? centerList.zongjinfeng
-              .toString()
-              .split('')
-              .map((el) => {
-                return { val: el };
-              })
-          : [];
-      // 计划风量
-      navList[2].valList =
-        centerList && centerList.xufengliang
-          ? centerList.xufengliang
-              .toString()
-              .split('')
-              .map((el) => {
-                return { val: el };
-              })
-          : [];
-      // if (centerList && centerList.zongfengliang && centerList.zongjinfeng) {
-      //   // 外部漏风率  （zongfengliang-zongjinfeng)/zongfengliang
-      //   navList[3].val =
-      //     (((parseFloat(centerList.zongfengliang) - parseFloat(centerList.zongjinfeng)) / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) +
-      //     '%';
-      // } else {
-      //   navList[3].val = '0%';
-      // }
-
-      // if (res.midinfo[0] && res.midinfo[0].sysinfo) {
-      //   navList[4].val = (res.midinfo[0].sysinfo.useM3Perent ? res.midinfo[0].sysinfo.useM3Perent : '0') + '%';
-      // }
-      navList[3].val=`${centerList.useM3Perent}%` || '--'
-
-      flList.value = res.windrect || res.sys_wind;
-
-      if (res.sys_majorpath.length != 0) {
-        lineList.value = res.sys_majorpath;
-      } else {
-        let paramArr: any = [];
-        // paramArr.push({
-        //   deviceName: '关键路线1',
-        //   deviceType: 'sys_majorpath',
-        //   deviceID: Math.random() * 100,
-        //   majorpath: {
-        //     drag_1: 380,
-        //     drag_2: 167,
-        //     drag_3: 333,
-        //     drag_total: Math.abs(
-        //       Number(
-        //         res.fanmain && res.fanmain[0]
-        //           ? res.fanmain[0].readData.Fan1FanPre ||
-        //               res.fanmain[0].readData.Fan2FanPre ||
-        //               res.fanmain[0].readData.DataPa ||
-        //               680 + (Math.random() * 2 - 1 * 5)
-        //           : 680 + (Math.random() * 2 - 1 * 5)
-        //       )
-        //     ),
-        //     m3_total: Number(
-        //       res.fanmain && res.fanmain[0]
-        //         ? res.fanmain[0].readData.Fan1m3 ||
-        //             res.fanmain[0].readData.Fan2m3 ||
-        //             res.fanmain[0].readData.m3 ||
-        //             8138 + (Math.random() * 2 - 1 * 20)
-        //         : 8138 + (Math.random() * 2 - 1 * 20)
-        //     ),
-        //   },
-        // });
-        lineList.value = paramArr;
-      }
-
-      if (res.sys_surface_caimei.length != 0) {
-        workList.value = res.sys_surface_caimei;
-      } else {
-        let paramArr: any = [];
-        // paramArr.push({
-        //   deviceName: '工作面',
-        //   deviceType: 'sys_surface_caimei',
-        //   deviceID: '11111',
-        //   history: [],
-        //   jin: 100,
-        //   hui: 200,
-        //   xufengliang: 300,
-        // });
-        workList.value = getDate(paramArr);
-      }
-      warnData.value = res.warn || [];
-      deviceData.value = res.device || {};
-    });
-  }
-
-  //获取当前时间年月日时分秒
-  function getNowTime() {
-    setInterval(() => {
-      nowTimeYear.value = dayjs().format('YYYY/MM/DD');
-      let week = dayjs(new Date().getTime()).day();
-      switch (week) {
-        case 0:
-          nowTimeWeek.value = '星期日';
-          break;
-        case 1:
-          nowTimeWeek.value = '星期一';
-          break;
-        case 2:
-          nowTimeWeek.value = '星期二';
-          break;
-        case 3:
-          nowTimeWeek.value = '星期三';
-          break;
-        case 4:
-          nowTimeWeek.value = '星期四';
-          break;
-        case 5:
-          nowTimeWeek.value = '星期五';
-          break;
-        case 6:
-          nowTimeWeek.value = '星期六';
-          break;
-      }
-      let date = new Date();
-      let hours = date.getHours();
-      let minutes = date.getMinutes();
-      let seconds = date.getSeconds();
-      if (minutes >= 0 && minutes <= 9) {
-        minutes = `0${minutes}`;
-      }
-      if (seconds >= 0 && seconds <= 9) {
-        seconds = `0${seconds}`;
-      }
-      nowTime.value = `${hours}:${minutes}:${seconds}`;
-    }, 1000);
-  }
-
-  function goModalDetail() {
-    router.push('/micro-vent-3dModal/dashboard/analysis?type=model3D');
-  }
-
-  const changePageType = (pageType) => {
-    actions.setGlobalState({ pageObj: { pageType: pageType } });
-  };
+}
+function goHome() {
+  pageType.value = 'home';
+}
+
+function getList() {
+  list({}).then((res) => {
+    console.log(res, 'res-----------');
+    fanLocalList.length = 0;
+    fanLocalList.push(res.fanlocal);
+    mainList.value = res.fanmain;
+    centerList = res.midinfo[0].sysdata;
+    // 窝兔沟模拟风量
+    // centerList = {
+    //   zongfengliang: "8010", // 总风量
+    //   xufengliang: '7232', // 有效风量
+    //   zonghuifeng: '8188' // 总会风
+    // }
+    // 总回
+    navList[0].valList =
+      centerList && centerList.zonghuifeng
+        ? centerList.zonghuifeng.split('').map((el) => {
+          return { val: el };
+        })
+        : [];
+    // 总进
+    navList[1].valList =
+      centerList && centerList.zongjinfeng
+        ? centerList.zongjinfeng
+          .toString()
+          .split('')
+          .map((el) => {
+            return { val: el };
+          })
+        : [];
+    // 计划风量
+    navList[2].valList =
+      centerList && centerList.xufengliang
+        ? centerList.xufengliang
+          .toString()
+          .split('')
+          .map((el) => {
+            return { val: el };
+          })
+        : [];
+    // if (centerList && centerList.zongfengliang && centerList.zongjinfeng) {
+    //   // 外部漏风率  （zongfengliang-zongjinfeng)/zongfengliang
+    //   navList[3].val =
+    //     (((parseFloat(centerList.zongfengliang) - parseFloat(centerList.zongjinfeng)) / parseFloat(centerList.zongfengliang)) * 100).toFixed(2) +
+    //     '%';
+    // } else {
+    //   navList[3].val = '0%';
+    // }
+
+    // if (res.midinfo[0] && res.midinfo[0].sysinfo) {
+    //   navList[4].val = (res.midinfo[0].sysinfo.useM3Perent ? res.midinfo[0].sysinfo.useM3Perent : '0') + '%';
+    // }
+    navList[3].val = `${res.midinfo[0].sysinfo.useM3Perent}%` || '--'
+
+    flList.value = res.windrect || res.sys_wind;
+
+    if (res.sys_majorpath.length != 0) {
+      lineList.value = res.sys_majorpath;
+    } else {
+      let paramArr: any = [];
+      // paramArr.push({
+      //   deviceName: '关键路线1',
+      //   deviceType: 'sys_majorpath',
+      //   deviceID: Math.random() * 100,
+      //   majorpath: {
+      //     drag_1: 380,
+      //     drag_2: 167,
+      //     drag_3: 333,
+      //     drag_total: Math.abs(
+      //       Number(
+      //         res.fanmain && res.fanmain[0]
+      //           ? res.fanmain[0].readData.Fan1FanPre ||
+      //               res.fanmain[0].readData.Fan2FanPre ||
+      //               res.fanmain[0].readData.DataPa ||
+      //               680 + (Math.random() * 2 - 1 * 5)
+      //           : 680 + (Math.random() * 2 - 1 * 5)
+      //       )
+      //     ),
+      //     m3_total: Number(
+      //       res.fanmain && res.fanmain[0]
+      //         ? res.fanmain[0].readData.Fan1m3 ||
+      //             res.fanmain[0].readData.Fan2m3 ||
+      //             res.fanmain[0].readData.m3 ||
+      //             8138 + (Math.random() * 2 - 1 * 20)
+      //         : 8138 + (Math.random() * 2 - 1 * 20)
+      //     ),
+      //   },
+      // });
+      lineList.value = paramArr;
+    }
 
-  onMounted(() => {
-    const currentRouteObj = unref(currentRoute);
-    if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
-      pageType.value = 'model3D';
+    if (res.sys_surface_caimei.length != 0) {
+      workList.value = res.sys_surface_caimei;
     } else {
-      pageType.value = 'home';
+      let paramArr: any = [];
+      // paramArr.push({
+      //   deviceName: '工作面',
+      //   deviceType: 'sys_surface_caimei',
+      //   deviceID: '11111',
+      //   history: [],
+      //   jin: 100,
+      //   hui: 200,
+      //   xufengliang: 300,
+      // });
+      workList.value = getDate(paramArr);
     }
-    actions.onGlobalStateChange((newState) => {
-      for (const key in newState) {
-        if (key === 'pageObj') {
-          const pageObj = newState[key];
-          if (pageObj && pageObj.pageType) {
-            pageType.value = pageObj.pageType;
-            if (pageObj.timesolution) {
-              pageResult.value = pageObj.timesolution;
-            }
+    warnData.value = res.warn || [];
+    deviceData.value = res.device || {};
+  });
+}
+
+//获取当前时间年月日时分秒
+function getNowTime() {
+  setInterval(() => {
+    nowTimeYear.value = dayjs().format('YYYY/MM/DD');
+    let week = dayjs(new Date().getTime()).day();
+    switch (week) {
+      case 0:
+        nowTimeWeek.value = '星期日';
+        break;
+      case 1:
+        nowTimeWeek.value = '星期一';
+        break;
+      case 2:
+        nowTimeWeek.value = '星期二';
+        break;
+      case 3:
+        nowTimeWeek.value = '星期三';
+        break;
+      case 4:
+        nowTimeWeek.value = '星期四';
+        break;
+      case 5:
+        nowTimeWeek.value = '星期五';
+        break;
+      case 6:
+        nowTimeWeek.value = '星期六';
+        break;
+    }
+    let date = new Date();
+    let hours = date.getHours();
+    let minutes = date.getMinutes();
+    let seconds = date.getSeconds();
+    if (minutes >= 0 && minutes <= 9) {
+      minutes = `0${minutes}`;
+    }
+    if (seconds >= 0 && seconds <= 9) {
+      seconds = `0${seconds}`;
+    }
+    nowTime.value = `${hours}:${minutes}:${seconds}`;
+  }, 1000);
+}
+
+function goModalDetail() {
+  router.push('/micro-vent-3dModal/dashboard/analysis?type=model3D');
+}
+
+const changePageType = (pageType) => {
+  actions.setGlobalState({ pageObj: { pageType: pageType } });
+};
+
+onMounted(() => {
+  const currentRouteObj = unref(currentRoute);
+  if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
+    pageType.value = 'model3D';
+  } else {
+    pageType.value = 'home';
+  }
+  actions.onGlobalStateChange((newState) => {
+    for (const key in newState) {
+      if (key === 'pageObj') {
+        const pageObj = newState[key];
+        if (pageObj && pageObj.pageType) {
+          pageType.value = pageObj.pageType;
+          if (pageObj.timesolution) {
+            pageResult.value = pageObj.timesolution;
           }
         }
       }
-    });
-    getNowTime();
-    getList();
-    timer = Number(
-      setInterval(() => {
-        getList();
-      }, 10000)
-    );
-  });
-  onBeforeUnmount(() => {
-    clearInterval(timer);
-    timer = null;
-  });
-  onUnmounted(() => {
-    pageType.value = '';
+    }
   });
+  getNowTime();
+  getList();
+  timer = Number(
+    setInterval(() => {
+      getList();
+    }, 10000)
+  );
+});
+onBeforeUnmount(() => {
+  clearInterval(timer);
+  timer = null;
+});
+onUnmounted(() => {
+  pageType.value = '';
+});
 </script>
 
 <style lang="less" scoped>
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
-
-  @font-face {
-    font-family: 'yjsz';
-    src: url('../../../../assets/font/yjsz.TTF');
-  }
-
-  .home-container {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+@font-face {
+  font-family: 'yjsz';
+  src: url('../../../../assets/font/yjsz.TTF');
+}
+
+.home-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .header {
     width: 100%;
-    height: 100%;
+    height: 76px;
     position: relative;
-
-    .header {
-      width: 100%;
-      height: 76px;
-      position: relative;
-      background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
-
-      .head-time {
-        position: absolute;
-        top: 14px;
-        left: 15px;
-        color: #b5c9e9;
-        font-size: 14px;
-
-        span {
-          margin-right: 20px;
-          letter-spacing: 2px;
-        }
+    background: url('../../../../assets//images//home-container/header-nav.png') no-repeat;
+
+    .head-time {
+      position: absolute;
+      top: 14px;
+      left: 15px;
+      color: #b5c9e9;
+      font-size: 14px;
+
+      span {
+        margin-right: 20px;
+        letter-spacing: 2px;
       }
+    }
 
-      .main-title {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        color: #fff;
-        font-size: 28px;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-        .logo {
-          width: 32px;
-          height: 32px;
-          margin-right: 5px;
-        }
+    .main-title {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: #fff;
+      font-size: 28px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+
+      .logo {
+        width: 32px;
+        height: 32px;
+        margin-right: 5px;
       }
     }
+  }
+
+  .home-contents {
+    display: flex;
+    justify-content: space-between;
+    height: calc(100% - 76px);
+    padding: 10px;
+    box-sizing: border-box;
 
-    .home-contents {
+    .left-content {
       display: flex;
+      flex-direction: column;
+      flex: 1;
       justify-content: space-between;
-      height: calc(100% - 76px);
-      padding: 10px;
-      box-sizing: border-box;
+      height: 100%;
 
-      .left-content {
+      .monitor-box {
         display: flex;
-        flex-direction: column;
         flex: 1;
-        justify-content: space-between;
-        height: 100%;
-
-        .monitor-box {
-          display: flex;
-          flex: 1;
-          width: 100%;
-          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
-          background-size: 100% 100%;
-        }
+        width: 100%;
+        background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+        background-size: 100% 100%;
+      }
 
-        .monitor-box1 {
-          margin: 10px 0px;
-        }
+      .monitor-box1 {
+        margin: 10px 0px;
       }
+    }
 
-      .center-content {
+    .center-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 2;
+      height: 100%;
+      margin: 0px 10px;
+
+      .three-box {
+        position: relative;
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
+        background-color: #fff;
         flex: 2;
-        height: 100%;
-        margin: 0px 10px;
-
-        .three-box {
-          position: relative;
+        width: 100%;
+        margin-bottom: 15px;
+        background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
+        background-size: 100% 100%;
+
+        .three-nav {
+          position: absolute;
+          z-index: 9999;
+          left: 50%;
+          top: 38px;
+          transform: translate(-50%, 0);
+          width: 812px;
+          height: 89px;
+          padding: 0px 20px;
+          box-sizing: border-box;
           display: flex;
-          background-color: #fff;
-          flex: 2;
-          width: 100%;
-          margin-bottom: 15px;
-          background: url('../../../../assets/images/home-container/three-dialog.png') no-repeat;
-          background-size: 100% 100%;
+          justify-content: space-around;
+          align-items: center;
+          background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
 
-          .three-nav {
-            position: absolute;
-            z-index: 9999;
-            left: 50%;
-            top: 38px;
-            transform: translate(-50%, 0);
-            width: 812px;
-            height: 89px;
-            padding: 0px 20px;
-            box-sizing: border-box;
+          .nav-item {
             display: flex;
+            flex: 1;
+            flex-direction: column;
             justify-content: space-around;
             align-items: center;
-            background: url('../../../../assets/images/home-container/three-nav.png') no-repeat;
+            height: 80%;
+
+            .item-label {
+              color: #98f5ff;
+            }
 
-            .nav-item {
+            .item-value {
+              position: relative;
+              width: 125px;
+              height: 37px;
+              padding: 0px 5px;
+              box-sizing: border-box;
               display: flex;
-              flex: 1;
-              flex-direction: column;
-              justify-content: space-around;
+              justify-content: space-between;
               align-items: center;
-              height: 80%;
-
-              .item-label {
-                color: #98f5ff;
-              }
+              background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
 
-              .item-value {
+              .bg-box {
                 position: relative;
-                width: 125px;
-                height: 37px;
-                padding: 0px 5px;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                background: url('../../../../assets/images/home-container/item-value.png') no-repeat;
-
-                .bg-box {
-                  position: relative;
-                  width: 20px;
-                  height: 26px;
-                  border-bottom: 2px solid #063493;
-                  background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
-
-                  .box-line {
-                    position: absolute;
-                    left: 0;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    height: 1px;
-                    width: 100%;
-                    background-color: rgba(6, 52, 147, 0.6);
-                  }
-
-                  .value-text {
-                    position: absolute;
-                    left: 50%;
-                    top: 50%;
-                    transform: translate(-50%, -50%);
-                    color: #fff;
-                    font-size: 22px;
-                    font-family: 'yjsz';
-                    font-weight: 500;
-                  }
+                width: 20px;
+                height: 26px;
+                border-bottom: 2px solid #063493;
+                background: linear-gradient(to right, rgba(1, 194, 249), rgba(0, 125, 252));
+
+                .box-line {
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translate(0, -50%);
+                  height: 1px;
+                  width: 100%;
+                  background-color: rgba(6, 52, 147, 0.6);
                 }
 
-                .value-text1 {
-                  width: 100%;
-                  text-align: center;
+                .value-text {
+                  position: absolute;
+                  left: 50%;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
                   color: #fff;
                   font-size: 22px;
                   font-family: 'yjsz';
                   font-weight: 500;
                 }
               }
-            }
-          }
 
-          .three-modal {
-            width: 100%;
-            height: 100%;
-            padding: 20px 17px 20px 15px;
-            box-sizing: border-box;
-            // position: absolute;
-            // background-color: var(--vent-base-color);
-
-            .btn-icon {
-              width: 40px;
-              height: 40px;
-              background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
-              background-size: 100% 100%;
-              position: absolute;
-              z-index: 99999;
-              bottom: 30px;
-              right: 30px;
+              .value-text1 {
+                width: 100%;
+                text-align: center;
+                color: #fff;
+                font-size: 22px;
+                font-family: 'yjsz';
+                font-weight: 500;
+              }
             }
           }
         }
 
-        .wind-box {
-          display: flex;
-          flex: 1;
+        .three-modal {
           width: 100%;
-          background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
-          background-size: 100% 100%;
+          height: 100%;
+          padding: 20px 17px 20px 15px;
+          box-sizing: border-box;
+          // position: absolute;
+          // background-color: var(--vent-base-color);
+
+          .btn-icon {
+            width: 40px;
+            height: 40px;
+            background: url('/@/assets/images/vent/home/tosmall.png') no-repeat center;
+            background-size: 100% 100%;
+            position: absolute;
+            z-index: 99999;
+            bottom: 30px;
+            right: 30px;
+          }
         }
       }
 
-      .right-content {
+      .wind-box {
         display: flex;
-        flex-direction: column;
-        justify-content: space-between;
         flex: 1;
-        height: 100%;
+        width: 100%;
+        background: url('../../../../assets/images/home-container/dialog1.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
 
-        .monitor-box {
-          display: flex;
-          flex: 1;
-          width: 100%;
-          background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
-          background-size: 100% 100%;
-        }
+    .right-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1;
+      height: 100%;
 
-        .monitor-box1 {
-          margin: 10px 0px;
-        }
+      .monitor-box {
+        display: flex;
+        flex: 1;
+        width: 100%;
+        background: url('../../../../assets/images/home-container/dialog.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .monitor-box1 {
+        margin: 10px 0px;
       }
     }
   }
+}
 
-  // #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
-  //   width: 100% !important;
-  //   height: 100% !important;
-  // }
-</style>
+// #__qiankun_microapp_wrapper_for_micro_vent_3_d_modal__{
+//   width: 100% !important;
+//   height: 100% !important;
+// }</style>