..

src/store/modules/bim.js

@@ -5,7 +5,8 @@ const bimStore = defineStore(
             activateIndex: 0,
             activateTree: {},
             activateDevice: {},
-            activateApplication: {}
+            activateApplication: {},
+            deviceNum: ''
         }),
         actions: {
             // 菜单
@@ -23,6 +24,10 @@ const bimStore = defineStore(
             // 应用树选中
             setActivateApplicationTree(item) {
                 this.activateApplication = item;
+            },
+            // 资产详情num
+            setDeviceNum(item) {
+                this.deviceNum = item;
             }
         }
     })

src/views/bim/bimHome/components/3DChart.js

@@ -52,7 +52,7 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
   // const newColor = _.cloneDeep(color)
   // newColor.splice(0, 1)
 
-  const newColor = [color[0], color[1], color[5]]
+  const newColor = [color[0], color[1], color[5],color[6]]
 
   series.push({
     type: 'pie',
@@ -87,8 +87,8 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
   const option = {
     color: newColor,
     legend: {
-        show: false,
+      show: true,
-        color: '#FFFFFF',
+      textStyle: { color: '#ffffff' },
       left: 'center',
       top: 'bottom',
       itemGap: 20,
@@ -121,7 +121,7 @@ const getPie3D = (pieData, internalDiameterRatio, rateName) => {
       show: true,
       formatter: params => {
         if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
-          console.log(option.series[params.seriesIndex].pieData)
+          // console.log(option.series[params.seriesIndex].pieData)
           // let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
           //   100).toFixed(2)
           // if (bfb === 'NaN') {

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

@@ -0,0 +1,67 @@
+<template>
+    <div class="baseInfo-div">
+        <div class="left-div">
+            <div v-for="(item, index) of listData" :key="index">
+                <span class="name">{{ item.name }}：</span>
+                
+                <span class="value" v-if="item.name == '设备二维码'">
+                    <img src="@/assets/images/qcode.png" alt="">
+                </span>
+                <span class="value" v-else>{{ item.value }}</span>
+            </div>
+        </div>
+        <div class="right-div">
+            <img src="@/assets/images/device.png" alt="" width="400">
+            <span>设备图片</span>
+        </div>
+    </div>
+</template>
+<script setup>
+
+const props = defineProps({
+    infoList: {
+        default: {},
+        type: Object
+    }
+})
+
+const listData = props.infoList.detail;
+</script>
+<style lang="scss" scoped>
+.baseInfo-div {
+    width: 100%;
+    height: 80%;
+    display: flex;
+    justify-content: space-between;
+    .left-div {
+        width: 69%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        >div {
+            width: 48%;
+            line-height: 24px;
+            height: 48px;
+            justify-content: space-between;
+            display: flex;
+            align-items: center;
+            .name {
+                width: 40%;
+                text-align: right;
+            }
+            .value {
+                width: 59%;
+            }
+        }
+    }
+    .right-div {
+        width: 30%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+}
+</style>

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

@@ -25,16 +25,7 @@
 import bimStore from '@/store/modules/bim';
 import TopDiv from "./TopDiv.vue";
 
-const data = reactive({
+const buildInfo =  computed(() => bimStore().activateTree.info);
-  buildInfo: {
-    name: '原料糖化车间一',
-    area: '5236 ㎡',
-    status:'启用',
-    desc: '原料糖化车间一，负责原料糖化，启用于2011年'
-}
-});
-
-const { buildInfo } = toRefs(data);
 </script>
 <style lang='scss' scoped>
 .buildDiv {

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

@@ -4,8 +4,8 @@
             <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
+            <el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" check-strictly="true"
-            :current-node-key="checkedkeys" @node-click="handleNodeClick" />
+                highlight-current default-expand-all :current-node-key="checkedkeys" @node-click="handleNodeClick" />
         </dv-border-box-10>
     </div>
 </template>
@@ -13,6 +13,14 @@
 import bimStore from '@/store/modules/bim';
 import { nextTick } from "vue";
 const myTree = ref("myTree");
+
+const props = defineProps({
+    isSetTree: { // 
+        default: false,
+        type: Boolean
+    },
+    
+})
 const buildOptions = [
     {
         value: '0',
@@ -29,19 +37,106 @@ const data = reactive({
     buildValue: '0',
     treeData: [
         {
-            label: '酿造车间',
+            label: '原料糖化车间',
             id: '0',
+            url: '/jz/glb/jz.gltf',
+            info: {
+                name: '原料糖化车间',
+                area: '9436 ㎡',
+                status: '启用',
+                desc: '原料糖化车间，负责原料糖化，启用于2011年'
+            },
+            deviceInfo: [
+                {
+                    type: '生产设备',
+                    name: '立仓',
+                    value: 45
+                },
+                {
+                    type: '空调设备',
+                    name: '新风机组',
+                    value: 130
+                },
+                {
+                    type: '安防设备',
+                    name: '摄像头',
+                    value: 180
+                },
+                {
+                    type: '消防设备',
+                    name: '烟感',
+                    value: 100
+                }
+            ],
             children: [
                 {
                     label: '原料糖化车间一',
                     id: '0-1',
-                    url: '/jz/glb/jz.gltf'
+                    url: '/jz/glb/jz.gltf',
+                    children: [],
+                    info: {
+                        name: '原料糖化车间一',
+                        area: '5200 ㎡',
+                        status: '启用',
+                        desc: '原料糖化车间一，负责原料糖化，启用于2011年'
+                    },
+                    deviceInfo: [
+                        {
+                            type: '生产设备',
+                            name: '立仓',
+                            value: 15
+                        },
+                        {
+                            type: '空调设备',
+                            name: '新风机组',
+                            value: 50
+                        },
+                        {
+                            type: '安防设备',
+                            name: '摄像头',
+                            value: 80
+                        },
+                        {
+                            type: '消防设备',
+                            name: '烟感',
+                            value: 50
+                        }
+                    ],
 
                 },
                 {
                     label: '原料糖化车间二',
                     id: '0-2',
-                    url: '/seraphine/scene.gltf'
+                    url: '/jz/glb/jz.gltf',
+                    children: [],
+                    info: {
+                        name: '原料糖化车间二',
+                        area: '4236 ㎡',
+                        status: '启用',
+                        desc: '原料糖化车间二，负责原料糖化，启用于2013年'
+                    },
+                    deviceInfo: [
+                        {
+                            type: '生产设备',
+                            name: '立仓',
+                            value: 30
+                        },
+                        {
+                            type: '空调设备',
+                            name: '新风机组',
+                            value: 80
+                        },
+                        {
+                            type: '安防设备',
+                            name: '摄像头',
+                            value: 100
+                        },
+                        {
+                            type: '消防设备',
+                            name: '烟感',
+                            value: 50
+                        }
+                    ],
                 },
             ],
         }
@@ -52,15 +147,16 @@ const { buildValue, treeData, checkedkeys } = toRefs(data);
 const emit = defineEmits(['handleNodeClick'])
 onMounted(() => {
     nextTick(() => {
-        checkedkeys.value = treeData.value[0].children[0].id;
+        checkedkeys.value = treeData.value[0].id;
-        // myTree.setCurrentKey(checkedkeys.value);
+        handleNodeClick(treeData.value[0]);
-        bimStore().setActivateTree(treeData.value[0].children[0]);
-        handleNodeClick(treeData.value[0].children[0]);
     })
 });
 const handleNodeClick = (value) => {
+    if(props.isSetTree) {// 是否存值
         bimStore().setActivateTree(value);
-    emit('handleNodeClick', value)
+    }
+    const isParent = value.children.length > 0;
+    emit('handleNodeClick', value, isParent)
 }
 
 
@@ -77,12 +173,14 @@ const handleNodeClick = (value) => {
     display: flex;
     flex-direction: column;
     align-items: center;
+
     .el-tree {
         width: 224px;
         margin: 0 10px;
         background: transparent;
         color: #3cbfdf;
     }
+
     .el-select {
         margin: 10px;
     }

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

@@ -0,0 +1,169 @@
+<template>
+    <div class="detail-div">
+        <div class="title-div">{{ detailData.name }}</div>
+        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane :label="item" v-for="(item, index) of tabData" :key="index" :name="index + ''">
+            </el-tab-pane>
+        </el-tabs>
+        <BasicInfo :infoList="detailData"></BasicInfo>
+    </div>
+</template>
+<script setup>
+import bimStore from '@/store/modules/bim';
+import BasicInfo from './BasicInfo.vue';
+import { ElMessage } from 'element-plus';
+const deviceData = {
+    'EQ0001': {
+        name: '过滤槽',
+        imgUlr: '',
+        detail: [
+            {
+                name: '资产名称',
+                value: '过滤槽'
+            },
+            {
+                name: '资产类型',
+                value: '糖化设备'
+            },
+            {
+                name: '资产位置',
+                value: '漳州厂区糖化间'
+            },
+            {
+                name: '采购日期',
+                value: '2012-11-15'
+            },
+            {
+                name: '使用日期',
+                value: '2012-11-15'
+            },
+            {
+                name: '过保截至日期',
+                value: '2018-11-15'
+            },
+            {
+                name: '所属厂区',
+                value: '漳州厂区'
+            },
+            {
+                name: '资产编码',
+                value: 'TH-2304187001'
+            },
+            {
+                name: '资产状态',
+                value: '在用'
+            },
+            {
+                name: '累计采购天数',
+                value: '234天'
+            },
+            {
+                name: '投入使用天数',
+                value: '234天'
+            },
+            {
+                name: '距离过保天数',
+                value: '-34天'
+            },
+            {
+                name: '设备二维码',
+                value: '2018-11-15'
+            },
+        ]
+    },
+    'EQ0002': {
+        name: '新风机组',
+        imgUlr: '',
+        detail: [
+            {
+                name: '资产名称',
+                value: '新风机组'
+            },
+            {
+                name: '资产类型',
+                value: '糖化设备'
+            },
+            {
+                name: '资产位置',
+                value: '漳州厂区糖化间'
+            },
+            {
+                name: '采购日期',
+                value: '2012-11-15'
+            },
+            {
+                name: '使用日期',
+                value: '2012-11-15'
+            },
+            {
+                name: '过保截至日期',
+                value: '2018-11-15'
+            },
+            {
+                name: '所属厂区',
+                value: '漳州厂区'
+            },
+            {
+                name: '资产编码',
+                value: 'TH-2304187001'
+            },
+            {
+                name: '资产状态',
+                value: '在用'
+            },
+            {
+                name: '累计采购天数',
+                value: '234天'
+            },
+            {
+                name: '投入使用天数',
+                value: '234天'
+            },
+            {
+                name: '距离过保天数',
+                value: '-34天'
+            },
+            {
+                name: '设备二维码',
+                value: '2018-11-15'
+            },
+        ]
+    }
+}
+
+const activeName = ref('0')
+const tabData = [
+    '基本信息', '实时数据', '历史数据', '巡检记录', '保养记录', '维修记录', '事件记录', '健康分析', '效益分析', '资产对比'
+]
+
+const data = reactive({
+    detailData: {
+        name: '',
+        imgUlr: '',
+        detail: []
+    }
+});
+const { detailData } = toRefs(data);
+const deviceNum = computed(() => bimStore().deviceNum);
+detailData.value = deviceData[deviceNum.value];
+const handleClick = (tab, event) => {
+    if(activeName !== '0') {
+        ElMessage.warning('暂未开发');
+    }
+
+}
+
+
+</script>
+<style lang="scss" scoped>
+.detail-div {
+    height: 700px;
+    .title-div {
+        height: 50px;
+        line-height: 50px;
+        width: 100%;
+        border: 1px solid #ddd;
+        padding: 0 10px;
+    }
+}
+</style>

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

@@ -51,7 +51,7 @@ const data = reactive({
             content: '设备保养周期剩余3天',
             time: '上午',
             timestamp: '11:46',
-            color: '#0bbd87',
+            color: '#31bdb4',
             icon: MoreFilled,
             type: 'primary',
             size: 'large'

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

@@ -4,15 +4,15 @@
         <dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
             <div>
                 <span class="name">名称</span>
-                <span class="text">{{ deviceInfo.name }}</span>
+                <span class="text">{{ deviceInfo && deviceInfo.name }}</span>
             </div>
             <div>
                 <span class="name">类型</span>
-                <span class="text">{{ deviceInfo.type }}</span>
+                <span class="text">{{ deviceInfo && deviceInfo.type }}</span>
             </div>
             <div>
                 <span class="name">状态</span>
-                <span class="text">{{ deviceInfo.status }}</span>
+                <span class="text">{{ deviceInfo && deviceInfo.status }}</span>
             </div>
         </dv-border-box-10>
     </div>
@@ -21,14 +21,11 @@
 import TopDiv from "./TopDiv.vue";
 import bimStore from '@/store/modules/bim';
 const data = reactive({
-  deviceInfo: {
+    deviceInfo: {}
-    name: '立仓',
-    type: '生产设备',
-    status:'启用',
-}
 });
 
 const { deviceInfo } = toRefs(data);
+watch(() => bimStore().activateDevice.info, value => deviceInfo.value = value);
 
 </script>
 <style lang='scss' scoped>
@@ -42,20 +39,23 @@ const { deviceInfo } = 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: 25%;
         }
+
         .text {
             width: 75%;
             color: #fff;
         }
     }
-}
+}</style>
-</style>

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

@@ -1,8 +1,11 @@
 <template>
     <div class="deviceInfoDialog">
         <div class="left-div">
-            <el-tree :data="treedata" show-checkbox node-key="id"  :default-expanded-keys="[1]" :props="defaultProps">
+            <el-select v-model="buildValue" class="m-2" placeholder="Select" size="large">
-            </el-tree>
+                <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" check-strictly="true"
+                highlight-current default-expand-all :current-node-key="checkedkeys" @node-click="handleNodeClick" />
         </div>
         <div class="right-div">
             <div class="top-div">
@@ -27,7 +30,151 @@
 </template>
 <script setup>
 import * as echarts from "echarts";
+import bimStore from '@/store/modules/bim';
+const buildOptions = [
+    {
+        value: '0',
+        label: '漳州工厂',
+    }
+]
+
+const defaultProps = {
+    children: 'children',
+    label: 'label',
+}
 const data = reactive({
+    buildValue: '0',
+    treeData: [
+        {
+            label: '原料糖化车间',
+            id: '0',
+            url: '/jz/glb/jz.gltf',
+            info: {
+                name: '原料糖化车间',
+                area: '9436 ㎡',
+                status: '启用',
+                desc: '原料糖化车间，负责原料糖化，启用于2011年'
+            },
+            deviceInfo: [
+                {
+                    type: '生产设备',
+                    name: '立仓',
+                    num: 'EQ0001',
+                    value: 45,
+                    id: "echartDiv0"
+                },
+                {
+                    type: '空调设备',
+                    name: '新风机组',
+                    num: 'EQ0002',
+                    value: 130,
+                    id: "echartDiv1"
+                },
+                {
+                    type: '安防设备',
+                    name: '摄像头',
+                    num: 'EQ0001',
+                    value: 180,
+                    id: "echartDiv2"
+                },
+                {
+                    type: '消防设备',
+                    name: '烟感',
+                    num: 'EQ0001',
+                    value: 100,
+                    id: "echartDiv3"
+                }
+            ],
+            children: [
+                {
+                    label: '原料糖化车间一',
+                    id: '0-1',
+                    url: '/jz/glb/jz.gltf',
+                    children: [],
+                    info: {
+                        name: '原料糖化车间一',
+                        area: '5200 ㎡',
+                        status: '启用',
+                        desc: '原料糖化车间一，负责原料糖化，启用于2011年'
+                    },
+                    deviceInfo: [
+                        {
+                            type: '生产设备',
+                            name: '立仓',
+                            num: 'EQ0001',
+                            value: 15,
+                            id: "echartDiv0"
+                        },
+                        {
+                            type: '空调设备',
+                            name: '新风机组',
+                            num: 'EQ0002',
+                            value: 50,
+                            id: "echartDiv1"
+                        },
+                        {
+                            type: '安防设备',
+                            name: '摄像头',
+                            num: 'EQ0001',
+                            value: 80,
+                            id: "echartDiv2"
+                        },
+                        {
+                            type: '消防设备',
+                            name: '烟感',
+                            num: 'EQ0001',
+                            value: 50,
+                            id: "echartDiv3"
+                        }
+                    ],
+
+                },
+                {
+                    label: '原料糖化车间二',
+                    id: '0-2',
+                    url: '/jz/glb/jz.gltf',
+                    children: [],
+                    info: {
+                        name: '原料糖化车间二',
+                        area: '4236 ㎡',
+                        status: '启用',
+                        desc: '原料糖化车间二，负责原料糖化，启用于2013年'
+                    },
+                    deviceInfo: [
+                        {
+                            type: '生产设备',
+                            name: '立仓',
+                            num: 'EQ0001',
+                            value: 30,
+                            id: "echartDiv0"
+                        },
+                        {
+                            type: '空调设备',
+                            name: '新风机组',
+                            num: 'EQ0002',
+                            value: 80,
+                            id: "echartDiv1"
+                        },
+                        {
+                            type: '安防设备',
+                            name: '摄像头',
+                            num: 'EQ00011',
+                            value: 100,
+                            id: "echartDiv2"
+                        },
+                        {
+                            type: '消防设备',
+                            name: '烟感',
+                            num: 'EQ0002',
+                            value: 50,
+                            id: "echartDiv3"
+                        }
+                    ],
+                },
+            ],
+        }
+    ],
+    checkedkeys: "",
     deviceList: [
         {
             name: '设备A',
@@ -47,96 +194,27 @@ const data = reactive({
         {
             name: '设备D',
             num: 36,
+            
             id: "echartDiv3"
         }
     ],
-    tableData: [
+    tableData: []
-        {
-            name: '立仓',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '粉碎机',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '摄像头',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '空调机组',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '立仓',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '立仓',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '粉碎机',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '摄像头',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '空调机组',
-            num: 'EQ001',
-            type: '生产设备'
-        },
-        {
-            name: '立仓',
-            num: 'EQ001',
-            type: '生产设备'
-        }
-    ],
-    treedata: [{
-        id: 1,
-        label: '一级 1',
-        children: [{
-            id: 4,
-            label: '二级 1-1',
-            children: [{
-                id: 9,
-                label: '三级 1-1-1'
-            }]
-        }]
-    }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-            id: 5,
-            label: '二级 2-1'
-        }, {
-            id: 6,
-            label: '二级 2-2'
-        }]
-    }],
-    defaultProps: {
-        children: 'children',
-        label: 'label'
-    }
 });
-const { deviceList, tableData, treedata, defaultProps } = toRefs(data);
+const { buildValue, treeData, checkedkeys, deviceList, tableData } = toRefs(data);
+const emit = defineEmits(['viewDetail'])
 onMounted(() => {
     nextTick(() => {
-        deviceList.value.forEach(ele => {
+        checkedkeys.value = treeData.value[0].id;
+        handleNodeClick(treeData.value[0]);
+    })
+})
+
+const handleNodeClick = (value) => {
+    value.deviceInfo.forEach(ele => {
         getCharts(ele);
     })
-    })
+    tableData.value = value.deviceInfo;
-})
+}
 
 const getCharts = (ele) => {
     var dom = document.getElementById(ele.id);
@@ -325,7 +403,7 @@ const getCharts = (ele) => {
                 },
 
                 data: [{
-                    value: 50,
+                    value: ele.value,
                     name: ele.name
                 },]
             }]
@@ -336,6 +414,8 @@ const getCharts = (ele) => {
 }
 
 const viewDetail = (val) => {
+    bimStore().setDeviceNum(val.num);
+    emit('viewDetail', val);
 }
 </script>
 <style lang="scss" scoped>
@@ -348,6 +428,13 @@ const viewDetail = (val) => {
         width: 20%;
         height: 100%;
         border: 1px solid #3cbfdf;
+
+        .el-tree {
+            margin: 0 10px;
+        }
+        .el-select {
+            margin: 10px;
+        }
     }
 
     .right-div {

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

@@ -21,32 +21,35 @@ import "echarts-gl"
 import TopDiv from "./TopDiv.vue";
 import bimStore from '@/store/modules/bim';
 const emit = defineEmits(['openDialog'])
-const data = reactive({
-    optionsData: [
-        { value: 34, name: "A类设备" },
-        { value: 200, name: "B类设备" },
-        { value: 16, name: "C类设备" },
-        { value: 50, name: "D类设备" }]
-});
 
-const { optionsData } = toRefs(data);
 
-const optionData = optionsData.value.map((item) => {
+const deviceInfo = computed(() =>
+    bimStore().activateTree.deviceInfo
+);
+
+onMounted(() => {
+    initData();
+})
+
+watch(deviceInfo, (value) => {
+    console.log(34, value);
+    if (value) {
+        initData();
+    }
+},)
+
+const initData = () => {
+    const optionData = deviceInfo.value.map((item) => {
         return {
             ...item,
             rate: ((item.value / 300).toFixed(1)) * 100,
         };
     });
-
-onMounted(() => {
     nextTick(() => {
-        getCharts();
+        getCharts(optionData);
     })
-})
+}
-
+const getCharts = (optionData) => {
-const getCharts = () => {
-
-
     var dom = document.getElementById('charts');
     if (dom) {
         // 手动移除该属性

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

@@ -32,17 +32,32 @@ const data = reactive({
         {
             label: '生产设备',
             id: '0',
+            info: {
+                name: '生产设备',
+                type: '生产设备',
+                status: '启用'
+            },
             children: [
                 {
                     label: '立仓',
                     id: '0-1',
-                    url: '/jz/glb/jz.gltf'
+                    url: '/jz/glb/jz.gltf',
+                    info: {
+                        name: '立仓',
+                        type: '生产设备',
+                        status: '启用'
+                    },
 
                 },
                 {
                     label: '糖浆罐',
                     id: '0-2',
-                    url: '/seraphine/scene.gltf'
+                    url: '/seraphine/scene.gltf',
+                    info: {
+                        name: '糖浆罐',
+                        type: '生产设备',
+                        status: '启用'
+                    },
                 },
             ],
         }
@@ -54,8 +69,6 @@ const emit = defineEmits(['handleNodeClick'])
 onMounted(() => {
     nextTick(() => {
         checkedkeys.value = treeData.value[0].children[0].id;
-        // myTree.setCurrentKey(checkedkeys.value);
-        bimStore().setActivateDeviceTree(treeData.value[0].children[0]);
         handleNodeClick(treeData.value[0].children[0]);
     })
 });
@@ -84,6 +97,7 @@ const handleNodeClick = (value) => {
         background: transparent;
         color: #3cbfdf;
     }
+
     .el-select {
         margin: 10px;
     }

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

@@ -1,6 +1,18 @@
 <template>
     <div class="realInfoDialog">
         <div class="top-div">
+            <div>
+                <span class="name">名称:</span>
+                <span class="text">{{ deviceInfo && deviceInfo.name }}</span>
+            </div>
+            <div>
+                <span class="name">类型:</span>
+                <span class="text">{{ deviceInfo && deviceInfo.type }}</span>
+            </div>
+            <div>
+                <span class="name">状态:</span>
+                <span class="text">{{ deviceInfo && deviceInfo.status }}</span>
+            </div>
 
         </div>
         <div class="bottom-div">
@@ -14,10 +26,15 @@
     </div>
 </template>
 <script setup>
+import bimStore from '@/store/modules/bim';
 const data = reactive({
 
 });
 
+const deviceInfo = computed(() =>
+    bimStore().activateDevice.info
+);
+
 </script>
 <style lang="scss" scoped>
 .realInfoDialog {
@@ -30,6 +47,23 @@ const data = reactive({
         width: 100%;
         height: 25%;
         border: 1px solid #3cbfdf;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        > div {
+            display: flex;
+            line-height: 48px;
+            width: 240px;
+            justify-content: space-between;
+        }
+        .name {
+            width: 45%;
+            text-align: right;
+        }
+        .text {
+            width: 45%;
+            text-align: left;
+        }
     }
 
     .bottom-div {
@@ -43,6 +77,7 @@ const data = reactive({
             height: 100%;
             border: 1px solid #3cbfdf;
         }
+
         .right-div {
             width: 79%;
             height: 100%;

src/views/bim/bimHome/index.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="app-container">
     <!-- 场景模型 -->
-    <ThreeView background="#353535" light="0xffffff" :sceneUrl="sceneUrl"></ThreeView>
+    <ThreeView background="#353535" light="0xffffff" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
     <!-- 底部菜单 -->
     <MenuTab @changeMenu="changeMenu"></MenuTab>
     <!-- 左侧建筑菜单 -->
-    <BuildTree v-if="activateIndex == 0" @handleNodeClick="handleBuildClick"></BuildTree>
+    <BuildTree v-if="activateIndex == 0" isSetTree="true" @handleNodeClick="handleBuildClick"></BuildTree>
     <!-- 建筑信息 -->
-    <BuildInfo v-if="activateIndex == 0"></BuildInfo>
+    <BuildInfo v-if="buildInfo && activateIndex == 0"></BuildInfo>
     <!-- 资产信息 -->
-    <DevicePie v-if="activateIndex == 0" @openDialog="openDialog"></DevicePie>
+    <DevicePie v-if="deviceInfo && activateIndex == 0" @openDialog="openDialog"></DevicePie>
     <!-- 左侧资产菜单 -->
     <DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
     <!-- 资产信息 -->
-    <DeviceInfo v-if="activateIndex == 1"></DeviceInfo>
+    <DeviceInfo v-if="equimentInfo && activateIndex == 1"></DeviceInfo>
     <!-- 资产事件 -->
     <DeviceEvent v-if="activateIndex == 1" @openDialog="openDialog1"></DeviceEvent>
     <!-- 左侧应用菜单 -->
@@ -23,22 +23,16 @@
     <!-- 实时数据 -->
     <RealData v-if="activateIndex == 2" @openDialog="openDialog1"></RealData>
     <!-- 资产信息弹出框 -->
-    <el-dialog
+    <el-dialog v-model="dialogVisible" title="资产信息" width="1200px" append-to-body>
-      v-model="dialogVisible"
+      <DeviceInfoDialog @viewDetail="viewDetail"></DeviceInfoDialog>
-      title="资产信息"
-      width="1200px"
-      append-to-body
-    >
-      <DeviceInfoDialog></DeviceInfoDialog>
     </el-dialog>
-    <el-dialog
+    <el-dialog v-model="dialogVisible1" title="实时数据" width="1200px" append-to-body>
-      v-model="dialogVisible1"
-      title="实时数据"
-      width="1200px"
-      append-to-body
-    >
       <RealInfoDialog></RealInfoDialog>
     </el-dialog>
+    <!-- 资产详情 -->
+    <el-dialog v-model="dialogVisible2" v-if="dialogVisible2" title="资产详情" width="1500px" append-to-body>
+      <DeviceDetial></DeviceDetial>
+    </el-dialog>
 
   </div>
 </template>
@@ -56,19 +50,33 @@ import RealData from './components/RealData.vue';
 import ThreeView from './components/ThreeView.vue';
 import DeviceInfoDialog from './components/DeviceInfoDialog.vue';
 import RealInfoDialog from './components/RealInfoDialog.vue';
+import DeviceDetial from './components/DeviceDetial.vue';
 import bimStore from '@/store/modules/bim';
+import { computed } from 'vue';
 const data = reactive({
-  sceneUrl: '/jz/glb/jz.gltf'
+  sceneUrl: '',
+  equimentInfo: {},
 });
 
-const { sceneUrl } = toRefs(data);
+const { sceneUrl,equimentInfo} = toRefs(data);
 const dialogVisible = ref(false);
 const dialogVisible1 = ref(false);
+const dialogVisible2 = ref(false);
 
 const activateIndex = computed(() =>
   bimStore().activateIndex
 );
 
+const buildInfo = computed(() =>
+  bimStore().activateTree.info
+);
+
+const deviceInfo = computed(() =>
+  bimStore().activateTree.deviceInfo
+);
+
+
+
 const onReady = () => {
 }
 
@@ -78,22 +86,25 @@ const onError = () => {
 const onProgress = () => {
 }
 
-const handleBuildClick = (value) => {
+const handleBuildClick = (value, isParent) => {
+  // 点击父级，加载/切换场景
+  if (isParent) {
     sceneUrl.value = value.url;
     console.log(sceneUrl.value);
+    return;
+  }
 
 }
 
 const handleDeviceClick = (value) => {
-  console.log(value);
+  equimentInfo.value = bimStore().activateDevice.info;
 }
 
 const handleApplicationClick = (value) => {
   console.log(value);
 }
 
-const changeMenu = () => {
+const changeMenu = (index) => {
-
 }
 
 const openDialog = () => {
@@ -103,6 +114,11 @@ const openDialog = () => {
 const openDialog1 = () => {
   dialogVisible1.value = true;
 }
+
+const viewDetail = (val) => {
+  console.log(val);
+  dialogVisible2.value = true;
+}
 </script>
 <style lang='scss' scoped>
 .app-container {