Merge pull request '廖杰:风机状态颜色修复+修复选中模式多次发送请求' (#339) from liaojie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/339

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);

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);
       }

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）

src/components/content/tunnelScene/sceneClass/handleRLclick/handleLhover.js

@@ -1,54 +1,57 @@
 export function handleLHover(targetPoint) {
-  // 保存进入状态
+  if (this.tag3CSS2DObj.element.style.opacity != '1') {
-  this._saveState();
+    // 保存进入状态
-  // this.clearTagsObj();
+    this._saveState();
-  // 全局临时标记该选中的模型;
+    // this.clearTagsObj();
-  this.targetPoint = targetPoint;
+    // 全局临时标记该选中的模型;
-  const worldPosition = new this.THREE.Vector3();
+    this.targetPoint = targetPoint;
-  //获取附着点的世界坐标系
+    const worldPosition = new this.THREE.Vector3();
-  targetPoint.getWorldPosition(worldPosition);
+    //获取附着点的世界坐标系
-  this._checkAnimation(worldPosition);
+    targetPoint.getWorldPosition(worldPosition);
+    this._checkAnimation(worldPosition);
 
-  // 设置标签位置
+    // 设置标签位置
-  this.tag3CSS2DObj.position.set(
+    this.tag3CSS2DObj.position.set(
-    worldPosition.x,
+      worldPosition.x,
-    worldPosition.y,
+      worldPosition.y,
-    worldPosition.z
+      worldPosition.z
-  );
+    );
-  this.isControlOrbit(false);
+    this.isControlOrbit(false);
-  this.position = worldPosition;
+    this.position = worldPosition;
-  if (/tr$/.test(targetPoint.name)) {
+    if (/tr$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(3);
+      this.tag3CSS2DObj.translateX(3);
-    this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-5);
+      this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this);
+      intoAnimation.call(this);
-  } else if (/tl$/.test(targetPoint.name)) {
+    } else if (/tl$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(-3);
+      this.tag3CSS2DObj.translateX(-3);
-    this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-5);
+      this.tag3CSS2DObj.translateY(-5);
-    intoAnimation.call(this);
+      intoAnimation.call(this);
-  } else if (/tc$/.test(targetPoint.name)) {
+    } else if (/tc$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(0);
+      this.tag3CSS2DObj.translateX(0);
-    this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(-6);
+      this.tag3CSS2DObj.translateY(-6);
-    intoAnimation.call(this);
+      intoAnimation.call(this);
-  } else if (/br$/.test(targetPoint.name)) {
+    } else if (/br$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(2);
+      this.tag3CSS2DObj.translateX(2);
-    this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(3);
+      this.tag3CSS2DObj.translateY(3);
-    intoAnimation.call(this);
+      intoAnimation.call(this);
-  } else if (/bl$/.test(targetPoint.name)) {
+    } else if (/bl$/.test(targetPoint.name)) {
-    this.tag3CSS2DObj.translateX(-2);
+      this.tag3CSS2DObj.translateX(-2);
-    this.tag3CSS2DObj.translateZ(10);
+      this.tag3CSS2DObj.translateZ(10);
-    this.tag3CSS2DObj.translateY(3);
+      this.tag3CSS2DObj.translateY(3);
-    intoAnimation.call(this);
+      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";
 }
+

src/views/tunnel/index.vue

@@ -36,7 +36,7 @@
     <!-- <tunnel-scene id="tunnel-box" :isedit="false" /> -->
     <!-- 一进去的话应该是预览模式，所以引入这个组件1 -->
     <preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId" :tunnelLen="tunnelLen"
-      :largeScreen="largeScreen"></preview-scene>
+      :largeScreen="largeScreen" :fanList="socketData.leftData"></preview-scene>
     <div class="left">
       <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
         :close-on-click-modal="false" :close-on-press-escape="false">
@@ -52,7 +52,8 @@
         :close-on-click-modal="false" :close-on-press-escape="false">
         <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
           :loading="showWindLoading" />
-        <air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed" :air-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :windSpeed="socketData.windSpeed"
+          :air-data="largeScreenData" />
         <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
           :loading="showBadLoading" />
       </el-drawer>
@@ -475,7 +476,7 @@ const getTunnel = (id) => {
             }
           })
         } else {
-          tunnelList.value=res.data
+          tunnelList.value = res.data
           getScreenInfo(res.data[0]?.value)
         }
       }
@@ -537,7 +538,7 @@ const handleChangeSite = debounce((item) => {
   nextTick(() => {
     showTunnelTitle.value = true
   });
-},100)
+}, 100)
 const closeLeft = () => {
   drawerLeft.value = !drawerLeft.value;
 };
@@ -582,11 +583,12 @@ const initWebSocket = () => {
       data.forEach((item) => {
         if (item.typeKey === "frequency") {
           socketData.leftData = data;
+          // console.log(socketData.leftData);
         } else if (item.typeKey === "windPressure") {
           socketData.windPressure = data;
         } else if (item.typeKey === "sensor") {
           socketData.sensor = data;
-        }else if (item.typeKey === "windSpeed") {
+        } else if (item.typeKey === "windSpeed") {
           socketData.windSpeed = data;
         }
       });