瓶中沙 2024-01-14 23:33:39 +08:00
commit 25024e4f47
15 changed files with 18618 additions and 92 deletions

18426
public/jzc/jz1.gltf Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/images/wait.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -175,6 +175,7 @@ function setLayout() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
background: url('@/assets/images/top_banner_deep.png') no-repeat #000000; background: url('@/assets/images/top_banner_deep.png') no-repeat #000000;
background-size: 100% 100%;
.left { .left {
width: 33%; width: 33%;

View File

@ -11,12 +11,19 @@
</div> </div>
</div> </div>
<div class="right-div"> <div class="right-div">
<img :src="getAssetsFile(infoList.imgUrl)" alt="" width="400"> <!-- <img :src="getAssetsFile(infoList.imgUrl)" alt="" width="400"> -->
<img :src="licang" alt="" width="400" v-if="infoList.imgUrl == 'licang'">
<img :src="guolvcao" alt="" width="400" v-else-if="infoList.imgUrl == 'guolvcao'">
<img :src="device" alt="" width="400" v-else>
<span>设备图片</span> <span>设备图片</span>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import licang from '@/assets/images/licang.jpg';
import guolvcao from '@/assets/images/guolvcao.jpg';
import device from '@/assets/images/device.jpg'
const props = defineProps({ const props = defineProps({
infoList: { infoList: {
default: {}, default: {},

View File

@ -67,7 +67,7 @@ const deviceData = {
}, },
{ {
name: '距离过保天数', name: '距离过保天数',
value: '-34天' value: '314天'
}, },
{ {
name: '设备二维码', name: '设备二维码',
@ -75,7 +75,7 @@ const deviceData = {
}, },
] ]
}, },
'guolvcao': { 'guolvcao_1': {
name: '过滤槽', name: '过滤槽',
imgUrl: 'guolvcao', imgUrl: 'guolvcao',
detail: [ detail: [
@ -125,7 +125,7 @@ const deviceData = {
}, },
{ {
name: '距离过保天数', name: '距离过保天数',
value: '-34天' value: '34天'
}, },
{ {
name: '设备二维码', name: '设备二维码',
@ -199,7 +199,7 @@ const defaultData = {
}, },
{ {
name: '距离过保天数', name: '距离过保天数',
value: '-34天' value: '84天'
}, },
{ {
name: '设备二维码', name: '设备二维码',

View File

@ -67,7 +67,7 @@ const openDialog = () => {
<style lang='scss' scoped> <style lang='scss' scoped>
.deviceDiv { .deviceDiv {
position: absolute; position: absolute;
top: 380px; bottom:20px;
right: 10px; right: 10px;
width: 360px; width: 360px;

View File

@ -46,7 +46,6 @@ watch(() => bimStore().activateDevice.info, value => deviceInfo.value = value);
top: 10px; top: 10px;
right: 10px; right: 10px;
width: 360px; width: 360px;
height: 340px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

View File

@ -54,7 +54,6 @@ const { equipmentInfo } = toRefs(data);
top: 10px; top: 10px;
right: 10px; right: 10px;
width: 360px; width: 360px;
height: 340px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

View File

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

View File

@ -61,7 +61,7 @@ const openDialog = () => {
<style lang='scss' scoped> <style lang='scss' scoped>
.deviceDiv { .deviceDiv {
position: absolute; position: absolute;
top: 380px; bottom: 20px;
right: 10px; right: 10px;
width: 360px; width: 360px;
display: flex; display: flex;

View File

@ -39,6 +39,16 @@
<span class="red"></span>大于3年 <span class="red"></span>大于3年
</p> </p>
</div> </div>
<!-- <div class="stop_tooltips" v-show="isShowstart" @click="stop">
<p>
停止
</p>
</div>
<div class="con_tooltips" v-show="isShowstart" @click="continu">
<p>
继续
</p>
</div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
@ -49,7 +59,9 @@ import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js"; import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import TWEEN from "@tweenjs/tween.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 { import {
CSS2DObject, CSS2DObject,
CSS2DRenderer, CSS2DRenderer,
@ -71,7 +83,7 @@ onMounted(() => {
}); });
// document.addEventListener("mousemove", onMouseMove); // document.addEventListener("mousemove", onMouseMove);
}); });
let scene, renderer, camera, controls, clickedObject, model; let scene, renderer, camera, controls, clickedObject, model, animal1, animal2;
// //
let objArr = []; let objArr = [];
@ -89,9 +101,10 @@ let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
const data = reactive({ const data = reactive({
isAddLabel: true, isAddLabel: true,
isRemoveBottom: true, isRemoveBottom: true,
isShowWall: false // isShowWall: false, //
isShowstart: false
}); });
const { isAddLabel, isRemoveBottom, isShowWall } = toRefs(data); const { isAddLabel, isRemoveBottom, isShowWall, isShowstart } = toRefs(data);
// //
Bus.on('clickBuild', (isParent) => { Bus.on('clickBuild', (isParent) => {
// Todo // Todo
@ -128,8 +141,6 @@ watch(() => bimStore().activateMenu, value => {
// //
scene.background = new THREE.Color(value.background); scene.background = new THREE.Color(value.background);
toHomeView(); toHomeView();
//
removexf();
}, { deep: true }); }, { deep: true });
const init = () => { const init = () => {
@ -148,6 +159,7 @@ const init = () => {
document.getElementById('gltf').appendChild(renderer.domElement); document.getElementById('gltf').appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement); controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 15;
const pmremGenerator = new THREE.PMREMGenerator(renderer); const pmremGenerator = new THREE.PMREMGenerator(renderer);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture; scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
var vector = new THREE.Vector3(); var vector = new THREE.Vector3();
@ -299,6 +311,7 @@ const onMouseDownRight = (event) => {
} }
// //
const onMouseDown = (event) => { const onMouseDown = (event) => {
removeLabel();
var raycaster = new THREE.Raycaster() var raycaster = new THREE.Raycaster()
// threejs // threejs
mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1; mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
@ -364,6 +377,7 @@ const cleanColor = () => {
} }
// //
const warn = () => { const warn = () => {
removeLabel();
['T7'].forEach(item => { ['T7'].forEach(item => {
warnSets.push(scene.getObjectByName(item)); warnSets.push(scene.getObjectByName(item));
}) })
@ -428,6 +442,9 @@ const toHomeView = () => {
cleanColor(); cleanColor();
// //
isShowWall.value = false; isShowWall.value = false;
isShowstart.value = false;
//
removexf();
} }
// //
const nearCamera = (floor) => { const nearCamera = (floor) => {
@ -448,6 +465,7 @@ const nearCamera = (floor) => {
const setLabel = () => { const setLabel = () => {
if (isAddLabel.value) { if (isAddLabel.value) {
let obj = scene.getObjectByName('T11'); let obj = scene.getObjectByName('T11');
console.log(123, obj)
addLabel(obj, 'title'); addLabel(obj, 'title');
} else { } else {
removeLabel(); removeLabel();
@ -474,9 +492,10 @@ const createLableObj = (text, t) => {
if (t === 'title') { if (t === 'title') {
laberDiv.className = "laber_name"; laberDiv.className = "laber_name";
laberDiv.innerHTML = `<div class="arrow_outer"> laberDiv.innerHTML = `<div class="arrow_outer">
<div>设备名称${text}</div> <div>名称${text}</div>
<div>状态启用</div> <div>容积80</div>
<div>压力50 Pa</div> <div>温度25.2</div>
<div>压力15Bar</div>
</div>` </div>`
// //
} else if (t === 'details') { } else if (t === 'details') {
@ -486,32 +505,44 @@ const createLableObj = (text, t) => {
laberDiv.addEventListener('click', function (event) { laberDiv.addEventListener('click', function (event) {
emit('handleRightClick', selectedObject); emit('handleRightClick', selectedObject);
console.log(labelRenderer.domElement); console.log(labelRenderer.domElement);
//
removeLabel();
}) })
// //
} else { } else {
setTimeout(()=>{ 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>容积80</div>
<div>温度25.2</div>
<div>压力15Bar</div>
</div>`
},1000) },1000)
setTimeout(()=>{ setTimeout(()=>{
laberDiv.className = "laber_state"; laberDiv.className = "laber_state";
let innerHTML = t ? `<div class="arrow_state"> let innerHTML = t ? `<div class="arrow_state">
<div>设备名称${text}</div> <div class="title">
<div>
巡检结果巡检通过
<img src=${imgs} width="24px"/> <img src=${imgs} width="24px"/>
</div> <span>巡检通过</span>
<div> </div>
巡检时间2023-12-23 <div>名称${text}</div>
</div> <div>容积80</div>
<div>温度25.2</div>
<div>压力15Bar</div>
</div>`: `<div class="arrow_state1"> </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>
<div>名称${text}</div>
<div>容积80</div>
<div class="ycdiv">温度25.2</div>
<div>压力15Bar</div>
<div class="title">已记录</div>
</div>`; </div>`;
laberDiv.innerHTML = innerHTML; laberDiv.innerHTML = innerHTML;
@ -530,6 +561,7 @@ const removeLabel = () => {
// //
const setBottom = () => { const setBottom = () => {
removeLabel();
var target = scene.getObjectByName('tanghua_2F'); var target = scene.getObjectByName('tanghua_2F');
centerSelectedGroup(target); centerSelectedGroup(target);
console.log(target); console.log(target);
@ -590,7 +622,9 @@ const removexf = () => {
} }
// //
const changeMap = (img) => { const changeMap = (img) => {
removeLabel();
isShowWall.value = true; isShowWall.value = true;
isShowstart.value = false;
// //
model.traverse(e => { model.traverse(e => {
if (['touliao_wall1', 'touliao_wall2', 'touliao_wall3', 'touliao_wall4', 'touliao_wall5', 'touliao_wall6', 'touliao_wall7', 'touliao_wall8'].indexOf(e.name) != -1) { if (['touliao_wall1', 'touliao_wall2', 'touliao_wall3', 'touliao_wall4', 'touliao_wall5', 'touliao_wall6', 'touliao_wall7', 'touliao_wall8'].indexOf(e.name) != -1) {
@ -623,6 +657,9 @@ const changeMap = (img) => {
} }
// //
const check = () => { const check = () => {
isShowstart.value = true;
isShowWall.value = false;
removeLabel();
let yn = 8, duration = 0; let yn = 8, duration = 0;
if (checkindex < checkArr.length ) { if (checkindex < checkArr.length ) {
// 1 // 1
@ -639,18 +676,19 @@ const check = () => {
duration = 10 duration = 10
} }
// 2 // 2
gsap.to(controls.target, { animal1 = gsap.to(controls.target, {
x: nextObj.x, x: nextObj.x,
y: nextObj.y + 2, y: nextObj.y,
z: nextObj.z, z: nextObj.z,
duration: duration, duration: duration,
ease: "power1.inOut", ease: "power1.inOut",
onComplete: () => { onComplete: () => {
controls.enabled = false;
// 3 // 3
gsap.to(camera.position, { animal2 = gsap.to(camera.position, {
x: nextObj.x-0.5, x: nextObj.x + 2,
y: nextObj.y + yn, y: nextObj.y + 6,
z: nextObj.z, z: nextObj.z + 4,
duration: 10, duration: 10,
ease: 'power1.inOut', ease: 'power1.inOut',
onComplete: () => { onComplete: () => {
@ -678,7 +716,14 @@ const checkComplete = () => {
emit('checkComplete', checkArr); emit('checkComplete', checkArr);
return; return;
} }
const stop = () => {
animal1.pause();
animal2.pause();
}
const continu = () => {
animal1.resume();
animal2.resume();
}
</script> </script>
<style lang='scss'> <style lang='scss'>
#gltf { #gltf {
@ -711,19 +756,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;
} }
} }
@ -739,6 +780,71 @@ const checkComplete = () => {
justify-content: center; justify-content: center;
z-index: 999; z-index: 999;
} }
.arrow_state {
display: inline-block;
padding: 10px;
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;
}
}
.arrow_state1 {
display: inline-block;
padding: 10px;
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;
}
}
.wall_tooltips { .wall_tooltips {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -773,39 +879,23 @@ const checkComplete = () => {
} }
} }
} }
.arrow_outer { .stop_tooltips, .con_tooltips {
width: 100px; position: absolute;
bottom: 50px;
right: 500px;
z-index: 999;
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
>div {
line-height: 24px;
}
}
.arrow_state {
display: inline-block;
width: 220px;
background: #2dfa82c4;
color: #fff;
padding: 15px;
border-radius: 5px;
>div {
line-height: 32px;
}
}
.arrow_state1 {
display: inline-block;
width: 220px;
background: #e03528;
color: #fff; color: #fff;
padding: 15px; width: 50px;
border-radius: 5px; height: 50px;
border-radius: 50%;
>div { justify-content: space-around;
line-height: 32px; align-items: center;
} background: #3cbfdf;
cursor: pointer;
}
.con_tooltips {
right: 560px;
} }
@keyframes textAnimation { @keyframes textAnimation {
0% { 0% {

View File

@ -21,7 +21,10 @@ const getCharts = () => {
var myChart = echarts.init(dom); var myChart = echarts.init(dom);
let option = { let option = {
title: { title: {
text: '' text: '资产统计分析图',
textStyle: {
color: "#fff",
},
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -30,6 +33,7 @@ const getCharts = () => {
} }
}, },
legend: { legend: {
bottom: 0,
textStyle: { textStyle: {
color: "#ffff", color: "#ffff",
fontFamily: "Alibaba PuHuiTi", fontFamily: "Alibaba PuHuiTi",
@ -40,7 +44,7 @@ const getCharts = () => {
grid: { grid: {
left: '12%', left: '12%',
right: '4%', right: '4%',
bottom: '5%' bottom: '10%'
}, },
xAxis: [ xAxis: [
{ {

View File

@ -81,7 +81,7 @@ const gotoPage = (item) => {
.pie-div { .pie-div {
position: absolute; position: absolute;
width: 400px; width: 400px;
height: 360px; height: 45%;
top: 10px; top: 10px;
left: 10px; left: 10px;
padding: 15px; padding: 15px;
@ -90,7 +90,7 @@ const gotoPage = (item) => {
.bar-div { .bar-div {
position: absolute; position: absolute;
width: 400px; width: 400px;
height: 818px; height: 98.4%;
top: 10px; top: 10px;
right: 10px; right: 10px;
padding: 15px; padding: 15px;
@ -99,7 +99,7 @@ const gotoPage = (item) => {
.xt-bar-div { .xt-bar-div {
position: absolute; position: absolute;
width: 400px; width: 400px;
height: 460px; height: 52%;
bottom: 5px; bottom: 5px;
left: 10px; left: 10px;
padding: 15px; padding: 15px;
@ -110,7 +110,7 @@ const gotoPage = (item) => {
top: 10px; top: 10px;
left: 420px; left: 420px;
width: calc(100% - 840px); width: calc(100% - 840px);
height: 200px; height: 25%;
padding: 15px; padding: 15px;
background-image: linear-gradient(to bottom,rgba(30,45,123,.7),rgba(174,179,249,.1)); background-image: linear-gradient(to bottom,rgba(30,45,123,.7),rgba(174,179,249,.1));
} }
@ -119,7 +119,7 @@ const gotoPage = (item) => {
bottom: 5px; bottom: 5px;
left: 420px; left: 420px;
width: calc(100% - 840px); width: calc(100% - 840px);
height: 200px; height: 25%;
padding: 15px; padding: 15px;
// background: #b2cae0; // background: #b2cae0;
background-image: linear-gradient(to top,rgba(30,45,123,.7),rgba(174,179,249,.1)); background-image: linear-gradient(to top,rgba(30,45,123,.7),rgba(174,179,249,.1));