diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 897f9f2..da07523 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,35 +1,49 @@
 <template>
   <div id="Tunnel" ref="threeDom">
-    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+    <div
+      class="YuanDian"
+      v-for="(item, i) in labelData"
+      :key="item.id"
+      :id="item.id"
+      style="display: none"
+    >
       <div class="iconBox" v-show="show == item.id">
         <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
         <div class="ydBox">
           <div class="YuanDianText">{{ item.name }}</div>
           <div class="ydData" v-for="(val, k) in item.data" :key="k">
-            <div class="leftData">{{ val.name + ':' }}</div>
-            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+            <div class="leftData">{{ val.name + ":" }}</div>
+            <div class="rightData">{{ val.value + " " + val.unit }}</div>
           </div>
         </div>
       </div>
-      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+      <img
+        class="YuanDianIcon"
+        :src="item.icon"
+        @mouseenter="show = item.id"
+        @mouseleave="show = ''"
+      />
     </div>
   </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from 'vue';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { Water } from 'three/examples/jsm/objects/Water.js';
+import { ref, reactive, toRefs, onMounted } from "vue";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { Water } from "three/examples/jsm/objects/Water.js";
 
-import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import gsap from 'gsap';
-import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+import {
+  CSS3DRenderer,
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import gsap from "gsap";
+import { CSSRulePlugin } from "gsap/CSSRulePlugin";
 
-const show = ref('');
+const show = ref("");
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -41,134 +55,134 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian1`,
     position: {
       x: -1390,
       y: 65,
       z: -70,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian2`,
     position: {
       x: -1080,
       y: 65,
       z: -80,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '激光位移计',
+    name: "激光位移计",
     id: `YuanDian3`,
     position: {
       x: -400,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/wyj_mx.png',
+    icon: "/Three/icon/wyj_mx.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '激光位移计',
+    name: "激光位移计",
     id: `YuanDian4`,
     position: {
       x: -400,
       y: 80,
       z: -200,
     },
-    icon: '/Three/icon/wyj_mx.png',
+    icon: "/Three/icon/wyj_mx.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '应变计',
+    name: "应变计",
     id: `YuanDian5`,
     position: {
       x: -1380,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/ybj_icon.png',
+    icon: "/Three/icon/ybj_icon.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '裂缝计',
+    name: "裂缝计",
     id: `YuanDian6`,
     position: {
       x: -1350,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/lfj_mx.png',
+    icon: "/Three/icon/lfj_mx.png",
     data: [
       {
-        name: '绝对沉降',
-        value: '2.67',
-        unit: 'mm',
+        name: "绝对沉降",
+        value: "2.67",
+        unit: "mm",
       },
       {
-        name: '相对沉降',
-        value: '2.96',
-        unit: 'mm',
+        name: "相对沉降",
+        value: "2.96",
+        unit: "mm",
       },
     ],
   },
@@ -207,11 +221,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
+  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    gltf => {
+    (gltf) => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -224,6 +238,8 @@
         if (child.isMesh) {
           child.frustumCulled = false;
           child.material.side = THREE.DoubleSide;
+          child.material.emissive = child.material.color;
+          child.material.emissiveMap = child.material.map;
           granaryArr.value.push(child);
         }
       });
@@ -249,7 +265,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -263,7 +279,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
 };
 
@@ -272,8 +288,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById('Tunnel').clientWidth;
-  height.value = document.getElementById('Tunnel').clientHeight;
+  width.value = document.getElementById("Tunnel").clientWidth;
+  height.value = document.getElementById("Tunnel").clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -294,8 +310,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = 'absolute';
-  LabelRenderer.value.domElement.style.top = '0px';
+  LabelRenderer.value.domElement.style.position = "absolute";
+  LabelRenderer.value.domElement.style.top = "0px";
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -305,7 +321,12 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
+  Camera.value = new THREE.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    1,
+    4000
+  );
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -320,7 +341,7 @@
   // //上下翻转的最小角度
   Controls.value.minPolarAngle = 0.2;
   //是否允许缩放
-  Controls.value.enableZoom = false;
+  Controls.value.enableZoom = true;
   // 使动画循环使用时阻尼或自转 意思是否有惯性
   Controls.value.enableDamping = false;
   // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
@@ -336,8 +357,8 @@
   // 是否开启右键拖拽
   Controls.value.enablePan = true;
   // AxesHelper：辅助观察的坐标系
-  // const axesHelper = new THREE.AxesHelper(3000);
-  // Scene.add(axesHelper);
+  //   const axesHelper = new THREE.AxesHelper(3000);
+  //   Scene.add(axesHelper);
 };
 
 /**
@@ -346,19 +367,20 @@
  */
 const initLight = () => {
   // 设置场景的背景颜色，即天空颜色
-  Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色
+  // Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色
   // 设置天空的雾气颜色和雾气近距离
   // Scene.fog = new THREE.Fog(0xffffff, 50, 200); // 距离10开始，到200结束
   // Scene.fog = new THREE.Fog(0x1784f9, 50, 2000); // 距离10开始，到200结束
   //  创建平行光源
   // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
-  // const directionalLight = new THREE.DirectionalLight(0x1784f9, 0.6);
-  // directionalLight.position.set(-2500, 1, 1);
+  // const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+  // // directionalLight.position.set(-2500, 1, 1);
   // Scene.add(directionalLight);
   // 创建环境光
-  // const ambientLight = new THREE.AmbientLight('#ffffff', 0.8);
+  const ambientLight = new THREE.AmbientLight("#ffffff", 0.5);
+  ambientLight.visible = true;
   // const ambientLight = new THREE.AmbientLight('#1784f9', 0.8);
-  // Scene.add(ambientLight);
+  Scene.add(ambientLight);
   // 创建平行光辅助线
   // const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.5);
   // Scene.add(directionalLightHelper);
@@ -366,6 +388,11 @@
   // const PointLight = new THREE.PointLight(0x1784f9, 1, 300);
   // PointLight.position.set(100, -100, 10);
   // Scene.add(PointLight);
+  // const spotLight = new THREE.SpotLight(0xffffff);
+  // spotLight.position.set(-1000, 1000, 0);
+  // spotLight.castShadow = true;
+  // spotLight.intensity = 800;
+  // Scene.add(spotLight);
 };
 
 /**
@@ -375,18 +402,18 @@
  * 注意：此函数未使用TextureLoader加载背景图片，而是使用HDR纹理
  */
 const initSky = () => {
-  var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
-  pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
-    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
-    envMap.isPmremTexture = true;
-    Scene.environment = envMap;
-    Scene.background = envMap;
-    pmremGenerator.dispose();
-  });
-  // new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) {
-  //   Scene.background = texture;
+  // var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
+  // pmremGenerator.compileEquirectangularShader();
+  // new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  //   const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+  //   envMap.isPmremTexture = true;
+  //   Scene.environment = envMap;
+  //   // Scene.background = envMap;
+  //   pmremGenerator.dispose();
   // });
+  new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) {
+    Scene.background = texture;
+  });
 };
 
 /**
@@ -410,7 +437,7 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = 'block';
+      lableDiv.style.display = "block";
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
       // labelCSS3D.scale.set(0.1, 0.1, 0.1);
@@ -442,11 +469,11 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal('yjlSD', '/Gltf/yjlSD.gltf');
+  initModal("yjlSD", "/Gltf/yjlSD.gltf");
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === 'complete') {
+    if (document.readyState === "complete") {
       createLable();
       // createWaterLevel();
     }
@@ -466,11 +493,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse(e => {
+  Scene.traverse((e) => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach(m => {
+        e.material.forEach((m) => {
           m.dispose();
         });
       } else {
@@ -523,7 +550,11 @@
       bottom: 12px;
       width: 45px;
       // height: 26px;
-      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(12, 54, 92, 0.6) 0%,
+        rgba(12, 54, 92, 0.6) 100%
+      );
       border-radius: 2px;
       border: 1px solid #04d8ff;
       .ydData {
@@ -553,7 +584,11 @@
       pointer-events: none;
       font-size: 3px;
       text-align: center;
-      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(4, 216, 255, 0.8) 0%,
+        rgba(4, 216, 255, 0.2) 100%
+      );
     }
 
     .YuanDianIcon {

diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 897f9f2..da07523 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,35 +1,49 @@
 <template>
   <div id="Tunnel" ref="threeDom">
-    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+    <div
+      class="YuanDian"
+      v-for="(item, i) in labelData"
+      :key="item.id"
+      :id="item.id"
+      style="display: none"
+    >
       <div class="iconBox" v-show="show == item.id">
         <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
         <div class="ydBox">
           <div class="YuanDianText">{{ item.name }}</div>
           <div class="ydData" v-for="(val, k) in item.data" :key="k">
-            <div class="leftData">{{ val.name + ':' }}</div>
-            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+            <div class="leftData">{{ val.name + ":" }}</div>
+            <div class="rightData">{{ val.value + " " + val.unit }}</div>
           </div>
         </div>
       </div>
-      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+      <img
+        class="YuanDianIcon"
+        :src="item.icon"
+        @mouseenter="show = item.id"
+        @mouseleave="show = ''"
+      />
     </div>
   </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from 'vue';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { Water } from 'three/examples/jsm/objects/Water.js';
+import { ref, reactive, toRefs, onMounted } from "vue";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { Water } from "three/examples/jsm/objects/Water.js";
 
-import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import gsap from 'gsap';
-import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+import {
+  CSS3DRenderer,
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import gsap from "gsap";
+import { CSSRulePlugin } from "gsap/CSSRulePlugin";
 
-const show = ref('');
+const show = ref("");
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -41,134 +55,134 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian1`,
     position: {
       x: -1390,
       y: 65,
       z: -70,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian2`,
     position: {
       x: -1080,
       y: 65,
       z: -80,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '激光位移计',
+    name: "激光位移计",
     id: `YuanDian3`,
     position: {
       x: -400,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/wyj_mx.png',
+    icon: "/Three/icon/wyj_mx.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '激光位移计',
+    name: "激光位移计",
     id: `YuanDian4`,
     position: {
       x: -400,
       y: 80,
       z: -200,
     },
-    icon: '/Three/icon/wyj_mx.png',
+    icon: "/Three/icon/wyj_mx.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '应变计',
+    name: "应变计",
     id: `YuanDian5`,
     position: {
       x: -1380,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/ybj_icon.png',
+    icon: "/Three/icon/ybj_icon.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '裂缝计',
+    name: "裂缝计",
     id: `YuanDian6`,
     position: {
       x: -1350,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/lfj_mx.png',
+    icon: "/Three/icon/lfj_mx.png",
     data: [
       {
-        name: '绝对沉降',
-        value: '2.67',
-        unit: 'mm',
+        name: "绝对沉降",
+        value: "2.67",
+        unit: "mm",
       },
       {
-        name: '相对沉降',
-        value: '2.96',
-        unit: 'mm',
+        name: "相对沉降",
+        value: "2.96",
+        unit: "mm",
       },
     ],
   },
@@ -207,11 +221,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
+  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    gltf => {
+    (gltf) => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -224,6 +238,8 @@
         if (child.isMesh) {
           child.frustumCulled = false;
           child.material.side = THREE.DoubleSide;
+          child.material.emissive = child.material.color;
+          child.material.emissiveMap = child.material.map;
           granaryArr.value.push(child);
         }
       });
@@ -249,7 +265,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -263,7 +279,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
 };
 
@@ -272,8 +288,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById('Tunnel').clientWidth;
-  height.value = document.getElementById('Tunnel').clientHeight;
+  width.value = document.getElementById("Tunnel").clientWidth;
+  height.value = document.getElementById("Tunnel").clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -294,8 +310,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = 'absolute';
-  LabelRenderer.value.domElement.style.top = '0px';
+  LabelRenderer.value.domElement.style.position = "absolute";
+  LabelRenderer.value.domElement.style.top = "0px";
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -305,7 +321,12 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
+  Camera.value = new THREE.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    1,
+    4000
+  );
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -320,7 +341,7 @@
   // //上下翻转的最小角度
   Controls.value.minPolarAngle = 0.2;
   //是否允许缩放
-  Controls.value.enableZoom = false;
+  Controls.value.enableZoom = true;
   // 使动画循环使用时阻尼或自转 意思是否有惯性
   Controls.value.enableDamping = false;
   // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
@@ -336,8 +357,8 @@
   // 是否开启右键拖拽
   Controls.value.enablePan = true;
   // AxesHelper：辅助观察的坐标系
-  // const axesHelper = new THREE.AxesHelper(3000);
-  // Scene.add(axesHelper);
+  //   const axesHelper = new THREE.AxesHelper(3000);
+  //   Scene.add(axesHelper);
 };
 
 /**
@@ -346,19 +367,20 @@
  */
 const initLight = () => {
   // 设置场景的背景颜色，即天空颜色
-  Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色
+  // Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色
   // 设置天空的雾气颜色和雾气近距离
   // Scene.fog = new THREE.Fog(0xffffff, 50, 200); // 距离10开始，到200结束
   // Scene.fog = new THREE.Fog(0x1784f9, 50, 2000); // 距离10开始，到200结束
   //  创建平行光源
   // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
-  // const directionalLight = new THREE.DirectionalLight(0x1784f9, 0.6);
-  // directionalLight.position.set(-2500, 1, 1);
+  // const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+  // // directionalLight.position.set(-2500, 1, 1);
   // Scene.add(directionalLight);
   // 创建环境光
-  // const ambientLight = new THREE.AmbientLight('#ffffff', 0.8);
+  const ambientLight = new THREE.AmbientLight("#ffffff", 0.5);
+  ambientLight.visible = true;
   // const ambientLight = new THREE.AmbientLight('#1784f9', 0.8);
-  // Scene.add(ambientLight);
+  Scene.add(ambientLight);
   // 创建平行光辅助线
   // const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.5);
   // Scene.add(directionalLightHelper);
@@ -366,6 +388,11 @@
   // const PointLight = new THREE.PointLight(0x1784f9, 1, 300);
   // PointLight.position.set(100, -100, 10);
   // Scene.add(PointLight);
+  // const spotLight = new THREE.SpotLight(0xffffff);
+  // spotLight.position.set(-1000, 1000, 0);
+  // spotLight.castShadow = true;
+  // spotLight.intensity = 800;
+  // Scene.add(spotLight);
 };
 
 /**
@@ -375,18 +402,18 @@
  * 注意：此函数未使用TextureLoader加载背景图片，而是使用HDR纹理
  */
 const initSky = () => {
-  var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
-  pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
-    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
-    envMap.isPmremTexture = true;
-    Scene.environment = envMap;
-    Scene.background = envMap;
-    pmremGenerator.dispose();
-  });
-  // new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) {
-  //   Scene.background = texture;
+  // var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
+  // pmremGenerator.compileEquirectangularShader();
+  // new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  //   const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+  //   envMap.isPmremTexture = true;
+  //   Scene.environment = envMap;
+  //   // Scene.background = envMap;
+  //   pmremGenerator.dispose();
   // });
+  new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) {
+    Scene.background = texture;
+  });
 };
 
 /**
@@ -410,7 +437,7 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = 'block';
+      lableDiv.style.display = "block";
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
       // labelCSS3D.scale.set(0.1, 0.1, 0.1);
@@ -442,11 +469,11 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal('yjlSD', '/Gltf/yjlSD.gltf');
+  initModal("yjlSD", "/Gltf/yjlSD.gltf");
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === 'complete') {
+    if (document.readyState === "complete") {
       createLable();
       // createWaterLevel();
     }
@@ -466,11 +493,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse(e => {
+  Scene.traverse((e) => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach(m => {
+        e.material.forEach((m) => {
           m.dispose();
         });
       } else {
@@ -523,7 +550,11 @@
       bottom: 12px;
       width: 45px;
       // height: 26px;
-      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(12, 54, 92, 0.6) 0%,
+        rgba(12, 54, 92, 0.6) 100%
+      );
       border-radius: 2px;
       border: 1px solid #04d8ff;
       .ydData {
@@ -553,7 +584,11 @@
       pointer-events: none;
       font-size: 3px;
       text-align: center;
-      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(4, 216, 255, 0.8) 0%,
+        rgba(4, 216, 255, 0.2) 100%
+      );
     }
 
     .YuanDianIcon {
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index 1bf25ae..171d8d6 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -1,36 +1,51 @@
 <template>
   <div id="WangJiaPIng" ref="threeDom">
-    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
-      <div class="iconBox" v-show="show == item.id">
+    <div
+      class="YuanDian"
+      v-for="(item, i) in labelData"
+      :key="item.id"
+      :id="item.id"
+      style="display: none"
+    >
+      <div class="iconBox" v-show="item.show">
         <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
         <div class="ydBox">
           <div class="YuanDianText">{{ item.name }}</div>
           <div class="ydData" v-for="(val, k) in item.data" :key="k">
-            <div class="leftData">{{ val.name + ':' }}</div>
-            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+            <div class="leftData">{{ val.name + ":" }}</div>
+            <div class="rightData">{{ val.value + " " + val.unit }}</div>
           </div>
         </div>
       </div>
-      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+      <img
+        class="YuanDianIcon"
+        :src="item.icon"
+        @mouseenter="item.show = true"
+        @mouseleave="item.show = false"
+      />
     </div>
   </div>
 </template>
 
 <script setup name="WangJiaPIng">
-import { ref, reactive, toRefs, onMounted } from 'vue';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { Water } from 'three/examples/jsm/objects/Water.js';
+import { ref, reactive, toRefs, onMounted } from "vue";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { Water } from "three/examples/jsm/objects/Water.js";
 
-import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import gsap from 'gsap';
-import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+import {
+  CSS3DRenderer,
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import gsap from "gsap";
+import { CSSRulePlugin } from "gsap/CSSRulePlugin";
+import bus from "@/bus";
 const AllData = reactive({});
 
-const show = ref('');
+const show = ref("");
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -42,136 +57,142 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: '风速风向仪',
+    name: "风速风向仪",
     id: `YuanDian1`,
     position: {
       x: 0,
       y: 0,
       z: 2.5,
     },
-    icon: '/Three/icon/fsfx_icon.png',
+    icon: "/Three/icon/fsfx_icon.png",
     data: [
       {
-        name: '方向',
-        value: '东北风',
-        unit: '',
+        name: "方向",
+        value: "东北风",
+        unit: "",
       },
       {
-        name: '风速',
-        value: '1.3',
-        unit: 'm/s',
+        name: "风速",
+        value: "1.3",
+        unit: "m/s",
       },
     ],
+    show: false,
   },
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian2`,
     position: {
       x: -46,
       y: 0,
       z: 2.5,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian3`,
     position: {
       x: -46,
       y: 0,
       z: -12.6,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '应变计',
+    name: "应变计",
     id: `YuanDian4`,
     position: {
       x: 0,
       y: 7.5,
       z: 0,
     },
-    icon: '/Three/icon/ybj_icon.png',
+    icon: "/Three/icon/ybj_icon.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '应变计',
+    name: "应变计",
     id: `YuanDian5`,
     position: {
       x: 0,
       y: 7.5,
       z: -10,
     },
-    icon: '/Three/icon/ybj_icon.png',
+    icon: "/Three/icon/ybj_icon.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '加速度计',
+    name: "加速度计",
     id: `YuanDian6`,
     position: {
       x: 0,
       y: 0,
       z: -5,
     },
-    icon: '/Three/icon/jsdj_icon.png',
+    icon: "/Three/icon/jsdj_icon.png",
     data: [
       {
-        name: '加速度',
-        value: '1.42',
-        unit: 'mm/s2',
+        name: "加速度",
+        value: "1.42",
+        unit: "mm/s2",
       },
       {
-        name: '风速',
-        value: '1.3',
-        unit: 'm/s',
+        name: "风速",
+        value: "1.3",
+        unit: "m/s",
       },
     ],
+    show: false,
   },
   // {
   //   name: '风速风向仪',
@@ -263,11 +284,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
+  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    gltf => {
+    (gltf) => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -305,7 +326,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -319,7 +340,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
 };
 
@@ -328,8 +349,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById('WangJiaPIng').clientWidth;
-  height.value = document.getElementById('WangJiaPIng').clientHeight;
+  width.value = document.getElementById("WangJiaPIng").clientWidth;
+  height.value = document.getElementById("WangJiaPIng").clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -350,8 +371,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = 'absolute';
-  LabelRenderer.value.domElement.style.top = '0px';
+  LabelRenderer.value.domElement.style.position = "absolute";
+  LabelRenderer.value.domElement.style.top = "0px";
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -361,7 +382,12 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
+  Camera.value = new THREE.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    1,
+    4000
+  );
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -429,7 +455,7 @@
 const initSky = () => {
   var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
   pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
+  new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
     envMap.isPmremTexture = true;
     Scene.environment = envMap;
@@ -454,6 +480,7 @@
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
   // console.log(Camera.value);
+  // console.log(Controls.value);
 };
 
 // 创建气泡窗
@@ -462,7 +489,7 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = 'block';
+      lableDiv.style.display = "block";
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
       labelCSS3D.scale.set(0.1, 0.1, 0.1);
@@ -489,15 +516,50 @@
     }
   });
 }
-
+const flyTo = (data) => {
+  // 静立水准仪
+  if (data.name[0] == "静力水准仪") {
+    // 摄像机位置
+    gsap.to(Camera.value.position, {
+      x: -69.16984920750228,
+      y: 9.22906292776404,
+      z: 14.97197297303164,
+      duration: 3,
+      ease: "power4.out",
+    });
+    // 视角
+    gsap.to(Controls.value.target, {
+      x: -30.064052350817732,
+      y: -1.2146002003091534,
+      z: -14.382184358955339,
+      duration: 3,
+      ease: "power4.out",
+    });
+    // 打开弹窗
+    labelData.value.forEach((element) => {
+      if (element.name == "静力水准仪") element.show = true;
+    });
+  }
+};
+// const BIMClick = () => {
+//   console.log("触发点击事件,隐藏弹窗");
+//   labelData.value.forEach((element) => {
+//     element.show = false;
+//   });
+// };
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal('daqiao', '/Gltf/daqiao.gltf');
+  initModal("daqiao", "/Gltf/daqiao.gltf");
+  // 共同弹窗触发事件
+  bus.on("WJP_BIM_flyTo", (params) => {
+    // 打开弹窗
+    flyTo(params);
+  });
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === 'complete') {
+    if (document.readyState === "complete") {
       createLable();
       // createWaterLevel();
     }
@@ -511,17 +573,23 @@
   createLable();
   // LoadWater();
   Render();
+  // 添加点击事件
+  //监听点击事件
+  // window.addEventListener("click", BIMClick, false);
 });
 
 onBeforeUnmount(() => {
+  bus.off("WJP_BIM_flyTo");
+  // window.removeEventListener("click", BIMClick);
+
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse(e => {
+  Scene.traverse((e) => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach(m => {
+        e.material.forEach((m) => {
           m.dispose();
         });
       } else {
@@ -575,7 +643,11 @@
       bottom: 8px;
       width: 45px;
       // height: 26px;
-      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(12, 54, 92, 0.6) 0%,
+        rgba(12, 54, 92, 0.6) 100%
+      );
       border-radius: 2px;
       border: 1px solid #04d8ff;
       .ydData {
@@ -605,7 +677,11 @@
       pointer-events: none;
       font-size: 3px;
       text-align: center;
-      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(4, 216, 255, 0.8) 0%,
+        rgba(4, 216, 255, 0.2) 100%
+      );
     }
 
     .YuanDianIcon {

diff --git a/src/views/oneMap/BIM/Tunnel.vue b/src/views/oneMap/BIM/Tunnel.vue
index 897f9f2..da07523 100644
--- a/src/views/oneMap/BIM/Tunnel.vue
+++ b/src/views/oneMap/BIM/Tunnel.vue
@@ -1,35 +1,49 @@
 <template>
   <div id="Tunnel" ref="threeDom">
-    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
+    <div
+      class="YuanDian"
+      v-for="(item, i) in labelData"
+      :key="item.id"
+      :id="item.id"
+      style="display: none"
+    >
       <div class="iconBox" v-show="show == item.id">
         <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
         <div class="ydBox">
           <div class="YuanDianText">{{ item.name }}</div>
           <div class="ydData" v-for="(val, k) in item.data" :key="k">
-            <div class="leftData">{{ val.name + ':' }}</div>
-            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+            <div class="leftData">{{ val.name + ":" }}</div>
+            <div class="rightData">{{ val.value + " " + val.unit }}</div>
           </div>
         </div>
       </div>
-      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+      <img
+        class="YuanDianIcon"
+        :src="item.icon"
+        @mouseenter="show = item.id"
+        @mouseleave="show = ''"
+      />
     </div>
   </div>
 </template>
 
 <script setup name="Tunnel">
-import { ref, reactive, toRefs, onMounted } from 'vue';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { Water } from 'three/examples/jsm/objects/Water.js';
+import { ref, reactive, toRefs, onMounted } from "vue";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { Water } from "three/examples/jsm/objects/Water.js";
 
-import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import gsap from 'gsap';
-import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+import {
+  CSS3DRenderer,
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import gsap from "gsap";
+import { CSSRulePlugin } from "gsap/CSSRulePlugin";
 
-const show = ref('');
+const show = ref("");
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -41,134 +55,134 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian1`,
     position: {
       x: -1390,
       y: 65,
       z: -70,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian2`,
     position: {
       x: -1080,
       y: 65,
       z: -80,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '激光位移计',
+    name: "激光位移计",
     id: `YuanDian3`,
     position: {
       x: -400,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/wyj_mx.png',
+    icon: "/Three/icon/wyj_mx.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '激光位移计',
+    name: "激光位移计",
     id: `YuanDian4`,
     position: {
       x: -400,
       y: 80,
       z: -200,
     },
-    icon: '/Three/icon/wyj_mx.png',
+    icon: "/Three/icon/wyj_mx.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '应变计',
+    name: "应变计",
     id: `YuanDian5`,
     position: {
       x: -1380,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/ybj_icon.png',
+    icon: "/Three/icon/ybj_icon.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
   },
   {
-    name: '裂缝计',
+    name: "裂缝计",
     id: `YuanDian6`,
     position: {
       x: -1350,
       y: 80,
       z: 0,
     },
-    icon: '/Three/icon/lfj_mx.png',
+    icon: "/Three/icon/lfj_mx.png",
     data: [
       {
-        name: '绝对沉降',
-        value: '2.67',
-        unit: 'mm',
+        name: "绝对沉降",
+        value: "2.67",
+        unit: "mm",
       },
       {
-        name: '相对沉降',
-        value: '2.96',
-        unit: 'mm',
+        name: "相对沉降",
+        value: "2.96",
+        unit: "mm",
       },
     ],
   },
@@ -207,11 +221,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
+  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    gltf => {
+    (gltf) => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -224,6 +238,8 @@
         if (child.isMesh) {
           child.frustumCulled = false;
           child.material.side = THREE.DoubleSide;
+          child.material.emissive = child.material.color;
+          child.material.emissiveMap = child.material.map;
           granaryArr.value.push(child);
         }
       });
@@ -249,7 +265,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -263,7 +279,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
 };
 
@@ -272,8 +288,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById('Tunnel').clientWidth;
-  height.value = document.getElementById('Tunnel').clientHeight;
+  width.value = document.getElementById("Tunnel").clientWidth;
+  height.value = document.getElementById("Tunnel").clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -294,8 +310,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = 'absolute';
-  LabelRenderer.value.domElement.style.top = '0px';
+  LabelRenderer.value.domElement.style.position = "absolute";
+  LabelRenderer.value.domElement.style.top = "0px";
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -305,7 +321,12 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
+  Camera.value = new THREE.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    1,
+    4000
+  );
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -320,7 +341,7 @@
   // //上下翻转的最小角度
   Controls.value.minPolarAngle = 0.2;
   //是否允许缩放
-  Controls.value.enableZoom = false;
+  Controls.value.enableZoom = true;
   // 使动画循环使用时阻尼或自转 意思是否有惯性
   Controls.value.enableDamping = false;
   // 动态阻尼系数 就是鼠标拖拽旋转灵敏度
@@ -336,8 +357,8 @@
   // 是否开启右键拖拽
   Controls.value.enablePan = true;
   // AxesHelper：辅助观察的坐标系
-  // const axesHelper = new THREE.AxesHelper(3000);
-  // Scene.add(axesHelper);
+  //   const axesHelper = new THREE.AxesHelper(3000);
+  //   Scene.add(axesHelper);
 };
 
 /**
@@ -346,19 +367,20 @@
  */
 const initLight = () => {
   // 设置场景的背景颜色，即天空颜色
-  Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色
+  // Scene.background = new THREE.Color(0x999999); // 设置背景，可以更换为你想要的颜色
   // 设置天空的雾气颜色和雾气近距离
   // Scene.fog = new THREE.Fog(0xffffff, 50, 200); // 距离10开始，到200结束
   // Scene.fog = new THREE.Fog(0x1784f9, 50, 2000); // 距离10开始，到200结束
   //  创建平行光源
   // const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
-  // const directionalLight = new THREE.DirectionalLight(0x1784f9, 0.6);
-  // directionalLight.position.set(-2500, 1, 1);
+  // const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+  // // directionalLight.position.set(-2500, 1, 1);
   // Scene.add(directionalLight);
   // 创建环境光
-  // const ambientLight = new THREE.AmbientLight('#ffffff', 0.8);
+  const ambientLight = new THREE.AmbientLight("#ffffff", 0.5);
+  ambientLight.visible = true;
   // const ambientLight = new THREE.AmbientLight('#1784f9', 0.8);
-  // Scene.add(ambientLight);
+  Scene.add(ambientLight);
   // 创建平行光辅助线
   // const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.5);
   // Scene.add(directionalLightHelper);
@@ -366,6 +388,11 @@
   // const PointLight = new THREE.PointLight(0x1784f9, 1, 300);
   // PointLight.position.set(100, -100, 10);
   // Scene.add(PointLight);
+  // const spotLight = new THREE.SpotLight(0xffffff);
+  // spotLight.position.set(-1000, 1000, 0);
+  // spotLight.castShadow = true;
+  // spotLight.intensity = 800;
+  // Scene.add(spotLight);
 };
 
 /**
@@ -375,18 +402,18 @@
  * 注意：此函数未使用TextureLoader加载背景图片，而是使用HDR纹理
  */
 const initSky = () => {
-  var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
-  pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
-    const envMap = pmremGenerator.fromEquirectangular(texture).texture;
-    envMap.isPmremTexture = true;
-    Scene.environment = envMap;
-    Scene.background = envMap;
-    pmremGenerator.dispose();
-  });
-  // new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) {
-  //   Scene.background = texture;
+  // var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
+  // pmremGenerator.compileEquirectangularShader();
+  // new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
+  //   const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+  //   envMap.isPmremTexture = true;
+  //   Scene.environment = envMap;
+  //   // Scene.background = envMap;
+  //   pmremGenerator.dispose();
   // });
+  new THREE.TextureLoader().load("/Gltf/bg.png", function (texture) {
+    Scene.background = texture;
+  });
 };
 
 /**
@@ -410,7 +437,7 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = 'block';
+      lableDiv.style.display = "block";
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
       // labelCSS3D.scale.set(0.1, 0.1, 0.1);
@@ -442,11 +469,11 @@
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal('yjlSD', '/Gltf/yjlSD.gltf');
+  initModal("yjlSD", "/Gltf/yjlSD.gltf");
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === 'complete') {
+    if (document.readyState === "complete") {
       createLable();
       // createWaterLevel();
     }
@@ -466,11 +493,11 @@
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse(e => {
+  Scene.traverse((e) => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach(m => {
+        e.material.forEach((m) => {
           m.dispose();
         });
       } else {
@@ -523,7 +550,11 @@
       bottom: 12px;
       width: 45px;
       // height: 26px;
-      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(12, 54, 92, 0.6) 0%,
+        rgba(12, 54, 92, 0.6) 100%
+      );
       border-radius: 2px;
       border: 1px solid #04d8ff;
       .ydData {
@@ -553,7 +584,11 @@
       pointer-events: none;
       font-size: 3px;
       text-align: center;
-      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(4, 216, 255, 0.8) 0%,
+        rgba(4, 216, 255, 0.2) 100%
+      );
     }
 
     .YuanDianIcon {
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index 1bf25ae..171d8d6 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -1,36 +1,51 @@
 <template>
   <div id="WangJiaPIng" ref="threeDom">
-    <div class="YuanDian" v-for="(item, i) in labelData" :key="item.id" :id="item.id" style="display: none">
-      <div class="iconBox" v-show="show == item.id">
+    <div
+      class="YuanDian"
+      v-for="(item, i) in labelData"
+      :key="item.id"
+      :id="item.id"
+      style="display: none"
+    >
+      <div class="iconBox" v-show="item.show">
         <img src="@/assets/images/ljx.png" alt="" class="iconImg" />
         <div class="ydBox">
           <div class="YuanDianText">{{ item.name }}</div>
           <div class="ydData" v-for="(val, k) in item.data" :key="k">
-            <div class="leftData">{{ val.name + ':' }}</div>
-            <div class="rightData">{{ val.value + ' ' + val.unit }}</div>
+            <div class="leftData">{{ val.name + ":" }}</div>
+            <div class="rightData">{{ val.value + " " + val.unit }}</div>
           </div>
         </div>
       </div>
-      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+      <img
+        class="YuanDianIcon"
+        :src="item.icon"
+        @mouseenter="item.show = true"
+        @mouseleave="item.show = false"
+      />
     </div>
   </div>
 </template>
 
 <script setup name="WangJiaPIng">
-import { ref, reactive, toRefs, onMounted } from 'vue';
-import * as THREE from 'three';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //控制器
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // gltf加载器
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { Water } from 'three/examples/jsm/objects/Water.js';
+import { ref, reactive, toRefs, onMounted } from "vue";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; //控制器
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { Water } from "three/examples/jsm/objects/Water.js";
 
-import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
-import gsap from 'gsap';
-import { CSSRulePlugin } from 'gsap/CSSRulePlugin';
+import {
+  CSS3DRenderer,
+  CSS3DObject,
+} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+import gsap from "gsap";
+import { CSSRulePlugin } from "gsap/CSSRulePlugin";
+import bus from "@/bus";
 const AllData = reactive({});
 
-const show = ref('');
+const show = ref("");
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -42,136 +57,142 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: '风速风向仪',
+    name: "风速风向仪",
     id: `YuanDian1`,
     position: {
       x: 0,
       y: 0,
       z: 2.5,
     },
-    icon: '/Three/icon/fsfx_icon.png',
+    icon: "/Three/icon/fsfx_icon.png",
     data: [
       {
-        name: '方向',
-        value: '东北风',
-        unit: '',
+        name: "方向",
+        value: "东北风",
+        unit: "",
       },
       {
-        name: '风速',
-        value: '1.3',
-        unit: 'm/s',
+        name: "风速",
+        value: "1.3",
+        unit: "m/s",
       },
     ],
+    show: false,
   },
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian2`,
     position: {
       x: -46,
       y: 0,
       z: 2.5,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '静力水准仪',
+    name: "静力水准仪",
     id: `YuanDian3`,
     position: {
       x: -46,
       y: 0,
       z: -12.6,
     },
-    icon: '/Three/icon/jlszy_icon.png',
+    icon: "/Three/icon/jlszy_icon.png",
     data: [
       {
-        name: '挠度变化值',
-        value: '-0.01',
-        unit: 'mm',
+        name: "挠度变化值",
+        value: "-0.01",
+        unit: "mm",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '应变计',
+    name: "应变计",
     id: `YuanDian4`,
     position: {
       x: 0,
       y: 7.5,
       z: 0,
     },
-    icon: '/Three/icon/ybj_icon.png',
+    icon: "/Three/icon/ybj_icon.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '应变计',
+    name: "应变计",
     id: `YuanDian5`,
     position: {
       x: 0,
       y: 7.5,
       z: -10,
     },
-    icon: '/Three/icon/ybj_icon.png',
+    icon: "/Three/icon/ybj_icon.png",
     data: [
       {
-        name: '应变量',
-        value: '17',
-        unit: 'με',
+        name: "应变量",
+        value: "17",
+        unit: "με",
       },
       {
-        name: '温度',
-        value: '16.3',
-        unit: '℃',
+        name: "温度",
+        value: "16.3",
+        unit: "℃",
       },
     ],
+    show: false,
   },
   {
-    name: '加速度计',
+    name: "加速度计",
     id: `YuanDian6`,
     position: {
       x: 0,
       y: 0,
       z: -5,
     },
-    icon: '/Three/icon/jsdj_icon.png',
+    icon: "/Three/icon/jsdj_icon.png",
     data: [
       {
-        name: '加速度',
-        value: '1.42',
-        unit: 'mm/s2',
+        name: "加速度",
+        value: "1.42",
+        unit: "mm/s2",
       },
       {
-        name: '风速',
-        value: '1.3',
-        unit: 'm/s',
+        name: "风速",
+        value: "1.3",
+        unit: "m/s",
       },
     ],
+    show: false,
   },
   // {
   //   name: '风速风向仪',
@@ -263,11 +284,11 @@
   const Gltfloader = new GLTFLoader();
   var dracoLoader = new DRACOLoader();
   // dracoLoader.setDecoderPath("https://zhzz.hongshan.gov.cn:8865/file/hongshan/Three_Gltf/"); //设置解压库文件路径
-  dracoLoader.setDecoderPath('/draco/'); //设置解压库文件路径
+  dracoLoader.setDecoderPath("/draco/"); //设置解压库文件路径
   Gltfloader.setDRACOLoader(dracoLoader);
   Gltfloader.load(
     url,
-    gltf => {
+    (gltf) => {
       gltf.scene.name = name;
       gltf.scene.scale.set(1, 1, 1);
       // gltf.scene.position.x = -70;
@@ -305,7 +326,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -319,7 +340,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: 'power4.out',
+    ease: "power4.out",
   });
 };
 
@@ -328,8 +349,8 @@
  * 该函数负责创建和配置Three.js的WebGL渲染器，包括设置视口大小、抗锯齿、阴影、像素比、色调映射等
  */
 const initRenderer = () => {
-  width.value = document.getElementById('WangJiaPIng').clientWidth;
-  height.value = document.getElementById('WangJiaPIng').clientHeight;
+  width.value = document.getElementById("WangJiaPIng").clientWidth;
+  height.value = document.getElementById("WangJiaPIng").clientHeight;
   Renderer.value = new THREE.WebGLRenderer({
     antialias: true,
     // alpha: true, //开启alpha
@@ -350,8 +371,8 @@
 const initLabelRenderer = () => {
   LabelRenderer.value = new CSS3DRenderer();
   LabelRenderer.value.setSize(width.value, height.value);
-  LabelRenderer.value.domElement.style.position = 'absolute';
-  LabelRenderer.value.domElement.style.top = '0px';
+  LabelRenderer.value.domElement.style.position = "absolute";
+  LabelRenderer.value.domElement.style.top = "0px";
   threeDom.value.appendChild(LabelRenderer.value.domElement);
   // LabelRenderer.value.domElement.addEventListener("click", meshOnClick);
 };
@@ -361,7 +382,12 @@
  * 创建一个透视摄像机，并设置其位置
  */
 const initCamera = () => {
-  Camera.value = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 4000);
+  Camera.value = new THREE.PerspectiveCamera(
+    45,
+    window.innerWidth / window.innerHeight,
+    1,
+    4000
+  );
   Camera.value.position.set(500, 500, 500);
 };
 
@@ -429,7 +455,7 @@
 const initSky = () => {
   var pmremGenerator = new THREE.PMREMGenerator(Renderer.value); // 使用hdr作为背景色
   pmremGenerator.compileEquirectangularShader();
-  new RGBELoader().load('/Gltf/Skey_1K.hdr', function (texture) {
+  new RGBELoader().load("/Gltf/Skey_1K.hdr", function (texture) {
     const envMap = pmremGenerator.fromEquirectangular(texture).texture;
     envMap.isPmremTexture = true;
     Scene.environment = envMap;
@@ -454,6 +480,7 @@
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
   // console.log(Camera.value);
+  // console.log(Controls.value);
 };
 
 // 创建气泡窗
@@ -462,7 +489,7 @@
     let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
     if (labelCSS3D === undefined) {
       let lableDiv = document.getElementById(`YuanDian${index + 1}`);
-      lableDiv.style.display = 'block';
+      lableDiv.style.display = "block";
       labelCSS3D = new CSS3DObject(lableDiv);
       labelCSS3D.position.set(item.position.x, item.position.y, item.position.z);
       labelCSS3D.scale.set(0.1, 0.1, 0.1);
@@ -489,15 +516,50 @@
     }
   });
 }
-
+const flyTo = (data) => {
+  // 静立水准仪
+  if (data.name[0] == "静力水准仪") {
+    // 摄像机位置
+    gsap.to(Camera.value.position, {
+      x: -69.16984920750228,
+      y: 9.22906292776404,
+      z: 14.97197297303164,
+      duration: 3,
+      ease: "power4.out",
+    });
+    // 视角
+    gsap.to(Controls.value.target, {
+      x: -30.064052350817732,
+      y: -1.2146002003091534,
+      z: -14.382184358955339,
+      duration: 3,
+      ease: "power4.out",
+    });
+    // 打开弹窗
+    labelData.value.forEach((element) => {
+      if (element.name == "静力水准仪") element.show = true;
+    });
+  }
+};
+// const BIMClick = () => {
+//   console.log("触发点击事件,隐藏弹窗");
+//   labelData.value.forEach((element) => {
+//     element.show = false;
+//   });
+// };
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal('daqiao', '/Gltf/daqiao.gltf');
+  initModal("daqiao", "/Gltf/daqiao.gltf");
+  // 共同弹窗触发事件
+  bus.on("WJP_BIM_flyTo", (params) => {
+    // 打开弹窗
+    flyTo(params);
+  });
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === 'complete') {
+    if (document.readyState === "complete") {
       createLable();
       // createWaterLevel();
     }
@@ -511,17 +573,23 @@
   createLable();
   // LoadWater();
   Render();
+  // 添加点击事件
+  //监听点击事件
+  // window.addEventListener("click", BIMClick, false);
 });
 
 onBeforeUnmount(() => {
+  bus.off("WJP_BIM_flyTo");
+  // window.removeEventListener("click", BIMClick);
+
   // document.removeEventListener('click', meshOnClick);
   // window.removeEventListener("resize", onWindowResize, false);
 
-  Scene.traverse(e => {
+  Scene.traverse((e) => {
     if (e.BufferGeometry) e.BufferGeometry.dispose();
     if (e.material) {
       if (Array.isArray(e.material)) {
-        e.material.forEach(m => {
+        e.material.forEach((m) => {
           m.dispose();
         });
       } else {
@@ -575,7 +643,11 @@
       bottom: 8px;
       width: 45px;
       // height: 26px;
-      background: linear-gradient(0deg, rgba(12, 54, 92, 0.6) 0%, rgba(12, 54, 92, 0.6) 100%);
+      background: linear-gradient(
+        0deg,
+        rgba(12, 54, 92, 0.6) 0%,
+        rgba(12, 54, 92, 0.6) 100%
+      );
       border-radius: 2px;
       border: 1px solid #04d8ff;
       .ydData {
@@ -605,7 +677,11 @@
       pointer-events: none;
       font-size: 3px;
       text-align: center;
-      background: linear-gradient(90deg, rgba(4, 216, 255, 0.8) 0%, rgba(4, 216, 255, 0.2) 100%);
+      background: linear-gradient(
+        90deg,
+        rgba(4, 216, 255, 0.8) 0%,
+        rgba(4, 216, 255, 0.2) 100%
+      );
     }
 
     .YuanDianIcon {
diff --git a/src/views/oneMap/smartBridge/LeftBox.vue b/src/views/oneMap/smartBridge/LeftBox.vue
index 3343523..2d71bd4 100644
--- a/src/views/oneMap/smartBridge/LeftBox.vue
+++ b/src/views/oneMap/smartBridge/LeftBox.vue
@@ -16,7 +16,12 @@
         <div class="ListBoxHeader_font">感知设备</div>
       </div>
       <div class="centerContent contentBox">
-        <div class="shebeiBox" v-for="(item, i) in shebeiList" :key="i">
+        <div
+          class="shebeiBox"
+          v-for="(item, i) in shebeiList"
+          :key="i"
+          @click="bus.emit('WJP_BIM_flyTo', item)"
+        >
           <div class="shebeiBox_left">
             <div class="shebeiBox_left_font" v-for="(t, k) in item.name" :key="k">
               {{ t }}
@@ -48,6 +53,7 @@
 
 <script setup name="leftQL">
 import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
+import bus from "@/bus";
 
 // import ranqi_icon from '@/assets/newImgs/rq.png'; //燃气
 // import qiaoliang from '@/assets/newImgs/ql.png'; //桥梁
@@ -187,6 +193,7 @@
       // kpbj_img
       background: url("@/assets/tunnelImg/kpbj_img.png") no-repeat;
       background-size: 100% 100%;
+      cursor: pointer;
       .shebeiBox_left {
         z-index: 99;
         height: 100%;