123
瓶中沙
parent
1f2e5e997b
commit
f6a7456d77
|
|
@ -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: () => {
|
||||
// 显示标签，已经检查通过
|
||||
addLabel(checkArr[checkindex], checkArr[checkindex].isPass);
|
||||
// 如果巡检通过，巡检下一个设备
|
||||
if (checkArr[checkindex].isPass) {
|
||||
setTimeout(() => {
|
||||
check()
|
||||
}, 2000)
|
||||
}
|
||||
setTimeout(() => {
|
||||
check()
|
||||
}, 5000)
|
||||
}
|
||||
});
|
||||
// 显示标签，已经检查通过
|
||||
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>
|
||||
Loading…
Reference in New Issue