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

补充

main
wangqiujuan0808 2023-12-03 15:29:48 +08:00
parent 1165ebe19b
commit 9b78757a12
16 changed files with 371 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,6 +16,7 @@
},
"dependencies": {
"@element-plus/icons-vue": "2.0.10",
"@jiaminghi/data-view": "^2.10.0",
"@vueup/vue-quill": "1.2.0",
"@vueuse/core": "9.5.0",
"axios": "0.27.2",

BIN
src/assets/images/top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
src/main.js
View File

@ -44,6 +44,8 @@ import TreeSelect from '@/components/TreeSelect'
import DictTag from '@/components/DictTag'
// troisjs
import { TroisJSVuePlugin } from 'troisjs';
// 边框ui组件
import dataV from '@jiaminghi/data-view'
const app = createApp(App)
@ -68,6 +70,7 @@ app.component('ImagePreview', ImagePreview)
app.component('RightToolbar', RightToolbar)
app.component('Editor', Editor)
app.use(dataV)
app.use(TroisJSVuePlugin)
app.use(router)
app.use(store)

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

@ -1,10 +1,13 @@
<template>
<div class="treeDiv">
<el-select v-model="applicationValue" class="m-2" placeholder="Select" size="large">
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<el-select v-model="applicationValue" class="m-2" placeholder="Select" size="large">
<el-option v-for="item in applicationOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
</dv-border-box-10>
</div>
</template>
<script setup>
@ -69,8 +72,6 @@ const handleNodeClick = (value) => {
position: absolute;
top: 10px;
left: 10px;
background: #0a1f2e;
// border: 1px solid red;
width: 240px;
height: 600px;
display: flex;
@ -79,11 +80,13 @@ const handleNodeClick = (value) => {
.el-tree {
width: 224px;
margin-top: 10px;
margin: 0 10px;
background: transparent;
color: #3cbfdf;
}
.el-select {
margin: 10px;
}
:deep(.el-input__wrapper) {
background: transparent;
}

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

@ -1,20 +1,47 @@
<template>
<div class="buildDiv">
<div>建筑信息</div>
<div></div>
<TopDiv title="建筑信息"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<div>
<span class="name">名称</span>
<span class="text">{{ buildInfo.name }}</span>
</div>
<div>
<span class="name">面积</span>
<span class="text">{{ buildInfo.area }}</span>
</div>
<div>
<span class="name">状态</span>
<span class="text">{{ buildInfo.status }}</span>
</div>
<div>
<span class="name">描述</span>
<span class="text">{{ buildInfo.desc }}</span>
</div>
</dv-border-box-10>
</div>
</template>
<script setup>
import bimStore from '@/store/modules/bim';
import TopDiv from "./TopDiv.vue";
const data = reactive({
buildInfo: {
name: '原料糖化车间一',
area: '5236 ㎡',
status:'启用',
desc: '原料糖化车间一，负责原料糖化，启用于2011年'
}
});
const { buildInfo } = toRefs(data);
</script>
<style lang='scss' scoped>
.buildDiv {
position: absolute;
top: 10px;
right: 10px;
background: #0a1f2e;
// background: #0a1f2e;
// border: 1px solid red;
width: 280px;
height: 340px;
@ -22,5 +49,21 @@ import bimStore from '@/store/modules/bim';
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: 25%;
}
.text {
width: 75%;
color: #fff;
}
}
}
</style>

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

@ -1,10 +1,12 @@
<template>
<div class="treeDiv">
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<el-select v-model="buildValue" class="m-2" placeholder="Select" size="large">
<el-option v-for="item in buildOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
</dv-border-box-10>
</div>
</template>
<script setup>
@ -68,21 +70,23 @@ const handleNodeClick = (value) => {
position: absolute;
top: 10px;
left: 10px;
background: #0a1f2e;
// background: #0a1f2e;
// border: 1px solid red;
width: 240px;
height: 600px;
display: flex;
flex-direction: column;
align-items: center;
.el-tree {
width: 224px;
margin-top: 10px;
margin: 0 10px;
background: transparent;
color: #3cbfdf;
}
.el-select {
margin: 10px;
}
:deep(.el-input__wrapper) {
background: transparent;
}

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

@ -1,12 +1,62 @@
<template>
<div class="deviceDiv">
<div>资产事件</div>
<div></div>
<TopDiv title="资产事件"></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"
:type="activity.type" :size="activity.size">
<slot name="timestamp">
<div class="timestamp">
<span class="time">{{ activity.time }}</span>
<span class="time-stamp">{{ activity.timestamp }}</span>
</div>
</slot>
<el-card :style="{ 'background': activity.color }">
{{ activity.content }}
</el-card>
</el-timeline-item>
</el-timeline>
</dv-border-box-10>
</div>
</template>
<script setup>
import { MoreFilled, Warning } from '@element-plus/icons-vue'
import TopDiv from "./TopDiv.vue";
import bimStore from '@/store/modules/bim';
const data = reactive({
activities: [
{
content: '设备完成巡检计划',
time: '下午',
timestamp: '20:46',
color: '#0bbd87',
icon: MoreFilled,
type: 'primary',
size: 'large'
},
{
content: '设备发生故障：电流过大',
time: '下午',
timestamp: '18:46',
color: '#e54c44',
type: 'danger',
icon: Warning,
size: 'large'
},
{
content: '设备保养周期剩余3天',
time: '上午',
timestamp: '11:46',
color: '#0bbd87',
icon: MoreFilled,
type: 'primary',
size: 'large'
}]
});
const { activities } = toRefs(data);
</script>
<style lang='scss' scoped>
@ -14,13 +64,45 @@ import bimStore from '@/store/modules/bim';
position: absolute;
top: 410px;
right: 10px;
background: #0a1f2e;
// border: 1px solid red;
width: 280px;
height: 340px;
// height: 460px;
display: flex;
flex-direction: column;
align-items: center;
color: #3cbfdf;
:deep(.border-box-content) {
padding: 10px;
.el-card {
border: none;
color: #fff;
}
.el-timeline {
padding-left: 0px;
}
.timestamp {
border: 1px solid #3cbfdf;
margin-bottom: 5px;
line-height: 28px;
width: 100px;
border-radius: 5px;
display: flex;
span {
width: 50%;
text-align: center;
}
.time {
color: #fff;
background: #3cbfdf;
}
.time-stamp {
color: #3cbfdf;
}
}
}
}
</style>

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

@ -1,12 +1,34 @@
<template>
<div class="buildDiv">
<div>资产信息</div>
<div></div>
<TopDiv title="资产信息"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<div>
<span class="name">名称</span>
<span class="text">{{ deviceInfo.name }}</span>
</div>
<div>
<span class="name">类型</span>
<span class="text">{{ deviceInfo.type }}</span>
</div>
<div>
<span class="name">状态</span>
<span class="text">{{ deviceInfo.status }}</span>
</div>
</dv-border-box-10>
</div>
</template>
<script setup>
import TopDiv from "./TopDiv.vue";
import bimStore from '@/store/modules/bim';
const data = reactive({
deviceInfo: {
name: '立仓',
type: '生产设备',
status:'启用',
}
});
const { deviceInfo } = toRefs(data);
</script>
<style lang='scss' scoped>
@ -14,13 +36,26 @@ import bimStore from '@/store/modules/bim';
position: absolute;
top: 10px;
right: 10px;
background: #0a1f2e;
// border: 1px solid red;
width: 280px;
height: 340px;
display: flex;
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: 25%;
}
.text {
width: 75%;
color: #fff;
}
}
}
</style>

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

@ -1,10 +1,12 @@
<template>
<div class="deviceDiv">
<div>资产信息</div>
<div></div>
<TopDiv title="资产信息"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
</dv-border-box-10>
</div>
</template>
<script setup>
import TopDiv from "./TopDiv.vue";
import bimStore from '@/store/modules/bim';
@ -14,8 +16,6 @@ import bimStore from '@/store/modules/bim';
position: absolute;
top: 410px;
right: 10px;
background: #0a1f2e;
// border: 1px solid red;
width: 280px;
height: 340px;
display: flex;

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

@ -1,10 +1,13 @@
<template>
<div class="treeDiv">
<el-select v-model="deviceValue" class="m-2" placeholder="Select" size="large">
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<el-select v-model="deviceValue" class="m-2" placeholder="Select" size="large">
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
:current-node-key="checkedkeys" @node-click="handleNodeClick" />
</dv-border-box-10>
</div>
</template>
<script setup>
@ -34,7 +37,7 @@ const data = reactive({
label: '立仓',
id: '0-1',
url: '/jz/glb/jz.gltf'
},
{
label: '糖浆罐',
@ -68,7 +71,6 @@ const handleNodeClick = (value) => {
position: absolute;
top: 10px;
left: 10px;
background: #0a1f2e;
// border: 1px solid red;
width: 240px;
height: 600px;
@ -78,10 +80,13 @@ const handleNodeClick = (value) => {
.el-tree {
width: 224px;
margin-top: 10px;
margin: 0 10px;
background: transparent;
color: #3cbfdf;
}
.el-select {
margin: 10px;
}
:deep(.el-input__wrapper) {
background: transparent;

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

@ -1,12 +1,35 @@
<template>
<div class="buildDiv">
<div>设备信息</div>
<div></div>
<TopDiv title="设备信息"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<div>
<span class="name">设备名称</span>
<span class="text">{{ equipmentInfo.name }}</span>
</div>
<div>
<span class="name">设备编号</span>
<span class="text">{{ equipmentInfo.number }}</span>
</div>
<div>
<span class="name">设备状态</span>
<span class="text">{{ equipmentInfo.status }}</span>
</div>
</dv-border-box-10>
</div>
</template>
<script setup>
import bimStore from '@/store/modules/bim';
import TopDiv from "./TopDiv.vue";
const data = reactive({
equipmentInfo: {
name: '空调机组',
number: 'AHU-F01-02',
status:'启用',
}
});
const { equipmentInfo } = toRefs(data);
</script>
<style lang='scss' scoped>
@ -14,13 +37,26 @@ import bimStore from '@/store/modules/bim';
position: absolute;
top: 10px;
right: 10px;
background: #0a1f2e;
// border: 1px solid red;
width: 280px;
height: 340px;
display: flex;
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%;
}
.text {
width: 56%;
color: #fff;
}
}
}
</style>

66
src/views/bim/bimHome/components/RealData.vue
View File

@ -1,26 +1,80 @@
<template>
<div class="deviceDiv">
<div>实时数据</div>
<div></div>
<TopDiv title="实时数据"></TopDiv>
<dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
<div>
<span class="name">运行状态</span>
<span class="text">{{ realInfo.status }}</span>
</div>
<div>
<span class="name">故障状态</span>
<span class="text">{{ realInfo.fault }}</span>
</div>
<div>
<span class="name">房间温度</span>
<span class="text">{{ realInfo.temp }}</span>
</div>
<div>
<span class="name">供水温度</span>
<span class="text">{{ realInfo.waterTemp }}</span>
</div>
<div>
<span class="name">回水温度</span>
<span class="text">{{ realInfo.backwaterTemp }}</span>
</div>
<div>
<span class="name">回水压力</span>
<span class="text">{{ realInfo.backwaterStress }}</span>
</div>
<div>
<span class="name">送风区域</span>
<span class="text">{{ realInfo.area }}</span>
</div>
</dv-border-box-10>
</div>
</template>
<script setup>
import bimStore from '@/store/modules/bim';
import TopDiv from "./TopDiv.vue";
const data = reactive({
realInfo: {
status:'运行中',
fault: '正常',
temp: '22.6℃',
waterTemp: '16℃',
backwaterTemp: '22℃',
backwaterStress: '4bar',
area: '1楼大厅'
}
});
const { realInfo } = toRefs(data);
</script>
<style lang='scss' scoped>
.deviceDiv {
position: absolute;
top: 410px;
right: 10px;
background: #0a1f2e;
// border: 1px solid red;
width: 280px;
height: 340px;
display: flex;
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%;
}
.text {
width: 56%;
color: #fff;
}
}
}
</style>

17
src/views/bim/bimHome/components/ThreeView.vue
View File

@ -46,6 +46,7 @@ onMounted(() => {
loadSence();
// 启动动画
renderScene();
document.addEventListener("click", modelMouseClick);
});
const init = () => {
scene = new THREE.Scene();
@ -105,6 +106,22 @@ const renderScene = () => {
// 写在requestAnimationFrame之后,否则会报错
labelRenderer.render(scene, camera);
};
const modelMouseClick = (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(scene, true);
if (intersects.length > 0) {
console.log(intersects[0].object);
outlineObj(intersects[0].object);
}
};
//高亮
const outlineObj = (object) => {
object.material.color.set(0x66ff00);
}
</script>
<style lang='scss' scoped>
#three {

24
src/views/bim/bimHome/components/TopDiv.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="top-div">{{ title }}</div>
</template>
<script setup>
const props = defineProps({
title: { //
default: '建筑信息',
type: String
},
})
</script>
<style lang="scss" scoped>
.top-div {
width: 280px;
height: 56px;
background-size: 100% 100% !important;
background: url(@/assets/images/top.png) no-repeat;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
</style>

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

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 模型 -->
<ThreeView background="#dcedff" :sceneUrl="sceneUrl"></ThreeView>
<ThreeView background="#dcedff" light="0xffffff" :sceneUrl="sceneUrl"></ThreeView>
<!-- 底部菜单 -->
<MenuTab @changeMenu="changeMenu"></MenuTab>
<!-- 左侧建筑菜单 -->

20
vite.config.js
View File

@ -54,6 +54,26 @@ export default defineConfig(({ mode, command }) => {
}
]
}
},
optimizeDeps: {
// 开发时 解决这些commonjs包转成esm包
include: [
"@jiaminghi/c-render",
"@jiaminghi/c-render/lib/plugin/util",
"@jiaminghi/charts/lib/util/index",
"@jiaminghi/charts/lib/util",
"@jiaminghi/charts/lib/extend/index",
"@jiaminghi/charts",
"@jiaminghi/color",
],
},
build: {
// 打包时需要另外处理的commonjs规范的包
commonjsOptions: {
include: [
/node_modules/, // 必须包含
],
},
}
}
})