From 0f964b3a9286c6483c9e10ab24a856d5833327a3 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Tue, 2 Sep 2025 17:09:26 +0800
Subject: [PATCH] =?UTF-8?q?add=E5=85=B3=E9=97=AD=E7=82=B9=E4=BA=91?=
 =?UTF-8?q?=E5=92=8C=E5=B0=8F=E8=BD=A6=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/langs/en.js           |   5 +-
 src/i18n/langs/zh.js           |   5 +-
 src/pages/modules/building.vue |  37 ++-
 src/pages/modules/gl-map-3.vue | 448 ---------------------------------
 src/pages/modules/gl-map-4.vue |  20 +-
 5 files changed, 53 insertions(+), 462 deletions(-)
 delete mode 100644 src/pages/modules/gl-map-3.vue

diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js
index 5c3b208..feba33f 100644
--- a/src/i18n/langs/en.js
+++ b/src/i18n/langs/en.js
@@ -110,5 +110,8 @@ module.exports = {
   Systemsettings: 'System settings',
   Control: 'Control',
   Obstacleforklifts: 'Obstacle avoidance between forklifts',
-  Syncsuccessfully: 'Sync successfully'
+  Syncsuccessfully: 'Sync successfully',
+  EnablePointCloud: 'Enable Point Cloud',
+  DisablePointCloud: 'Disable Point Cloud',
+  CartPosition: 'Cart Position'
 }
diff --git a/src/i18n/langs/zh.js b/src/i18n/langs/zh.js
index 96f122f..faff3ef 100644
--- a/src/i18n/langs/zh.js
+++ b/src/i18n/langs/zh.js
@@ -110,5 +110,8 @@ module.exports = {
   Systemsettings: '系统设置',
   Control: '控制',
   Obstacleforklifts: '叉间避障',
-  Syncsuccessfully: '同步成功'
+  Syncsuccessfully: '同步成功',
+  EnablePointCloud: '开启点云',
+  DisablePointCloud: '关闭点云',
+  CartPosition: '小车位置'
 }
diff --git a/src/pages/modules/building.vue b/src/pages/modules/building.vue
index 0cd9c2f..dd69bc2 100644
--- a/src/pages/modules/building.vue
+++ b/src/pages/modules/building.vue
@@ -4,8 +4,14 @@
       <gl-map ref="glMap"/>
     </div>
     <el-row type="flex" justify="space-between">
-      <el-col :span="10"><button id="v-step-2" class="button_control" :disabled="disabled" @click="addPoint"><p>{{$t('MarkPoint')}}</p></button></el-col>
-      <el-col :span="14">
+      <el-col :span="16">
+        <el-row type="flex">
+          <button id="v-step-2" class="button_control" :disabled="disabled" @click="addPoint"><p>{{$t('MarkPoint')}}</p></button>
+          <button class="button_control" style="margin-left: 10px" :disabled="disabled" @click="closeCloud"><p>{{cloudOff ? $t('EnablePointCloud') : $t('DisablePointCloud')}}</p></button>
+          <div class="car-info">{{$t('CartPosition')}}: <span>{{ carPosition.x }}, {{carPosition.y}}</span></div>
+        </el-row>
+      </el-col>
+      <el-col :span="8">
         <el-row type="flex" justify="end">
           <button class="button_control" @click="$router.push('/index/home')"><p>{{$t('AbandonMapbuild')}}</p></button>
           <button id="v-step-3" class="button_control" style="margin-left: 10px" :disabled="disabled" @click="stopMappingConfirm"><p>{{$t('FinishMapbuild')}}</p></button>
@@ -108,6 +114,7 @@ export default {
         }
     }
     return {
+      cloudOff: false,
       driver: null,
       driverActive: true,
       needsConfirmation: true,
@@ -134,7 +141,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['isTop'])
+    ...mapGetters(['isTop', 'carPosition'])
   },
   beforeDestroy () {
     document.removeEventListener('keydown', this.handleKeydown);
@@ -424,6 +431,18 @@ export default {
         this.disabled = false
         this.loading.close()
       }
+    },
+    closeCloud () {
+      this.cloudOff = !this.cloudOff
+      if (this.cloudOff) {
+        this.$nextTick(() => {
+          this.$refs.glMap.closeWebSocket()
+        })
+      } else {
+        this.$nextTick(() => {
+          this.$refs.glMap.init()
+        })
+      }
     }
   }
 }
@@ -483,9 +502,21 @@ export default {
   color: #000
   font-weight: 700
 }
+.car-info
+  max-width calc(100% - 3rem)
+  background: rgba(30, 95, 239, 60%);
+  padding: 0 10px;
+  border-radius: 8px;
+  margin-left: 10px;
+  font-size: 0.2rem;
+  line-height: 0.36rem;
+  color: #fff
+  overflow: hidden
 .enClass
   .button_control
     p
       font-size .18rem
       line-height .16rem
+  .car-info
+    font-size .16rem
 </style>
diff --git a/src/pages/modules/gl-map-3.vue b/src/pages/modules/gl-map-3.vue
deleted file mode 100644
index 05d8705..0000000
--- a/src/pages/modules/gl-map-3.vue
+++ /dev/null
@@ -1,448 +0,0 @@
-<template>
-  <div class="point-cloud-map">
-    <div ref="canvasContainer" class="canvas-container">
-      <canvas ref="pointCloudCanvas"></canvas>
-    </div>
-    <el-button icon="el-icon-location" size="mini" class="locate-button" @click="locateCar">
-    </el-button>
-    <div v-if="isLoading" class="loading-indicator">{{ $t('Loading') }}</div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable */
-import * as THREE from 'three'
-import { mapGetters } from 'vuex'
-// import { points } from '../../config/point.js'
-// import { points1 } from '../../config/point1.js'
-// import { points2 } from '../../config/point2.js'
-export default {
-  name: 'PointCloudMap',
-  data() {
-    return {
-      // Three.js相关
-      scene: null,
-      camera: null,
-      renderer: null,
-      pointCloud: null,
-      pointMaterial: null,
-      pointGeometry: null,
-      carMesh: null,
-      carTexture: null,
-      axesHelper: null,
-      gridHelper: null,
-      // 点云数据
-      allPoints: [],
-      pointCount: 0,
-      maxPoints: 1000000, // 最大点数限制
-      // 小车相关
-      vehicleImage: require('../../images/new/agv.png'),
-      carMovementEnabled: true,
-      carSize: 30,
-      // 视图控制
-      isDragging: false,
-      previousTouchX: 0,
-      previousTouchY: 0,
-      cameraX: 0,
-      cameraY: 0,
-      cameraZoom: 1,
-      initialPinchDistance: null,
-      initialZoom: null,
-      // UI控制
-      pointSize: 1.5,
-      // WebSocket相关
-      socket: null,
-      isLoading: true,
-      reconnectTimer: null, // 重连计时器
-      animationFrameId: null
-    }
-  },
-  computed: {
-    ...mapGetters(['serverUrl', 'userRole', 'carPosition']),
-  },
-  watch: {
-    carPosition: {
-      handler(newVal) {
-        this.updateCarPosition(newVal)
-      },
-      deep: true
-    }
-  },
-  beforeDestroy() {
-    this.cleanupResources();
-  },
-  methods: {
-    cleanupResources() {
-      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
-      if (this.animationFrameId) cancelAnimationFrame(this.animationFrameId)
-      this.closeWebSocket()
-      // 清理Three.js资源
-      if (this.renderer) {
-        this.renderer.dispose();
-        this.renderer.forceContextLoss();
-        this.renderer = null;
-      }
-      if (this.pointGeometry) {
-        this.pointGeometry.dispose();
-        this.pointGeometry = null;
-      }
-      if (this.pointMaterial) {
-        this.pointMaterial.dispose();
-        this.pointMaterial = null;
-      }
-      if (this.carTexture) {
-        this.carTexture.dispose();
-        this.carTexture = null;
-      }
-      if (this.scene) {
-        this.scene.clear();
-        this.scene = null;
-      }
-      this.camera = null;
-      this.pointCloud = null;
-      this.carMesh = null;
-      this.allPoints = [];
-      this.pointCount = 0;
-    },
-    initThreeJS() {
-      // 初始化Three.js场景
-      const container = this.$refs.canvasContainer;
-      const aspectRatio = container.clientWidth / container.clientHeight;
-      const pointRange = 2000; // 点云范围 -1000 到 1000
-      const viewHeight = pointRange;
-      const viewWidth = viewHeight * aspectRatio;
-      this.scene = new THREE.Scene();
-      this.camera = new THREE.OrthographicCamera(
-        -viewWidth / 2,
-        viewWidth / 2,
-        viewHeight / 2,
-        -viewHeight / 2,
-        0.1,
-        2000
-      );
-      this.camera.position.z = 10;
-      const canvas = this.$refs.pointCloudCanvas;
-      this.renderer = new THREE.WebGLRenderer({
-        canvas: canvas,
-        antialias: true,
-        alpha: true,  // 关键：启用alpha通道
-        transparent: true  // 关键：允许透明
-      });
-      
-      this.updateRendererSize();
-      this.createPointCloud();
-      this.createCar();
-      this.setupEventListeners();
-      this.animate();
-    },
-    createPointCloud() {
-      this.pointGeometry = new THREE.BufferGeometry();
-      this.pointMaterial = new THREE.PointsMaterial({
-        size: this.pointSize,
-        color: 0xFFFFFF,
-        sizeAttenuation: false
-      });
-      this.pointCloud = new THREE.Points(this.pointGeometry, this.pointMaterial);
-      this.scene.add(this.pointCloud);
-    },
-    createCar() {
-      const textureLoader = new THREE.TextureLoader();
-      textureLoader.load(this.vehicleImage, (texture) => {
-        this.carTexture = texture;
-        const carMaterial = new THREE.SpriteMaterial({ 
-          map: texture,
-          transparent: true,
-          opacity: 1
-        });
-        this.carMesh = new THREE.Sprite(carMaterial);
-        const container = this.$refs.canvasContainer;
-        const scale = this.carSize / container.clientHeight * 2000;
-        this.carMesh.scale.set(scale * 1.5, scale * 1.5, 1);
-        this.carMesh.position.set(this.carPosition.x, this.carPosition.y, 5);
-        this.carMesh.rotation.z = this.carPosition.angle;
-        this.scene.add(this.carMesh);
-      });
-    },
-    updatePointCloud(points) {
-      if (!points || !Array.isArray(points) || points.length === 0) return;
-      // 添加新点
-      this.allPoints = [...this.allPoints, ...points];
-      this.pointCount = this.allPoints.length;
-      // 如果超过最大点数限制，移除旧点
-      if (this.pointCount > this.maxPoints) {
-        this.allPoints = this.allPoints.slice(-points.length);
-        this.pointCount = this.allPoints.length;
-      }
-      this.updatePointCloudGeometry();
-    },
-    updatePointCloudGeometry() {
-      const positions = new Float32Array(this.pointCount * 3);
-      for (let i = 0; i < this.pointCount; i++) {
-        const point = this.allPoints[i];
-        positions[i * 3] = point.x || 0;
-        positions[i * 3 + 1] = point.y || 0;
-        positions[i * 3 + 2] = 0;
-      }
-      // 清理旧的geometry属性
-      if (this.pointGeometry.attributes.position) {
-        this.pointGeometry.deleteAttribute('position');
-      }
-      this.pointGeometry.setAttribute(
-        'position', 
-        new THREE.BufferAttribute(positions, 3)
-      );
-      this.pointGeometry.attributes.position.needsUpdate = true;
-    },
-    updateCarPosition(position) {
-      if (!this.carMovementEnabled || !this.carMesh) return;
-      this.carMesh.position.set(position.x, position.y, 5);
-      this.carMesh.rotation.z = position.angle;
-    },
-    animate() {
-      this.animationFrameId = requestAnimationFrame(this.animate);
-      this.camera.position.x = this.cameraX;
-      this.camera.position.y = this.cameraY;
-      this.camera.zoom = this.cameraZoom;
-      
-      this.camera.updateProjectionMatrix();
-      this.renderer.render(this.scene, this.camera);
-    },
-    updateRendererSize() {
-      const container = this.$refs.canvasContainer;
-      const width = container.clientWidth;
-      const height = container.clientHeight;
-      const aspectRatio = width / height;
-      const viewHeight = 2000;
-      const viewWidth = viewHeight * aspectRatio;
-      this.camera.left = -viewWidth / 2 / this.cameraZoom;
-      this.camera.right = viewWidth / 2 / this.cameraZoom;
-      this.camera.top = viewHeight / 2 / this.cameraZoom;
-      this.camera.bottom = -viewHeight / 2 / this.cameraZoom;
-      this.camera.updateProjectionMatrix();
-      this.renderer.setSize(width, height);
-    },
-    locateCar() {
-      // 将相机对准小车
-      this.cameraX = this.carPosition.x;
-      this.cameraY = this.carPosition.y;
-    },
-    setupEventListeners() {
-      const canvas = this.$refs.pointCloudCanvas;
-      window.addEventListener('resize', this.updateRendererSize());
-      // 触摸事件 - 平移
-      canvas.addEventListener('touchstart', (e) => {
-        if (e.touches.length === 1) {
-          this.isDragging = true;
-          this.previousTouchX = e.touches[0].clientX;
-          this.previousTouchY = e.touches[0].clientY;
-          e.preventDefault();
-        }
-      });
-      canvas.addEventListener('touchmove', (e) => {
-        if (this.isDragging && e.touches.length === 1) {
-          const deltaX = e.touches[0].clientX - this.previousTouchX;
-          const deltaY = e.touches[0].clientY - this.previousTouchY;
-          
-          // 移动相机（反转方向以获得自然拖动效果）
-          this.cameraX -= deltaX * 2 / this.cameraZoom;
-          this.cameraY += deltaY * 2 / this.cameraZoom;
-          
-          this.previousTouchX = e.touches[0].clientX;
-          this.previousTouchY = e.touches[0].clientY;
-          e.preventDefault();
-        }
-        
-        // 双指 pinch 缩放
-        if (e.touches.length === 2) {
-          const touch1 = e.touches[0];
-          const touch2 = e.touches[1];
-          
-          // 计算当前两点间的距离
-          const currentDistance = Math.hypot(
-            touch1.clientX - touch2.clientX,
-            touch1.clientY - touch2.clientY
-          );
-          
-          // 计算初始两点间的距离（存储在touchstart事件中）
-          if (!this.initialPinchDistance) {
-            this.initialPinchDistance = currentDistance;
-            this.initialZoom = this.cameraZoom;
-          }
-          
-          // 计算缩放比例
-          const zoomFactor = currentDistance / this.initialPinchDistance;
-          this.cameraZoom = Math.max(0.1, Math.min(10, this.initialZoom * zoomFactor));
-          
-          this.updateRendererSize();
-          e.preventDefault();
-        }
-      });
-      
-      canvas.addEventListener('touchend', ()=> {
-        this.isDragging = false;
-        this.initialPinchDistance = null;
-        this.initialZoom = null
-      });
-      
-      // 鼠标事件（用于桌面设备测试）
-      canvas.addEventListener('mousedown', (e) => {
-        this.isDragging = true;
-        this.previousTouchX = e.clientX;
-        this.previousTouchY = e.clientY;
-      });
-      
-      canvas.addEventListener('mousemove', (e) => {
-        if (this.isDragging) {
-          const deltaX = e.clientX - this.previousTouchX;
-          const deltaY = e.clientY - this.previousTouchY;
-          
-          this.cameraX -= deltaX * 2 / this.cameraZoom;
-          this.cameraY += deltaY * 2 / this.cameraZoom;
-          
-          this.previousTouchX = e.clientX;
-          this.previousTouchY = e.clientY;
-        }
-      });
-      
-      canvas.addEventListener('mouseup', () => {
-        this.isDragging = false;
-      });
-      
-      canvas.addEventListener('mouseleave', () => {
-        this.isDragging = false;
-      });
-      
-      // 鼠标滚轮缩放
-      canvas.addEventListener('wheel', (e)=> {
-        e.preventDefault();
-        if (e.deltaY < 0) {
-          this.cameraZoom *= 1.1;
-        } else {
-          this.cameraZoom /= 1.1;
-        }
-        this.updateRendererSize();
-      });
-    },
-    initWebSocket() {
-      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
-      const protocol = this.serverUrl.startsWith('https') ? 'wss' : 'ws'
-      const wsHost = this.serverUrl.replace(/^https?:\/\//, '')
-      this.socket = new WebSocket(`${protocol}://${wsHost}/webSocket/PointCloudData/${this.userRole}`)
-      this.socket.onopen = () => {
-        console.log('WebSocket连接已建立')
-        this.isLoading = false
-      }
-      this.socket.onmessage = (event) => {
-        try {
-          const now = Date.now()
-          if (now - this.lastUpdateTime < this.updateInterval) {
-            return
-          }
-          this.lastUpdateTime = now
-          if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
-          const pointData = JSON.parse(event.data)
-          this.updatePointCloud(pointData.data)
-        } catch (error) {
-          console.error('解析点云数据失败:', error)
-        }
-      }
-      this.socket.onclose = (event) => {
-        console.log('WebSocket连接已关闭，代码:', event.code)
-        this.isLoading = true
-        this.reconnectTimer = setTimeout(() => this.initWebSocket(), 3000)
-      }
-      this.socket.onerror = (error) => {
-        if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
-        console.error('WebSocket错误:', error)
-        this.isLoading = true
-      }
-    },
-    closeWebSocket() {
-      if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
-      if (this.socket) {
-        this.socket.onopen = null
-        this.socket.onmessage = null
-        this.socket.onclose = null
-        this.socket.onerror = null
-        this.socket.close(1000, '组件销毁')
-        this.socket = null
-      }
-      this.allPoints = []
-    },
-    init() {
-      this.initThreeJS();
-      this.initWebSocket()
-      // this.isLoading = false;
-      // const pointData = points.data
-      // this.updatePointCloud(pointData);
-      // setTimeout(() => {
-      //   const arr = points1.data
-      //   this.updatePointCloud(arr);
-      // }, 1000)
-      // setTimeout(() => {
-      //   const arr = points2.data
-      //   this.updatePointCloud(arr);
-      // }, 2000)
-    }
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-.point-cloud-map
-  position relative
-  width 100%
-  height 100%
-  background-color rgba(4, 33, 58, 70%)
-  box-shadow inset 1px 1px 7px 2px #4d9bcd
-  overflow hidden
-
-.canvas-container
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%
-  height: 100%
-  position: relative
-  z-index: 0
-
-// 定位按钮样式
-.locate-button
-  position: absolute
-  bottom: 20px
-  right: 20px
-  width: 40px
-  height: 40px
-  border-radius: 50%
-  background-color: rgba(255, 255, 255, 0.8)
-  border: none
-  color: #333
-  font-size: 18px
-  cursor: pointer
-  display: flex
-  align-items: center
-  justify-content: center
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2)
-  z-index: 100
-  transition: all 0.2s ease
-  &:hover
-    background-color: white
-    transform: scale(1.05)
-  &:active
-    transform: scale(0.95)
-
-.loading-indicator
-  position: absolute
-  top: 50%
-  left: 50%
-  transform: translate(-50%, -50%)
-  background-color: rgba(255, 255, 255, 0.8)
-  padding: .01rem .02rem
-  border-radius: 4px
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1)
-  font-size: .12rem
-  color: #333
-  z-index: 100
-  display: flex
-  align-items: center
-</style>
diff --git a/src/pages/modules/gl-map-4.vue b/src/pages/modules/gl-map-4.vue
index 1c8ff16..e7dfb89 100644
--- a/src/pages/modules/gl-map-4.vue
+++ b/src/pages/modules/gl-map-4.vue
@@ -66,8 +66,8 @@ export default {
       animationFrameId: null,
       // 优化相关参数
       updateThrottle: 50, // 数据更新节流间隔(ms)
-      lastUpdateTime: 0,
-      resizeHandler: null // 存储resize事件处理函数
+      lastUpdateTime: 0
+      // resizeHandler: null // 存储resize事件处理函数
     }
   },
   computed: {
@@ -84,6 +84,9 @@ export default {
   beforeDestroy() {
     this.cleanupResources();
   },
+  mounted () {
+    this.initThreeJS();
+  },
   methods: {
     cleanupResources() {
       if (this.reconnectTimer) clearTimeout(this.reconnectTimer)
@@ -111,10 +114,10 @@ export default {
         this.scene.clear();
         this.scene = null;
       }
-      if (this.resizeHandler) {
-        window.removeEventListener('resize', this.resizeHandler);
-        this.resizeHandler = null;
-      }
+      // if (this.resizeHandler) {
+      //   window.removeEventListener('resize', this.resizeHandler);
+      //   this.resizeHandler = null;
+      // }
       const canvas = this.$refs.pointCloudCanvas;
       if (canvas) {
         canvas.removeEventListener('touchstart', null);
@@ -402,8 +405,8 @@ export default {
     },
     setupEventListeners() {
       const canvas = this.$refs.pointCloudCanvas;
-      this.resizeHandler = () => this.updateRendererSize();
-      window.addEventListener('resize', this.resizeHandler);
+      // this.resizeHandler = () => this.updateRendererSize();
+      // window.addEventListener('resize', this.resizeHandler);
       // 触摸事件 - 平移
       canvas.addEventListener('touchstart', (e) => {
         if (e.touches.length === 1) {
@@ -564,7 +567,6 @@ export default {
       this.allPoints = []
     },
     init() {
-      this.initThreeJS();
       this.initWebSocket()
       // this.isLoading = false;
       // const pointData = points.data