From 2a4b42ba0bbe3b5c659d02ed2bea69fa8f5355d7 Mon Sep 17 00:00:00 2001
From: wangqiujuan0808 <578331299@qq.com>
Date: Thu, 14 Dec 2023 11:55:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E6=A8=A1=E5=9E=8B=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/store/modules/bim.js                      | 10 +++++++++-
 src/views/bim/bimHome/components/MenuTab.vue  | 19 ++++++++++++++-----
 .../bim/bimHome/components/ThreeView2.vue     | 10 +++++++++-
 src/views/bim/bimHome/index.vue               |  4 ++--
 5 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 8ab3351..56e2997 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "若依",
   "license": "MIT",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host=0.0.0.0",
     "build:prod": "vite build",
     "build:stage": "vite build --mode staging",
     "preview": "vite preview"
diff --git a/src/store/modules/bim.js b/src/store/modules/bim.js
index c36f36b..6c1fb87 100644
--- a/src/store/modules/bim.js
+++ b/src/store/modules/bim.js
@@ -6,13 +6,21 @@ const bimStore = defineStore(
             activateTree: {},
             activateDevice: {},
             activateApplication: {},
-            deviceNum: ''
+            deviceNum: '',
+            activateMenu: {
+                name: '建筑信息',
+        background: '#202a60'
+            }
         }),
         actions: {
             // 菜单
             setActivateIndex(index) {
                 this.activateIndex = index;
             },
+
+            setActivateMenu(item) {
+                this.activateMenu = item;
+            },
             // 建筑树选中
             setActivateTree(item) {
                 this.activateTree = item;
diff --git a/src/views/bim/bimHome/components/MenuTab.vue b/src/views/bim/bimHome/components/MenuTab.vue
index 7bb4285..94bf0c2 100644
--- a/src/views/bim/bimHome/components/MenuTab.vue
+++ b/src/views/bim/bimHome/components/MenuTab.vue
@@ -1,21 +1,25 @@
 <template>
     <div class="menuDiv">
-        <div v-for="(item, index) of menuList" :key="index" @click="changeMenu(index)"
+        <div v-for="(item, index) of menuList" :key="index" @click="changeMenu(index, item)"
             :class="{ 'activateTab': index == activateIndex }">{{ item.name }}</div>
     </div>
 </template>
 <script setup>
 import bimStore from '@/store/modules/bim';
+import { onMounted } from 'vue';
 
 const menuList = [
     {
-        name: '建筑信息'
+        name: '建筑信息',
+        background: '#000000'
     },
     {
-        name: '资产信息'
+        name: '资产信息',
+        background: '#2b2f48'
     },
     {
-        name: 'BIM应用'
+        name: 'BIM应用',
+        background: '#212b5f'
     }
 ]
 
@@ -23,11 +27,16 @@ const data = reactive({
     activateIndex: 0
 });
 
+onMounted(() => {
+    changeMenu(0, menuList[0]);
+})
+
 const { activateIndex } = toRefs(data);
 const emit = defineEmits(['changeMenu'])
-const changeMenu = (index) => {
+const changeMenu = (index, item) => {
     activateIndex.value = index;
     bimStore().setActivateIndex(index);
+    bimStore().setActivateMenu(item);
     emit('changeMenu', index)
 }
 </script>
diff --git a/src/views/bim/bimHome/components/ThreeView2.vue b/src/views/bim/bimHome/components/ThreeView2.vue
index 0bd78b6..2fa715b 100644
--- a/src/views/bim/bimHome/components/ThreeView2.vue
+++ b/src/views/bim/bimHome/components/ThreeView2.vue
@@ -16,7 +16,7 @@
     </div>
 </template>
 <script setup>
-import { onMounted, ref } 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";
@@ -80,9 +80,17 @@ Bus.on('clickApplication', e => {
     console.log('clickApplication');
 })
 
+watch(() => bimStore().activateMenu, value => {
+    console.log(1,scene);
+    // 更换场景颜色
+    scene.background = new THREE.Color(value.background);
+    toHomeView();
+},{ deep: true });
+
 const init = () => {
     // 场景
     scene = new THREE.Scene();
+    scene.background = new THREE.Color(bimStore().activateMenu.background);
     // 相机
     camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
     // camera.position.z = 5;  
diff --git a/src/views/bim/bimHome/index.vue b/src/views/bim/bimHome/index.vue
index 848236b..8f3ec54 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="#202a60" light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
+    <ThreeView light="0xfffafa" :sceneUrl="sceneUrl" v-if="sceneUrl !== ''"></ThreeView>
     <!-- <ThreeModel /> -->
     <!-- 底部菜单 -->
     <MenuTab @changeMenu="changeMenu"></MenuTab>
@@ -55,7 +55,7 @@ import DeviceDetial from './components/DeviceDetial.vue';
 import bimStore from '@/store/modules/bim';
 import { computed } from 'vue';
 const data = reactive({
-  sceneUrl: '',
+  sceneUrl: '/jz/glb/scene.gltf',
   equimentInfo: {},
 });