wangqiujuan0808
/
bw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

main
wangqiujuan0808 2023-12-15 19:43:23 +08:00
parent f4f30f1863 c7b62bef1c
commit bebbe51b73
36 changed files with 141807 additions and 662668 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/jz/glb/Floor.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.2 KiB

BIN
public/jz/glb/glass1.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.8 KiB

BIN
public/jz/glb/jz.bin
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 MiB

23
public/jz/glb/model.json
View File

@ -1,23 +0,0 @@
{
"metadata": {
"version": 4.6,
"type": "Object",
"generator": "Object3D.toJSON"
},
"object": {
"uuid": "d5126c66-4d01-4921-a537-14d53e6f1e6b",
"type": "PerspectiveCamera",
"name": "Camera",
"layers": 1,
"matrix": [-0.06562201141132419,0,-0.9978445528329212,0,-0.7132741706287389,0.6993136887478822,0.04690759260199039,0,0.6978063550385712,0.7148149164153124,-0.04589037086310866,0,155.382,155.10629237063554,-56.571004917885546,1],
"up": [0,1,0],
"fov": 50,
"zoom": 1,
"near": 0.01,
"far": 1000,
"focus": 10,
"aspect": 1.7215727948990436,
"filmGauge": 35,
"filmOffset": 0
}
}

BIN
public/jz/glb/scene.glb
View File

Binary file not shown.

134813
public/jz/glb/scene.gltf
View File

File diff suppressed because one or more lines are too long

BIN
public/jz/glb/柱子.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
public/jz/glb/金属-卷帘门.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 194 KiB

BIN
public/jzc.7z
View File

Binary file not shown.

1
public/jzc/jz.gltf
View File

File diff suppressed because one or more lines are too long

357522
public/jzc/scene.gltf
View File

File diff suppressed because one or more lines are too long

147286
public/jzc/scene1.gltf
View File

File diff suppressed because one or more lines are too long

141649
public/jzc/scene2.gltf
View File

File diff suppressed because one or more lines are too long

BIN
public/yg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
public/ygr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/assets/images/cao.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
src/assets/images/licang.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

14
src/layoutMain/components/Navbar.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="navbar1">
<div class="navbar1" :style="{'backgroundColor' : background}">
<!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
<div class="left">
<!-- <img src="@/assets/logo/logo.png" alt="dark" /> -->
@ -8,7 +8,7 @@
</span>
</div>
<div class="middle">
BIM运维管理系统
BIM运维管理系统{{ test }}
</div>
<div class="right-menu">
<template v-if="appStore.device !== 'mobile'">
@ -71,7 +71,9 @@ import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
import dayjs from "dayjs";
import { computed } from 'vue'
const router = useRouter();
import bimStore from '@/store/modules/bim';
const appStore = useAppStore()
const userStore = useUserStore()
@ -81,9 +83,10 @@ const data = reactive({
interval: "",
currentTime: "",
time: "",
week: ""
week: "",
background: ''
});
const { interval, currentTime, time, week } = toRefs(data);
const { interval, currentTime, time, week,background } = toRefs(data);
onMounted(() => {
interval.value = setInterval(updateTime, 1000);
@ -91,6 +94,9 @@ onMounted(() => {
onUnmounted(() => {
clearInterval(interval.value);
});
watch(() => bimStore().activateMenu, value => background.value = value.background);
function toggleSideBar() {
appStore.toggleSideBar()
}

31
src/views/bim/bimHome/components/ApplicationTree.vue
View File

@ -37,14 +37,9 @@ const data = reactive({
{
label: '消防系统',
id: '0-1',
url: '/jz/glb/scene.gltf'
},
{
label: '电力系统',
id: '0-2',
url: '/seraphine/scene.gltf'
},
url: '/jz/glb/scene.gltf',
children:[]
}
],
},
@ -55,17 +50,17 @@ const { applicationValue, treeData, checkedkeys } = toRefs(data);
const emit = defineEmits(['handleNodeClick'])
onMounted(() => {
nextTick(() => {
checkedkeys.value = treeData.value[0].children[0].id;
// myTree.setCurrentKey(checkedkeys.value);
bimStore().setActivateApplicationTree(treeData.value[0].children[0]);
handleNodeClick(treeData.value[0].children[0]);
checkedkeys.value = treeData.value[0].id;
bimStore().setActivateApplicationTree(treeData.value[0]);
handleNodeClick(treeData.value[0]);
})
});
const handleNodeClick = (value) => {
bimStore().setActivateTree(value);
const isParent = value.children.length > 0;
emit('handleNodeClick', value);
setTimeout(() => {
Bus.emit('clickApplication');
Bus.emit('clickApplication', isParent );
}, 100)
}
@ -86,17 +81,11 @@ const handleNodeClick = (value) => {
width: 224px;
margin: 0 10px;
background: transparent;
color: #3cbfdf;
color: #fff;
}
.el-select {
margin: 10px;
}
:deep(.el-input__wrapper) {
background: transparent;
}
:deep(.el-input__inner) {
color: #3cbfdf;
}
}
</style>

6
src/views/bim/bimHome/components/BasicInfo.vue
View File

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

40
src/views/bim/bimHome/components/BuildInfo.vue
View File

@ -10,14 +10,46 @@
<span class="name">面积</span>
<span class="text">{{ buildInfo.area }}</span>
</div>
<div>
<span class="name">墙体厚度</span>
<span class="text">{{ buildInfo.qthd }}</span>
</div>
<div>
<span class="name">材料类型</span>
<span class="text">{{ buildInfo.cllx }}</span>
</div>
<div>
<span class="name">保温层类型</span>
<span class="text">{{ buildInfo.bwclx }}</span>
</div>
<div>
<span class="name">饰面材料</span>
<span class="text">{{ buildInfo.smcl }}</span>
</div>
<div>
<span class="name">承重能力</span>
<span class="text">{{ buildInfo.cznl }}</span>
</div>
<div>
<span class="name">状态</span>
<span class="text">{{ buildInfo.status }}</span>
</div>
<div>
<span class="name">启用日期</span>
<span class="text">{{ buildInfo.date }}</span>
</div>
<div>
<span class="name">上次修缮日期</span>
<span class="text">{{ buildInfo.lastDate }}</span>
</div>
<div>
<span class="name">描述</span>
<span class="text">{{ buildInfo.desc }}</span>
</div>
<!-- <div>
<span class="name">备注</span>
<span class="text">{{ buildInfo.remark }}</span>
</div> -->
</dv-border-box-10>
</div>
</template>
@ -35,7 +67,7 @@ const buildInfo = computed(() => bimStore().activateTree.info);
// background: #0a1f2e;
// border: 1px solid red;
width: 360px;
height: 340px;
// height: 420px;
display: flex;
flex-direction: column;
align-items: center;
@ -43,15 +75,15 @@ const buildInfo = computed(() => bimStore().activateTree.info);
:deep(.border-box-content) {
padding: 10px;
>div {
line-height: 48px;
line-height: 36px;
display: flex;
justify-content: space-between;
}
.name {
width: 25%;
width: 40%;
}
.text {
width: 75%;
width: 59%;
color: #fff;
}
}

61
src/views/bim/bimHome/components/BuildTree.vue
View File

@ -42,8 +42,16 @@ const data = reactive({
info: {
name: '原料糖化车间',
area: '9436 ㎡',
qthd: '14 cm',
cllx: '砖石/混凝土/钢结构',
bwclx: '外墙保温',
smcl: '乳胶漆',
cznl: '22 kPa',
status: '启用',
desc: '原料糖化车间，负责原料糖化，启用于2011年'
date: '2021年11月11日',
lastDate: '2022年2月3日',
desc: '原料糖化车间，负责原料糖化，启用于2011年',
remark: '备注'
},
deviceInfo: [
{
@ -74,8 +82,16 @@ const data = reactive({
info: {
name: '糖化间',
area: '9436 ㎡',
qthd: '34 cm',
cllx: '钢结构',
bwclx: '外墙保温',
smcl: '乳胶漆',
cznl: '22 kPa',
status: '启用',
desc: '糖化间，负责原料糖化，启用于2011年'
date: '2021年3月11日',
lastDate: '2022年5月20日',
desc: '原料糖化车间，负责原料糖化，启用于2011年',
remark: '备注'
},
deviceInfo: [
{
@ -106,9 +122,17 @@ const data = reactive({
clickName: 'yuanliao_room',
info: {
name: '原料处理间',
area: '9436 ㎡',
area: '36 ㎡',
qthd: '4 cm',
cllx: '混凝土',
bwclx: '外墙保温',
smcl: '乳胶漆',
cznl: '22 kPa',
status: '启用',
desc: '原料糖化车间，负责原料糖化，启用于2011年'
date: '2013年11月11日',
lastDate: '2020年12月3日',
desc: '原料糖化车间，负责原料糖化，启用于2011年',
remark: '备注'
},
deviceInfo: [
{
@ -139,9 +163,17 @@ const data = reactive({
clickName: 'touliao_room',
info: {
name: '投料间',
area: '836 ㎡',
area: '936 ㎡',
qthd: '15 cm',
cllx: '砖石/混凝土/钢结构',
bwclx: '内墙保温',
smcl: '石材',
cznl: '12 kPa',
status: '启用',
desc: '投料间，负责原料糖化，启用于2011年'
date: '20200年11月11日',
lastDate: '2022年2月3日',
desc: '原料糖化车间，负责原料糖化，启用于2011年',
remark: '备注'
},
deviceInfo: [
{
@ -173,6 +205,23 @@ const data = reactive({
});
const { buildValue, treeData, checkedkeys } = toRefs(data);
const emit = defineEmits(['handleNodeClick'])
Bus.on('handleTreeClick', (obj) => {
let o = treeData.value[0].children.find(ele => {
return ele.clickName == obj.parent.name;
})
if (o) {
nextTick(() => {
checkedkeys.value = o.id;
handleNodeClick(o);
})
}
})
onUnmounted(() => {
Bus.off("handleTreeClick")// 清除监听
});
onMounted(() => {
nextTick(() => {
checkedkeys.value = treeData.value[0].id;

8
src/views/bim/bimHome/components/DeviceDetial.vue
View File

@ -17,9 +17,9 @@ import RealInfo from './RealInfo.vue';
import HistoryInfo from './HistoryInfo.vue';
import { ElMessage } from 'element-plus';
const deviceData = {
'EQ0001': {
'set1': {
name: '立仓',
imgUlr: '',
imgUrl: 'licang',
detail: [
{
name: '资产名称',
@ -75,9 +75,9 @@ const deviceData = {
},
]
},
'EQ0002': {
'set6': {
name: '过滤槽',
imgUlr: '',
imgUrl: 'guolvcao',
detail: [
{
name: '资产名称',

10
src/views/bim/bimHome/components/DeviceEvent.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="deviceDiv">
<TopDiv title="资产事件"></TopDiv>
<TopDiv title="资产事件" showMore="true"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<el-timeline>
<el-timeline-item v-for="(activity, index) in activities" :key="index" placement="top" :icon="activity.icon"
@ -19,8 +19,8 @@
</el-timeline-item>
</el-timeline>
</dv-border-box-10>
<div class="box-button" @click="openDialog">
</div>
<!-- <div class="box-button" @click="openDialog">
</div> -->
</div>
</template>
<script setup>
@ -33,7 +33,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '下午',
timestamp: '20:46',
color: '#87efd0e9',
color: '#08326f',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -51,7 +51,7 @@ const data = reactive({
content: '设备保养周期剩余3天',
time: '上午',
timestamp: '11:46',
color: '#6eebe3',
color: '#02a7f0',
icon: MoreFilled,
type: 'primary',
size: 'large'

22
src/views/bim/bimHome/components/DeviceInfo.vue
View File

@ -3,17 +3,29 @@
<TopDiv title="资产信息"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<div>
<span class="name">名称</span>
<span class="name">资产名称</span>
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
</div>
<div>
<span class="name">类型</span>
<span class="name">资产类型</span>
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
</div>
<div>
<span class="name">状态</span>
<span class="name">资产状态</span>
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
</div>
<div>
<span class="name">资产位置</span>
<span class="text">{{ deviceInfo && deviceInfo.location }}</span>
</div>
<div>
<span class="name">所属厂区</span>
<span class="text">{{ deviceInfo && deviceInfo.belong }}</span>
</div>
<div>
<span class="name">过保截至日期</span>
<span class="text">{{ deviceInfo && deviceInfo.date }}</span>
</div>
</dv-border-box-10>
</div>
</template>
@ -50,11 +62,11 @@ watch(() => bimStore().activateDevice.info, value => deviceInfo.value = value);
}
.name {
width: 25%;
width: 40%;
}
.text {
width: 75%;
width: 59%;
color: #fff;
}
}

24
src/views/bim/bimHome/components/DeviceInfoDialog.vue
View File

@ -59,28 +59,28 @@ const data = reactive({
{
type: '生产设备',
name: '立仓',
num: 'EQ0001',
num: 'set1',
value: 45,
id: "echartDiv0"
},
{
type: '生产设备',
name: '过滤槽',
num: 'EQ0002',
num: 'set6',
value: 130,
id: "echartDiv1"
},
{
type: '安防设备',
name: '摄像头',
num: 'EQ0001',
num: 'set1',
value: 180,
id: "echartDiv2"
},
{
type: '消防设备',
name: '烟感',
num: 'EQ0001',
num: 'set1',
value: 100,
id: "echartDiv3"
}
@ -101,28 +101,28 @@ const data = reactive({
{
type: '生产设备',
name: '立仓',
num: 'EQ0001',
num: 'set1',
value: 15,
id: "echartDiv0"
},
{
type: '生产设备',
name: '过滤槽',
num: 'EQ0002',
num: 'set6',
value: 50,
id: "echartDiv1"
},
{
type: '安防设备',
name: '摄像头',
num: 'EQ0001',
num: 'set1',
value: 80,
id: "echartDiv2"
},
{
type: '消防设备',
name: '烟感',
num: 'EQ0001',
num: 'set1',
value: 50,
id: "echartDiv3"
}
@ -144,28 +144,28 @@ const data = reactive({
{
type: '生产设备',
name: '立仓',
num: 'EQ0001',
num: 'set1',
value: 30,
id: "echartDiv0"
},
{
type: '生产设备',
name: '过滤槽',
num: 'EQ0002',
num: 'set6',
value: 80,
id: "echartDiv1"
},
{
type: '安防设备',
name: '摄像头',
num: 'EQ00011',
num: 'set1',
value: 100,
id: "echartDiv2"
},
{
type: '消防设备',
name: '烟感',
num: 'EQ0002',
num: 'set1',
value: 50,
id: "echartDiv3"
}

10
src/views/bim/bimHome/components/DevicePie.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="deviceDiv">
<TopDiv title="资产信息"></TopDiv>
<TopDiv title="资产信息" showMore="true"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<!-- <div class="container1">
@ -10,8 +10,8 @@
</div>
</dv-border-box-10>
<div class="box-button" @click="openDialog">
</div>
<!-- <div class="box-button" @click="openDialog">
</div> -->
</div>
</template>
<script setup>
@ -69,10 +69,10 @@ const openDialog = () => {
<style lang='scss' scoped>
.deviceDiv {
position: absolute;
top: 380px;
bottom: 20px;
right: 10px;
width: 360px;
height: 380px;
height: 330px;
display: flex;
flex-direction: column;
align-items: center;

99
src/views/bim/bimHome/components/DeviceTree.vue
View File

@ -36,7 +36,10 @@ const data = reactive({
info: {
name: '生产设备',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: [
{
@ -46,53 +49,111 @@ const data = reactive({
info: {
name: '立仓',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2028-10-15'
},
children: []
},
{
label: '过滤槽',
id: '0-1',
id: '0-2',
clickName: 'set6',
info: {
name: '过滤槽',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2067-12-30'
},
children: []
},
{
label: '设备二',
id: '0-2',
id: '0-3',
clickName: 'set2',
info: {
name: '设备二',
type: '生产设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
{
label: '设备三',
id: '0-3',
id: '0-4',
clickName: 'set3',
info: {
name: '设备三',
type: '空调设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
{
label: '设备四',
id: '0-4',
id: '0-5',
clickName: 'set4',
info: {
name: '设备四',
type: '安防设备',
status: '启用'
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
{
label: '设备五',
id: '0-6',
clickName: 'set5',
info: {
name: '设备五',
type: '安防设备',
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
{
label: '设备七',
id: '0-7',
clickName: 'set7',
info: {
name: '设备七',
type: '安防设备',
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
{
label: '设备八',
id: '0-8',
clickName: 'set8',
info: {
name: '设备八',
type: '安防设备',
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
},
children: []
},
@ -109,6 +170,24 @@ onMounted(() => {
handleNodeClick(treeData.value[0]);
})
});
Bus.on('handleTreeClick1', (obj) => {
let o = treeData.value[0].children.find(ele => {
return ele.clickName == obj.parent.name;
})
console.log(123, obj.parent.name);
if (o) {
nextTick(() => {
checkedkeys.value = o.id;
handleNodeClick(o);
})
}
})
onUnmounted(() => {
Bus.off("handleTreeClick")// 清除监听
});
const handleNodeClick = (value) => {
bimStore().setActivateDeviceTree(value);
const isParent = value.children.length > 0;

26
src/views/bim/bimHome/components/EquipmentInfo.vue
View File

@ -15,6 +15,18 @@
<span class="name">设备状态</span>
<span class="text">{{ equipmentInfo.status }}</span>
</div>
<div>
<span class="name">设备位置</span>
<span class="text">{{ equipmentInfo.location }}</span>
</div>
<div>
<span class="name">所属厂区:</span>
<span class="text">{{ equipmentInfo.belong }}</span>
</div>
<div>
<span class="name">过保截至日期:</span>
<span class="text">{{ equipmentInfo.date }}</span>
</div>
</dv-border-box-10>
</div>
</template>
@ -26,6 +38,9 @@ const data = reactive({
name: '空调机组',
number: 'AHU-F01-02',
status: '启用',
location: '漳州厂区糖化间',
belong: '漳州厂区',
date: '2025-12-15'
}
});
@ -44,20 +59,23 @@ const { equipmentInfo } = toRefs(data);
flex-direction: column;
align-items: center;
color: #3cbfdf;
:deep(.border-box-content) {
padding: 10px;
>div {
line-height: 48px;
display: flex;
justify-content: space-between;
}
.name {
width: 35%;
width: 40%;
}
.text {
width: 56%;
width: 59%;
color: #fff;
}
}
}
</style>
}</style>

1
src/views/bim/bimHome/components/MenuTab.vue
View File

@ -7,6 +7,7 @@
<script setup>
import bimStore from '@/store/modules/bim';
import { onMounted } from 'vue';
import Bus from '@/utils/bus.js';
const menuList = [
{

29
src/views/bim/bimHome/components/RealInfoDialog.vue
View File

@ -2,17 +2,29 @@
<div class="realInfoDialog">
<div class="top-div">
<div>
<span class="name">名称:</span>
<span class="name">资产名称:</span>
<span class="text">{{ deviceInfo && deviceInfo.name }}</span>
</div>
<div>
<span class="name">类型:</span>
<span class="name">资产类型:</span>
<span class="text">{{ deviceInfo && deviceInfo.type }}</span>
</div>
<div>
<span class="name">状态:</span>
<span class="name">资产状态:</span>
<span class="text">{{ deviceInfo && deviceInfo.status }}</span>
</div>
<div>
<span class="name">资产位置:</span>
<span class="text">{{ deviceInfo && deviceInfo.location }}</span>
</div>
<div>
<span class="name">所属厂区:</span>
<span class="text">{{ deviceInfo && deviceInfo.belong }}</span>
</div>
<div>
<span class="name">过保截至日期:</span>
<span class="text">{{ deviceInfo && deviceInfo.date }}</span>
</div>
</div>
<div class="bottom-div">
@ -64,7 +76,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '2023年',
timestamp: '12月3日',
color: '#87efd0e9',
color: '#08326f',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -82,7 +94,7 @@ const data = reactive({
content: '设备保养周期剩余3天',
time: '2023年',
timestamp: '12月6日',
color: '#6eebe3',
color: '#02a7f0',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -91,7 +103,7 @@ const data = reactive({
content: '设备完成巡检计划',
time: '2023年',
timestamp: '12月20日',
color: '#87efd0e9',
color: '#08326f',
icon: MoreFilled,
type: 'primary',
size: 'large'
@ -191,13 +203,14 @@ const getEchart = () => {
height: 25%;
border: 1px solid #2E6099;
display: flex;
flex-direction: column;
// flex-direction: column;
align-items: center;
flex-wrap: wrap;
>div {
display: flex;
line-height: 48px;
width: 240px;
width: 33%;
justify-content: space-between;
}

132
src/views/bim/bimHome/components/ThreeView2.vue
View File

@ -39,6 +39,12 @@ onMounted(() => {
renderScene();
//点击模型
document.addEventListener('click', onMouseDown);
// 右击事件
window.addEventListener('contextmenu', function (e) {
if (e.button === 2) {
onMouseDownRight(e);
}
});
// document.addEventListener("mousemove", onMouseMove);
});
let scene, renderer, camera, controls, clickedObject, pointsArr = true;
@ -93,9 +99,12 @@ Bus.on('clickDevice', (isParent) => {
})
// 系统树点击
Bus.on('clickApplication', e => {
Bus.on('clickApplication', (isParent) => {
// Todo
console.log('clickApplication');
if(!isParent) {
xiaof();
}
})
watch(() => bimStore().activateMenu, value => {
@ -136,10 +145,12 @@ const loadSence = () => {
model.traverse(e => {
objArr.push(e);
objM.push(e.material);
if (enableGroup.indexOf(e.name) != -1){
xfobj.push(e);
}
})
// 设置漫游点位
const objname = ['start', 'middle1', 'middle2', 'end']
objname.forEach((item, index) => {
var targetModel = model.getObjectByName(item);
if (targetModel) romeObj.push(
@ -147,6 +158,8 @@ const loadSence = () => {
)
console.log('targetModel', targetModel)
})
// 漫游结束
scene.add(model);
// 将预警设备染色
warn();
@ -202,7 +215,7 @@ const isSelent = (obj) => {
}
let selectedObjects = ref([]);
let selectBoxByClick, selectBoxByMouseon;
let selectBoxByClick, selectBoxByMouseon, pointLabel;
var marginLeft = 0;
var marginTop = 70;
// 鼠标移动效果
@ -225,6 +238,24 @@ const onMouseMove = (event) => {
}
}
}
const emit = defineEmits(['handleRightClick'])
// 鼠标右击事件
const onMouseDownRight = (event) => {
var raycaster = new THREE.Raycaster()
mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
mouse.y = -((event.clientY - marginTop) / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true);
console.log(123, event);
if (intersects.length > 0) {
const clickedObject = intersects[0].object;
console.log('这是我选中的模型', clickedObject);
var selectedObject = isSelent(clickedObject);
// addLabel(selectedObject, true);
emit('handleRightClick', selectedObject);
}
}
// 鼠标点击效果
const onMouseDown = (event) => {
var raycaster = new THREE.Raycaster()
@ -243,6 +274,17 @@ const onMouseDown = (event) => {
boxLight(selectedObject);
// 染色点击的模型
if(bimStore().activateIndex == '0') {
// 联动左侧菜单
Bus.emit('handleTreeClick', clickedObject);
return;
}
if(bimStore().activateIndex == '1') {
// 联动左侧菜单
Bus.emit('handleTreeClick1', clickedObject);
return;
}
}
}
const changeColor = (Floor) => {
@ -332,6 +374,8 @@ const centerSelectedGroup = (obj) => {
// 漫游
const roam = () => {
if (currentIndex < romeObj.length) {
console.log('----', currentIndex);
console.log('----', romeObj.length);
var nextPosition = romeObj[currentIndex].getWorldPosition(new THREE.Vector3());
// 在动画完成后触发下一个漫游
gsap.to(camera.position, {
@ -368,6 +412,16 @@ const roam = () => {
}
// 返回初始值
const toHomeView = () => {
// 清除选中框
if (selectBoxByClick) {
scene.remove(selectBoxByClick);
}
// 清除标签
if(!isAddLabel.value) {
removeLabel();
isAddLabel.value = !isAddLabel.value;
}
// 清除精灵图
controls.reset();
}
// 拉近距离
@ -388,20 +442,19 @@ const nearCamera = (floor) => {
//标签
const setLabel = () => {
if (isAddLabel.value) {
addLabel();
let obj = scene.getObjectByName('set2');
addLabel(obj, false);
} else {
removeLabel();
toHomeView();
}
isAddLabel.value = !isAddLabel.value;
}
// 添加标签
const addLabel = () => {
let obj = scene.getObjectByName('set2');
const addLabel = (obj,isShowDetail) => {
// console.log(123, obj);
centerSelectedGroup(obj);
let text = "设备二";
let pointLabel = createLableObj(text);
pointLabel = createLableObj(text,isShowDetail);
obj.add(pointLabel);
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = "absolute";
@ -412,22 +465,28 @@ const addLabel = () => {
// 将呈现器的输出添加到HTML元素
document.getElementById("dom").appendChild(renderer.domElement);
};
const createLableObj = (text) => {
const createLableObj = (text,isShowDetail) => {
let laberDiv = document.createElement("div"); //创建div容器
if(!isShowDetail) {
laberDiv.className = "laber_name";
laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
} else {
laberDiv.className = "laber_name1";
laberDiv.innerHTML = `<div class="detail-btn">详情</div>`
}
let pointLabel = new CSS2DObject(laberDiv);
return pointLabel;
};
const removeLabel = () => {
document.body.removeChild(labelRenderer.domElement);
}
// 设置地板
const setBottom = () => {
var target = scene.getObjectByName('set1');
var target = scene.getObjectByName('floor2F');
console.log(target);
if (isRemoveBottom.value) {
var target = scene.getObjectByName('set1');
target.visible = false;
} else {
target.visible = true;
@ -435,6 +494,32 @@ const setBottom = () => {
isRemoveBottom.value = !isRemoveBottom.value;
}
// 消防
const xiaof = () => {
xfobj.forEach((o)=>{
xfadd(o,Math.random() < 0.3);
})
}
let xfobj = [];
// 消防标签
const xfadd = (obj,state)=> {
const texLoader= new THREE.TextureLoader();
let texture = null;
if(state){
texture= texLoader.load("/ygr.png");
}else{
texture = texLoader.load("/yg.png");
}
const spriteMaterial = new THREE.SpriteMaterial({
map: texture,
});
const sprite = new THREE.Sprite(spriteMaterial);
// 控制精灵大小
sprite.scale.set(5, 5, 5);
sprite.position.y = 10; //标签底部箭头和空对象标注点重合
obj.add(sprite); //tag会标注在空对象obj对应的位置
}
</script>
<style lang='scss'>
#gltf {
@ -445,8 +530,8 @@ const setBottom = () => {
.btnGroup {
width: 180px;
position: absolute;
left: 0px;
bottom: 40px;
left: 260px;
top: 10px;
z-index: 999;
display: flex;
flex-direction: column;
@ -455,10 +540,11 @@ const setBottom = () => {
>div {
cursor: pointer;
background: #477efa;
width: 120px;
// background: #0549a7;
border: 1px solid #3cbfdf;
width: 110px;
height: 40px;
border-radius: 0 50px 50px 0;
border-radius: 5px;
line-height: 40px;
text-align: center;
margin-top: 10px;
@ -480,4 +566,16 @@ const setBottom = () => {
line-height: 24px;
}
}
.laber_name1 {
width:100px;
height: 50px;
border-radius: 5px;
cursor: pointer;
background-color: #00174b;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index:999;
}
</style>

23
src/views/bim/bimHome/components/TopDiv.vue
View File

@ -1,14 +1,28 @@
<template>
<div class="top-div">{{ title }}</div>
<div class="top-div">
<span>{{ title }}</span>
<el-icon v-if="showMore" @click="viewMore">
<MoreFilled />
</el-icon>
</div>
</template>
<script setup>
import Bus from '@/utils/bus.js';
const props = defineProps({
title: { //
default: '建筑信息',
type: String
},
showMore: {
default: false,
type: Boolean
}
})
const emit = defineEmits(['viewMore'])
const viewMore = () => {
Bus.emit('viewMore', props.title);
}
</script>
<style lang="scss" scoped>
.top-div {
@ -21,6 +35,11 @@ const props = defineProps({
margin-bottom: 5px;
padding-left: 24px;
color: #fff;
font-weight: 800
font-weight: 800;
justify-content: space-between;
.el-icon {
cursor: pointer;
}
}
</style>

26
src/views/bim/bimHome/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 场景模型 -->
<ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
<ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''" @handleRightClick="handleRightClick"></ThreeView>
<!-- <ThreeModel /> -->
<!-- 底部菜单 -->
<MenuTab @changeMenu="changeMenu"></MenuTab>
@ -10,13 +10,13 @@
<!-- 建筑信息 -->
<BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
<!-- 资产信息 -->
<DevicePie v-if="deviceInfo && activateIndex == 0" @openDialog="openDialog"></DevicePie>
<DevicePie v-if="deviceInfo && activateIndex == 0"></DevicePie>
<!-- 左侧资产菜单 -->
<DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
<!-- 资产信息 -->
<DeviceInfo v-if="equimentInfo && activateIndex == 1"></DeviceInfo>
<!-- 资产事件 -->
<DeviceEvent v-if="activateIndex == 1" @openDialog="openDialog1"></DeviceEvent>
<DeviceEvent v-if="activateIndex == 1"></DeviceEvent>
<!-- 左侧应用菜单 -->
<ApplicationTree v-if="activateIndex == 2" @handleNodeClick="handleApplicationClick"></ApplicationTree>
<!-- 设备信息 -->
@ -56,6 +56,7 @@ import RealInfoDialog from './components/RealInfoDialog.vue';
import DeviceDetial from './components/DeviceDetial.vue';
import bimStore from '@/store/modules/bim';
import { computed } from 'vue';
import Bus from '@/utils/bus.js';
const data = reactive({
sceneUrl: '/jz/glb/scene.gltf',
equimentInfo: {},
@ -78,6 +79,11 @@ const deviceInfo = computed(() =>
bimStore().activateTree.deviceInfo
);
Bus.on('viewMore', (title) => {
// Todo
title === '资产信息' ? dialogVisible.value = true : dialogVisible1.value = true;;
})
const onReady = () => {
@ -89,6 +95,16 @@ const onError = () => {
const onProgress = () => {
}
const handleRightClick = (obj) => {
console.log(1,obj.name);
if(obj.name == 'set1' || obj.name == 'set6') {
bimStore().setDeviceNum(obj.name);
dialogVisible2.value = true;
}
// viewDetail();
}
const handleBuildClick = (value, isParent) => {
// 点击父级，加载/切换场景
if (isParent) {
@ -110,16 +126,12 @@ const handleApplicationClick = (value) => {
const changeMenu = (index) => {
}
const openDialog = () => {
dialogVisible.value = true;
}
const openDialog1 = () => {
dialogVisible1.value = true;
}
const viewDetail = (val) => {
console.log(val);
dialogVisible2.value = true;
}
</script>

35
src/views/components/Pie.vue
View File

@ -23,6 +23,12 @@ const getCharts = () => {
dom.removeAttribute('_echarts_instance_')
var myChart = echarts.init(dom);
var option = {
title: {
text: '资产维修情况',
textStyle: {
color: "#fff",
},
},
tooltip: {
trigger: "item",
confine: true, //浮窗限制在图表内
@ -61,11 +67,12 @@ const getCharts = () => {
elements: [
{
type: "text",
left: "27%",
left: "16%",
top: "middle",
style: {
text: total + "\n" + "总数",
text: " " + total + "\n" + "总报修数",
fill: "#fff",
fontSize: 24
},
},
],
@ -78,10 +85,10 @@ const getCharts = () => {
itemHeight: 5,
orient: "vertical",
itemGap: 30,
data: ["数据一"],
data: ["未维修"],
formatter: () => {
const arr = [
"{b|" + "数据一" + "}\xa0\xa0\xa0",
"{b|" + "未维修" + "}\xa0\xa0\xa0",
"{a|" + wei + "}\xa0\xa0\xa0\xa0",
];
return arr.join("");
@ -106,10 +113,10 @@ const getCharts = () => {
itemHeight: 5,
orient: "vertical",
itemGap: 30,
data: ["数据二"],
data: ["已维修"],
formatter: () => {
const arr = [
"{b|" + "数据二" + "}\xa0\xa0\xa0",
"{b|" + "已维修" + "}\xa0\xa0\xa0",
"{a|" + yi + "}\xa0\xa0\xa0\xa0",
];
return arr.join("");
@ -134,10 +141,10 @@ const getCharts = () => {
itemHeight: 5,
orient: "vertical",
itemGap: 30,
data: ["数据三"],
data: ["维修中"],
formatter: () => {
const arr = [
"{b|" + "数据三" + "}\xa0\xa0\xa0",
"{b|" + "维修中" + "}\xa0\xa0\xa0",
"{a|" + doing + "}\xa0\xa0\xa0\xa0",
];
return arr.join("");
@ -178,7 +185,7 @@ const getCharts = () => {
data: [
{
value: wei,
name: "数据一",
name: "未维修",
itemStyle: {
borderRadius: 10,
color: "#FD2525",
@ -187,7 +194,7 @@ const getCharts = () => {
},
{
value: yi,
name: "数据二",
name: "已维修",
itemStyle: {
color: "#1f5189",
opacity: 0.6,
@ -195,7 +202,7 @@ const getCharts = () => {
},
{
value: doing,
name: "数据三",
name: "维修中",
itemStyle: {
color: "#e7bf69",
opacity: 0.8,
@ -221,7 +228,7 @@ const getCharts = () => {
data: [
{
value: wei,
name: "数据一",
name: "未维修",
itemStyle: {
color: "#aa2b3d",
},
@ -229,7 +236,7 @@ const getCharts = () => {
{
value: yi,
name: "数据二",
name: "已维修",
itemStyle: {
color: "#1f5189",
},
@ -237,7 +244,7 @@ const getCharts = () => {
{
value: doing,
name: "数据三",
name: "维修中",
itemStyle: {
color: "#655e64",
},

8
src/views/components/xtBar.vue
View File

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