点表类型字段修改

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

@@ -105,7 +105,7 @@
       }, 
       {
         label: '点表',
-        field: 'strType',
+        field: 'strtype',
         component: 'JDictSelectTag',
         componentProps: {
           dictCode: `${deviceType.value}kind`,

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

@@ -138,7 +138,7 @@ class Fm1 {
   }
 
   /* 添加监控数据 */
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }

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

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import UseThree from '../../../../utils/threejs/useThree';
-import Fm1 from './gate.threejs.three';
+import Fm1 from './gate.threejs.two';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
 
@@ -81,11 +81,11 @@ const mouseEvent = (event) => {
   console.log('摄像头控制信息', model.orbitControls, model.camera);
 };
 
-export const addFmText = (selectData) => {
+export const addMonitorText = (selectData) => {
   if (fmType === 'fm1') {
-    return fm1.addFmText.call(fm1, selectData);
+    return fm1.addMonitorText.call(fm1, selectData);
   } else {
-    // return fm2.addFmText.call(fm2, selectData);
+    // return fm2.addMonitorText.call(fm2, selectData);
   }
 };
 
@@ -93,7 +93,7 @@ export const deviceDetailCard = () => {
   if (fmType === 'fm1') {
     return fm1.deviceDetailCard.call(fm1);
   } else {
-    // return fm2.addFmText.call(fm2);
+    // return fm2.addMonitorText.call(fm2);
   }
 };
 

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

@@ -0,0 +1,608 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import UseThree from '../../../../utils/threejs/useThree';
+import { drawHot } from '/@/utils/threejs/util';
+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 {
+  modelName = 'fm';
+  model; //
+  group;
+  isLRAnimation = true; // 是否开启左右摇摆动画
+  direction = 1; // 摇摆方向
+  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
+  player1;
+  player2;
+  deviceDetailCSS3D;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+
+  frontClock = new THREE.Clock();
+  backClock = new THREE.Clock();
+
+  appStore = useAppStore();
+
+  clipActionArr = {
+    frontDoor: null as unknown as THREE.AnimationAction,
+    backDoor: null as unknown as THREE.AnimationAction,
+  };
+
+  constructor(model, playerVal1, playerVal2) {
+    this.model = model;
+    this.player1 = playerVal1;
+    this.player2 = playerVal2;
+  }
+
+  addLight(scene) {
+    const pointLight2 = new THREE.PointLight(0xffeeee, 0.8, 300);
+    pointLight2.position.set(-113, 29, 10);
+    // light2.castShadow = true
+    pointLight2.shadow.bias = -0.05;
+    scene.add(pointLight2);
+    // const pointLightHelper2 = new THREE.PointLightHelper( pointLight2, 1 );
+    // scene.add( pointLightHelper2 );
+
+    const pointLight3 = new THREE.PointLight(0xffffff, 0.8, 100);
+    pointLight3.position.set(0, 30, 3);
+    // light2.castShadow = true
+    pointLight3.shadow.bias = -0.05;
+    scene.add(pointLight3);
+    // const pointLightHelper = new THREE.PointLightHelper( pointLight3, 1 );
+    // scene.add( pointLightHelper );
+
+    const pointLight4 = new THREE.PointLight(0xffeeee, 0.6, 100);
+    pointLight4.position.set(-14, 29, 13);
+    // light2.castShadow = true
+    pointLight4.shadow.bias = -0.05;
+    scene.add(pointLight4);
+    // const pointLightHelper4 = new THREE.PointLightHelper( pointLight4, 1 );
+    // scene.add( pointLightHelper4 );
+
+    const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 100);
+    pointLight5.position.set(80, 43, -5.3);
+    // light2.castShadow = true
+    pointLight5.shadow.bias = -0.05;
+    scene.add(pointLight5);
+    // const pointLightHelper5 = new THREE.PointLightHelper( pointLight5, 1 );
+    // scene.add( pointLightHelper5 );
+
+    const pointLight6 = new THREE.PointLight(0xffffff, 1, 300);
+    // pointLight6.position.set(-47, 49, 12.9)
+    pointLight6.position.set(-7, 40, 9);
+    // light2.castShadow = true
+    pointLight6.shadow.bias = -0.05;
+    scene.add(pointLight6);
+    // const pointLightHelper6 = new THREE.PointLightHelper( pointLight6, 1 );
+    // scene.add( pointLightHelper6 );
+
+    const pointLight7 = new THREE.PointLight(0xffffff, 0.8, 300);
+    pointLight7.position.set(45, 51, -4.1);
+    // light2.castShadow = true
+    pointLight7.shadow.bias = -0.05;
+    scene.add(pointLight7);
+    // const pointLightHelper7 = new THREE.PointLightHelper( pointLight7, 1 );
+    // scene.add( pointLightHelper7 );
+
+    // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+    // directionalLight.target = group;
+    // directionalLight.position.set(-18, 20, 39);
+    // directionalLight.rotation.set(1.3, 0.3, 5.8);
+    // scene.add(directionalLight);
+    // const helper = new THREE.DirectionalLightHelper(directionalLight, 5);
+    // scene.add(helper);
+
+    const spotLight = new THREE.SpotLight();
+    spotLight.angle = Math.PI / 16;
+    spotLight.penumbra = 0;
+    // spotLight.castShadow = true;
+    spotLight.position.set(-231, 463, 687);
+    scene.add(spotLight);
+
+    // spotLight.shadow.mapSize.width = 1500;  // default
+    // spotLight.shadow.mapSize.height = 800; // default
+    spotLight.shadow.camera.near = 0.5; // default
+    spotLight.shadow.camera.far = 1000; // default
+    spotLight.shadow.focus = 1.2;
+    spotLight.shadow.bias = -0.000002;
+
+    // const spotLightHelper = new THREE.SpotLightHelper(spotLight);
+    // scene.add(spotLightHelper);
+
+    // model.canvasContainer?.appendChild(gui.domElement);
+    // gui.add(directionalLight.position, 'x', -100, 100).step(1);
+    // gui.add(directionalLight.position, 'y', -100, 100).step(1);
+    // gui.add(directionalLight.position, 'z', -100, 100).step(1);
+    // gui.add(directionalLight.rotation, 'x', -Math.PI, 2 * Math.PI).step(0.1);
+    // gui.add(directionalLight.rotation, 'y', -Math.PI, 2 * Math.PI).step(0.1);
+    // gui.add(directionalLight.rotation, 'z', -Math.PI, 2 * Math.PI).step(0.1);
+    // gui.add(spotLight, 'angle', 0, Math.PI / 2);
+    // gui.add(spotLight, 'distance', 0, 1000);
+    // gui.add(pointLight6.position, 'x', -200, 200)
+    // gui.add(pointLight6.position, 'y', -200, 200)
+    // gui.add(pointLight6.position, 'z', -200, 200)
+  }
+  // 重置摄像头
+  resetCamera() {
+    this.model.camera.far = 274;
+    this.model.orbitControls?.update();
+    this.model.camera.updateProjectionMatrix();
+  }
+  // 设置模型位置
+  setModalPosition() {
+    this.group?.scale.set(22, 22, 22);
+    this.group?.position.set(-20, 20, 9);
+  }
+
+  /* 添加监控数据 */
+  addMonitorText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const textArr = [
+      {
+        text: `远程控制自动风门`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 120,
+        y: 100,
+      },
+      {
+        text: `压力(Pa):`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 155,
+      },
+      {
+        text: `${selectData.frontRearDP}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 290,
+        y: 155,
+      },
+      {
+        text: `动力源压力(MPa): `,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 215,
+      },
+      {
+        text: ` ${selectData.sourcePressure}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 215,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.fault}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 275,
+      },
+      {
+        text: `煤炭科学技术研究院有限公司研制`,
+        font: 'normal 28px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 20,
+        y: 325,
+      },
+    ];
+
+    //
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      textMap.encoding = THREE.sRGBEncoding;
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group.getObjectByName('monitorText');
+      if (monitorPlane) {
+        monitorPlane.material = textMaterial;
+      } else {
+        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(-1.255, 0.09, -0.41);
+        this.group.add(planeMesh);
+      }
+    });
+  }
+
+  /** 添加热点 */
+  drawHots() {
+    const hotPositions = [
+      { x: -0.37, y: 0.26, z: -0.32 },
+      { x: 0.28, y: -0.2, z: -0.43 },
+      { x: 0.55, y: -0.22, z: -0.38 },
+    ];
+    for (let i = 0; i < 3; i++) {
+      const hotPoint = drawHot(0.1);
+      const position = hotPositions[i];
+      // hotPoint.scale.set(0.3, 0.3, 0.3);
+      hotPoint.position.set(position.x, position.y, position.z);
+      hotPoint.name = 'hotPoint' + i;
+      this.group?.add(hotPoint);
+    }
+  }
+
+  /* 风门动画 */
+  render() {
+    if (!this.model) {
+      return;
+    }
+    if (this.isLRAnimation && this.group) {
+      // 左右摇摆动画
+      if (Math.abs(this.group.rotation.y) >= 0.2) {
+        this.direction = -this.direction;
+        this.group.rotation.y += 0.00002 * 30 * this.direction;
+      } else {
+        this.group.rotation.y += 0.00002 * 30 * this.direction;
+      }
+    }
+
+    // // //自发光
+    // const screen = group.getObjectByName('对象156');
+    // if (screen) {
+    //   model.renderer.clearDepth();
+    //   screen.layers.enable(31);
+    //   !!renderBloomPass && renderBloomPass(group);
+    // }
+
+    // 风门开关动画
+    const frontDelta = this.frontClock?.getElapsedTime() + 0.5;
+    const backDelta = this.backClock?.getElapsedTime() + 0.5;
+    if (this.model.mixers[0]) this.model.mixers[0]?.update(frontDelta); //前门
+    if (this.model.mixers[1]) this.model.mixers[1]?.update(backDelta); // 后门
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    this.isLRAnimation = false;
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+
+    // 判断是否点击到视频
+    intersects.find((intersect) => {
+      const mesh = intersect.object;
+      if (mesh.name === 'player1') {
+        if (new Date().getTime() - this.playerStartClickTime1 < 400) {
+          // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' })
+          // 双击，视频放大
+          if (this.player1) {
+            this.player1.requestFullscreen();
+          }
+        }
+        this.playerStartClickTime1 = new Date().getTime();
+        return true;
+      } else if (mesh.name === 'player2') {
+        if (new Date().getTime() - this.playerStartClickTime2 < 400) {
+          // model.orbitControls?.dispatchEvent.call(model.orbitControls, { type: 'end' })
+          // 双击，视频放大
+          if (this.player2) {
+            this.player2.requestFullscreen();
+          }
+        }
+        this.playerStartClickTime2 = new Date().getTime();
+        return true;
+      } else if (mesh.name.startsWith('hotPoint')) {
+        if (this.deviceDetailCSS3D) {
+          this.deviceDetailCSS3D.position.set(mesh.position.x + 0.035, mesh.position.y + 0.66, mesh.position.z + 0.02);
+          console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position);
+          this.deviceDetailCSS3D.visible = true;
+          return true;
+        }
+        
+      } else {
+        this.deviceDetailCSS3D.visible = false;
+        console.log('[ 点击事件 ] >');
+      }
+      return false;
+    });
+  }
+
+  mouseUpModel() {
+    // 10s后开始摆动
+    if (!this.animationTimer && !this.isLRAnimation) {
+      this.animationTimer = setTimeout(() => {
+        this.isLRAnimation = true;
+      }, 10000);
+    }
+  }
+
+  /* 提取风门序列帧，初始化前后门动画 */
+  initAnimation() {
+    const fmGroup = this.group?.getObjectByName('Fm-door');
+    if (fmGroup) {
+      const tracks = fmGroup.animations[0].tracks;
+      const fontTracks: any[] = [],
+        backTracks: any[] = [];
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.name.startsWith('qianmen')) {
+          fontTracks.push(track);
+        } else if (track.name.startsWith('houmen')) {
+          backTracks.push(track);
+        }
+      }
+      const frontDoor = new THREE.AnimationClip('frontDoor', 4, fontTracks);
+      const frontMixer = new THREE.AnimationMixer(fmGroup);
+      this.model.mixers.push(frontMixer);
+      const frontClipAction = frontMixer.clipAction(frontDoor, fmGroup);
+      frontClipAction.clampWhenFinished = true;
+      frontClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.frontDoor = frontClipAction;
+
+      const backDoor = new THREE.AnimationClip('backDoor', 4, backTracks);
+      const backMixer = new THREE.AnimationMixer(fmGroup);
+      this.model.mixers.push(backMixer);
+      const backClipAction = backMixer.clipAction(backDoor, fmGroup);
+      backClipAction.clampWhenFinished = true;
+      backClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.backDoor = backClipAction;
+    }
+  }
+
+  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
+    const element = document.getElementById('deviceCard') as HTMLElement;
+    this.deviceDetailCSS3D = new CSS2DObject(element);
+    this.deviceDetailCSS3D.name = 'deviceCard';
+    this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
+    this.deviceDetailCSS3D.visible = false;
+    // this.model.scene.add(this.deviceDetailCSS3D);
+    this.group.add(this.deviceDetailCSS3D);
+  }
+
+  // 播放动画
+  play(handlerState, timeScale = 0.01) {
+    let handler = () => {};
+    switch (handlerState) {
+      case 1: // 打开前门
+        handler = () => {
+          debugger;
+          this.clipActionArr.frontDoor.paused = true;
+          this.clipActionArr.frontDoor.reset();
+          this.clipActionArr.frontDoor.time = 1.2;
+          this.clipActionArr.frontDoor.timeScale = timeScale;
+          this.clipActionArr.frontDoor.clampWhenFinished = true;
+          this.clipActionArr.frontDoor.play();
+          this.frontClock.start();
+        };
+        break;
+      case 2: // 关闭前门
+        handler = () => {
+          debugger;
+          this.clipActionArr.frontDoor.paused = true;
+          this.clipActionArr.frontDoor.reset(); //
+          this.clipActionArr.frontDoor.time = 4;
+          this.clipActionArr.frontDoor.timeScale = -timeScale;
+          this.clipActionArr.frontDoor.clampWhenFinished = true;
+          this.clipActionArr.frontDoor.play();
+          this.frontClock.start();
+        };
+        break;
+      case 3: // 打开后门
+        handler = () => {
+          debugger;
+          this.clipActionArr.backDoor.paused = true;
+          this.clipActionArr.backDoor.reset();
+          this.clipActionArr.backDoor.time = 1.2;
+          this.clipActionArr.backDoor.timeScale = timeScale;
+          this.clipActionArr.backDoor.clampWhenFinished = true;
+          this.clipActionArr.backDoor.play();
+          this.backClock.start();
+        };
+        break;
+      case 4: // 关闭后门
+        handler = () => {
+          debugger;
+          this.clipActionArr.backDoor.paused = true;
+          this.clipActionArr.backDoor.reset();
+          this.clipActionArr.backDoor.time = 4;
+          this.clipActionArr.backDoor.timeScale = -timeScale;
+          this.clipActionArr.backDoor.clampWhenFinished = true;
+          this.clipActionArr.backDoor.play();
+          this.backClock.start();
+        };
+        break;
+      case 5: // 打开前后门
+        handler = () => {
+          debugger;
+          this.clipActionArr.backDoor.paused = true;
+          this.clipActionArr.frontDoor.paused = true;
+
+          this.clipActionArr.frontDoor.reset();
+          this.clipActionArr.frontDoor.time = 0;
+          this.clipActionArr.frontDoor.timeScale = 0.01;
+          this.clipActionArr.frontDoor.clampWhenFinished = true;
+          this.clipActionArr.frontDoor.play();
+
+          this.clipActionArr.backDoor.reset();
+          this.clipActionArr.backDoor.time = 0;
+          this.clipActionArr.backDoor.timeScale = 0.01;
+          this.clipActionArr.backDoor.clampWhenFinished = true;
+          this.clipActionArr.backDoor.play();
+          this.frontClock.start();
+          this.backClock.start();
+        };
+        break;
+      case 6: // 关闭前后门
+        handler = () => {
+          debugger;
+          this.clipActionArr.backDoor.paused = true;
+          this.clipActionArr.frontDoor.paused = true;
+
+          this.clipActionArr.frontDoor.reset();
+          this.clipActionArr.frontDoor.time = 4;
+          this.clipActionArr.frontDoor.timeScale = -0.01;
+          this.clipActionArr.frontDoor.clampWhenFinished = true;
+          this.clipActionArr.frontDoor.play();
+          this.clipActionArr.backDoor.reset();
+          this.clipActionArr.backDoor.time = 4;
+          this.clipActionArr.backDoor.timeScale = -0.01;
+          this.clipActionArr.backDoor.clampWhenFinished = true;
+          this.clipActionArr.backDoor.play();
+          this.frontClock.start();
+          this.backClock.start();
+        };
+        break;
+      default:
+    }
+
+    handler();
+    // model.clock.start();
+    // const honglvdeng = group.getObjectByName('honglvdeng');
+    // const material = honglvdeng.material;
+    // setTimeout(() => {
+    //   if (handlerState === 2 || handlerState === 4 || handlerState === 6) {
+    //     material.color = new THREE.Color(0x00ff00);
+    //   } else {
+    //     material.color = new THREE.Color(0xff0000);
+    //   }
+    // }, 1000);
+  }
+
+  mountedThree() {
+    this.group = new THREE.Object3D();
+    this.group.name = this.modelName;
+    return new Promise((resolve) => {
+      this.model = new UseThree('#damper3D', '', '#deviceDetail');
+
+      this.model.setEnvMap('test1');
+      this.model.renderer.toneMappingExposure = 1;
+      this.model.scene?.add(this.group);
+      this.group?.layers.enableAll();
+
+      this.model.setGLTFModel(['Fm-door', 'Fm-wire', 'Fm-wall'], this.group).then(() => {
+        this.setModalPosition();
+        // 初始化左右摇摆动画;
+        this.initAnimation();
+        this.drawHots();
+
+        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);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      if (this.model.mixers[0]) {
+        this.model.mixers[0].uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.model.mixers[0].uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.model.mixers[0].uncacheAction(this.clipActionArr.frontDoor, this.group);
+        this.model.mixers[0].uncacheAction(this.clipActionArr.backDoor, this.group);
+        this.model.mixers[0].uncacheRoot(this.group);
+
+        this.model.mixers[1].uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.model.mixers[1].uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.model.mixers[1].uncacheAction(this.clipActionArr.frontDoor, this.group);
+        this.model.mixers[1].uncacheAction(this.clipActionArr.backDoor, this.group);
+        this.model.mixers[1].uncacheRoot(this.group);
+
+        if (this.model.animations[0]) this.model.animations[0].tracks = [];
+      }
+
+      this.clipActionArr.backDoor = undefined;
+      this.clipActionArr.frontDoor = undefined;
+
+      this.model.mixers = [];
+      this.model.deleteModal();
+      this.model = null;
+      this.group = null;
+      // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
+    }
+  }
+}
+export default Fm1;

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

@@ -169,7 +169,7 @@
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
   import HandleModal from './modal.vue';
-  import { mountedThree, addFmText, play, destroy, setModelType } from './gate.threejs';
+  import { mountedThree, addMonitorText, play, destroy, setModelType } from './gate.threejs';
   import { deviceControlApi } from '/@/api/vent/index';
   import { message } from 'ant-design-vue';
   import { list, getTableList } from './gate.api';
@@ -257,7 +257,7 @@
             if (dataSource.value.length > selectRowIndex.value) {
               const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
               Object.assign(selectData, data);
-              addFmText(selectData);
+              addMonitorText(selectData);
               monitorAnimation(selectData)
               if (timer) {
                 timer = null;
@@ -283,7 +283,7 @@
     rearDeviceState = 0 //记录设备状态，为了与下一次监测数据做比较
     // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
     setModelType('fm1').then(() => {
-      addFmText(selectData);
+      addMonitorText(selectData);
       loading.value = false;
     });
   };

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

@@ -382,7 +382,7 @@
   // const dataSource = computed(() => {
   //   const data = [...getRecordList()] || [];
   //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-  //   addFmText(selectData);
+  //   addMonitorText(selectData);
   //   return data;
   // });
 

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

@@ -35,7 +35,7 @@ class singleWindow {
     this.group?.position.set(-35, 25, 15);
   }
 
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }

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

@@ -127,7 +127,7 @@
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
   import HandleModal from './modal.vue';
-  import { mountedThree, destroy, addFmText, play, setModelType } from './window.threejs';
+  import { mountedThree, destroy, addMonitorText, play, setModelType } from './window.threejs';
   import { list, getTableList } from './window.api';
   import { list as baseList } from '../../deviceManager/windWindowTabel/ventanalyWindow.api';
   import { chartsColumns } from './window.data';
@@ -168,7 +168,7 @@
   // const dataSource = computed(() => {
   //   const data = [...getRecordList()] || [];
   //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-  //   addFmText(selectData);
+  //   addMonitorText(selectData);
   //   return data;
   // });
 
@@ -215,7 +215,7 @@
         const data = await getDataSource();
         Object.assign(selectData, data);
         playAnimation(selectData, selectData.maxarea);
-        addFmText(selectData);
+        addMonitorText(selectData);
         if (timer) {
           timer = null;
         }
@@ -252,7 +252,7 @@
 
     const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
     setModelType(type).then(() => {
-      addFmText(selectData);
+      addMonitorText(selectData);
       playAnimation(selectRow, baseData.maxarea, true);
       loading.value = false;
     });
@@ -352,7 +352,7 @@
       // await setModelType('singleWindow');
       getMonitor(true);
       loading.value = false;
-      addFmText(selectData);
+      addMonitorText(selectData);
       
     });
     document.body.addEventListener('mousedown', addPlayVideo, false);

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

@@ -33,7 +33,7 @@ class doubleWindow {
     this.group?.position.set(-15, 25, 15);
   }
 
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }

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

@@ -88,11 +88,11 @@ const mouseEvent = (event) => {
   });
 };
 
-export const addFmText = (selectData) => {
+export const addMonitorText = (selectData) => {
   if (windowType === 'doubleWindow') {
-    return doubleWindowObj.addFmText.call(doubleWindowObj, selectData);
+    return doubleWindowObj.addMonitorText.call(doubleWindowObj, selectData);
   } else {
-    return singleWindowObj.addFmText.call(singleWindowObj, selectData);
+    return singleWindowObj.addMonitorText.call(singleWindowObj, selectData);
   }
 };
 

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;
@@ -20,13 +20,19 @@ class ddWindRect {
 
   addLight() {
     const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-    directionalLight.position.set(42.4, 248, 86);
-    this.group.add(directionalLight);
+    directionalLight.position.set(64, 215, 500);
     directionalLight.target = this.group;
+    this.group.add(directionalLight);
+
+    const pointLight2 = new THREE.PointLight(0xffffff, 2, 300);
+    pointLight2.position.set(-113, 29, 10);
+    // light2.castShadow = true
+    pointLight2.shadow.bias = -0.05;
+    this.group.add(pointLight2);
 
-    // gui.add(directionalLight.position, 'x', -500, 500);
-    // gui.add(directionalLight.position, 'y', -500, 500);
-    // gui.add(directionalLight.position, 'z', -500, 500);
+    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);
@@ -40,7 +46,7 @@ class ddWindRect {
     this.group?.position.set(-10, 25, 20);
   }
 
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }
@@ -51,7 +57,7 @@ class ddWindRect {
         color: '#009900',
         strokeStyle: '#002200',
         x: 140,
-        y: 75,
+        y: 100,
       },
       {
         text: `风量(m3/min):`,
@@ -59,7 +65,7 @@ class ddWindRect {
         color: '#009900',
         strokeStyle: '#002200',
         x: 12,
-        y: 133,
+        y: 143,
       },
       {
         text: `${selectData.m3 ? selectData.m3 : '-'}`,
@@ -67,7 +73,7 @@ class ddWindRect {
         color: '#009900',
         strokeStyle: '#002200',
         x: 311,
-        y: 133,
+        y: 143,
       },
       {
         text: `风速(m/s): `,
@@ -75,7 +81,7 @@ class ddWindRect {
         color: '#009900',
         strokeStyle: '#002200',
         x: 12,
-        y: 192,
+        y: 202,
       },
       {
         text: `${selectData.va ? selectData.va : '-'}`,
@@ -83,7 +89,7 @@ class ddWindRect {
         color: '#009900',
         strokeStyle: '#002200',
         x: 310,
-        y: 192,
+        y: 202,
       },
       {
         text: `断面积(㎡):`,
@@ -126,8 +132,8 @@ class ddWindRect {
         const planeGeometry = new THREE.PlaneGeometry(5.6, 3.46); // 平面3维几何体PlaneGeometry
         const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
         planeMesh.name = 'monitorText';
-        planeMesh.scale.set(0.26, 0.26, 0.26);
-        planeMesh.position.set(-2.52, 0.038, -0.42);
+        planeMesh.scale.set(0.22, 0.22, 0.22);
+        planeMesh.position.set(-1.81, 0.068, -0.4);
         this.group?.add(planeMesh);
       }
     });
@@ -180,10 +186,10 @@ class ddWindRect {
   mountedThree() {
     return new Promise((resolve) => {
       this.model.setGLTFModel([this.modelName]).then((gltf) => {
-        this.group.name = this.modelName;
         this.group = gltf[0];
         this.setModalPosition();
         this.addLight();
+        resolve(null);
       });
     });
   }

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

@@ -78,7 +78,7 @@ class dsWindRect {
     this.group?.position.set(-10, 25, 20);
   }
 
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }

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

@@ -151,7 +151,7 @@
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
   import { deviceControlApi } from '/@/api/vent/index';
-  import { mountedThree, destroy, addFmText, play, setModelType, playCamera } from './windrect.threejs';
+  import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
   import LivePlayer from '@liveqing/liveplayer-v3';
   import { list, pathList, deviceList, testWind } from './windrect.api';
   import { list as baseList } from '../../deviceManager/windfindingTabel/windfinding.api';
@@ -201,7 +201,7 @@
   // const dataSource = computed(() => {
   //   const data = [...getRecordList()] || [];
   //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-  //   addFmText(selectData);
+  //   addMonitorText(selectData);
   //   return data;
   // });
 
@@ -231,7 +231,7 @@
             });
             const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
             Object.assign(selectData, data);
-            addFmText(selectData);
+            addMonitorText(selectData);
             
             palyAnimation(selectData)
             
@@ -554,6 +554,7 @@
     if(selectRow){
       loading.value = true;
       selectRowIndex.value = index;
+      
       // Object.assign(selectData, selectRow);
       let type = ''
       if(selectRow.deviceType == 'windrect_rect') {
@@ -574,6 +575,11 @@
       if (selectRow.deviceType == 'windrect_ds_two') {
         type = 'dsWindRect_two'
       }
+      
+      if (selectRow.deviceType == 'windrect_dd') {
+        type = 'ddWindSide'
+      }
+      debugger
       // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
       await setModelType(type);
       loading.value = false;
@@ -651,6 +657,8 @@
     loading.value = true;
     
     mountedThree(player1.value, player2.value).then(async () => {
+      debugger
+
       getMonitor(true);
       // loading.value = false;
     });

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

@@ -62,7 +62,7 @@ class lmWindRect {
     this.group?.position.set(-25, 25, 15);
   }
 
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }

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

@@ -63,7 +63,7 @@ class lmWindRectSide {
     this.group?.position.set(-25, 25, 15);
   }
 
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }

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

@@ -64,17 +64,17 @@ const mouseEvent = (event) => {
 };
 
 /* 添加监控数据 */
-export const addFmText = (selectData) => {
+export const addMonitorText = (selectData) => {
   if (windRectType === 'lmWindRect') {
-    return lmWindRectObj.addFmText.call(lmWindRectObj, selectData);
+    return lmWindRectObj.addMonitorText.call(lmWindRectObj, selectData);
   } else if (windRectType === 'zdWindRect') {
-    return zdWindRectObj.addFmText.call(zdWindRectObj, selectData);
+    return zdWindRectObj.addMonitorText.call(zdWindRectObj, selectData);
   } else if (windRectType.startsWith('dsWindRect')) {
-    return dsWindRectObj.addFmText.call(dsWindRectObj, selectData);
+    return dsWindRectObj.addMonitorText.call(dsWindRectObj, selectData);
   } else if (windRectType === 'lmWindSide') {
-    return lmWindRectSideObj.addFmText.call(lmWindRectSideObj, selectData);
+    return lmWindRectSideObj.addMonitorText.call(lmWindRectSideObj, selectData);
   } else if (windRectType === 'ddWindSide') {
-    return ddWindRectObj.addFmText.call(ddWindRectObj, selectData);
+    return ddWindRectObj.addMonitorText.call(ddWindRectObj, selectData);
   }
 };
 
@@ -180,6 +180,7 @@ export const setModelType = (type) => {
         );
       }, 300);
     } else if (windRectType.startsWith('dsWindRect')) {
+      debugger;
       const type = windRectType.split('_')[1];
       // dsWindRectObj.isRun = false;
       model.startAnimation = dsWindRectObj.render.bind(dsWindRectObj);
@@ -250,7 +251,7 @@ export const setModelType = (type) => {
         );
         // lmWindRectSideObj.playCamera(true);
       }, 300);
-    } else if (windRectType.startsWith('ddWindSide')) {
+    } else if (windRectType === 'ddWindSide') {
       model.startAnimation = ddWindRectObj.render.bind(ddWindRectObj);
       group = ddWindRectObj.group;
 
@@ -273,8 +274,8 @@ export const setModelType = (type) => {
         await animateCamera(
           oldCameraPosition,
           { x: 0, y: 0, z: 0 },
-          { x: 46.257, y: 57.539, z: 104.313 },
-          { x: 1.84, y: 0.98, z: -1.44 },
+          { x: 22.839308656135486, y: 56.930433490209, z: 103.22614933268565 },
+          { x: -4.4575304696469304, y: 0.26828436264018835, z: -0.7214855106998845 },
           model,
           0.8
         );
@@ -291,15 +292,19 @@ export const mountedThree = (playerVal1, playerVal2) => {
 
     lmWindRectObj = new lmWindRect(model, playerVal1, playerVal2);
     await lmWindRectObj.mountedThree();
+
     zdWindRectObj = new zdWindRect(model, playerVal1);
     await zdWindRectObj.mountedThree();
+
     dsWindRectObj = new dsWindRect(model, playerVal1);
     await dsWindRectObj.mountedThree();
+
     lmWindRectSideObj = new lmWindRectSide(model, playerVal1, playerVal2);
     await lmWindRectSideObj.mountedThree();
+
     ddWindRectObj = new ddWindRect(model);
     await ddWindRectObj.mountedThree();
-
+    
     resolve(null);
     model.animate();
     startAnimation();

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

@@ -55,7 +55,7 @@ class zdWindRect {
     this.group?.position.set(-35, 25, 15);
   }
 
-  addFmText(selectData) {
+  addMonitorText(selectData) {
     if (!this.group) {
       return;
     }