巡检弹出框

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

@@ -12,7 +12,7 @@ import Bus from '@/utils/bus.js';
 const menuList = [
     {
         name: '建筑信息',
-        background: '#000000'
+        background: '#091d36'
     },
     {
         name: '资产信息',

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

@@ -49,7 +49,9 @@ 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 imgs from "../../../../assets/images/online-set.png";
+import imgs1 from "../../../../assets/images/break-set.png";
+import imgs2 from "../../../../assets/images/wait.png";
 import {
     CSS2DObject,
     CSS2DRenderer,
@@ -474,9 +476,10 @@ const createLableObj = (text, t) => {
     if (t === 'title') {
         laberDiv.className = "laber_name";
         laberDiv.innerHTML = `<div class="arrow_outer">
-            <div>设备名称：${text}</div>
+            <div>名称：${text}</div>
-            <div>状态：启用</div>
+            <div>容积：80m³</div>
-            <div>压力：50 Pa</div>
+            <div>温度：25.2℃</div>
+            <div>压力：15Bar</div>
             </div>`
         //只显示详情
     } else if (t === 'details') {
@@ -490,28 +493,38 @@ const createLableObj = (text, t) => {
         // 巡检逻辑
     } else {
         setTimeout(()=>{
-        laberDiv.innerHTML = `<div class="checking"><span class="text">巡检中...</span></div>`;
+        laberDiv.innerHTML = `<div class="arrow_state2">
+            <div class="title">
+                <img src=${imgs2} width="24px"/>
+                <span>巡检中</span>
+            </div>
+            <div>名称：${text}</div>
+            <div>容积：80m³</div>
+            <div>温度：25.2℃</div>
+            <div>压力：15Bar</div>
+        </div>`
       },1000)
       setTimeout(()=>{
         laberDiv.className = "laber_state";
         let innerHTML = t ? `<div class="arrow_state">
-            <div>设备名称：${text}</div>
+            <div class="title">
-            <div>
-                巡检结果：巡检通过 
                 <img src=${imgs} width="24px"/>
+                <span>巡检通过</span>
                 </div>
-            <div>
+            <div>名称：${text}</div>
-                巡检时间：2023-12-23
+            <div>容积：80m³</div>
-            </div>
+            <div>温度：25.2℃</div>
+            <div>压力：15Bar</div>
         </div>`: `<div class="arrow_state1">
-            <div>设备名称：${text}</div>
+            <div class="title">
-            <div>
+                <img src=${imgs1} width="24px"/>
-                巡检结果：巡检不通过，已记录异常
+                <span>发现异常</span>
-                <img src=${imgs} width="24px"/>
-            </div>
-            <div>
-                巡检时间：2023-01-11
             </div>
+            <div>名称：${text}</div>
+            <div>容积：80m³</div>
+            <div class="ycdiv">温度：25.2℃</div>
+            <div>压力：15Bar</div>
+            <div class="title">已记录</div>
         </div>`;
 
         laberDiv.innerHTML = innerHTML;
@@ -711,19 +724,15 @@ const checkComplete = () => {
     }
 }
 
-.laber_name {
+.arrow_outer {
-    width: 120px;
+    display: inline-block;
-    height: 90px;
+    padding: 10px;
-    padding: 5px 10px;
+    background: #999999;
-    white-space: nowrap;
+    color: #000;
-    background-color: #ffffffb3;
+    padding: 15px;
-    border-radius: 12px;
+    border-radius: 5px;
-    font-size: 12px;
+    >div {
-    display: flex;
+        line-height: 32px;
-    flex-direction: column;
-
-    span {
-        line-height: 24px;
     }
 }
 
@@ -742,13 +751,19 @@ const checkComplete = () => {
 
 .arrow_state {
     display: inline-block;
-    // width: 200px;
-    // height: 100px;
     padding: 10px;
-    background: #0dbc79;
+    background: #68774f;
-    color: #fff;
+    color: #000;
     padding: 15px;
     border-radius: 5px;
+    .title {
+        color: #81b337;
+        display: flex;
+        align-items: center;
+        span{
+            margin-left:5px;
+        }
+    }
 
     >div {
         line-height: 32px;
@@ -758,11 +773,41 @@ const checkComplete = () => {
 .arrow_state1 {
     display: inline-block;
     padding: 10px;
-    background: #e03528;
+    background: #6e5053;
-    color: #fff;
+    color: #000;
     padding: 15px;
     border-radius: 5px;
-
+    .title {
+        color: #bd3124;
+        display: flex;
+        align-items: center;
+        span{
+            margin-left:5px;
+        }
+    }
+    .ycdiv {
+        border: 1px solid #bd3124;
+        padding: 2px 5px;
+    }
+    >div {
+        line-height: 32px;
+    }
+}
+.arrow_state2 {
+    display: inline-block;
+    padding: 10px;
+    background: #999999;
+    color: #000;
+    padding: 15px;
+    border-radius: 5px;
+    .title {
+        color: #d79c55;
+        display: flex;
+        align-items: center;
+        span{
+            margin-left:5px;
+        }
+    }
     >div {
         line-height: 32px;
     }
@@ -802,38 +847,6 @@ const checkComplete = () => {
         }
     }
 }
-.arrow_outer {
-    width: 100px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    >div {
-        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);