diff --git a/src/assets/images/break-set.png b/src/assets/images/break-set.png new file mode 100644 index 0000000..7433b05 Binary files /dev/null and b/src/assets/images/break-set.png differ diff --git a/src/assets/images/online-set.png b/src/assets/images/online-set.png new file mode 100644 index 0000000..1069224 Binary files /dev/null and b/src/assets/images/online-set.png differ diff --git a/src/assets/images/wait.png b/src/assets/images/wait.png new file mode 100644 index 0000000..7587d91 Binary files /dev/null and b/src/assets/images/wait.png differ diff --git a/src/views/bim/bimHome/components/MenuTab.vue b/src/views/bim/bimHome/components/MenuTab.vue index 8b3f691..5653ee1 100644 --- a/src/views/bim/bimHome/components/MenuTab.vue +++ b/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: '资产信息', diff --git a/src/views/bim/bimHome/components/ThreeView2.vue b/src/views/bim/bimHome/components/ThreeView2.vue index 048d696..52c12e5 100644 --- a/src/views/bim/bimHome/components/ThreeView2.vue +++ b/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 = `
-
设备名称:${text}
-
状态:启用
-
压力:50 Pa
+
名称:${text}
+
容积:80m³
+
温度:25.2℃
+
压力:15Bar
` //只显示详情 } else if (t === 'details') { @@ -490,28 +493,38 @@ const createLableObj = (text, t) => { // 巡检逻辑 } else { setTimeout(()=>{ - laberDiv.innerHTML = `
巡检中...
`; + laberDiv.innerHTML = `
+
+ + 巡检中 +
+
名称:${text}
+
容积:80m³
+
温度:25.2℃
+
压力:15Bar
+
` },1000) setTimeout(()=>{ laberDiv.className = "laber_state"; let innerHTML = t ? `
-
设备名称:${text}
-
- 巡检结果:巡检通过 +
-
-
- 巡检时间:2023-12-23 -
+ 巡检通过 +
+
名称:${text}
+
容积:80m³
+
温度:25.2℃
+
压力:15Bar
`: `
-
设备名称:${text}
-
- 巡检结果:巡检不通过,已记录异常 - -
-
- 巡检时间:2023-01-11 +
+ + 发现异常
+
名称:${text}
+
容积:80m³
+
温度:25.2℃
+
压力:15Bar
+
已记录
`; laberDiv.innerHTML = innerHTML; @@ -711,19 +724,15 @@ const checkComplete = () => { } } -.laber_name { - width: 120px; - height: 90px; - padding: 5px 10px; - white-space: nowrap; - background-color: #ffffffb3; - border-radius: 12px; - font-size: 12px; - display: flex; - flex-direction: column; - - span { - line-height: 24px; +.arrow_outer { + display: inline-block; + padding: 10px; + background: #999999; + color: #000; + padding: 15px; + border-radius: 5px; + >div { + line-height: 32px; } } @@ -742,13 +751,19 @@ const checkComplete = () => { .arrow_state { display: inline-block; - // width: 200px; - // height: 100px; padding: 10px; - background: #0dbc79; - color: #fff; + background: #68774f; + 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; - color: #fff; + background: #6e5053; + 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);