123

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

@@ -49,14 +49,14 @@ const deviceList = [
     },
     {
         name: '通过数',
-        num: '2',
+        num: '3',
         color: '#fff',
         imgUrl: IconWx,
         icon: 'TakeawayBox'
     },
     {
         name: '未通过数',
-        num: '2',
+        num: '1',
         color: '#fff',
         imgUrl: IconXj,
         icon: 'Box'

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

@@ -49,6 +49,7 @@ import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import TWEEN from "@tweenjs/tween.js";
+import imgs from "../../../../assets/finish.png";
 import {
     CSS2DObject,
     CSS2DRenderer,
@@ -488,11 +489,16 @@ const createLableObj = (text, t) => {
         })
         // 巡检逻辑
     } else {
+        setTimeout(()=>{
+        laberDiv.innerHTML = `<div class="checking"><span class="text">巡检中...</span></div>`;
+      },1000)
+      setTimeout(()=>{
         laberDiv.className = "laber_state";
         let innerHTML = t ? `<div class="arrow_state">
             <div>设备名称：${text}</div>
             <div>
-                巡检结果：巡检通过
+                巡检结果：巡检通过 
+                <img src=${imgs} width="24px"/>
             </div>
             <div>
                 巡检时间：2023-12-23
@@ -501,12 +507,15 @@ const createLableObj = (text, t) => {
             <div>设备名称：${text}</div>
             <div>
                 巡检结果：巡检不通过，已记录异常
+                <img src=${imgs} width="24px"/>
             </div>
             <div>
                 巡检时间：2023-01-11
             </div>
         </div>`;
+
         laberDiv.innerHTML = innerHTML;
+      },3000)
     }
     let pointLabel = new CSS2DObject(laberDiv);
     return pointLabel;
@@ -632,14 +641,14 @@ const check = () => {
          // 2，转动镜头
         gsap.to(controls.target, {
             x: nextObj.x,
-            y: nextObj.y + yn,
+            y: nextObj.y + 2,
             z: nextObj.z,
             duration: duration,
             ease: "power1.inOut",
             onComplete: () => {
                 // 3，移动摄像机
                 gsap.to(camera.position, {
-                    x: nextObj.x,
+                    x: nextObj.x-0.5,
                     y: nextObj.y + yn,
                     z: nextObj.z,
                     duration: 10,
@@ -654,7 +663,7 @@ const check = () => {
                             check()
                             
                         }
-                        }, 2000)
+                        }, 4000)
                         checkindex++;
                     }
                 });
@@ -803,4 +812,54 @@ const checkComplete = () => {
         line-height: 24px;
     }
 }
+.arrow_state {
+  display: inline-block;
+  width: 200px; 
+  background: #2dfa82c4;
+  color: #fff;
+  padding: 15px;
+  border-radius: 5px;
+  >div {
+        line-height: 32px;
+    }
+}
+.arrow_state1 {
+    display: inline-block;
+    background: #e03528;
+    color: #fff;
+    padding: 15px;
+    border-radius: 5px;
+
+    >div {
+        line-height: 32px;
+    }
+}
+@keyframes textAnimation {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+.checking {
+  display: inline-block;
+  width: 100px; 
+  height: 100px; 
+  background: rgb(255, 255, 255);
+  color: #141313;
+  padding: 15px;
+  text-align: center;
+  line-height: 100px;
+  border-radius: 5px;
+  border-radius: 50%;
+  .text{
+    display: inline-block;
+    animation: textAnimation 2s infinite;
+  }
+}
+
 </style>