123

src/views/bim/bimHome/components/ThreeView2.vue

@@ -12,12 +12,32 @@
             <div class="button" @click="setBottom()">
                 {{ isRemoveBottom ? '移除地板' : '恢复地板' }}
             </div>
-            <div class="button" @click="roam()">
+            <!-- <div class="button" @click="roam()">
                 漫游
+            </div> -->
+            <div class="button" @click="warn()">
+                查看预警设备
             </div>
             <div class="button" @click="check()">
                 巡检
             </div>
+            <div class="button" @click="changeMap()">
+                墙体寿命
+            </div>
+        </div>
+        <div class="wall_tooltips" v-show="isShowWall">
+            <p>
+                <span class="qing"></span>小于1年
+            </p>
+            <p>
+                <span class="blue"></span>大于1年小于2年
+            </p>
+            <p>
+                <span class="yellow"></span>大于2年小于3年
+            </p>
+            <p>
+                <span class="red"></span>大于3年
+            </p>
         </div>
     </div>
 </template>
@@ -64,6 +84,9 @@ let romeObj = []
 let checkArr = [];
 let checkindex = 0;
 
+//墙体
+let isShowWall = false;
+
 let mouse = new THREE.Vector2();
 let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
 const data = reactive({
@@ -191,10 +214,7 @@ const loadSence = () => {
         })
 
         scene.add(model);
-        // 将预警设备染色
+        
-        warn();
-        // 更换墙体纹理
-        changeMap();
     });
 };
 const renderScene = () => {
@@ -457,6 +477,10 @@ const toHomeView = () => {
     isAddLabel.value = true;
     // 清除精灵图
     controls.reset();
+    // 恢复初始颜色
+    cleanColor();
+    // 隐藏图例
+    isShowWall = false;
 }
 // 拉近距离
 const nearCamera = (floor) => {
@@ -515,7 +539,18 @@ const createLableObj = (text, t) => {
         // 巡检逻辑
     } else {
         laberDiv.className = "laber_state";
-        laberDiv.innerHTML = `<div class="arrow_state"><span>设备名称：${text}</span><span>是否通过：${t ? '通过' : '停下，巡检没通过'}</span></div>`
+        laberDiv.innerHTML = `<div class="arrow_state">
+            <div>设备名称：${text}</div>
+            <div>
+                是否通过：
+                <span class="pass" v-if="${t}">
+                    通过,检查下一个
+                <span>
+                <span class="nopass" v-else-if="${!t}">
+                    不通过,已记录异常，检查下一个
+                <span>
+            </div>
+        </div>`
     }
     let pointLabel = new CSS2DObject(laberDiv);
     return pointLabel;
@@ -567,6 +602,7 @@ const xfadd = (obj, state) => {
 }
 // 更换纹理贴图方法
 const changeMap = (img) => {
+    isShowWall = true;
     // 获取墙体
     model.traverse(e => {
         if (['wallnew1', 'wallnew2', 'wallnew3', 'wallnew4'].indexOf(e.name) != -1) {
@@ -574,27 +610,35 @@ const changeMap = (img) => {
             e.material = new THREE.MeshBasicMaterial({
                 transparent: true,
                 opacity: 0.5,
-                color: new THREE.Color('rgb( 3,95,180)')
+                color: new THREE.Color('rgb( 88,211,247)')
             });
         } else if (['wall1988_01', 'wall1988_02', 'wall1988_03'].indexOf(e.name) != -1) {
             e.material = new THREE.MeshBasicMaterial({
                 transparent: true,
                 opacity: 0.5,
-                color: new THREE.Color('rgb( 180,95,4 )')
+                color: new THREE.Color('rgb( 0,128,255)')
             });
         } else if (['wall2010_01', 'wall2010_02'].indexOf(e.name) != -1) {
             e.material = new THREE.MeshBasicMaterial({
                 transparent: true,
                 opacity: 0.5,
-                color: new THREE.Color('rgb(4,180,134)')
+                color: new THREE.Color('rgb(247,254,46)')
+            });
+        } else if (['wall2022_01'].indexOf(e.name) != -1) {
+            e.material = new THREE.MeshBasicMaterial({
+                transparent: true,
+                opacity: 0.5,
+                color: new THREE.Color('rgb(253,45,45)')
             });
         }
     })
+    console.log(123, isShowWall)
 }
 // 巡检
 const check = () => {
     if (currentIndex < romeObj.length) {
         var checkPosition = checkArr[checkindex].getWorldPosition(new THREE.Vector3());
+        
         gsap.to(camera.position, {
             x: checkPosition.x,
             y: checkPosition.y + 5.2,
@@ -602,16 +646,13 @@ const check = () => {
             duration: 10,
             ease: 'power1.inOut',
             onComplete: () => {
-                // 显示标签，已经检查通过
+                setTimeout(() => {
-                addLabel(checkArr[checkindex], checkArr[checkindex].isPass);
+                    check()
-                // 如果巡检通过，巡检下一个设备
+                }, 5000)
-                if (checkArr[checkindex].isPass) {
-                    setTimeout(() => {
-                        check()
-                    }, 2000)
-                }
             }
         });
+        // 显示标签，已经检查通过
+        addLabel(checkArr[checkindex], checkArr[checkindex].isPass);
         let nextObj;
         if (checkindex == checkArr.length - 1) {
             nextObj = checkArr[0].getWorldPosition(new THREE.Vector3())
@@ -631,6 +672,7 @@ const check = () => {
         console.log('nextObj', checkindex)
     }
 }
+
 </script>
 <style lang='scss'>
 #gltf {
@@ -653,6 +695,7 @@ const check = () => {
         cursor: pointer;
         // background: #0549a7;
         border: 1px solid #3cbfdf;
+        background: rgba(0,0,0,.8);
         width: 110px;
         height: 40px;
         border-radius: 5px;
@@ -695,8 +738,43 @@ const check = () => {
     display: inline-block;
     width: 200px;
     height: 100px;
-    background: red;
+    background: rgb(33, 248, 255);
     color: #fff;
     padding: 15px;
 }
+.wall_tooltips {
+    position: absolute;
+    top: 20px;
+    left: 400px;
+    z-index: 999;
+    display: flex;
+    color: #fff;
+    width: 600px;
+    justify-content: space-around;
+    align-items: center;
+    span {
+        display: inline-block;
+        width: 16px;
+        height: 8px;
+        margin-right: 5px;
+        &.qing {
+            background:#3cbfdf;
+        }
+        &.blue {
+            background: #2c68f3;
+        }
+        &.yellow {
+            background: #dff04e;
+        }
+        &.red {
+            background: red;
+        }
+    }
+}
+.pass {
+    color: #0caf71;
+}
+.nopass {
+    color: #fc1818;
+}
 </style>