123

public/jz/glb/model.json

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

src/layoutMain/components/Navbar.vue

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

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

@@ -2,12 +2,12 @@
     <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" />
+                <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>
@@ -37,17 +37,12 @@ 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:[]
+                }
             ],
         },
-       
+
     ],
     checkedkeys: ""
 });
@@ -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>

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

@@ -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: {},

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

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

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

@@ -17,7 +17,7 @@ import Bus from '@/utils/bus.js';
 const myTree = ref("myTree");
 
 const props = defineProps({
-    
+
 
 })
 const buildOptions = [
@@ -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: [
                     {
@@ -133,15 +157,23 @@ const data = reactive({
                     }
                 ],
                 children: []
-            },{
+            }, {
                 label: '投料间',
                 id: '0-0-3',
                 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;

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

@@ -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: '资产名称',

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 <template>
     <div class="buildDiv">
-       
+
         <TopDiv title="设备信息"></TopDiv>
         <dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
             <div>
@@ -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>
@@ -22,11 +34,14 @@
 import bimStore from '@/store/modules/bim';
 import TopDiv from "./TopDiv.vue";
 const data = reactive({
-  equipmentInfo: {
-    name: '空调机组',
-    number: 'AHU-F01-02',
-    status:'启用',
-}
+    equipmentInfo: {
+        name: '空调机组',
+        number: 'AHU-F01-02',
+        status: '启用',
+        location: '漳州厂区糖化间',
+        belong: '漳州厂区',
+        date: '2025-12-15'
+    }
 });
 
 const { equipmentInfo } = toRefs(data);
@@ -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>

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

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

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

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

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

@@ -19,7 +19,7 @@
     </div>
 </template>
 <script setup>
-import { onMounted, ref,watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import * as THREE from 'three';
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
@@ -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;
@@ -59,7 +65,7 @@ const data = reactive({
     isAddLabel: true,
     isRemoveBottom: true
 });
-const { isAddLabel,isRemoveBottom } = toRefs(data);
+const { isAddLabel, isRemoveBottom } = toRefs(data);
 // 建筑树点击
 Bus.on('clickBuild', (isParent) => {
     // Todo
@@ -93,16 +99,19 @@ Bus.on('clickDevice', (isParent) => {
 })
 
 // 系统树点击
-Bus.on('clickApplication', e => {
+Bus.on('clickApplication', (isParent) => {
     // Todo
-    console.log('clickApplication');
+    if(!isParent) {
+        xiaof();
+    }
+   
 })
 
 watch(() => bimStore().activateMenu, value => {
     // 更换场景颜色
     scene.background = new THREE.Color(value.background);
     toHomeView();
-},{ deep: true });
+}, { deep: true });
 
 const init = () => {
     // 场景
@@ -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容器
-    laberDiv.className = "laber_name";
-    laberDiv.innerHTML = `<div class="arrow_outer"></div><span>设备名称：${text}</span><span>状态：启用</span><span>压力：50 Pa</span>`
+    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>

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

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

src/views/bim/bimHome/index.vue

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

src/views/components/Pie.vue

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

src/views/components/xtBar.vue

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