diff --git a/public/Three/icon/fsfx_icon.png b/public/Three/icon/fsfx_icon.png
new file mode 100644
index 0000000..1ae6d25
--- /dev/null
+++ b/public/Three/icon/fsfx_icon.png
Binary files differ

diff --git a/public/Three/icon/fsfx_icon.png b/public/Three/icon/fsfx_icon.png
new file mode 100644
index 0000000..1ae6d25
--- /dev/null
+++ b/public/Three/icon/fsfx_icon.png
Binary files differ
diff --git a/public/Three/icon/jlszy_icon.png b/public/Three/icon/jlszy_icon.png
new file mode 100644
index 0000000..0738f79
--- /dev/null
+++ b/public/Three/icon/jlszy_icon.png
Binary files differ

diff --git a/public/Three/icon/fsfx_icon.png b/public/Three/icon/fsfx_icon.png
new file mode 100644
index 0000000..1ae6d25
--- /dev/null
+++ b/public/Three/icon/fsfx_icon.png
Binary files differ
diff --git a/public/Three/icon/jlszy_icon.png b/public/Three/icon/jlszy_icon.png
new file mode 100644
index 0000000..0738f79
--- /dev/null
+++ b/public/Three/icon/jlszy_icon.png
Binary files differ
diff --git a/public/Three/icon/jsdj_icon.png b/public/Three/icon/jsdj_icon.png
new file mode 100644
index 0000000..8df4dd5
--- /dev/null
+++ b/public/Three/icon/jsdj_icon.png
Binary files differ

diff --git a/public/Three/icon/fsfx_icon.png b/public/Three/icon/fsfx_icon.png
new file mode 100644
index 0000000..1ae6d25
--- /dev/null
+++ b/public/Three/icon/fsfx_icon.png
Binary files differ
diff --git a/public/Three/icon/jlszy_icon.png b/public/Three/icon/jlszy_icon.png
new file mode 100644
index 0000000..0738f79
--- /dev/null
+++ b/public/Three/icon/jlszy_icon.png
Binary files differ
diff --git a/public/Three/icon/jsdj_icon.png b/public/Three/icon/jsdj_icon.png
new file mode 100644
index 0000000..8df4dd5
--- /dev/null
+++ b/public/Three/icon/jsdj_icon.png
Binary files differ
diff --git a/public/Three/icon/ybj_icon.png b/public/Three/icon/ybj_icon.png
new file mode 100644
index 0000000..0fd98ad
--- /dev/null
+++ b/public/Three/icon/ybj_icon.png
Binary files differ

diff --git a/public/Three/icon/fsfx_icon.png b/public/Three/icon/fsfx_icon.png
new file mode 100644
index 0000000..1ae6d25
--- /dev/null
+++ b/public/Three/icon/fsfx_icon.png
Binary files differ
diff --git a/public/Three/icon/jlszy_icon.png b/public/Three/icon/jlszy_icon.png
new file mode 100644
index 0000000..0738f79
--- /dev/null
+++ b/public/Three/icon/jlszy_icon.png
Binary files differ
diff --git a/public/Three/icon/jsdj_icon.png b/public/Three/icon/jsdj_icon.png
new file mode 100644
index 0000000..8df4dd5
--- /dev/null
+++ b/public/Three/icon/jsdj_icon.png
Binary files differ
diff --git a/public/Three/icon/ybj_icon.png b/public/Three/icon/ybj_icon.png
new file mode 100644
index 0000000..0fd98ad
--- /dev/null
+++ b/public/Three/icon/ybj_icon.png
Binary files differ
diff --git a/src/assets/images/ljx.png b/src/assets/images/ljx.png
new file mode 100644
index 0000000..00ac41f
--- /dev/null
+++ b/src/assets/images/ljx.png
Binary files differ

diff --git a/public/Three/icon/fsfx_icon.png b/public/Three/icon/fsfx_icon.png
new file mode 100644
index 0000000..1ae6d25
--- /dev/null
+++ b/public/Three/icon/fsfx_icon.png
Binary files differ
diff --git a/public/Three/icon/jlszy_icon.png b/public/Three/icon/jlszy_icon.png
new file mode 100644
index 0000000..0738f79
--- /dev/null
+++ b/public/Three/icon/jlszy_icon.png
Binary files differ
diff --git a/public/Three/icon/jsdj_icon.png b/public/Three/icon/jsdj_icon.png
new file mode 100644
index 0000000..8df4dd5
--- /dev/null
+++ b/public/Three/icon/jsdj_icon.png
Binary files differ
diff --git a/public/Three/icon/ybj_icon.png b/public/Three/icon/ybj_icon.png
new file mode 100644
index 0000000..0fd98ad
--- /dev/null
+++ b/public/Three/icon/ybj_icon.png
Binary files differ
diff --git a/src/assets/images/ljx.png b/src/assets/images/ljx.png
new file mode 100644
index 0000000..00ac41f
--- /dev/null
+++ b/src/assets/images/ljx.png
Binary files differ
diff --git a/src/views/oneMap/BIM/WangJiaPIng.vue b/src/views/oneMap/BIM/WangJiaPIng.vue
index 3b45c51..d3553ab 100644
--- a/src/views/oneMap/BIM/WangJiaPIng.vue
+++ b/src/views/oneMap/BIM/WangJiaPIng.vue
@@ -1,24 +1,36 @@
 <template>
-  <div id="WangJiaPIng" ref="threeDom"></div>
+  <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">
+        <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>
+        </div>
+      </div>
+      <img class="YuanDianIcon" :src="item.icon" @mouseenter="show = item.id" @mouseleave="show = ''" />
+    </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';
 const AllData = reactive({});
 
+const show = ref('');
 const width = ref(null);
 const height = ref(null);
 const Camera = ref(null);
@@ -30,59 +42,192 @@
 let Twater = null;
 const labelData = ref([
   {
-    name: "一号泵机",
+    name: '风速风向仪',
     id: `YuanDian1`,
     position: {
-      x: -180,
-      y: 230,
-      z: -180,
+      x: 0,
+      y: 0,
+      z: 2.5,
     },
-    OnSrc: "/Three/icon/BJ_On.png",
-    OffSrc: "/Three/icon/BJ_Off.png",
-    status: false,
-    boxShow: true,
-    value1: "--",
-    value2: "--",
-    value3: "--",
-    deviceCode: "",
-    stCode: "HP0104201130000469",
+    icon: '/Three/icon/fsfx_icon.png',
+    data: [
+      {
+        name: '方向',
+        value: '东北风',
+        unit: '',
+      },
+      {
+        name: '风速',
+        value: '1.3',
+        unit: 'm/s',
+      },
+    ],
   },
   {
-    name: "二号泵机",
+    name: '静力水准仪',
     id: `YuanDian2`,
     position: {
-      x: 3,
-      y: 230,
-      z: -180,
+      x: -46,
+      y: 0,
+      z: 2.5,
     },
-    OnSrc: "/Three/icon/BJ_On.png",
-    OffSrc: "/Three/icon/BJ_Off.png",
-    status: false,
-    boxShow: true,
-    value1: "--",
-    value2: "--",
-    value3: "--",
-    deviceCode: "",
-    stCode: "HP0104201130000469",
+    icon: '/Three/icon/jlszy_icon.png',
+    data: [
+      {
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
   },
   {
-    name: "三号泵机",
+    name: '静力水准仪',
     id: `YuanDian3`,
     position: {
-      x: 195,
-      y: 230,
-      z: -180,
+      x: -46,
+      y: 0,
+      z: -12.6,
     },
-    OnSrc: "/Three/icon/BJ_On.png",
-    OffSrc: "/Three/icon/BJ_Off.png",
-    status: false,
-    boxShow: true,
-    value1: "--",
-    value2: "--",
-    value3: "--",
-    deviceCode: "",
-    stCode: "HP0104201130000469",
+    icon: '/Three/icon/jlszy_icon.png',
+    data: [
+      {
+        name: '挠度变化值',
+        value: '-0.01',
+        unit: 'mm',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
   },
+  {
+    name: '应变计',
+    id: `YuanDian4`,
+    position: {
+      x: 0,
+      y: 7.5,
+      z: 0,
+    },
+    icon: '/Three/icon/ybj_icon.png',
+    data: [
+      {
+        name: '应变量',
+        value: '17',
+        unit: 'με',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
+  },
+  {
+    name: '应变计',
+    id: `YuanDian5`,
+    position: {
+      x: 0,
+      y: 7.5,
+      z: -10,
+    },
+    icon: '/Three/icon/ybj_icon.png',
+    data: [
+      {
+        name: '应变量',
+        value: '17',
+        unit: 'με',
+      },
+      {
+        name: '温度',
+        value: '16.3',
+        unit: '℃',
+      },
+    ],
+  },
+  {
+    name: '加速度计',
+    id: `YuanDian6`,
+    position: {
+      x: 0,
+      y: 0,
+      z: -5,
+    },
+    icon: '/Three/icon/jsdj_icon.png',
+    data: [
+      {
+        name: '加速度',
+        value: '1.42',
+        unit: 'mm/s2',
+      },
+      {
+        name: '风速',
+        value: '1.3',
+        unit: 'm/s',
+      },
+    ],
+  },
+  // {
+  //   name: '风速风向仪',
+  //   id: `YuanDian1`,
+  //   position: {
+  //     x: 0,
+  //     y: 1,
+  //     z: 2.5,
+  //   },
+  //   OnSrc: '/Three/icon/BJ_On.png',
+  //   OffSrc: '/Three/icon/BJ_Off.png',
+  //   icon: '/Three/icon/fsfx_icon.png',
+  //   status: false,
+  //   boxShow: true,
+  //   value1: '--',
+  //   value2: '--',
+  //   value3: '--',
+  //   deviceCode: '',
+  //   stCode: 'HP0104201130000469',
+  // },
+  // {
+  //   name: "二号泵机",
+  //   id: `YuanDian2`,
+  //   position: {
+  //     x: 3,
+  //     y: 230,
+  //     z: -180,
+  //   },
+  //   OnSrc: "/Three/icon/BJ_On.png",
+  //   OffSrc: "/Three/icon/BJ_Off.png",
+  //   status: false,
+  //   boxShow: true,
+  //   value1: "--",
+  //   value2: "--",
+  //   value3: "--",
+  //   deviceCode: "",
+  //   stCode: "HP0104201130000469",
+  // },
+  // {
+  //   name: "三号泵机",
+  //   id: `YuanDian3`,
+  //   position: {
+  //     x: 195,
+  //     y: 230,
+  //     z: -180,
+  //   },
+  //   OnSrc: "/Three/icon/BJ_On.png",
+  //   OffSrc: "/Three/icon/BJ_Off.png",
+  //   status: false,
+  //   boxShow: true,
+  //   value1: "--",
+  //   value2: "--",
+  //   value3: "--",
+  //   deviceCode: "",
+  //   stCode: "HP0104201130000469",
+  // },
 ]);
 const deviceCode = ref(null);
 const stCode = ref(null);
@@ -118,11 +263,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;
@@ -160,7 +305,7 @@
     y: position.y,
     z: position.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
   // gsap.to(Camera.value.lookAt, {
   //   x: lookAt.x,
@@ -174,7 +319,7 @@
     y: lookAt.y,
     z: lookAt.z,
     duration: time,
-    ease: "power4.out",
+    ease: 'power4.out',
   });
 };
 
@@ -183,8 +328,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
@@ -205,8 +350,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);
 };
@@ -216,12 +361,7 @@
  * 创建一个透视摄像机，并设置其位置
  */
 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);
 };
 
@@ -289,7 +429,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;
@@ -309,21 +449,56 @@
   animationFrameId.value = requestAnimationFrame(Render);
   Controls.value.update(); // 轨道控制器的更新
   Renderer.value.clear(); // 清除画布
+  updateLabelOrientation(Camera.value.position);
   Renderer.value.render(Scene, Camera.value);
   LabelRenderer.value.render(Scene, Camera.value);
   const delta = clock.getDelta();
   console.log(Camera.value);
 };
 
+// 创建气泡窗
+function createLable() {
+  labelData.value.forEach((item, index) => {
+    let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
+    if (labelCSS3D === undefined) {
+      let lableDiv = document.getElementById(`YuanDian${index + 1}`);
+      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);
+      labelCSS3D.name = `YuanDian${index + 1}`;
+      // labelCSS3D.rotation.y = - Math.PI / 6; // 30度转换为弧度
+      Scene.add(labelCSS3D);
+    } else {
+      labelCSS3D.visible = true;
+    }
+  });
+}
+
+/**
+ * 更新所有气泡框的方向，使其始终面向相机
+ */
+function updateLabelOrientation(cameraPosition) {
+  labelData.value.forEach((item, index) => {
+    let labelCSS3D = Scene.getObjectByName(`YuanDian${index + 1}`);
+    if (labelCSS3D) {
+      const direction = new THREE.Vector3();
+      direction.subVectors(cameraPosition, labelCSS3D.position).normalize();
+      const angle = Math.atan2(direction.x, direction.z);
+      labelCSS3D.rotation.y = angle; // 调整角度使其始终面向相机
+    }
+  });
+}
+
 onBeforeMount(() => {
   //   initGltfFloor();
   // initModal('ChangJing', '/Gltf/ChuWangCheng.gltf');
-  initModal("daqiao", "/Gltf/daqiao.gltf");
+  initModal('daqiao', '/Gltf/daqiao.gltf');
 });
 onMounted(() => {
   nextTick(() => {
-    if (document.readyState === "complete") {
-      // createLable();
+    if (document.readyState === 'complete') {
+      createLable();
       // createWaterLevel();
     }
   });
@@ -333,7 +508,7 @@
   initControls();
   initLight();
   initSky();
-  // createLable();
+  createLable();
   // LoadWater();
   Render();
 });
@@ -342,11 +517,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 {
@@ -375,5 +550,73 @@
   height: 100%;
   position: absolute;
   // background: url("@/assets/images/Sponge_screen/QiaoLiang/BIM.png") no-repeat center center;
+
+  .YuanDian {
+    z-index: 9999 !important;
+    position: relative;
+    // min-height: 20px;
+    .iconBox {
+      position: relative;
+      // border: 1px solid red;
+    }
+    .iconImg {
+      position: absolute;
+      left: 50%;
+      // transform: translateX(-50%);
+      bottom: 5px;
+      width: 19px;
+      height: 12px;
+    }
+    .ydBox {
+      // width: 134px;
+      // height: 70px;
+      position: absolute;
+      left: calc(50% + 19px);
+      bottom: 8px;
+      width: 45px;
+      // height: 26px;
+      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 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 3px;
+        font-size: 3px;
+        height: 7px;
+        line-height: 7px;
+        color: #04d8ff;
+        // .leftData {
+        // }
+        // .rightData {
+        // }
+      }
+    }
+    .YuanDianText {
+      // padding-bottom: 10px;
+      height: 7px;
+      line-height: 7px;
+      color: #fff;
+      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
+      white-space: nowrap;
+      word-break: keep-all;
+      // cursor: pointer;
+      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%);
+    }
+
+    .YuanDianIcon {
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      pointer-events: auto;
+    }
+  }
 }
 </style>