瓶中沙 2024-01-11 11:57:41 +08:00
parent a597d7bc57
commit f2f8b474ca
3 changed files with 65 additions and 6 deletions

BIN
src/assets/finish.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -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'

View File

@ -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>