添加备用分站字段

src/utils/threejs/main.worker.ts

@@ -13,6 +13,8 @@ export function initModalWorker() {
     'fm/Fm-door_2023-06-02.glb',
     'fm/Fm-wire_2023-06-02.glb',
     'fm/Fm-wall_2023-06-02.glb',
+    'fm/fmThree_2023-07-13.glb',
+    'fm/fmThreeBase_2023-07-13.glb',
     'fc/sdFc_2023-06-02.glb',
     'fc/ddFc_2023-06-02.glb',
     'cf/lmcf_2023-06-02.glb',

src/views/vent/deviceManager/deviceTable/index.vue

@@ -113,6 +113,18 @@
         },
       }
     )
+    formSchema.value.push(
+      {
+        label: '备用分站',
+        field: 'stationids',
+        component: 'ApiSelect',
+        componentProps: {
+          api: substationList,
+          labelField: 'strname',
+          valueField: 'id',
+        },
+      }
+    )
   };
 
   onMounted(() => {

src/views/vent/monitorManager/gateMonitor/gate.threejs.three.ts

@@ -8,7 +8,7 @@ import { useAppStore } from '/@/store/modules/app';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:10px;right:10px;z-index:99999999999999';
 
-class Fm1 {
+class Fm2 {
   modelName = 'fm';
   model; //
   group;
@@ -319,7 +319,6 @@ class Fm1 {
           this.deviceDetailCSS3D.visible = true;
           return true;
         }
-        
       } else {
         this.deviceDetailCSS3D.visible = false;
         console.log('[ 点击事件 ] >');
@@ -500,78 +499,81 @@ class Fm1 {
       this.model.scene?.add(this.group);
       this.group?.layers.enableAll();
 
-      this.model.setGLTFModel(['Fm-door', 'Fm-wire', 'Fm-wall'], this.group).then(() => {
+      this.model.setGLTFModel(['fmThree', 'fmThreeBase'], this.group).then(() => {
+        this.group.name = 'fmThree';
         this.setModalPosition();
         // 初始化左右摇摆动画;
-        this.initAnimation();
-        this.drawHots();
+        // this.initAnimation();
+        // this.drawHots();
 
-        this.deviceDetailCard();
+        // this.deviceDetailCard();
         this.model.animate();
-        if (this.model.camera.layers.mask == -1) this.model.camera.layers.toggle(1);
-        setTimeout(async () => {
-          const videoPlayer1 = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
-          const videoPlayer2 = document.getElementById('fm-player2')?.getElementsByClassName('vjs-tech')[0];
-          if (!videoPlayer1 || !videoPlayer2) {
-            const textArr = [
-              {
-                text: `无信号输入`,
-                font: 'normal 40px Arial',
-                color: '#009900',
-                strokeStyle: '#002200',
-                x: 170,
-                y: 40,
-              },
-            ];
-            getTextCanvas(560, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
-              const textMap = new THREE.CanvasTexture(canvas); // 关键一步
-              const textMaterial = new THREE.MeshBasicMaterial({
-                map: textMap, // 设置纹理贴图
-                transparent: true,
-                side: THREE.DoubleSide, // 这里是双面渲染的意思
-              });
-              textMaterial.blending = THREE.CustomBlending;
-              const monitorPlane = this.group?.getObjectByName('noPlayer');
-              if (monitorPlane) {
-                monitorPlane.material = textMaterial;
-              } else {
-                const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
-                const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
-                if (!videoPlayer1) {
-                  planeMesh.name = 'noPlayer1';
-                  planeMesh.scale.set(0.011, 0.008, 0.011);
-                  planeMesh.position.set(-4.23, -0.28, -0.39);
-                  this.group?.add(planeMesh.clone());
-                }
-                if (!videoPlayer2) {
-                  planeMesh.name = 'noPlayer2';
-                  planeMesh.scale.set(0.012, 0.009, 0.012);
-                  planeMesh.position.set(4.33, -0.33, -0.39);
-                  this.group?.add(planeMesh.clone());
-                }
-                textMaterial.dispose();
-                planeGeometry.dispose();
-              }
-            });
-          } else {
-            if (videoPlayer2) {
-              const mesh = renderVideo(this.group, videoPlayer1, 'player1');
-              mesh?.scale.set(-0.028, 0.0285, 1);
-              mesh?.position.set(4.298, 0.02, -0.4);
-              mesh.rotation.y = -Math.PI;
-              this.group.add(mesh);
-            }
-            if (videoPlayer1) {
-              const mesh = renderVideo(this.group, videoPlayer2, 'player2');
-              mesh?.scale.set(-0.028, 0.0285, 1);
-              mesh?.position.set(-4.262, 0.02, -0.4);
-              mesh.rotation.y = -Math.PI;
-              this.group.add(mesh);
-            }
-          }
-
-          resolve(this.model);
-        }, 0);
+        // if (this.model.camera.layers.mask == -1) this.model.camera.layers.toggle(1);
+        // setTimeout(async () => {
+        //   const videoPlayer1 = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
+        //   const videoPlayer2 = document.getElementById('fm-player2')?.getElementsByClassName('vjs-tech')[0];
+        //   if (!videoPlayer1 || !videoPlayer2) {
+        //     const textArr = [
+        //       {
+        //         text: `无信号输入`,
+        //         font: 'normal 40px Arial',
+        //         color: '#009900',
+        //         strokeStyle: '#002200',
+        //         x: 170,
+        //         y: 40,
+        //       },
+        //     ];
+        //     getTextCanvas(560, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+        //       const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+        //       const textMaterial = new THREE.MeshBasicMaterial({
+        //         map: textMap, // 设置纹理贴图
+        //         transparent: true,
+        //         side: THREE.DoubleSide, // 这里是双面渲染的意思
+        //       });
+        //       textMaterial.blending = THREE.CustomBlending;
+        //       const monitorPlane = this.group?.getObjectByName('noPlayer');
+        //       if (monitorPlane) {
+        //         monitorPlane.material = textMaterial;
+        //       } else {
+        //         const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
+        //         const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
+        //         if (!videoPlayer1) {
+        //           planeMesh.name = 'noPlayer1';
+        //           planeMesh.scale.set(0.011, 0.008, 0.011);
+        //           planeMesh.position.set(-4.23, -0.28, -0.39);
+        //           this.group?.add(planeMesh.clone());
+        //         }
+        //         if (!videoPlayer2) {
+        //           planeMesh.name = 'noPlayer2';
+        //           planeMesh.scale.set(0.012, 0.009, 0.012);
+        //           planeMesh.position.set(4.33, -0.33, -0.39);
+        //           this.group?.add(planeMesh.clone());
+        //         }
+        //         textMaterial.dispose();
+        //         planeGeometry.dispose();
+        //       }
+        //     });
+        //   } else {
+        //     if (videoPlayer2) {
+        //       const mesh = renderVideo(this.group, videoPlayer1, 'player1');
+        //       mesh?.scale.set(-0.028, 0.0285, 1);
+        //       mesh?.position.set(4.298, 0.02, -0.4);
+        //       mesh.rotation.y = -Math.PI;
+        //       this.group.add(mesh);
+        //     }
+        //     if (videoPlayer1) {
+        //       const mesh = renderVideo(this.group, videoPlayer2, 'player2');
+        //       mesh?.scale.set(-0.028, 0.0285, 1);
+        //       mesh?.position.set(-4.262, 0.02, -0.4);
+        //       mesh.rotation.y = -Math.PI;
+        //       this.group.add(mesh);
+        //     }
+        //   }
+
+        //   resolve(this.model);
+        // }, 0);
+
+        resolve(null)
       });
     });
   }
@@ -605,4 +607,4 @@ class Fm1 {
     }
   }
 }
-export default Fm1;
+export default Fm2;

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import UseThree from '../../../../utils/threejs/useThree';
 import Fm1 from './gate.threejs.two';
+import Fm2 from './gate.threejs.three';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
 
@@ -121,7 +122,7 @@ export const setModelType = (type) => {
       model.startAnimation = fm1.render.bind(fm1);
       group = fm1.group;
       group.rotation.y = 0;
-      if (model.scene.getObjectByName('fm')) {
+      if (model.scene.getObjectByName('fm2')) {
         model.scene.remove(fm2.group);
       }
       const oldCameraPosition = { x: -1000, y: 100, z: 500 };
@@ -137,26 +138,26 @@ export const setModelType = (type) => {
           0.8
         );
       }, 300);
-    } else if (fmType === 'fm2') {
+    } else if (fmType === 'fm1') {
       // 显示单道风窗
-      // model.startAnimation = fm2.render.bind(fm2);
-      // group = fm2.group;
-      // if (model.scene.getObjectByName('fm2')) {
-      //   model.scene.remove(fm1.group);
-      // }
-      // const oldCameraPosition = { x: 100, y: 0, z: 500 };
-      // model.scene.add(fm2.group);
-      // setTimeout(async () => {
-      //   resolve(null);
-      //   const position = { x: 0, y: 0, z: 0 };
-      //   await animateCamera(
-      //     oldCameraPosition,
-      //     { x: 0, y: 0, z: 0 },
-      //     { x: 66.257, y: 57.539, z: 94.313 },
-      //     { x: position.x, y: position.y, z: position.z },
-      //     model
-      //   );
-      // }, 300);
+      model.startAnimation = fm2.render.bind(fm2);
+      group = fm2.group;
+      if (model.scene.getObjectByName('fm')) {
+        model.scene.remove(fm1.group);
+      }
+      const oldCameraPosition = { x: 100, y: 0, z: 500 };
+      model.scene.add(fm2.group);
+      setTimeout(async () => {
+        resolve(null);
+        const position = { x: 0, y: 0, z: 0 };
+        await animateCamera(
+          oldCameraPosition,
+          { x: 0, y: 0, z: 0 },
+          { x: 66.257, y: 57.539, z: 94.313 },
+          { x: position.x, y: position.y, z: position.z },
+          model
+        );
+      }, 300);
     }
   });
 };
@@ -169,9 +170,9 @@ export const mountedThree = (playerVal1, playerVal2) => {
     model.camera.position.set(100, 0, 1000);
     // 单道、 双道
     fm1 = new Fm1(model, playerVal1, playerVal2);
-    // fm2 = new singleWindow(model, playerVal1);
     await fm1.mountedThree();
-    // await singleWindowObj.mountedThree();
+    fm2 = new Fm2(model, playerVal1, playerVal2);
+    await fm2.mountedThree();
 
     model.animate();
     resolve(null);

src/views/vent/monitorManager/windrectMonitor/dantou.threejs.ts

@@ -1,9 +1,9 @@
 import * as THREE from 'three';
 
 import { getTextCanvas } from '/@/utils/threejs/util';
-import * as dat from 'dat.gui';
-const gui = new dat.GUI();
-gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
 
 class ddWindRect {
   model;
@@ -30,9 +30,9 @@ class ddWindRect {
     pointLight2.shadow.bias = -0.05;
     this.group.add(pointLight2);
 
-    gui.add(pointLight2.position, 'x', -1000, 1000);
-    gui.add(pointLight2.position, 'y', -1000, 1000);
-    gui.add(pointLight2.position, 'z', -1000, 1000);
+    // gui.add(pointLight2.position, 'x', -1000, 1000);
+    // gui.add(pointLight2.position, 'y', -1000, 1000);
+    // gui.add(pointLight2.position, 'z', -1000, 1000);
 
     // gui.add(spotLight.position, 'x', -500, 500);
     // gui.add(spotLight.position, 'y', -500, 500);