补充

package.json

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

src/main.js

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

src/views/bim/bimHome/components/ApplicationTree.vue

@@ -1,10 +1,13 @@
 <template>
     <div class="treeDiv">
+        <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;
     }

src/views/bim/bimHome/components/BuildInfo.vue

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

src/views/bim/bimHome/components/BuildTree.vue

@@ -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,20 +70,22 @@ 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;

src/views/bim/bimHome/components/DeviceEvent.vue

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

src/views/bim/bimHome/components/DeviceInfo.vue

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

src/views/bim/bimHome/components/DevicePie.vue

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

src/views/bim/bimHome/components/DeviceTree.vue

@@ -1,10 +1,13 @@
 <template>
     <div class="treeDiv">
+        <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>
@@ -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;

src/views/bim/bimHome/components/EquipmentInfo.vue

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

src/views/bim/bimHome/components/RealData.vue

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

src/views/bim/bimHome/components/ThreeView.vue

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

src/views/bim/bimHome/components/TopDiv.vue

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

src/views/bim/bimHome/index.vue

@@ -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>
     <!-- 左侧建筑菜单 -->

vite.config.js

@@ -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/, // 必须包含
+        ],
+      },
     }
   }
 })