From 9b78757a12e36a1ffc478ed175a9f7963f2f67b5 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Sun, 3 Dec 2023 15:29:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/assets/images/top.png                     | Bin 0 -> 1401 bytes
 src/main.js                                   |   3 +
 .../bimHome/components/ApplicationTree.vue    |  13 ++-
 .../bim/bimHome/components/BuildInfo.vue      |  49 +++++++++-
 .../bim/bimHome/components/BuildTree.vue      |  12 ++-
 .../bim/bimHome/components/DeviceEvent.vue    |  92 +++++++++++++++++-
 .../bim/bimHome/components/DeviceInfo.vue     |  43 +++++++-
 .../bim/bimHome/components/DevicePie.vue      |   8 +-
 .../bim/bimHome/components/DeviceTree.vue     |  21 ++--
 .../bim/bimHome/components/EquipmentInfo.vue  |  44 ++++++++-
 src/views/bim/bimHome/components/RealData.vue |  66 +++++++++++--
 .../bim/bimHome/components/ThreeView.vue      |  17 ++++
 src/views/bim/bimHome/components/TopDiv.vue   |  24 +++++
 src/views/bim/bimHome/index.vue               |   2 +-
 vite.config.js                                |  20 ++++
 16 files changed, 371 insertions(+), 44 deletions(-)
 create mode 100644 src/assets/images/top.png
 create mode 100644 src/views/bim/bimHome/components/TopDiv.vue

diff --git a/package.json b/package.json
index d21e1b7..32e3865 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/images/top.png b/src/assets/images/top.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b39cc8508557cad0d96bff6221f8027efe57936
GIT binary patch
literal 1401
zcmeAS@N?(olHy`uVBq!ia0vp^l|Zb^!3HF|o*r2Nq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1Ffc1;hD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Keo|$g4p^1fpxuu?=
znTdh1nT~>yfuW_ofrY-Iv95ukm4TU+sks6aC;@FNN=dT{a&d#&1?1T(Wt5Z@Sn2DR
zmzV368|&p4rRy77S^~{5(l;{F1**_3uFNY*tkBIXR)(42l3JWxlvz-cnV+WsGBGhJ
zzqG_w3FuOY7jg^W#^x16g9#X5`W1-<`i6Q2ATPlb`ugHmnwtw(U0f2Bif}JhgNs8d
z3sUuiQj7CTi;{s6m!=G|s=&&*C^fMpzbGU>KL-|y0U7xv`NbLe1qwz$Cn;!zXXd5k
zmltb-HTe2kdFB<DB<3Zjdb-#u0gceh%uKOzG%|5Ea5i@|aW!@}G<0=xG&FN|vv6}U
zb2Bh=G;lS7>2=9ZF3nBND}m`vLFjeDsTY(MatnYqyQCInmZhe+73JqDfc<QhiQ6p}
zIL(9VO~LIJOPqT3fsWA!#Vk@x!-Rmz2gHP@TObFX@>BDG$-M}euI*3m;$>i9eB<fj
z7*cWT&5X0&A&DaG^~TA%LE=`87Tl+M7d}}Q+pWP7u9PR@sN&S2C~#+M##MWP4i!TI
zVK&Y~IXucAl0{ggr`%eyB+qN2<R6b21sjg_-<ISk3f!G&cW)m1Ihkj9@2czhpWpi)
zH~-bGP>-s`6T7dqtv#e=C%F3H#(y9DEqnGKXnMW&?9`5gzj5w&u89^!ZdxBOImhwd
z7O~A-srzIz9^NdL&B+sednkLo$%|_ToI}~Ni|Z$c-8H+|t>?wJV%184Ciw{I?W=A^
z-VXTlasprZ_pYjk?k~6OQ=2A|vuD++(+9JxuUx-%bK~#Kq)&(IjZdmQo4561&Ago2
zsxbNE$)C=h^HOKnA8%f@t7Prlb(^=p-tV`GGjH3sW3Qa-{EBAThACOCI{$u|%6aXz
zEIGC-r-sVDd#in=D)yhlfxqdSIQOOG-dy$cbduBi_&p+1)SrEtzx(yXIS<~ioH8wb
zubQTN{K9w7>%`oYtWKtRo_PBGNr{oGRSi#L(ZWY}oPTZGs_yb=!IR>m_fPmzj3w9l
zo}JW_JlW>I`@5cN>5r`JemNTH-CL(FXY01^wX{CV=G|;6%##>THl#QhDM(J}flxdi
t5K$<FBIzX&|NeGvzr>6bjp8~^1BNBOZL1}@?K?q*p{J{#%Q~loCII9=1Q-AS

literal 0
HcmV?d00001

diff --git a/src/main.js b/src/main.js
index 1bae669..f03d7e8 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/views/bim/bimHome/components/ApplicationTree.vue b/src/views/bim/bimHome/components/ApplicationTree.vue
index cd708b2..896c883 100644
--- a/src/views/bim/bimHome/components/ApplicationTree.vue
+++ b/src/views/bim/bimHome/components/ApplicationTree.vue
@@ -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;
     }
diff --git a/src/views/bim/bimHome/components/BuildInfo.vue b/src/views/bim/bimHome/components/BuildInfo.vue
index c68f4cd..91b056a 100644
--- a/src/views/bim/bimHome/components/BuildInfo.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/bim/bimHome/components/BuildTree.vue b/src/views/bim/bimHome/components/BuildTree.vue
index f5398c6..55928d8 100644
--- a/src/views/bim/bimHome/components/BuildTree.vue
+++ b/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,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;
     }
diff --git a/src/views/bim/bimHome/components/DeviceEvent.vue b/src/views/bim/bimHome/components/DeviceEvent.vue
index a931baf..8d8fd7e 100644
--- a/src/views/bim/bimHome/components/DeviceEvent.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/bim/bimHome/components/DeviceInfo.vue b/src/views/bim/bimHome/components/DeviceInfo.vue
index f170b9d..e82ee84 100644
--- a/src/views/bim/bimHome/components/DeviceInfo.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/bim/bimHome/components/DevicePie.vue b/src/views/bim/bimHome/components/DevicePie.vue
index d90628f..67499d0 100644
--- a/src/views/bim/bimHome/components/DevicePie.vue
+++ b/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;
diff --git a/src/views/bim/bimHome/components/DeviceTree.vue b/src/views/bim/bimHome/components/DeviceTree.vue
index fa6cc13..991f7e0 100644
--- a/src/views/bim/bimHome/components/DeviceTree.vue
+++ b/src/views/bim/bimHome/components/DeviceTree.vue
@@ -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;
diff --git a/src/views/bim/bimHome/components/EquipmentInfo.vue b/src/views/bim/bimHome/components/EquipmentInfo.vue
index 2694a99..3af27c8 100644
--- a/src/views/bim/bimHome/components/EquipmentInfo.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/bim/bimHome/components/RealData.vue b/src/views/bim/bimHome/components/RealData.vue
index e1c6450..23236ac 100644
--- a/src/views/bim/bimHome/components/RealData.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/bim/bimHome/components/ThreeView.vue b/src/views/bim/bimHome/components/ThreeView.vue
index 1fc84bb..bbea9de 100644
--- a/src/views/bim/bimHome/components/ThreeView.vue
+++ b/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 {
diff --git a/src/views/bim/bimHome/components/TopDiv.vue b/src/views/bim/bimHome/components/TopDiv.vue
new file mode 100644
index 0000000..6555ea3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/bim/bimHome/index.vue b/src/views/bim/bimHome/index.vue
index a53e9ec..15726b3 100644
--- a/src/views/bim/bimHome/index.vue
+++ b/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>
     <!-- 左侧建筑菜单 -->
diff --git a/vite.config.js b/vite.config.js
index 2d1a503..fb05293 100644
--- a/vite.config.js
+++ b/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/, // 必须包含
+        ],
+      },
     }
   }
 })