风窗、菜单调整

src/design/vent/modal.less

@@ -507,7 +507,7 @@
       }
       .@{ventSpace}-tabs-nav-wrap {
         padding-left: 10px !important;
-        background: rgba(1, 59, 156,.6);//lxh
+        // background: rgba(1, 59, 156,.6);//lxh
       }
       .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
         color: #28f3f3 !important;

src/layouts/default/sider/bottomSideder.vue

@@ -2,38 +2,43 @@
   <div v-if="isShowMenu == -1" class="bottom-side" :class="{ 'bottom-size-show': isShowMenu }">
     <div class="menu-container">
       <template v-for="(menu, index) in currentParentRoute.children" :key="index">
-        <FourBorderBg class="four-border-bg"  v-if="!menu.hideMenu">
-          <div class="vent-flex-row" >
+        <FourBorderBg class="four-border-bg" v-if="!menu.hideMenu">
+          <div class="vent-flex-row">
             <div class="parent-menu">
               {{ menu.name }}
             </div>
-            <div class="vent-flex-row-wrap child-menu" >
+            <div class="vent-flex-row-wrap child-menu">
               <template v-for="(childMenu, childIndex) in menu.children" :key="childIndex">
-                <div v-if="!childMenu.hideMenu" class="child-menu-item" @click="handleMenuClick(childMenu)">
-                  {{ childMenu.name }}
-                </div>
+                <template v-if="!childMenu.hideMenu">
+                  <template v-if="childMenu.path == '/monitorChannel/monitor-window' || childMenu.path === '/monitorChannel/monitor-windrect'">
+                    <div class="child-menu-item" @click="handleMenuClick(childMenu)">
+                      {{ childMenu.name }}
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="child-menu-item-disabled" :style="{ backgroundColor: '#314671' }">
+                        {{ childMenu.name }}
+                      </div>
+                  </template>
+                </template>
               </template>
             </div>
           </div>
         </FourBorderBg>
       </template>
-      
+
       <div class="vent-flex-row-between menu-button-group">
         <div class="vent-flex-row program-group">
           <template v-for="(programMenu, key) in menuModules" :key="key">
-            <div
-              v-if="!programMenu.title.startsWith('首页')"
-              class="program-menu"
-              :class="{ 'program-menu-active': currentParentRoute == programMenu }"
-              @mouseenter="selectMenu(programMenu)"
-              >{{ programMenu.title }}</div
-            >
+            <div v-if="!programMenu.title.startsWith('首页')" class="program-menu"
+              :class="{ 'program-menu-active': currentParentRoute == programMenu }" @click="selectMenu(programMenu)">{{
+                programMenu.title }}</div>
           </template>
         </div>
         <div class="setting-group">
-          <SvgIcon class="icon-style" size="18" name="home" @click="go(PageEnum.BASE_HOME)" />
+          <SvgIcon class="icon-style" size="18" name="home" @click="geHome" />
           <SvgIcon class="icon-style" size="18" name="fixed" />
-          <SvgIcon class="icon-style" size="18" name="enter" />
+          <SvgIcon class="icon-style" size="18" name="enter" @click="closeMenu" />
           <!-- <SvgIcon class="icon-style" size="18" name="setting" />  
           <SvgIcon class="icon-style" size="18" name="hidden" /> -->
         </div>
@@ -47,224 +52,260 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref, unref } from 'vue';
-  import type { Menu } from '/@/router/types';
-  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import { getMenus } from '/@/router/menus';
-  import { useGo } from '/@/hooks/web/usePage';
-  import { useRouter } from 'vue-router';
-  import { PageEnum } from '/@/enums/pageEnum';
-
-  export default defineComponent({
-    name: 'BottomSider',
-    components: { FourBorderBg, SvgIcon },
-    setup() {
-      const isShowMenu = ref(0);
-      let menuModules = ref<Menu[]>([]);
-      const router = useRouter();
-
-      const currentParentRoute = ref<Menu>();
-      const { currentRoute } = router;
-      const route = unref(currentRoute);
-      const go = useGo();
-      function selectMenu(programMenu) {
-        currentParentRoute.value = programMenu;
-      }
+import { defineComponent, onMounted, ref, unref } from 'vue';
+import type { Menu } from '/@/router/types';
+import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
+import { SvgIcon } from '/@/components/Icon';
+import { getMenus } from '/@/router/menus';
+import { useGo } from '/@/hooks/web/usePage';
+import { useRouter } from 'vue-router';
+import { PageEnum } from '/@/enums/pageEnum';
+import path from 'path';
+
+export default defineComponent({
+  name: 'BottomSider',
+  components: { FourBorderBg, SvgIcon },
+  setup() {
+    const isShowMenu = ref(0);
+    let menuModules = ref<Menu[]>([]);
+    const router = useRouter();
+
+    const currentParentRoute = ref<Menu>();
+    const { currentRoute } = router;
+    const route = unref(currentRoute);
+    const go = useGo();
+    function selectMenu(programMenu) {
+      currentParentRoute.value = programMenu;
+    }
 
-      function handleMenuClick(path: Menu) {
-        if (route.path.startsWith('/micro-')) { 
-          debugger
-          if (route.path.startsWith('/'+ PageEnum.BASE_HOME)){
-            const { href } = router.resolve(path.path)
-            window.open(href, '_blank')
-          }else {
-            history.pushState({}, '', path.path);
-          }
+    function handleMenuClick(path: Menu) {
+      if (route.path.startsWith('/micro-')) {
+        if (route.path.startsWith(PageEnum.BASE_HOME)) {
+          const { href } = router.resolve(path.path)
+          window.open(href, '_blank')
+        } else {
+          history.pushState({}, '', path.path);
+        }
+      } else {
+        if (route.path.startsWith('/subSysmodal/')) {
+          router.replace('/micro-vent-3dModal' + path.path)
         } else {
-          // micro-vent-3dModal 
-          if(route.path.startsWith('/subSysmodal/')) {
-            router.replace('/micro-vent-3dModal' + path.path)
-          }else{
-            go(path.path);
-          }
-          
+          go(path.path);
         }
-        isShowMenu.value = 0;
+
       }
+      isShowMenu.value = 0;
+    }
+    function geHome() {
+      // history.pushState({}, '', `/${PageEnum.BASE_HOME}`);
+      go(`/${PageEnum.BASE_HOME}`)
+      isShowMenu.value = 0;
+    }
 
-      function closeMenu() {
-        isShowMenu.value = 0;
-        window.removeEventListener('click', closeMenu);
-      };
+    function closeMenu() {
+      isShowMenu.value = 0;
+      // window.removeEventListener('click', closeMenu);
+    };
 
-      function openMenu() {
-        isShowMenu.value = -1;
-        window.addEventListener('click', closeMenu, true);
-      }
+    function openMenu() {
+      isShowMenu.value = -1;
+      // window.addEventListener('click', closeMenu, true);
+    }
 
-      onMounted(async () => {
-        menuModules.value = await getMenus();
-        currentParentRoute.value = menuModules.value[1];
-      });
-      return {
-        menuModules,
-        isShowMenu,
-        handleMenuClick,
-        openMenu,
-        selectMenu,
-        go,
-        PageEnum,
-        currentParentRoute,
-      };
-    },
-  });
+    onMounted(async () => {
+      menuModules.value = await getMenus();
+      currentParentRoute.value = menuModules.value[1];
+    });
+    return {
+      menuModules,
+      isShowMenu,
+      handleMenuClick,
+      openMenu,
+      closeMenu,
+      selectMenu,
+      go,
+      geHome,
+      currentParentRoute,
+    };
+  },
+});
 </script>
 
 <style lang="less" scoped>
 @keyframes menuShow {
-    0% {
-      width: 0;
-      height: 0;
-    }
-    100% {
-      width: 480px;
-      height: 100vh;
-    }
+  0% {
+    width: 0;
+    height: 0;
   }
-  .bottom-side {
+
+  100% {
     width: 480px;
     height: 100vh;
-    position: fixed;
-    bottom: 2px;
-    left: 0px;
-    z-index: 9999999;
-    color: #fff;
-    .menu-container {
-      width: 480px;
-      position: absolute;
-      bottom: 0;
-      // border: 1px solid #0099e6;
-      // background-color: #06115a;
-      border: 1px solid #0099e6;
-      background-color: #0c1e2b;
-      z-index: 999;
-      // backdrop-filter: blur(8px);
-      .four-border-bg {
-        margin: 5px;
-        background-color: #ffffff00;
-        .main-container {
-          background-color: #ffffff00 !important;
-          box-shadow: 0 0 3px #ffffff33 inset;
-          backdrop-filter: none !important;
-        }
+  }
+}
 
-        .parent-menu {
-          width: 110px;
-        }
-        .child-menu {
-          width: 330px;
-          font-size: 13px;
-        }
-        .child-menu-item {
-          width: 100px;
-          padding: 2px 0;
-          // background-color: #086193;
-          background: linear-gradient(#0d435d, #0e729d);
-          border-radius: 2px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin: 5px;
-          cursor: pointer;
-          box-shadow: 0 0 3px #ffffff22 inset;
-          &:hover {
-            background: linear-gradient(#1d89bf, #17aeee);
-          }
-        }
+.bottom-side {
+  width: 480px;
+  height: 100vh;
+  position: fixed;
+  bottom: 2px;
+  left: 0px;
+  z-index: 9999999;
+  color: #fff;
+
+  .menu-container {
+    width: 480px;
+    position: absolute;
+    bottom: 0;
+    // border: 1px solid #0099e6;
+    // background-color: #06115a;
+    border: 1px solid #0099e6;
+    background-color: #142253;
+    z-index: 999;
+
+    // backdrop-filter: blur(8px);
+    .four-border-bg {
+      margin: 5px;
+      background-color: #ffffff00;
+
+      .main-container {
+        background-color: #ffffff00 !important;
+        // box-shadow: 0 0 3px #ffffff33 inset;
+        backdrop-filter: none !important;
+      }
+
+      .parent-menu {
+        width: 110px;
+      }
+
+      .child-menu {
+        width: 330px;
+        font-size: 13px;
       }
-    }
 
-    .menu-button-group {
-      margin: 5px 0;
-      .program-menu {
-        // width: 90px;
-        padding: 1px 15px;
-        background:linear-gradient(#217aa5, #0f4f75);
-        margin-left: 5px;
-        text-align: center;
+      .child-menu-item {
+        width: 100px;
+        padding: 2px 0;
+        // background-color: #086193;
+        background: linear-gradient(#0d435d, #0e729d);
         border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 5px;
         cursor: pointer;
+        box-shadow: 0 0 3px #ffffff22 inset;
+
         &:hover {
-          background: linear-gradient(#42b7ff, #1ca0d4);
+          background: linear-gradient(#1d89bf, #17aeee);
         }
       }
-      .program-menu-active {
-        background: linear-gradient(#42adff, #1a8cbb);
+    }
+    .child-menu-item-disabled{
+      width: 100px;
+      padding: 2px 0;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 5px;
+      cursor: pointer;
+      box-shadow: 0 0 3px #ffffff22 inset;
+      background: linear-gradient(#7b7b7b, #6b6b6b);
+    }
+  }
+
+  .menu-button-group {
+    margin: 5px 0;
+
+    .program-menu {
+      // width: 90px;
+      padding: 1px 15px;
+      background: linear-gradient(#217aa5, #0f4f75);
+      margin-left: 5px;
+      text-align: center;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &:hover {
+        background: linear-gradient(#42b7ff, #1ca0d4);
       }
-      .icon-style {
-        margin-right: 10px;
-        &:last-child {
-          margin-right: 5px;
-        }
+    }
+
+    .program-menu-active {
+      background: linear-gradient(#42adff, #1a8cbb);
+    }
+
+    .icon-style {
+      margin-right: 10px;
+
+      &:last-child {
+        margin-right: 5px;
       }
     }
   }
-  .bottom-size-show {
-    animation: menuShow 0.4s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-in;
-    /* Safari and Chrome */
-    -webkit-animation: menuShow 0.4s;
-    -webkit-animation-iteration-count: 1;
-    -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: ease-in;
-  }
-  .menu-show-icon {
-    position: fixed;
-    bottom: 5px;
-    left: 5px;
-    z-index: 1000000;
-    .icon {
+}
+
+.bottom-size-show {
+  animation: menuShow 0.4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+  /* Safari and Chrome */
+  -webkit-animation: menuShow 0.4s;
+  -webkit-animation-iteration-count: 1;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+}
+
+.menu-show-icon {
+  position: fixed;
+  bottom: 5px;
+  left: 5px;
+  z-index: 1000000;
+
+  .icon {
+    width: 60px;
+    height: 60px;
+    position: relative;
+    background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
+    background-position: center;
+
+    &:before {
+      content: '';
+      display: block;
       width: 60px;
       height: 60px;
-      position: relative;
-      background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
+      position: absolute;
+      background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
       background-position: center;
+    }
 
-      &:before {
-        content: '';
-        display: block;
-        width: 60px;
-        height: 60px;
-        position: absolute;
-        background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
-        background-position: center;
+    &:after {
+      content: '';
+      display: block;
+      width: 60px;
+      height: 60px;
+      position: absolute;
+      background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
+      background-position: center;
+      animation-timing-function: ease-in;
+      animation: fadenum 8s infinite;
+    }
+
+    @keyframes fadenum {
+      0% {
+        transform: rotate(0deg);
       }
-      &:after {
-        content: '';
-        display: block;
-        width: 60px;
-        height: 60px;
-        position: absolute;
-        background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
-        background-position: center;
-        animation-timing-function: ease-in;
-        animation: fadenum 8s infinite;
+
+      10% {
+        transform: rotate(360deg);
       }
 
-      @keyframes fadenum {
-        0% {
-          transform: rotate(0deg);
-        }
-        10% {
-          transform: rotate(360deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
+      100% {
+        transform: rotate(360deg);
       }
     }
   }
+}
 </style>

src/utils/threejs/main.worker.ts

@@ -17,17 +17,19 @@ export function initModalWorker() {
     'fm/Fm-wall_2023-09-26.glb',
     'fm/fmThree_2023-07-25.glb',
     'fm/fmThreeBase_2023-07-25.glb',
-    'fc/wall_2023-10-11.glb',
-    'fc/ddFc_2023-10-11.glb',
+    // 'fc/wall_2023-10-11.glb',
+    // 'fc/ddFc_2023-10-11.glb',
+    // 'fc/sdFc_2023-10-19.glb',
+    // 'cf/lmcf_2023-06-02.glb',
+    'fc/ddFc_2023-06-02.glb',
     'fc/sdFc_2023-06-02.glb',
-    'cf/lmcf_2023-06-02.glb',
     'cf/lmcfSide_2023-06-02.glb',
     'cf/zdcf_2023-06-02.glb',
     'cf/dscf_2023-06-02.glb',
     'cf/dsgd_2023-06-02.glb',
     'cf/ddcf_2023-07-13.glb',
     'cf/dsmove_2023-06-02.glb',
-    'jbfj/jbfj-hd_2023-07-25.glb',
+    'jbfj/jbfj-hd_2023-10-19.glb',
     'jbfj/jbfj-fm_2023-06-02.glb',
     'jbfj/jbfj-fc_2023-06-02.glb',
     'ztfj/dj1_2023-06-02.glb',

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

@@ -40,7 +40,7 @@
               </div>
             </div>
             <div class="three-modal" id="modalBox">
-              <iframe
+              <!-- <iframe
                 id="iframe"
                 ref="iframe"
                 src="http://182.92.126.35:8091/user/autologin"
@@ -48,7 +48,7 @@
                 frameborder="0"
                 width="100%"
                 height="100%"
-              ></iframe>
+              ></iframe> -->
             </div>
           </div>
           <!-- 风量监测 -->

src/views/vent/monitorManager/windowMonitor/dandaoFc.threejs.ts

@@ -45,7 +45,7 @@ class singleWindow {
         color: '#009900',
         strokeStyle: '#002200',
         x: 110,
-        y: 94,
+        y: 90,
       },
       {
         text: `过风量(m3/min):`,
@@ -53,15 +53,15 @@ class singleWindow {
         color: '#009900',
         strokeStyle: '#002200',
         x: 5,
-        y: 150,
+        y: 145,
       },
       {
-        text: `${selectData.forntm3}`,
+        text: Number(`${selectData.forntm3}`).toFixed(0),
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 235,
-        y: 150,
+        x: 225,
+        y: 145,
       },
       {
         text: `过风面积(m2): `,
@@ -69,7 +69,7 @@ class singleWindow {
         color: '#009900',
         strokeStyle: '#002200',
         x: 5,
-        y: 205,
+        y: 200,
       },
       {
         text: `${selectData.forntArea}`,
@@ -77,7 +77,7 @@ class singleWindow {
         color: '#009900',
         strokeStyle: '#002200',
         x: 200,
-        y: 205,
+        y: 200,
       },
       {
         text: `风窗压差(Pa):`,
@@ -100,32 +100,32 @@ class singleWindow {
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 320,
-        y: 150,
+        x: 330,
+        y: 145,
       },
       {
         text: `1% FS`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 460,
-        y: 150,
+        x: 440,
+        y: 145,
       },
       {
         text: `调节范围:`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 320,
-        y: 205,
+        x: 330,
+        y: 200,
       },
       {
         text: `0~6`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 460,
-        y: 205,
+        x: 470,
+        y: 200,
       },
       {
         text: `煤炭科学技术研究院有限公司研制`,
@@ -137,7 +137,7 @@ class singleWindow {
       },
     ];
 
-    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+    getTextCanvas(726, 546, textArr, '').then((canvas: HTMLCanvasElement) => {
       const textMap = new THREE.CanvasTexture(canvas); // 关键一步
       const textMaterial = new THREE.MeshBasicMaterial({
         // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
@@ -154,8 +154,8 @@ class singleWindow {
         const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
         const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
         planeMesh.name = 'monitorText';
-        planeMesh.scale.set(0.002, 0.002, 0.002);
-        planeMesh.position.set(3.61, 0.158, -0.23);
+        planeMesh.scale.set(0.0026, 0.003, 0.002);
+        planeMesh.position.set(3.76, -0.042, -0.23);
         this.group?.add(planeMesh);
       }
     });
@@ -165,7 +165,7 @@ class singleWindow {
   initAnimation() {
     const meshArr01: THREE.Object3D[] = [];
     this.group?.children.forEach((obj) => {
-      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('FCshanye')) {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
         obj.rotateOnAxis(new THREE.Vector3(0, 1, 0), 0);
         meshArr01.push(obj);
       }
@@ -277,15 +277,14 @@ class singleWindow {
     }
     if (!videoPlayer1 && videoPlayer1 === null) {
       monitorPlane.name = 'noPlayer1';
-      monitorPlane.scale.set(0.015, 0.007, 0.011);
-      monitorPlane.position.set(4.04, 0.02, -0.46);
+      monitorPlane.scale.set(0.011, 0.0055, 0.011);
+      monitorPlane.position.set(-2.01, 0.15, -0.23);
       this.group?.add(monitorPlane);
     } else if (videoPlayer1) {
       const mesh = renderVideo(this.group, videoPlayer1, 'player1');
       if (mesh) {
-        mesh?.scale.set(-0.038, 0.029, 1);
-        mesh?.position.set(-4.302, 0.15, -0.23);
-        mesh.rotation.y = -Math.PI;
+        mesh?.scale.set(0.0382, 0.028, 0.022);
+        mesh?.position.set(-2.008, 0.148, -0.22);
         this.group.add(mesh);
       }
     }
@@ -293,9 +292,8 @@ class singleWindow {
 
   mountedThree() {
     return new Promise((resolve) => {
-      this.model.setGLTFModel(['ddFc', 'wall'], this.group).then(() => {
-        // this.group = gltf[0];
-
+      this.model.setGLTFModel(['ddFc']).then((gltf) => {
+        this.group = gltf[0];
         this.setModalPosition();
         this.initAnimation();
         resolve(null);

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

@@ -1,7 +1,7 @@
 <template>
   <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
     <a-spin :spinning="loading" />
-    <div id="window3D" class="window3D-bg" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div id="window3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
     <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
       <div>
         <div ref="elementContent" class="elementContent">
@@ -27,8 +27,9 @@
           <div class="button-box" @click="setArea(2)">设定后窗面积</div>
         </div>
         <div v-if="selectData.nwindownum == 1" class="row">
-          <div class="button-box" @click="setArea(1)">设定风窗面积</div>
+            <div class="button-box" @click="setArea(1)">设定风窗面积</div>
         </div>
+        
       </div>
       <!-- <div class="top-right row">
         <div class="control-type row">
@@ -56,7 +57,7 @@
       {{ selectData.strname }}
     </div>
     <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 250, scroll)">
-      <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 100}px`">
+      <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 100}px`" >
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">
             <MonitorTable
@@ -96,23 +97,17 @@
           </a-tab-pane>
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" :scroll="scroll" />
+              <HistoryTable columns-type="window" device-type="window" :device-list-api="baseList" designScope="window-history" :scroll="scroll"/>
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll" />
+              <AlarmHistoryTable columns-type="alarm" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
             </div>
           </a-tab-pane>
           <a-tab-pane key="5" tab="操作历史">
             <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable
-                columns-type="operatorhistory"
-                device-type="window"
-                :device-list-api="baseList"
-                designScope="alarm-history"
-                :scroll="scroll"
-              />
+              <HandlerHistoryTable columns-type="operatorhistory" device-type="window" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
             </div>
           </a-tab-pane>
         </a-tabs>
@@ -141,17 +136,17 @@
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
   import { useRouter } from 'vue-router';
-  import { deviceCameraInit } from '/@/utils/ventutil.ts';
+  import { deviceCameraInit } from '/@/utils/ventutil.ts'
 
   const { currentRoute } = useRouter();
 
-  const MonitorDataTable = ref();
+  const MonitorDataTable = ref()
 
   const playerRef = ref();
-  let webRtcServer: any[] = [];
+  let webRtcServer: any[] = []
   const scroll = reactive({
-    y: 240,
-  });
+    y: 240
+  })
 
   const modalIsShow = ref<boolean>(false); // 是否显示模态框
   const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
@@ -178,11 +173,12 @@
 
   const tabChange = (activeKeyVal) => {
     activeKey.value = activeKeyVal;
-    if (activeKeyVal == 1) {
+    if(activeKeyVal == 1){
       nextTick(() => {
-        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-      });
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
+      })
     }
+    
   };
 
   const initData = {
@@ -200,7 +196,7 @@
     frontRearDifference: '-',
     rearPresentValue: '-',
     maxarea: 0,
-    nwindownum: 0,
+    nwindownum: 0
   };
 
   // 监测数据
@@ -210,19 +206,16 @@
   let timer: null | NodeJS.Timeout = null;
   const getMonitor = (flag?) => {
     if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          const data = await getDataSource();
-          Object.assign(selectData, data);
-          playAnimation(selectData, selectData.maxarea);
-          addMonitorText(selectData);
-          if (timer) {
-            timer = null;
-          }
-          getMonitor();
-        },
-        flag ? 0 : 1000
-      );
+      timer = setTimeout(async () => {
+        const data = await getDataSource();
+        Object.assign(selectData, data);
+        playAnimation(selectData, selectData.maxarea);
+        addMonitorText(selectData);
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      }, flag ? 0 : 1000);
     }
   };
 
@@ -236,9 +229,9 @@
     if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
       // 初始打开页面
       if (currentRoute.value['query'] && currentRoute.value['query']['id']) {
-        MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
+        MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']])
       } else {
-        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
+        MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']])
       }
     }
     const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
@@ -253,31 +246,30 @@
   };
 
   async function getCamera() {
-    const res = await cameraList({ deviceid: selectData['deviceID'] });
-    const cameras: [] = res.records || [];
-    let cameraAddrs: any[] = [],
-      cameraNames: string[] = [];
+    const res = await cameraList({ deviceid: selectData['deviceID'] })
+    const cameras: [] = res.records || []
+    let cameraAddrs: any[] = [], cameraNames: string[] = [];
     if (cameras.length > 0) {
-      cameras.forEach((item) => {
+      cameras.forEach(item => {
         if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
-          cameraNames.push(item['name']);
+          cameraNames.push(item['name'])
         } else {
-          cameraAddrs.push({ name: item['name'], addr: item['addr'] });
+          cameraAddrs.push({ name: item['name'], addr: item['addr'] })
         }
-      });
+      })
     }
     if (cameraNames.length > 0) {
       // 请求接口从装备院拿数据
-      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames });
+      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames })
       for (let i = 0; i < addrs.length; i++) {
-        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] });
+        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] })
       }
     }
-    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer);
-    webRtcServer = obj.webRtcServerList;
-    const playerDoms = obj.playerDoms;
+    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer)
+    webRtcServer = obj.webRtcServerList
+    const playerDoms = obj.playerDoms
     // 注意前后门适应需要对应 //[0] 后门 [1]前门
-    await initCameraCanvas(...playerDoms);
+    await initCameraCanvas(...playerDoms)
   }
 
   // 切换检测数据
@@ -294,7 +286,7 @@
       playAnimation(selectRow, baseData.maxarea, true);
       loading.value = false;
     });
-    await getCamera();
+    await getCamera()
   };
 
   // 判断前后窗的面积是否发生改变，如果改变则开启动画
@@ -304,27 +296,9 @@
     rotationParam.frontDeg1 = (90 / maxarea) * Number(data.forntArea) || 0;
     rotationParam.backDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
     if (isFirst) {
-      console.log(
-        '最大面积---->',
-        maxarea,
-        '前窗实际面积---->',
-        selectData.forntArea,
-        '后窗实际面积---->',
-        selectData.rearArea,
-        '计算的值---->',
-        rotationParam
-      );
+      console.log('最大面积---->', maxarea, '前窗实际面积---->', selectData.forntArea, '后窗实际面积---->', selectData.rearArea, '计算的值---->', rotationParam);
     }
-    console.log(
-      '最大面积---->',
-      maxarea,
-      '前窗实际面积---->',
-      selectData.forntArea,
-      '后窗实际面积---->',
-      selectData.rearArea,
-      '计算的值---->',
-      rotationParam
-    );
+    console.log('最大面积---->', maxarea, '前窗实际面积---->', selectData.forntArea, '后窗实际面积---->', selectData.rearArea, '计算的值---->', rotationParam);
     if (!rotationParam.frontDeg1 && !rotationParam.backDeg1) {
       // 当返回值有误时默认关闭
       play(rotationParam, 0);
@@ -344,13 +318,13 @@
 
   // 设置风窗面积
   const setArea = (flag) => {
-    if (selectData.nwindownum == 2) {
+    if(selectData.nwindownum == 2){
       modalTitle.value = flag === 1 ? '设定前窗面积' : '设定后窗面积';
-    } else {
-      modalTitle.value = '设定风窗面积';
+    }else {
+      modalTitle.value = '设定风窗面积'
     }
-
-    modalType.value = flag + '';
+    
+    modalType.value = flag+'';
     modalIsShow.value = true;
   };
 
@@ -369,7 +343,7 @@
     };
     deviceControlApi(data)
       .then(() => {
-        message.success('设置成功');
+        message.success('设置成功')
       })
       .finally(() => {
         handleCancel();
@@ -382,6 +356,7 @@
     modalType.value = '';
   };
 
+
   onBeforeMount(() => {
     // const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'window', orgcode: '', ids: '', systemID: '' });
     // initWebSocket(sendVal);
@@ -390,12 +365,13 @@
 
   onMounted(() => {
     loading.value = true;
-
+    
     mountedThree().then(async () => {
       // await setModelType('singleWindow');
       getMonitor(true);
       loading.value = false;
       addMonitorText(selectData);
+      
     });
   });
   onUnmounted(() => {
@@ -405,9 +381,9 @@
       timer = undefined;
     }
     if (webRtcServer && webRtcServer.length > 0) {
-      webRtcServer.forEach((item) => {
-        item.disconnect();
-      });
+      webRtcServer.forEach(item => {
+        item.disconnect()
+      })
     }
   });
 </script>
@@ -418,21 +394,6 @@
   // :deep(.@{ventSpace}-tabs-tabpane-active) {
   //   height: 100%;
   // }
-  .button-box {
-    border: none !important; //lxh
-    background: url('../../../../assets/images/vent/wind-doorbtn.png') no-repeat; //lxh
-    background-size: 100% 100%; //lxh
-  }
-  .window3D-bg {
-    background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
-    background-size: 100% 100%; //lxh
-  }
-  :deep .zxm-tabs-tab {
-    padding: 6px 12px !important; //lxh
-    background: rgba(49, 252, 239, 0.4); //lxh
-    border-top-left-radius: 8px; //lxh
-    border-top-right-radius: 8px; //lxh
-  }
   .input-box {
     display: flex;
     align-items: center;

src/views/vent/monitorManager/windowMonitor/shuangdaoFc.threejs.ts

@@ -50,11 +50,11 @@ class doubleWindow {
         y: 150,
       },
       {
-        text: `${selectData.forntm3}`,
+        text: Number(`${selectData.forntm3}`).toFixed(0),
         font: 'normal 28px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 220,
+        x: 215,
         y: 150,
       },
       {
@@ -94,7 +94,7 @@ class doubleWindow {
         font: 'normal 28px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 320,
+        x: 330,
         y: 150,
       },
       {
@@ -110,7 +110,7 @@ class doubleWindow {
         font: 'normal 28px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 320,
+        x: 330,
         y: 205,
       },
       {
@@ -118,7 +118,7 @@ class doubleWindow {
         font: 'normal 28px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 460,
+        x: 500,
         y: 205,
       },
       {
@@ -131,7 +131,7 @@ class doubleWindow {
       },
     ];
 
-    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+    getTextCanvas(550, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
       const textMap = new THREE.CanvasTexture(canvas); // 关键一步
       const textMaterial = new THREE.MeshBasicMaterial({
         // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
@@ -349,7 +349,7 @@ class doubleWindow {
 
   mountedThree() {
     return new Promise((resolve) => {
-      this.model.setGLTFModel([this.modelName]).then((gltf) => {
+      this.model.setGLTFModel(['sdFc']).then((gltf) => {
         this.group = gltf[0];
         this.setModalPosition();
         this.initAnimation();

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

@@ -772,8 +772,8 @@
     background-size: 100% 100%; //lxh
   }
   .window3D-bg {
-    background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
-    background-size: 100% 100%; //lxh
+    // background: url('../../../../assets/images/home-container/home-bg.png') no-repeat; //lxh
+    // background-size: 100% 100%; //lxh
   }
   :deep .zxm-tabs-tab {
     padding: 6px 12px !important; //lxh