廖杰:风机状态颜色修复+修复选中模式多次发送请求

2024-03-27 16:10:37 +08:00
parent 3e2f453bde
commit ea111a186f
5 changed files with 207 additions and 66 deletions
--- a/src/components/content/tunnelScene/PreviewScene.vue
+++ b/src/components/content/tunnelScene/PreviewScene.vue
@@ -77,7 +77,7 @@ const loader = new OBJLoader();
 let hdrLoader = new RGBELoader();
 let backColorSet = three.sRGBEncoding;
 const modelStore = useModelSceneStore();
-const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理
+const params = defineProps(["isedit", "tunnelId", "tunnelLen", "largeScreen", "fanList"]); //接收参数看是不是编辑模式，如果是编辑模式，则需要做一些处理


 // console.log(load);
@@ -90,12 +90,67 @@ watch(
    (now) => {
        // console.log(params.largeScreen);
        params.largeScreen = now;
+        // console.log(toRaw(params.largeScreen.value).frequencyChangerList);
+        // console.log(params.fanList);
        fanData = (toRaw(params.largeScreen.value)).frequencyChangerList;
        // console.log(fanData);
+        // 下面的watch是负责更新fanData的状态，因为风机的状态为实时的，所以我们需要更新其的运行状态
+        watch(
+            () => params.fanList,
+            (now) => {
+                // console.log(params.largeScreen);
+                params.fanList = now;
+                let fanList = toRaw(params.fanList);
+                //首先判断是不是存在autoMode属性
+                if (fanList[0].autoMode !== undefined) {
+                    // console.log(fanData);
+                    // console.log(fanList);
+                    fanList.map(item => {
+                        if (item.equipmentId == fanData[0].equipmentId) {
+                            // console.log(item.equipmentId);
+                            //第一个符合条件
+                            fanData[0].breakdown = item.breakdown
+                            fanData[0].running = item.running
+                            // console.log(demo.scene);
+                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[0].equipmentId) {
+                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
+                                // console.log('111');
+                            }
+                            else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[0].equipmentId) {
+                                // console.log("222");
+                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
+                            }
+                            // console.log(item);
+                            // console.log(fanData[0]);
+                        } else {
+                            // 第二个符合条件
+                            // console.log(item.equipmentId);
+                            fanData[1].breakdown = item.breakdown
+                            fanData[1].running = item.running
+                            // console.log(demo.scene);
+                            if (demo.scene.Fan1targetPoint.info.equipmentId == fanData[1].equipmentId) {
+                                // console.log('111');
+                                changeFanColor(fanData, demo.scene.Fan1targetPoint, demo.scene)
+                            } else if (demo.scene.Fan2targetPoint.info.equipmentId == fanData[1].equipmentId) {
+                                // console.log("222");
+                                changeFanColor(fanData, demo.scene.Fan2targetPoint, demo.scene)
+                            }
+                            // console.log(item);
+                            // console.log(fanData[1]);
+                        }
+                    })
+                }
+
+                // console.log(fanData);
+            },
+            { deep: true }
+        );
    },
    { deep: true }
 );

+
+
 const getTunnel = () => {
    if (params.tunnelId !== 0) {
        getTunnelDetail(params.tunnelId).then((res) => {
@@ -147,6 +202,57 @@ watch(
    { deep: true }
 )

+//这里是改变风机颜色的代码
+function changeFanColor(fanData, targetPoint, scene) {
+    if (fanData !== undefined) {
+        //保证是预览模式才进行这里的操作（！=1）
+        if (fanData.length > 0) {
+            //if保证存在风机（即有长度再进行遍历）
+            for (let i = 0; i < fanData.length; i++) {
+                //先做匹配操作
+                let fanType = fanData[i].equipmentType
+                //有符合条件的风机进来了
+                if (targetPoint.info.typeKey == fanType) {
+                    //下面进行变色需要的逻辑判断了
+                    if (fanData[i].breakdown == true) {
+                        //故障状态，变红色
+                        scene.traverse(function (child) {
+                            if (child.id === targetPoint.info.id) {
+                                child.traverse(function (obj) {
+                                    // console.log(obj);
+                                    // 判断子对象是否是物体，如果是，更改其颜色
+                                    if (obj.isMesh) {
+                                        obj.material.color.set(0xFF0000)
+                                    }
+                                })
+                            }
+                        });
+                    } else {
+                        // 这里再判断是否运行
+                        if (fanData[i].running == true) {
+                            //运行状态,绿色 0x008000
+                            scene.traverse(function (child) {
+                                if (child.id === targetPoint.info.id) {
+                                    child.traverse(function (obj) {
+                                        // console.log(obj);
+                                        // 判断子对象是否是物体，如果是，更改其颜色
+                                        if (obj.isMesh) {
+                                            obj.material.color.set(0x008000)
+                                        }
+                                    })
+                                }
+                            });
+                        } else {
+                            //停止状态，不变色
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 onMounted(handleMounted);
 // 挂载后回调
 async function handleMounted() {
@@ -185,19 +291,10 @@ async function handleMounted() {
        // console.log(modelList.value);
        // console.log("init", params.tunnelId);
        demo.previewtunnelModeInit(toRaw(modelList.value), fanData);
+        // setInterval("demo.previewtunnelModeInit(toRaw(modelList.value), fanData)", "1000")
+
        demo.SignsInf(tunnelAlias, String(params.tunnelLen.value))
-        // watch(
-        //     () => params.tunnelId,
-        //     (now) => {
-        //         params.tunnelId = now
-        //         // console.log(params.tunnelId);
-        //         checkTunnelInit(modelList.value)
-        //         demo.previewtunnelModeInit(modelList.value);
-        //     },
-        //     { deep: true }
-        // )
-        // demo.previewtunnelModeInit(equipmentList);
-        // previewEquInfProcess(modelList.value, targetP.value)
+
    } catch (err) {
        if (err == undefined) {
            return
@@ -304,6 +401,21 @@ function rClickCallback(demo) {
    demo.addFunction("editDev", editDev);
 }

+function throttle(fn, delay) {
+    var timer;
+    return function () {
+        var _this = this;
+        var args = arguments;
+        if (timer) {
+            return;
+        }
+        timer = setTimeout(function () {
+            fn.apply(_this, args);
+            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
+        }, delay)
+    }
+}
+
 // 添加设备
 function handleAddEqu(formInfo) {
    demo.addEquipment(targetP.value, formInfo);
--- a/src/components/content/tunnelScene/sceneClass/demo.js
+++ b/src/components/content/tunnelScene/sceneClass/demo.js
@@ -13,6 +13,7 @@ import { editTunnelInit } from "./editTunnelInit";
 import { addEquipment, removeEquipment } from "./editEquipment";
 import previewtunnelModeInit from "./previewTunnelInit"
 import { StreetSignTag } from "./utils/StreetSignTag/StreetSignTag.js";
+// import { fa } from "element-plus/es/locale/index.js";
 // import { ref } from "vue";
 export default class Demo {
  // 摄像机看向位置s
@@ -255,11 +256,11 @@ export default class Demo {
        } else {
          if (isedit != true) {
            // console.log(isedit);
-            //附着点设置方框
+            //附着点设置方框(已经被选中了的情况)
            this.setBoxHelper(intersects[0].object);
            this._handleLHover(intersects[0].object);
-          }

+          }
          this.preHover.material.color.set("white");
          this.preHover = intersects[0].object;
        }
@@ -434,6 +435,7 @@ export default class Demo {
      v.material.color = new this.THREE.Color(0xC0C0C0);
      if (/^leaf/.test(v.name) || /^roller/.test(v.name)) {
        group.add(v.clone());
+        // console.log(group);
        v.visible = false;
        // console.log(v);
      }
--- a/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
+++ b/src/components/content/tunnelScene/sceneClass/editEquipment/index.js
@@ -185,6 +185,21 @@ function handleFanEqu(
    this.fanSpinArray = [];
  }
  const equMesh = this.equMap.get("equ_fan").clone();
+  // console.log(this.equMap.get("equ_fan"));
+  // console.log(this.equMap.get("equ_fan").material.clone());
+  // equMesh.material = this.equMap.get("equ_fan").material.clone();
+  // console.log(equMesh);
+  //深层次克隆
+  equMesh.children.map(function (item) {
+    // console.log(item);
+    if (item.isMesh) {
+      item.material = item.material.clone();
+    }
+  })
+  // equMesh.geometry = this.equMap.get("equ_fan").geometry.clone();
+  // console.log(equMesh);
+
+
  const worldP = targetPoint.getWorldPosition(new this.THREE.Vector3());
  equMesh.position.copy(worldP);
  equMesh.translateY(-0.6);
@@ -197,10 +212,17 @@ function handleFanEqu(
    id: equMesh.id, //模型在场景id
    ...equipmentInfo,
  };
+  //我们把风机的附着点挂在原型上，这样应该可以进行处理
+  if (targetPoint.info.equipmentName.slice(0, 1) == '1') {
+    this.scene.Fan1targetPoint = targetPoint
+  } else {
+    this.scene.Fan2targetPoint = targetPoint
+  }
  //这里感觉情况改变风机的颜色
  changeFanColor(fanData, targetPoint, this.scene)


+
  // 定义风机旋转
  const fanLeaf = equMesh.getObjectByName("fan_leafs");
  const fanSpin = new this.TWEEN.Tween({ rotation: 0 });
@@ -285,7 +307,7 @@ function deleteItem(array, item) {
  return array
 }

-//这里是改变风机颜色的代码
+// 这里是改变风机颜色的代码
 function changeFanColor(fanData, targetPoint, scene) {
  if (fanData !== undefined) {
    //保证是预览模式才进行这里的操作（！=1）
--- a/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
+++ b/src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js
@@ -1,54 +1,57 @@
 export function handleLHover(targetPoint) {
-  // 保存进入状态
-  this._saveState();
-  // this.clearTagsObj();
-  // 全局临时标记该选中的模型;
-  this.targetPoint = targetPoint;
-  const worldPosition = new this.THREE.Vector3();
-  //获取附着点的世界坐标系
-  targetPoint.getWorldPosition(worldPosition);
-  this._checkAnimation(worldPosition);
+  if (this.tag3CSS2DObj.element.style.opacity != '1') {
+    // 保存进入状态
+    this._saveState();
+    // this.clearTagsObj();
+    // 全局临时标记该选中的模型;
+    this.targetPoint = targetPoint;
+    const worldPosition = new this.THREE.Vector3();
+    //获取附着点的世界坐标系
+    targetPoint.getWorldPosition(worldPosition);
+    this._checkAnimation(worldPosition);

-  // 设置标签位置
-  this.tag3CSS2DObj.position.set(
-    worldPosition.x,
-    worldPosition.y,
-    worldPosition.z
-  );
-  this.isControlOrbit(false);
-  this.position = worldPosition;
-  if (/tr$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(3);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this);
-  } else if (/tl$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(-3);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this);
-  } else if (/tc$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(0);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-6);
-    intoAnimation.call(this);
-  } else if (/br$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(2);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(3);
-    intoAnimation.call(this);
-  } else if (/bl$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(-2);
-    this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(3);
-    intoAnimation.call(this);
+    // 设置标签位置
+    this.tag3CSS2DObj.position.set(
+      worldPosition.x,
+      worldPosition.y,
+      worldPosition.z
+    );
+    this.isControlOrbit(false);
+    this.position = worldPosition;
+    if (/tr$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(3);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(-5);
+      intoAnimation.call(this);
+    } else if (/tl$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(-3);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(-5);
+      intoAnimation.call(this);
+    } else if (/tc$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(0);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(-6);
+      intoAnimation.call(this);
+    } else if (/br$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(2);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(3);
+      intoAnimation.call(this);
+    } else if (/bl$/.test(targetPoint.name)) {
+      this.tag3CSS2DObj.translateX(-2);
+      this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateY(3);
+      intoAnimation.call(this);
+    }
+    this.scene.add(this.tag3CSS2DObj);
+    // 返回给编辑组件的回调函数
+    this.editDev(targetPoint)
  }
-  this.scene.add(this.tag3CSS2DObj);
-  // 返回给编辑组件的回调函数
-  this.editDev(targetPoint);
 }

 function intoAnimation() {
  this.tag3CSS2DObj.element.style.opacity = "1";
  this.tag3CSS2DObj.element.style.display = "block";
 }
+