From 3fc6935718a35e073eb6b1fb53cf18f5076dc060 Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Tue, 13 Jun 2023 07:54:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=BD=91=E7=BB=9C=E6=8B=93?=
 =?UTF-8?q?=E6=89=91=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/FactoryViewTopo/index.vue     |   2 +-
 src/views/FactoryViewTopo/statusBar.vue |  11 +-
 src/views/FactoryViewTopo/threeMap.vue  | 277 ++++++++++++++----------
 3 files changed, 172 insertions(+), 118 deletions(-)

diff --git a/src/views/FactoryViewTopo/index.vue b/src/views/FactoryViewTopo/index.vue
index df70c1f..3e63b6a 100644
--- a/src/views/FactoryViewTopo/index.vue
+++ b/src/views/FactoryViewTopo/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="$style['container']"  ref="Acontent">
     <threeMap  ref="mapdomref"/>
-    <!-- <statusBar :width="size.oWidth" :height="size.oHeight" :iconList="store.iconList" :devList="store.devList"></statusBar> -->
+    <statusBar :width="size.oWidth" :height="size.oHeight" :iconList="store.iconList" :devList="store.devList"></statusBar>
   </div>
   
 </template>
diff --git a/src/views/FactoryViewTopo/statusBar.vue b/src/views/FactoryViewTopo/statusBar.vue
index 0216a91..4bae705 100644
--- a/src/views/FactoryViewTopo/statusBar.vue
+++ b/src/views/FactoryViewTopo/statusBar.vue
@@ -15,16 +15,16 @@
         </div> -->
         <div class="iconTip">
           <ul>
-            <li v-for="item in prop.iconList" :key="item.id" >
+            <!-- <li v-for="item in prop.iconList" :key="item.id" >
               <i :class="'iconfont ' + item.name + ' icon-logo'"></i
               >{{ "&nbsp&nbsp&nbsp" + item.value }}
-              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
-            </li>
-            <li v-for="item in prop.devList" :key="item.id" >
+              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div> -->
+            <!-- </li> -->
+            <!-- <li v-for="item in prop.devList" :key="item.id" >
               <i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i
               >{{ "&nbsp&nbsp&nbsp" + item.value }}
               <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
-            </li>
+            </li> -->
             <li>
               <i class="iconfont icon-WIFI icon-logo"></i> &nbsp;&nbsp;&nbsp;
               WIFI
@@ -95,6 +95,7 @@ watch(
   (newVal, oldVal) => {
     //监听父组件宽高变化，随时重置本组件尺寸
     reset(newVal);
+    console.log(newVal);
     
   },
   { immediate: true, deep: true, flush: "post" }
diff --git a/src/views/FactoryViewTopo/threeMap.vue b/src/views/FactoryViewTopo/threeMap.vue
index 23577f9..e0cdba0 100644
--- a/src/views/FactoryViewTopo/threeMap.vue
+++ b/src/views/FactoryViewTopo/threeMap.vue
@@ -3,11 +3,10 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, onMounted, defineExpose } from 'vue';
+import { ref, onMounted } from 'vue';
 import * as THREE from 'three';
 import * as TWEEN from '@tweenjs/tween.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
-import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js';
 import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
 import { DragControls } from "@/utils/DragControls";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
@@ -19,14 +18,7 @@ import { useRouter } from 'vue-router';
 import { updateCoordinateByPoint } from "@/http/AerialView/index"
 import { ElNotification } from 'element-plus'
 import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router';
 let { t } = useI18n();
-let route = useRoute();
-let edit = false;
-let type = route.params?.type;
-if (type == 'edit') {
-    edit = true;
-}
 const store = useFactoryStore();
 const router = useRouter();
 
@@ -66,9 +58,11 @@ const requires = {
     'tile': require("@/assets/img/Factory/tile.jpg"),
     'door': require("@/assets/img/Factory/door.jpg"),
     'sky': require("@/assets/img/Factory/sky.jpg"),
+    //数字化工厂物联3D图
     'titleFloor': require("@/assets/img/Factory/screen_title.png"),
     'guangmao': require("@/assets/img/Factory/guangmao.jpg"),
     'ac': require("@/assets/img/Factory/ac.jpg"),
+    'wifi': require("@/assets/img/Factory/wifi.jpg"),
 }
 
 const workerShopRoute = {
@@ -159,7 +153,7 @@ const init = () => {
     scene.add(hjLight);
     // 定位相机，并且指向场景中心
     camera.position.x = 0;
-    camera.position.y = 880; //650
+    camera.position.y = 910; //650
     camera.position.z = 0; //600
 
 
@@ -185,9 +179,9 @@ const init = () => {
     })
     /**-------------------------------结束后注释------------------------------------------------- */
     controls.mouseButtons = {
-        LEFT: THREE.MOUSE.PAN,
+        // LEFT: ,
         MIDDLE: THREE.MOUSE.DOLLY,
-        // RIGHT: 
+        RIGHT:THREE.MOUSE.PAN 
     };
 
 
@@ -374,61 +368,61 @@ const init = () => {
 
     createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 })
     //放置服务器
-    createGlb()
+    createGlb('服务器')
     /*放置光猫************/
     //汽车军团
-    createSwitch({ x: -287.44, y: 0, z: 19.24 })
+    createSwitch('光猫', { x: -287.44, y: 0, z: 19.24 })
     //精加车间
-    createSwitch({ x: -158.01, y: 0, z: 107.47 })
-    createSwitch({ x: -208.35, y: 0, z: 107.47 })
+    createSwitch('光猫', { x: -158.01, y: 0, z: 107.47 })
+    createSwitch('光猫', { x: -208.35, y: 0, z: 107.47 })
     //机加车间
-    createSwitch({ x: -40.22, y: 0, z: 19.90 })
+    createSwitch('光猫', { x: -40.22, y: 0, z: 19.90 })
     //电控分厂
-    createSwitch({ x: -232.96, y: 0, z: -64.48 })
+    createSwitch('光猫', { x: -232.96, y: 0, z: -64.48 })
     //大配套中心
-    createSwitch({ x: 29.01, y: 0, z: -60.75 })
+    createSwitch('光猫', { x: 29.01, y: 0, z: -60.75 })
     //大件车间
-    createSwitch({ x: 5.29, y: 0, z: 19.00 })
+    createSwitch('光猫', { x: 5.29, y: 0, z: 19.00 })
     //家纺 医防
-    createSwitch({ x: 88.55, y: 0, z: -214.89 })
+    createSwitch('光猫', { x: 88.55, y: 0, z: -214.89 })
     //二道岗
-    createSwitch({ x: 306.5, y: 0, z: 5.43 })
+    createSwitch('光猫', { x: 306.5, y: 0, z: 5.43 })
     /*光猫结束********************************* */
 
 
     /**创建ac */
-    createAc({ x: 52.56, y: 0, z: 52.24 })
+    createAc('AC', { x: 52.56, y: 0, z: 52.24 })
     //服装军团
-    createAc({ x: -88.39, y: 0, z: -249.36 })
-    createAc({ x: 82.99, y: 0, z: -170.17 })
+    createAc('AC', { x: -88.39, y: 0, z: -249.36 })
+    createAc('AC', { x: 82.99, y: 0, z: -170.17 })
 
     /**创建AC结束 */
 
 
     /*创建wifi */
     //机加
-    createWifi({ x: -46.96, y: 3, z: 156.57 })
+    createWifi('WIFI', { x: -46.96, y: 3, z: 156.57 })
     //大件
-    createWifi({ x: 52.60, y: 3, z: 96.44 })
-    createWifi({ x: 52.60, y: 3, z: 157.07 })
+    createWifi('WIFI', { x: 52.60, y: 3, z: 96.44 })
+    createWifi('WIFI', { x: 52.60, y: 3, z: 157.07 })
     //精饰
-    createWifi({ x: 133.14, y: 3, z: 107.43 })
-    createWifi({ x: 133.14, y: 3, z: 156.25 })
+    createWifi('WIFI', { x: 133.14, y: 3, z: 107.43 })
+    createWifi('WIFI', { x: 133.14, y: 3, z: 156.25 })
     //焊接
-    createWifi({ x: 305.73, y: 3, z: 110.45 })
-    createWifi({ x: 305.73, y: 3, z: 238.67 })
+    createWifi('WIFI', { x: 305.73, y: 3, z: 110.45 })
+    createWifi('WIFI', { x: 305.73, y: 3, z: 238.67 })
     //服装
-    createWifi({ x: -89.13, y: 4, z: -245.33 })
-    createWifi({ x: -132.07, y: 3, z: -245.33 })
-    createWifi({ x: -222.31, y: 3, z: -245.33 })
-    createWifi({ x: -119.3, y: 3, z: -114.15 })
-    createWifi({ x: -176.45, y: 3, z: -114.40 })
+    createWifi('WIFI', { x: -88, y: 3, z: -232 })
+    createWifi('WIFI', { x: -132.07, y: 3, z: -245.33 })
+    createWifi('WIFI', { x: -222.31, y: 3, z: -245.33 })
+    createWifi('WIFI', { x: -119.3, y: 3, z: -114.15 })
+    createWifi('WIFI', { x: -176.45, y: 3, z: -114.40 })
 
     //家纺 医防
-    createWifi({ x: 140.83, y: 2, z: -197.34 })
-    createWifi({ x: 259.37, y: 2, z: -197.34 })
-    createWifi({ x: 140.83, y: 2, z: -111.84 })
-    createWifi({ x: 259.50, y: 2, z: -111.81 })
+    createWifi('WIFI', { x: 140.83, y: 2, z: -197.34 })
+    createWifi('WIFI', { x: 259.37, y: 2, z: -197.34 })
+    createWifi('WIFI', { x: 140.83, y: 2, z: -111.84 })
+    createWifi('WIFI', { x: 259.50, y: 2, z: -111.81 })
 
 
 
@@ -447,10 +441,10 @@ const init = () => {
         { x: -47.67, y: 2, z: -25.70 },
         { x: -47.67, y: 2, z: -248.85 },
         { x: -221.76, y: 2, z: -248.85 }
-    ])
+    ], 4, true)
 
 
-    createLine(garyLine, [{ x: -88.73, y: 2, z: -249.01 }, { x: -88.73, y: 2, z: -117.33 }, { x: -174.65, y: 2, z: -117.33 }])
+    createLine(garyLine, [{ x: -88.73, y: 2, z: -249.01 }, { x: -88.73, y: 2, z: -117.33 }, { x: -174.65, y: 2, z: -117.33 }], 4, true)
     //汽车军团
     createLine(whiteColor, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }], 2)
     //机加
@@ -463,7 +457,7 @@ const init = () => {
     createLine(garyLine, [
         { x: -46.13, y: 2, z: 52.90 },
         { x: -46.13, y: 2, z: 153.05 }
-    ])
+    ], 4, true)
     //家纺医防
     createLine(garyLine, [
         { x: 27.47, y: 2, z: -26.11 },
@@ -476,7 +470,7 @@ const init = () => {
         { x: 260.42, y: 2, z: -115.33 },
         { x: 141.66, y: 2, z: -115.33 },
         { x: 141.66, y: 2, z: -200.86 },
-    ])
+    ], 4, true)
 
 
     //创建第二条线
@@ -492,7 +486,7 @@ const init = () => {
     createLine(garyLine, [
         { x: 306.56, y: 2, z: 40.43 },
         { x: 306.56, y: 2, z: 235.28 }
-    ])
+    ], 4, true)
     //精加
     createLine(whiteColor, [
         { x: -164.26, y: 2, z: 30.98 },
@@ -503,7 +497,7 @@ const init = () => {
         { x: -164.26, y: 2, z: 140.05 },
         { x: -214.35, y: 2, z: 140.05 }
 
-    ])
+    ], 4, true)
     //大件 总---精饰
     createLine(garyLine, [
         { x: 26.61, y: 2, z: -27.08 },
@@ -512,12 +506,12 @@ const init = () => {
         { x: -0.90, y: 2, z: 52.24 },
         { x: 133.97, y: 2, z: 53.16 },
         { x: 133.97, y: 2, z: 154.31 }
-    ])
+    ], 4, true)
     //大件 分
     createLine(garyLine, [
         { x: 53.43, y: 2, z: 53.16 },
         { x: 53.43, y: 2, z: 154.31 }
-    ])
+    ], 4, true)
     /**
      * 
             { x: 26.61, y: 2, z: -27.08 },
@@ -543,12 +537,40 @@ const init = () => {
         { x: 71.44, y: 2, z: -251.40 },
         { x: 71.44, y: 2, z: -183.05 },
         { x: 83.96, y: 2, z: -183.05 }
-    ])
+    ], 4, true)
     createLine(whiteColor, [
         { x: 18.30, y: 2, z: 30.98 },
         { x: 18.30, y: 2, z: -28.94 }
     ], 2)
 
+
+    /**创建线 */
+    createLine(whiteColor, [
+        { x: -536, y: 2, z: 368 },
+        { x: -536, y: 2, z: -348 }
+    ], 8)
+    var dir = new THREE.Vector3(0, 0, -20);
+
+    //normalize the direction vector (convert to vector of length 1)
+    dir.normalize();
+    var origin = new THREE.Vector3(-536, 2, -348);
+    var length = 20;
+    var hex = 0xffffff;
+    var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex, length, 10);
+    scene.add(arrowHelper);
+    createLine(whiteColor, [
+        { x: -536, y: 2, z: 368 },
+        { x: 516, y: 2, z: 368 }
+    ], 8)
+    var dir = new THREE.Vector3(20, 0, 0);
+
+    //normalize the direction vector (convert to vector of length 1)
+    dir.normalize();
+    var origin = new THREE.Vector3(516, 2, 368);
+    var length = 20;
+    var hex = 0xffffff;
+    var arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex, length, 10);
+    scene.add(arrowHelper);
     setTipDom()
     sethoveMesh()
 
@@ -626,26 +648,21 @@ const init = () => {
         let T1 = +new Date()
         // let t = T1 - T0 //获取时间间隔
         renderer.render(scene, camera)
-        //旋转立方体,每次绕y轴旋转0.01弧度，每一秒渲染0.001弧度
-        //box.rotateY(0.001 * t)
-        // if (t >= 2000) {
-        //     return
-        // }
-        boxObjects.value.forEach((element: any) => {
-            let color1 = 0x88e76a
-            let color2 = 0xff0000
-            //判断是否是更新的传感器数据
-            if (store.updateSensorData.hasOwnProperty(element.sensor_id)) {
-                // console.log(store.updateSensorData,'store.updateSensorData');
-                // console.log(element,'element');
+        // boxObjects.value.forEach((element: any) => {
+        //     let color1 = 0x88e76a
+        //     let color2 = 0xff0000
+        //     //判断是否是更新的传感器数据
+        //     if (store.updateSensorData.hasOwnProperty(element.sensor_id)) {
+        //         // console.log(store.updateSensorData,'store.updateSensorData');
+        //         // console.log(element,'element');
 
-                let color = store.updateSensorData[element.sensor_id].status ? color1 : color2
-                element.devStatus = store.updateSensorData[element.sensor_id].status
-                element.material.color = new THREE.Color(color)
+        //         let color = store.updateSensorData[element.sensor_id].status ? color1 : color2
+        //         element.devStatus = store.updateSensorData[element.sensor_id].status
+        //         element.material.color = new THREE.Color(color)
 
-            }
-            // reader(element)
-        });
+        //     }
+        //     // reader(element)
+        // });
         TWEEN.update()
         controls.update()
         labelRenderer.render(scene, camera)
@@ -659,7 +676,7 @@ const init = () => {
 
 
 //创建线
-function createLine(color: number, pointsList: any, width: number = 4) {
+function createLine(color: number, pointsList: any, width: number = 4, isDashed: boolean = false) {
     // const material = new THREE.LineBasicMaterial({ color: color });
     // const points = [];
     // pointsList.forEach(element => {
@@ -684,11 +701,11 @@ function createLine(color: number, pointsList: any, width: number = 4) {
         color: color,
         transparent: true,
         // opacity: 0.5,
-        dashed: width !== 2 ? true : false,
+        dashed: isDashed ? true : false,
         dashScale: 1,
         dashSize: 3,
         gapSize: 1,
-        linewidth: width
+        linewidth: width,
     })
     //console.log(material,'material');
 
@@ -702,25 +719,64 @@ function createLine(color: number, pointsList: any, width: number = 4) {
 }
 
 //创建wifi
-function createWifi(position: positionType) {
-    const loader = new GLTFLoader();
+// function createWifi(position: positionType) {
+//     const loader = new GLTFLoader();
 
-    loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
-        const mesh = gltf.scene.children[0];
+//     loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
+//         const mesh = gltf.scene.children[0];
 
-        const s = 0.5;
-        mesh.scale.set(s, s, s);
-        mesh.position.set(position.x, position.y, position.z);
-        // mesh.rotation.x = THREE.MathUtils.degToRad(270)
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
-        scene.add(mesh);
+//         const s = 0.5;
+//         mesh.scale.set(s, s, s);
+//         mesh.position.set(position.x, position.y, position.z);
+//         // mesh.rotation.x = THREE.MathUtils.degToRad(270)
+//         mesh.castShadow = true;
+//         mesh.receiveShadow = true;
+//         scene.add(mesh);
 
-    }, undefined, function (error) {
+//     }, undefined, function (error) {
 
-        console.error(error);
+//         console.error(error);
 
+//     });
+// }
+
+//计算经纬度与坐标的转换
+function getLonLatToPosition(point: any) {
+    // -507,-340.5 = 117.268834,39.769089
+    // 507,340.5 = 117.271089,39.771682
+    let minx = -507
+    let minz = -340.5
+    let minLon = 117.268834
+    let minLat = 39.769089
+    let lon_step = (117.271089 - 117.268834) / 681
+    let lat_step = (39.771682 - 39.769089) / 1014
+    let {x,z} = point
+    let lon = (minLon + (z-minz) * lon_step).toFixed(6)
+    let lat = (minLat + (x-minx) * lat_step).toFixed(6)
+    return {lon,lat}
+    
+}
+
+const createWifi = (name:string='wifi', boxposition: positionType, lon_lat:object={lon:117.269808,lat:39.770178}): object => {
+
+    const wallTexture = new THREE.TextureLoader().load(requires.wifi);
+    const wall = new THREE.BoxGeometry(15, 5, 10);
+    const wallMaterial = new THREE.MeshPhongMaterial({
+        map: wallTexture,
+        color: 0xe7e7e7,
+        transparent: true,
     });
+    //墙体的网格
+    const wallMesh = new THREE.Mesh(wall, wallMaterial);
+    // 物体移动位置
+    // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
+    wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z - 6);
+    wallMesh.name = name
+    wallMesh.lon_lat = getLonLatToPosition({x:boxposition.x,z:boxposition.z - 6})
+    // 将立方体添加到场景中
+    group.add(wallMesh)
+    boxObjects.value.push(wallMesh)
+    return wallMesh
 }
 
 //创建交换机
@@ -747,7 +803,7 @@ function createWifi(position: positionType) {
 //     });
 // }
 
-const createSwitch = (boxposition: positionType, shadow: boolean = true): object => {
+const createSwitch = (name:string='光猫', boxposition: positionType, lon_lat:object={lon:117.269808,lat:39.770178}): object => {
 
     const wallTexture = new THREE.TextureLoader().load(requires.guangmao);
     const wall = new THREE.BoxGeometry(15, 5, 10);
@@ -761,12 +817,15 @@ const createSwitch = (boxposition: positionType, shadow: boolean = true): object
     // 物体移动位置
     // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
     wallMesh.position.set(boxposition.x - 6, 5 + boxposition.y, boxposition.z + 33.73);
+    wallMesh.name = name
+    wallMesh.lon_lat = getLonLatToPosition({x:boxposition.x - 6,z:boxposition.z + 33.73})
     // 将立方体添加到场景中
     group.add(wallMesh)
+    boxObjects.value.push(wallMesh)
     return wallMesh
 }
 
-const createAc = (boxposition: positionType, shadow: boolean = true): object => {
+const createAc = (name:string='Ac', boxposition: positionType, lon_lat:object={lon:117.269808,lat:39.770178}): object => {
 
     const wallTexture = new THREE.TextureLoader().load(requires.ac);
     const wall = new THREE.BoxGeometry(15, 5, 10);
@@ -780,8 +839,11 @@ const createAc = (boxposition: positionType, shadow: boolean = true): object =>
     // 物体移动位置
     // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
     wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z);
+    wallMesh.name = name
+    wallMesh.lon_lat = getLonLatToPosition(boxposition)
     // 将立方体添加到场景中
     group.add(wallMesh)
+    boxObjects.value.push(wallMesh)
     return wallMesh
 }
 
@@ -789,7 +851,7 @@ const createAc = (boxposition: positionType, shadow: boolean = true): object =>
 
 
 //创建服务器
-function createGlb() {
+function createGlb(name) {
     const loader = new GLTFLoader();
 
     loader.load('/models/glb/server.glb', function (gltf) {
@@ -881,7 +943,7 @@ function createLableObj(mesh: any, text: string, vector: positionType) {
     laberDiv.className = 'laber_name';
     laberDiv.textContent = text;
     let pointLabel = new CSS2DObject(laberDiv);
-    pointLabel.position.set(vector.x, vector.y, vector.z);
+    pointLabel.position.set(vector.x, 0, vector.z);
 
     mesh.add(pointLabel);
 }
@@ -1134,6 +1196,7 @@ function createSkyBox() {
 function setTipDom() {
     const domTag = document.createElement("div");
     domTag.setAttribute("id2", "tipId");
+    domTag.className = "item-tag"
     // domTag.innerText='电流'
     domTag.style.fontSize = "14px";
     domTag.style.backgroundColor = "rgba(0,0,0,.5)";
@@ -1167,17 +1230,17 @@ function sethoveMesh() {
         camera,
         labelRenderer.domElement
     );
-
-    if (!edit) {
-        dragControls.deactivate();
-    }
-    dragControls.addEventListener("hoveron", function (event: any) {
-        saveTipDom.element.innerHTML = `${event.object.name}:${event.object.devStatus ? t('messages.onLine') : t('messages.offline')
-            }`;
+    dragControls.deactivate();
+    dragControls.addEventListener("hoveron", function (event: any) {        
+        saveTipDom.element.innerHTML = `
+            <div>${event.object.name}</div>
+            <div>经度：${event.object.lon_lat.lon}</div>
+            <div>纬度：${event.object.lon_lat.lat}</div>
+        `;
         saveTipDom.element.style.visibility = "visible";
         saveTipDom.position.x = event.object.position.x;
         saveTipDom.position.y = event.object.position.y + 5;
-        saveTipDom.position.z = event.object.position.z - 20;
+        saveTipDom.position.z = event.object.position.z - 30;
         saveTipDom.visible = true;
 
     });
@@ -1189,22 +1252,6 @@ function sethoveMesh() {
         saveTipDom.visible = false;
     });
 
-    dragControls.addEventListener("dragend", function (event: any) {
-        let data = { 'id': event.object.sensor_id, 'x': event.object.position.x.toFixed(2), 'y': event.object.position.z.toFixed(2) }
-        updateCoordinateByPoint(data).then((res: any) => {
-            if (res.code == 200) {
-                ElNotification({
-                    message: '移动位置成功',
-                    duration: 2000,
-                    type: 'success'
-                })
-            }
-
-
-        })
-
-    });
-
 }
 
 onMounted(() => {
@@ -1261,4 +1308,10 @@ onMounted(() => {
     padding: 2px;
     background: rgba(0, 0, 0, 0.6);
 }
+
+.item-tag {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 </style>