From 2dce720b2cf1cfeb20601eec01fe0120755b4ec1 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Sun, 3 Dec 2023 19:19:08 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=82=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bimHome/components/DeviceInfoDialog.vue   | 149 ++++++++++++++++++
 .../bim/bimHome/components/DevicePie.vue      |  19 ++-
 .../bim/bimHome/components/ThreeView.vue      |  31 ++--
 src/views/bim/bimHome/index.vue               |  17 +-
 4 files changed, 201 insertions(+), 15 deletions(-)
 create mode 100644 src/views/bim/bimHome/components/DeviceInfoDialog.vue

diff --git a/src/views/bim/bimHome/components/DeviceInfoDialog.vue b/src/views/bim/bimHome/components/DeviceInfoDialog.vue
new file mode 100644
index 0000000..0898c2c
--- /dev/null
+++ b/src/views/bim/bimHome/components/DeviceInfoDialog.vue
@@ -0,0 +1,149 @@
+<template>
+    <div class="deviceInfoDialog">
+        <div class="left-div">
+
+        </div>
+        <div class="right-div">
+            <div class="top-div">
+                <div :id="'echartDiv' + index" class="echartDiv100" v-for="(item, index) of deviceList" :key="index"></div>
+            </div>
+            <div class="bottom-div">
+                <el-table :data="tableData" border style="width: 100%" height="450">
+                    <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
+                    <el-table-column prop="name" label="名称" align="center"/>
+                    <el-table-column prop="num" label="编码" align="center"/>
+                    <el-table-column prop="type" label="类型" align="center"/>
+                    <el-table-column label="操作" align="center">
+                        <template #default="scope">
+                            <el-button link type="primary" @click="handleClearCacheName(scope.row)">查看</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+const data = reactive({
+    deviceList: [
+        {
+            name: '设备A',
+            num: 36,
+        },
+        {
+            name: '设备B',
+            num: 36,
+        },
+        {
+            name: '设备C',
+            num: 36,
+        },
+        {
+            name: '设备D',
+            num: 36,
+        }
+    ],
+    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: '生产设备'
+        }
+    ]
+});
+const { deviceList, tableData } = toRefs(data);
+onMounted(() => {
+    deviceList.value.forEach(ele => {
+        getCharts(ele);
+    })
+})
+
+const getCharts = (data) => {
+
+}
+</script>
+<style lang="scss" scoped>
+.deviceInfoDialog {
+    height: 600px;
+    display: flex;
+    justify-content: space-between;
+
+    .left-div {
+        width: 20%;
+        height: 100%;
+        border: 1px solid #3cbfdf;
+    }
+
+    .right-div {
+        width: 79%;
+        height: 100%;
+        // border: 1px solid #3cbfdf;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .top-div {
+            height: 25%;
+            border: 1px solid #3cbfdf;
+            display: flex;
+            justify-content: space-between;
+
+            >div {
+                width: 22%;
+                height: 100%;
+                border: 1px solid #3cbfdf;
+            }
+        }
+
+        .bottom-div {
+            height: 74%;
+            border: 1px solid #3cbfdf;
+        }
+    }
+}
+</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 67499d0..1237b14 100644
--- a/src/views/bim/bimHome/components/DevicePie.vue
+++ b/src/views/bim/bimHome/components/DevicePie.vue
@@ -3,13 +3,17 @@
         <TopDiv title="资产信息"></TopDiv>
         <dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
         </dv-border-box-10>
+        <div class="box-button" @click="openDialog">
+        </div>
     </div>
 </template>
 <script setup>
 import TopDiv from "./TopDiv.vue";
 import bimStore from '@/store/modules/bim';
-
-
+const emit = defineEmits(['openDialog'])
+const openDialog = () => {
+    emit('openDialog', openDialog)
+}
 </script>
 <style lang='scss' scoped>
 .deviceDiv {
@@ -22,5 +26,16 @@ import bimStore from '@/store/modules/bim';
     flex-direction: column;
     align-items: center;
     color: #3cbfdf;
+    .box-button {
+        width:20px;
+        height:20px;
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+        border: 2px solid #3cbfdf;
+        border-radius: 5px;
+        cursor: pointer;
+
+    }
 }
 </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 bbea9de..7dae170 100644
--- a/src/views/bim/bimHome/components/ThreeView.vue
+++ b/src/views/bim/bimHome/components/ThreeView.vue
@@ -108,20 +108,27 @@ const renderScene = () => {
 };
 
 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);
-  }
+    if (event.button != 0) return;
+    const mouse = new THREE.Vector2();
+    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
+    const raycaster = new THREE.Raycaster();
+    raycaster.setFromCamera(mouse, camera);
+    const intersected = raycaster.intersectObject(scene, true)
+    if (intersected.length) {
+        // 其他材质恢复原材质,待研究
+        intersected.forEach(obj => {
+            
+            obj.object.material.transparent = true;
+            let color = new THREE.Color(obj.object.material.color);
+            console.log(123,color);
+            obj.object.material.color.set(color);
+        })
+        intersected[0].object.material.color.set(0x66ff00);
+        renderer.render(scene, camera);
+    }
 };
 
-//高亮
-const outlineObj = (object) => {
-    object.material.color.set(0x66ff00);
-}
 </script>
 <style lang='scss' scoped>
 #three {
diff --git a/src/views/bim/bimHome/index.vue b/src/views/bim/bimHome/index.vue
index 15726b3..600be94 100644
--- a/src/views/bim/bimHome/index.vue
+++ b/src/views/bim/bimHome/index.vue
@@ -9,7 +9,7 @@
     <!-- 建筑信息 -->
     <BuildInfo v-if="activateIndex == 0"></BuildInfo>
     <!-- 资产信息 -->
-    <DevicePie v-if="activateIndex == 0"></DevicePie>
+    <DevicePie v-if="activateIndex == 0" @openDialog="openDialog"></DevicePie>
     <!-- 左侧资产菜单 -->
     <DeviceTree v-if="activateIndex == 1" @handleNodeClick="handleDeviceClick"></DeviceTree>
     <!-- 资产信息 -->
@@ -22,6 +22,15 @@
     <EquipmentInfo v-if="activateIndex == 2"></EquipmentInfo>
     <!-- 实时数据 -->
     <RealData v-if="activateIndex == 2"></RealData>
+    <!-- 资产信息弹出框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="资产信息"
+      width="1200px"
+      append-to-body
+    >
+      <DeviceInfoDialog></DeviceInfoDialog>
+    </el-dialog>
   </div>
 </template>
 <script setup name="bimHome">
@@ -36,12 +45,14 @@ import ApplicationTree from './components/ApplicationTree.vue';
 import EquipmentInfo from './components/EquipmentInfo.vue';
 import RealData from './components/RealData.vue';
 import ThreeView from './components/ThreeView.vue';
+import DeviceInfoDialog from './components/DeviceInfoDialog.vue';
 import bimStore from '@/store/modules/bim';
 const data = reactive({
   sceneUrl: '/jz/glb/jz.gltf'
 });
 
 const { sceneUrl } = toRefs(data);
+const dialogVisible = ref(false);
 
 const activateIndex = computed(() =>
   bimStore().activateIndex
@@ -73,6 +84,10 @@ const handleApplicationClick = (value) => {
 const changeMenu = () => {
 
 }
+
+const openDialog = () => {
+  dialogVisible.value = true;
+}
 </script>
 <style lang='scss' scoped>
 .app-container {