Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

build/vite/plugin/serveStatic.ts

@@ -15,10 +15,11 @@ export function configServerPlugin(): PluginOption {
       return () => {
         server.middlewares.use(async (req, res, next) => {
           STATIC_SERVED_FILE_SUFFIX.forEach((suffix) => {
-            if (req.originalUrl?.endsWith(suffix)) {
+            if (req.originalUrl?.includes(suffix)) {
               res.setHeader('Content-Type', CONTENT_TYPE_MAP.get(suffix) || 'application/application');
               res.writeHead(200);
-              res.write(fs.readFileSync(path.join(__dirname, `../../../public/${req.originalUrl}`)));
+              const [url] = (req.originalUrl || '')?.split('?');
+              res.write(fs.readFileSync(path.join(__dirname, `../../../public/${url}`)));
               res.end();
             }
 

src/components/CADViewer/src/CADViewer.vue

@@ -12,6 +12,7 @@
   import { CAD_VIEWER_IFRAME_ID } from './viewer.data';
   import { onMounted, onUnmounted } from 'vue';
   import { operationMap } from './operationMap';
+  import useCADViewer from './hooks/useCADViewer';
   // import url from '/mxcad/index.html?url';
 
   withDefaults(
@@ -32,16 +33,22 @@
       height: 980,
       // iframeMode: true,
       showOperations: false,
-      iframeSrc: '/mxcad/index.html',
+      iframeSrc: '/mxcad/index.html?file=default.mxweb',
     }
   );
 
+  const { triggerHook } = useCADViewer();
+
   const onMessage = (message: MessageEvent) => {
     try {
-      if (!message.isTrusted || !operationMap.has(message.data.cmd)) return;
-      const op = operationMap.get(message.data.cmd) as SupportedOperation;
-      if (!op.messageHandler) return;
-      op.messageHandler(message.data);
+      if (!message.isTrusted) return;
+
+      if (operationMap.has(message.data.cmd)) {
+        const op = operationMap.get(message.data.cmd) as SupportedOperation;
+        if (!op.messageHandler) return;
+        op.messageHandler(message.data);
+      }
+      triggerHook(message.data.cmd);
     } catch (e) {}
   };
 

src/components/CADViewer/src/hooks/useCADViewer.ts

@@ -6,6 +6,9 @@ import { useGlobSetting } from '/@/hooks/setting';
 const globSetting = useGlobSetting();
 const baseApiUrl = globSetting.domainUrl;
 
+// 先设计成这样避免hooks无法取消注册
+const hooks = new Map<SupportedOperationName, () => void>();
+
 export default function useCADViewer() {
   /** 向CADViewer发送指令 */
   function postMessage(cmd: SupportedOperationName, param?: unknown) {
@@ -39,10 +42,32 @@ export default function useCADViewer() {
         close();
       });
   }
+
+  function registHook(name: SupportedOperationName, callback: () => void) {
+    hooks.set(name, callback);
+  }
+
+  function triggerHook(name: SupportedOperationName) {
+    if (hooks.has(name)) {
+      const fn = hooks.get(name) as () => void;
+      fn();
+    }
+  }
+
+  function unregistHook(name: SupportedOperationName) {
+    hooks.delete(name);
+  }
+
   return {
     /** 向CADViewer发送指令 */
     postMessage,
     /** 调用 api 转换文件格式，并返回转换后文件的网络地址 */
     processFile,
+    /** 注册Hook函数，同名的Hook函数将覆盖，常用于在某些指令执行完毕后做处理 */
+    registHook,
+    /** 触发Hook函数 */
+    triggerHook,
+    /** 解除注册Hook函数 */
+    unregistHook,
   };
 }

src/components/CADViewer/src/types/index.ts

@@ -1,7 +1,7 @@
 import { Component } from 'vue';
 
 /** 支持的操作名称，即mxcad app支持的命令 */
-export type SupportedOperationName = 'MKY_Open_Mxweb' | 'MKY_Download_Mxweb';
+export type SupportedOperationName = 'MKY_Open_Mxweb' | 'MKY_Download_Mxweb' | 'MKY_Open_File_Complete';
 export type SupportedOperation = {
   name: SupportedOperationName;
   alias: string;

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

@@ -0,0 +1,487 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import { drawHot } from '/@/utils/threejs/util';
+import { useAppStore } from '/@/store/modules/app';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class FmTwoYj {
+  modelName = 'FmTwoYj';
+  model; //
+  group;
+  isLRAnimation = true; // 是否开启左右摇摆动画
+  direction = 1; // 摇摆方向
+  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
+  player1;
+  player2;
+  deviceDetailCSS3D;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+
+  fmClock = new THREE.Clock();
+  mixers: THREE.AnimationMixer | undefined;
+  appStore = useAppStore();
+
+  backDamperOpenMesh;
+  backDamperClosedMesh;
+  frontDamperOpenMesh;
+  frontDamperClosedMesh;
+
+  clipActionArr = {
+    frontDoor: null as unknown as THREE.AnimationAction,
+    backDoor: null as unknown as THREE.AnimationAction,
+  };
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
+    directionalLight.position.set(344, 690, 344);
+    this.group?.add(directionalLight);
+    directionalLight.target = this.group as THREE.Object3D;
+
+    const pointLight2 = new THREE.PointLight(0xffeeee, 1, 300);
+    pointLight2.position.set(-4, 10, 1.8);
+    pointLight2.shadow.bias = 0.05;
+    this.group?.add(pointLight2);
+
+    const pointLight3 = new THREE.PointLight(0xffeeee, 1, 200);
+    pointLight3.position.set(-0.5, -0.5, 0.75);
+    pointLight3.shadow.bias = 0.05;
+    this.group?.add(pointLight3);
+
+    // const pointLight4 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight4.position.set(4.3, 1, -0.9);
+    // pointLight4.shadow.bias = 0.05;
+    // this.group?.add(pointLight4);
+
+    // const pointLight5 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight5.position.set(4.3, 1, -0.9);
+    // pointLight5.shadow.bias = 0.05;
+    // this.group?.add(pointLight5);
+
+    // const pointLight6 = new THREE.PointLight(0xffeeee, 1, 150);
+    // pointLight6.position.set(-4.4, 1, -0.9);
+    // pointLight6.shadow.bias = 0.05;
+    // this.group?.add(pointLight6);
+
+    // const pointLightHelper2 = new THREE.PointLightHelper(pointLight2, 1);
+    // this.model.scene?.add(pointLightHelper2);
+
+    // gui.add(pointLight2.position, 'x', -300, 300);
+    // gui.add(pointLight2.position, 'y', -300, 300);
+    // gui.add(pointLight2.position, 'z', -300, 300);
+
+    // gui.add(pointLight3.position, 'x', -300, 300);
+    // gui.add(pointLight3.position, 'y', -300, 300);
+    // gui.add(pointLight3.position, 'z', -300, 300);
+  }
+  // 重置摄像头
+  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: `净通行高度(m):`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 155,
+      },
+      {
+        text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 330,
+        y: 155,
+      },
+      {
+        text: `净通行宽度(m): `,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 215,
+      },
+      {
+        text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 320,
+        y: 215,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 320,
+        y: 275,
+      },
+      {
+        text: History_Type['type'] == 'remote' ? `国能神东煤炭集团监制` : '煤炭科学技术研究院有限公司研制',
+        font: 'normal 28px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: History_Type['type'] == 'remote' ? 90 : 30,
+        y: 325,
+      },
+    ];
+
+    //
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      textMap.colorSpace = THREE.SRGBColorSpace;
+      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(3.825, 0.01, -0.48);
+        this.group.add(planeMesh);
+      }
+      textMap.dispose();
+    });
+  }
+
+  /** 添加热点 */
+  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.1, 0.1, 0.1);
+      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;
+      }
+    }
+
+    if (this.mixers && this.fmClock.running) {
+      this.mixers.update(2);
+    }
+  }
+
+  /* 点击风窗，风窗全屏 */
+  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) {
+      //     // 双击，视频放大
+      //     if (this.player1) {
+      //       this.player1.requestPictureInPicture();
+      //     }
+      //   }
+      //   this.playerStartClickTime1 = new Date().getTime();
+      //   return true;
+      // } else if (mesh.name === 'player2') {
+      //   if (new Date().getTime() - this.playerStartClickTime2 < 400) {
+      //     // 双击，视频放大
+      //     if (this.player2) {
+      //       this.player2.requestPictureInPicture();
+      //     }
+      //   }
+      //   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.68, mesh.position.z + 0.02);
+      //     console.log('[ deviceDetailCSS3D.position ] >', this.deviceDetailCSS3D.position);
+      //     this.deviceDetailCSS3D.visible = true;
+      //     return true;
+      //   }
+      // } else {
+      //   if (this.deviceDetailCSS3D) 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-two-Yj');
+    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);
+        }
+      }
+
+      this.mixers = new THREE.AnimationMixer(fmGroup);
+
+      const frontDoor = new THREE.AnimationClip('frontDoor', 22, fontTracks);
+      const frontClipAction = this.mixers.clipAction(frontDoor, fmGroup);
+      frontClipAction.clampWhenFinished = true;
+      frontClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.frontDoor = frontClipAction;
+
+      const backDoor = new THREE.AnimationClip('backDoor', 22, backTracks);
+      const backClipAction = this.mixers.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;
+    if (element) {
+      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.05) {
+    if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
+      let handler = () => {};
+      switch (handlerState) {
+        case 1: // 打开前门
+          handler = () => {
+            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.fmClock.start();
+
+            // 显示打开前门文字
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
+          };
+          break;
+        case 2: // 关闭前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset(); //
+            this.clipActionArr.frontDoor.time = 22;
+            this.clipActionArr.frontDoor.timeScale = -timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
+          };
+          break;
+        case 3: // 打开后门
+          handler = () => {
+            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.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
+          };
+          break;
+        case 4: // 关闭后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 22;
+            this.clipActionArr.backDoor.timeScale = -timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
+          };
+          break;
+        // case 5: // 打开前后门
+        //   handler = () => {
+        //     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(playerDom) {
+    this.group = new THREE.Object3D();
+    this.group.name = this.modelName;
+
+    return new Promise((resolve) => {
+      if (!this.model) {
+        resolve(null);
+      }
+      this.model.setGLTFModel(['Fm-two-Yj'], this.group).then(() => {
+        this.setModalPosition();
+        // 初始化左右摇摆动画;
+        this.initAnimation();
+        this.addLight();
+        this.model.animate();
+        resolve(this.model);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      if (this.mixers) {
+        this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
+        this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
+        this.mixers.uncacheRoot(this.group);
+
+        if (this.model.animations[0]) this.model.animations[0].tracks = [];
+      }
+      this.model.clearGroup(this.group);
+      this.clipActionArr.backDoor = undefined;
+      this.clipActionArr.frontDoor = undefined;
+
+      this.mixers = undefined;
+
+      // document.getElementById('damper3D').parentElement.remove(document.getElementById('damper3D'))
+    }
+  }
+}
+export default FmTwoYj;

src/views/vent/performance/comment/CADModal.vue

@@ -18,16 +18,17 @@
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, triggerRef } from 'vue';
+  import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { onMounted } from 'vue';
   import CADViewer from '/@/views/vent/performance/fileDetail/commen/CADViewer.vue';
-  import { useGlobSetting } from '/@/hooks/setting';
+  // import { useGlobSetting } from '/@/hooks/setting';
   import { AUTO_LOGIN_URL_QUERY } from '/@/router/constant';
 
-  const { sysOrgCode } = useGlobSetting();
+  // const { sysOrgCode } = useGlobSetting();
   // 不是布尔台的使用 mxcad 模式，是布尔台的使用 iframe 模式以避免“法律风险”
-  const mxcadmode = ref(sysOrgCode !== 'sdmtjtbetmk');
+  const mxcadmode = ref(true);
+  // const mxcadmode = ref(sysOrgCode !== 'sdmtjtbetmk');
 
   // CAD预览器的 DEMO 01 相关代码
   const iframesrc = ref('');
@@ -45,8 +46,8 @@
       fileid.value = record.id;
       filename.value = record.fileName;
     } else {
-      // const origin = import.meta.env.PROD ? 'http://182.92.126.35:8092' : window.location.origin;
-      const origin = import.meta.env.DEV ? 'http://182.92.126.35:8092' : window.location.origin;
+      const origin = import.meta.env.PROD ? 'http://182.92.126.35:8092' : window.location.origin;
+      // const origin = import.meta.env.DEV ? 'http://182.92.126.35:8092' : window.location.origin;
       iframesrc.value = `${origin}/fileManager/cad-viewer?${AUTO_LOGIN_URL_QUERY.key}=${AUTO_LOGIN_URL_QUERY.val}&id=${record.id}&filename=${record.fileName}`;
     }
   });

src/views/vent/performance/comment/NormalTable.vue

@@ -236,6 +236,7 @@ function handleEdit(data) {
   let index = record.fileSuffix.indexOf('.');
   fileType.value = record.fileSuffix.substring(index + 1);
   editID.value = record.id;
+ 
 
   // 根据文件后缀名打开不同的模态框
   if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
@@ -258,6 +259,7 @@ async function handleDelete(record) {
 
 //下载文件
 function handleDownLoad(record) {
+  console.log(record, '下载');
   props.downLoad({ id: record.id }).then((res) => {
     let filename = `${record.fileName}`;
     downFilePublic(res, filename);

src/views/vent/performance/fileDetail/commen/CADViewer.vue

@@ -3,7 +3,7 @@
   <CADViewer class="w-100% h-100%" :height="height" />
 </template>
 <script lang="ts" setup>
-  import { onMounted, watch } from 'vue';
+  import { onMounted, onUnmounted, watch } from 'vue';
   import { CADViewer, useCADViewer } from '/@/components/CADViewer';
   import { downLoad } from '../fileDetail.api';
   import { useRoute } from 'vue-router';
@@ -17,31 +17,34 @@
     height: number;
   }>();
 
-  const { processFile, postMessage } = useCADViewer();
+  const { processFile, postMessage, registHook, unregistHook } = useCADViewer();
 
   function openFile(id: string, filename: string) {
-    const loading = message.loading('正在下载文件', 0);
-    downLoad({ id }).then((res: Blob) => {
-      processFile(new File([res], filename))
-        .then((path) => {
-          postMessage('MKY_Open_Mxweb', path);
-        })
-        .finally(() => {
-          loading();
-        });
+    // 只触发一次，因为MKY_Open_Mxweb之后会自动触发MKY_Open_File_Complete钩子，导致循环
+    registHook('MKY_Open_File_Complete', () => {
+      unregistHook('MKY_Open_File_Complete');
+      const loading = message.loading('正在下载文件', 0);
+      downLoad({ id }).then((res: Blob) => {
+        processFile(new File([res], filename))
+          .then((path) => {
+            postMessage('MKY_Open_Mxweb', path);
+          })
+          .finally(() => {
+            loading();
+          });
+      });
     });
   }
 
-  watch(
-    () => props.id,
-    (v) => {
-      if (!v) return;
-      openFile(v, props.filename);
-    }
-  );
+  // watch(
+  //   () => props.id,
+  //   (v) => {
+  //     if (!v) return;
+  //     openFile(v, props.filename);
+  //   }
+  // );
 
   onMounted(() => {
-    postMessage('MKY_Open_Mxweb', window.location.origin + '/mxcad/test31.mxweb');
     const route = useRoute();
     if (route.query.id && route.query.filename) {
       // 通过 url query 指定文件 ID 的形式使用该组件
@@ -51,6 +54,10 @@
       openFile(props.id, props.filename);
     }
   });
+
+  onUnmounted(() => {
+    unregistHook('MKY_Open_File_Complete');
+  });
 </script>
 
 <style scoped lang="less">