xiug

src/i18n/langs/en.js

@@ -3,6 +3,7 @@ module.exports = {
   Administratorauthentication: 'Administrator authentication',
   Notloggedinyet: 'Not logged in yet',
   Loginsuccessful:'Login successful',
+  Loginfailed: 'Login failed',
   Logout: 'Log out',
   Login: 'Log in',
   Configuration: 'Configuration',

src/i18n/langs/zh.js

@@ -3,6 +3,7 @@ module.exports = {
   Administratorauthentication: '管理员认证',
   Notloggedinyet: '暂未登录',
   Loginsuccessful:'登录成功',
+  Loginfailed: '登录失败',
   Logout: '退出账户',
   Login: '登录',
   Configuration: '配置',

src/pages/modules/building.vue

@@ -15,6 +15,7 @@
     <el-dialog
       :title="$t('SetUpStation')"
       :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
       width="55%">
       <el-form :model="dataForm" ref="dataForm" :rules="dataRule" :label-width="$i18n.locale === 'en-us' ? '' : '1.1rem'" size="mini">
         <el-form-item :label="$t('StationName')" prop="stationName">
@@ -48,9 +49,10 @@
 </template>
 
 <script>
-import GlMap from './gl-map-2.vue'
+import GlMap from './gl-map-3.vue'
 import { driver } from 'driver.js'
 import 'driver.js/dist/driver.css'
+// import { startMapping } from '../../config/mork.js'
 import { startMapping, stopMapping, getMappingStatus, setStation, oneClickDeployment, abandonMapping } from '../../config/getData.js'
 import { mapGetters } from 'vuex'
 export default {

src/pages/modules/gl-map-2.vue

@@ -14,9 +14,9 @@
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { mapGetters } from 'vuex'
-// import { points } from '../../config/point.js'
+import { points } from '../../config/point.js'
-// import { points1 } from '../../config/point1.js'
+import { points1 } from '../../config/point1.js'
-// import { points2 } from '../../config/point2.js'
+import { points2 } from '../../config/point2.js'
 
 // 常量定义
 const UPDATE_INTERVAL = 800
@@ -24,6 +24,7 @@ const DEFAULT_VIEW_SIZE = 20
 const BOUND_MARGIN = 0.1
 const MIN_ZOOM_RATIO = 0.5
 const MAX_ZOOM_RATIO = 3
+const AUTO_ADJUST_THRESHOLD = 100 // 每新增100个点检查是否需要调整视口
 
 export default {
   name: 'PointCloudMap',
@@ -42,6 +43,7 @@ export default {
       allPoints: [],
       pointCount: 0,
       pointScale: 1.0,
+      newPointsSinceLastAdjust: 0, // 新增点计数器
       
       // 小车相关
       vehicleImage: require('../../images/new/agv.png'),
@@ -102,7 +104,6 @@ export default {
       this.initPointCloud()
       this.initCar()
       this.startAnimationLoop()
-      // 核心修改：移除窗口大小变化监听，不做响应式调整
     },
     
     /**
@@ -294,18 +295,18 @@ export default {
     },
 
     init() {
-      this.initWebSocket()
+      // this.initWebSocket()
-      // this.isLoading = false
+      this.isLoading = false;
-      // const pointData = points.data
+      const pointData = points.data
-      // this.updatePointCloud(pointData);
+      this.updatePointCloud(pointData);
-      // setTimeout(() => {
+      setTimeout(() => {
-      //   const arr = points1.data
+        const arr = points1.data
-      //   this.updatePointCloud(arr);
+        this.updatePointCloud(arr);
-      // }, 1000)
+      }, 1000)
-      // setTimeout(() => {
+      setTimeout(() => {
-      //   const arr = points2.data
+        const arr = points2.data
-      //   this.updatePointCloud(arr);
+        this.updatePointCloud(arr);
-      // }, 2000)
+      }, 2000)
     },
     
     updatePointCloud(points) {
@@ -321,10 +322,17 @@ export default {
       
       this.allPoints = [...this.allPoints, ...newUniquePoints]
       this.pointCount = this.allPoints.length
+      this.newPointsSinceLastAdjust += newUniquePoints.length
 
       this.updatePointBounds(newUniquePoints)
       
       this.updatePointCloudGeometry(newUniquePoints)
+      
+      // 定期检查是否需要调整视口
+      if (this.newPointsSinceLastAdjust >= AUTO_ADJUST_THRESHOLD) {
+        this.checkAndAdjustViewport()
+        this.newPointsSinceLastAdjust = 0
+      }
     },
     
     updatePointBounds(newPoints) {
@@ -344,6 +352,24 @@ export default {
       }
     },
     
+    /**
+     * 检查并调整视口
+     */
+    checkAndAdjustViewport() {
+      const aspect = this.canvasSize.width / this.canvasSize.height
+      const pointRangeX = this.pointBounds.maxX - this.pointBounds.minX
+      const pointRangeY = this.pointBounds.maxY - this.pointBounds.minY
+      
+      // 计算当前视口能显示的范围
+      const currentViewWidth = this.viewSize * aspect
+      const currentViewHeight = this.viewSize
+      
+      // 如果点云范围超过当前视口的80%，则调整视口
+      if (pointRangeX > currentViewWidth * 0.8 || pointRangeY > currentViewHeight * 0.8) {
+        this.adjustCameraByBounds()
+      }
+    },
+    
     updatePointCloudGeometry(newUniquePoints) {
       const positionAttribute = this.pointCloudGeometry.getAttribute('position')
       let positions
@@ -392,6 +418,9 @@ export default {
         const requiredViewSizeX = pointRangeX * (1 + BOUND_MARGIN)
         const requiredViewSizeY = pointRangeY * (1 + BOUND_MARGIN)
         baseViewSize = Math.max(requiredViewSizeX / aspect, requiredViewSizeY)
+        
+        // 确保视口不会太小
+        baseViewSize = Math.max(baseViewSize, DEFAULT_VIEW_SIZE)
       }
       this.baseViewSize = baseViewSize
 

src/pages/modules/gl-map-3.vue

@@ -0,0 +1,648 @@
+<template>
+  <div class="point-cloud-map">
+    <div ref="canvasContainer" class="canvas-container"></div>
+    <!-- 定位按钮 -->
+    <el-button icon="el-icon-location" size="mini" class="locate-button" @click="locateCarToCenter">
+    </el-button>
+    <div v-if="isLoading" class="loading-indicator">
+      <i class="fa fa-circle-o-notch fa-spin"></i> {{ $t('Loading') }}
+    </div>
+  </div>
+</template>
+
+<script>
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { mapGetters } from 'vuex'
+// import { points } from '../../config/point.js'
+// import { points1 } from '../../config/point1.js'
+// import { points2 } from '../../config/point2.js'
+
+// 常量定义
+const UPDATE_INTERVAL = 800
+const DEFAULT_VIEW_SIZE = 20
+const BOUND_MARGIN = 0.1
+const MIN_ZOOM_RATIO = 1.0  // 最小缩放比例调整为1.0，避免过度缩小
+const MAX_ZOOM_RATIO = 3    // 最大缩放比例
+const AUTO_ADJUST_THRESHOLD = 100 // 每新增100个点检查是否需要调整视口
+const BOUND_PADDING = 5     // 边界额外留白
+
+export default {
+  name: 'PointCloudMap',
+  data() {
+    return {
+      // Three.js核心对象
+      scene: null,
+      camera: null,
+      renderer: null,
+      controls: null,
+      
+      // 点云相关
+      pointCloudGeometry: null,
+      pointCloudMaterial: null,
+      pointCloudMesh: null,
+      allPoints: [],
+      pointCount: 0,
+      pointScale: 1.0,
+      newPointsSinceLastAdjust: 0, // 新增点计数器
+      
+      // 小车相关
+      vehicleImage: require('../../images/new/agv.png'),
+      carMesh: null,
+      carTexture: null,
+      
+      // WebSocket相关
+      socket: null,
+      isLoading: true,
+      reconnectTimer: null,
+      
+      // 动画与性能
+      viewSize: DEFAULT_VIEW_SIZE,
+      animationId: null,
+      lastUpdateTime: 0,
+      updateInterval: UPDATE_INTERVAL,
+      
+      // 点云边界
+      pointBounds: {
+        minX: Infinity,
+        maxX: -Infinity,
+        minY: Infinity,
+        maxY: -Infinity
+      },
+      
+      isDestroyed: false,
+      baseViewSize: 0,
+      // 画布尺寸（正方形）
+      canvasSize: {
+        width: 0,
+        height: 0
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['serverUrl', 'userRole', 'carPosition']),
+  },
+  watch: {
+    carPosition: {
+      handler(newVal) {
+        this.updateCarPosition(newVal)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.initializeComponent()
+    // 监听窗口大小变化
+    window.addEventListener('resize', this.handleWindowResize)
+  },
+  beforeDestroy() {
+    this.cleanup()
+    // 移除窗口大小变化监听
+    window.removeEventListener('resize', this.handleWindowResize)
+  },
+  methods: {   
+    initializeComponent() {
+      // 设置画布为正方形（仅初始化时设置一次）
+      this.setCanvasSizeAsSquare()
+      this.initThreeJs()
+      this.initControls()
+      this.initPointCloud()
+      this.initCar()
+      this.startAnimationLoop()
+    },
+    
+    /**
+     * 设置画布为正方形（宽高等于容器初始宽度）
+     */
+    setCanvasSizeAsSquare() {
+      const container = this.$refs.canvasContainer
+      // 获取容器初始宽度
+      const containerWidth = container.clientWidth
+      // 设置宽高相等（正方形），仅初始化时计算一次
+      this.canvasSize.width = containerWidth
+      this.canvasSize.height = containerWidth
+    },
+    
+    initThreeJs() {
+      const container = this.$refs.canvasContainer
+      const aspect = this.canvasSize.width / this.canvasSize.height // 正方形画布，aspect=1
+      
+      this.scene = new THREE.Scene()
+      
+      this.camera = new THREE.OrthographicCamera(
+        -this.viewSize * aspect / 2,
+        this.viewSize * aspect / 2,
+        this.viewSize / 2,
+        -this.viewSize / 2,
+        0.1,
+        1000
+      )
+      this.camera.position.z = 100
+      
+      this.renderer = new THREE.WebGLRenderer({ 
+        antialias: true,
+        alpha: true,
+        transparent: true
+      })
+      // 使用初始化时计算的正方形尺寸
+      this.renderer.setSize(this.canvasSize.width, this.canvasSize.height)
+      this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+      this.renderer.setClearAlpha(0)
+      container.appendChild(this.renderer.domElement)
+    },
+    
+    initControls() {
+      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+      this.controls.enableRotate = false // 禁用旋转
+      this.controls.enableZoom = true
+      this.controls.enablePan = true
+      this.controls.screenSpacePanning = true
+      this.controls.touchZoomSpeed = 1
+      this.controls.panSpeed = 1
+      this.controls.touches = {
+        ONE: THREE.TOUCH.PAN,
+        TWO: THREE.TOUCH.DOLLY_PAN
+      }
+
+      // 锁定视角为正上方，避免视角倾斜导致的显示问题
+      this.controls.maxPolarAngle = Math.PI / 2
+      this.controls.minPolarAngle = Math.PI / 2
+
+      // 监听控制器变化，限制相机位置
+      this.controls.addEventListener('change', () => {
+        this.limitCameraPosition()
+      })
+
+      this.controls.addEventListener('error', (event) => {
+        console.error('OrbitControls error:', event)
+      })
+    },
+    
+    initPointCloud() {
+      this.pointCloudGeometry = new THREE.BufferGeometry()
+      this.pointCloudMaterial = new THREE.PointsMaterial({
+        color: 0xFFFFFF,
+        size: 1,
+        sizeAttenuation: true,
+        transparent: true,
+        opacity: 1
+      })
+      this.pointCloudMesh = new THREE.Points(
+        this.pointCloudGeometry, 
+        this.pointCloudMaterial
+      )
+      this.scene.add(this.pointCloudMesh)
+      this.allPoints = []
+    },
+    
+    initCar() {
+      const loader = new THREE.TextureLoader()
+      this.carTexture = loader.load(this.vehicleImage, (texture) => {
+        const material = new THREE.SpriteMaterial({
+          map: texture,
+          transparent: true,
+          opacity: 1,
+          depthWrite: false
+        })
+
+        this.carMesh = new THREE.Sprite(material)
+        this.scene.add(this.carMesh)
+
+        this.calculateCarSize()
+
+        if (this.carPosition) {
+          this.updateCarPosition(this.carPosition)
+          // 初始时将小车定位到中心
+          this.locateCarToCenter()
+        }
+      }, undefined, (error) => {
+        console.error('小车图片加载失败:', error)
+      })
+    },
+
+    calculateCarSize() {
+      if (!this.carMesh) return
+      
+      // 基于初始化的正方形画布计算小车尺寸
+      const spriteSizeX = (50 / this.canvasSize.width) * this.viewSize * (this.canvasSize.width / this.canvasSize.height)
+      const spriteSizeY = (50 / this.canvasSize.height) * this.viewSize
+      
+      this.carMesh.scale.set(spriteSizeX, spriteSizeY, 1)
+    },
+    
+    updateCarPosition(position) {
+      if (this.carMesh && position) {
+        this.carMesh.position.x = position.x * this.pointScale
+        this.carMesh.position.y = position.y * this.pointScale
+        this.carMesh.position.z = 1
+        this.carMesh.rotation.z = position.angle
+      }
+    },
+    
+    /**
+     * 定位按钮点击事件 - 将小车置于视窗中心
+     */
+    locateCarToCenter() {
+      if (!this.carMesh || !this.carPosition || !this.controls) return
+      
+      // 计算小车在世界坐标系中的位置
+      const carWorldX = this.carPosition.x * this.pointScale
+      const carWorldY = this.carPosition.y * this.pointScale
+      
+      // 将相机和控制器目标设置为小车位置，实现居中
+      this.controls.target.set(carWorldX, carWorldY, 0)
+      this.camera.position.set(carWorldX, carWorldY, 100)
+      this.controls.update() // 立即更新控制器状态
+    },
+    
+    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) => {
+        if (this.isDestroyed) return
+        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.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)
+    },
+    
+    updatePointCloud(points) {
+      if (!Array.isArray(points) || points.length === 0) return
+
+      const existingPoints = new Set(this.allPoints.map(p => `${p.x},${p.y}`))
+      const newUniquePoints = points.filter(point => {
+        const key = `${point.x},${point.y}`
+        return !existingPoints.has(key)
+      })
+
+      if (newUniquePoints.length === 0) return
+      
+      this.allPoints = [...this.allPoints, ...newUniquePoints]
+      this.pointCount = this.allPoints.length
+      this.newPointsSinceLastAdjust += newUniquePoints.length
+
+      this.updatePointBounds(newUniquePoints)
+      
+      this.updatePointCloudGeometry(newUniquePoints)
+      
+      // 定期检查是否需要调整视口
+      if (this.newPointsSinceLastAdjust >= AUTO_ADJUST_THRESHOLD) {
+        this.checkAndAdjustViewport()
+        this.newPointsSinceLastAdjust = 0
+      }
+    },
+    
+    updatePointBounds(newPoints) {
+      for (const point of newPoints) {
+        const scaledX = (point.x || 0) * this.pointScale
+        const scaledY = (point.y || 0) * this.pointScale
+        
+        if (scaledX < this.pointBounds.minX) this.pointBounds.minX = scaledX
+        if (scaledX > this.pointBounds.maxX) this.pointBounds.maxX = scaledX
+        if (scaledY < this.pointBounds.minY) this.pointBounds.minY = scaledY
+        if (scaledY > this.pointBounds.maxY) this.pointBounds.maxY = scaledY
+      }
+      
+      // 仅在首次加载点云时自动适配
+      if (this.pointCount === newPoints.length) {
+        this.adjustCameraByBounds()
+      }
+    },
+    
+    /**
+     * 检查并调整视口
+     */
+    checkAndAdjustViewport() {
+      const aspect = this.canvasSize.width / this.canvasSize.height
+      const pointRangeX = this.pointBounds.maxX - this.pointBounds.minX
+      const pointRangeY = this.pointBounds.maxY - this.pointBounds.minY
+      
+      // 计算当前视口能显示的范围
+      const currentViewWidth = this.viewSize * aspect
+      const currentViewHeight = this.viewSize
+      
+      // 如果点云范围超过当前视口的80%，则调整视口
+      if (pointRangeX > currentViewWidth * 0.8 || pointRangeY > currentViewHeight * 0.8) {
+        this.adjustCameraByBounds()
+      }
+    },
+    
+    updatePointCloudGeometry(newUniquePoints) {
+      const positionAttribute = this.pointCloudGeometry.getAttribute('position')
+      let positions
+      const newPointsCount = newUniquePoints.length
+
+      if (!positionAttribute) {
+        positions = new Float32Array(this.pointCount * 3)
+        this.pointCloudGeometry.setAttribute(
+          'position',
+          new THREE.BufferAttribute(positions, 3)
+        )
+      } else {
+        positions = positionAttribute.array
+        const newLength = this.pointCount * 3
+        if (newLength > positions.length) {
+          const newPositions = new Float32Array(Math.ceil(newLength * 1.2))
+          newPositions.set(positions)
+          positions = newPositions
+          this.pointCloudGeometry.setAttribute(
+            'position',
+            new THREE.BufferAttribute(positions, 3)
+          )
+        }
+      }
+
+      const startIndex = (this.pointCount - newPointsCount) * 3
+      for (let i = 0; i < newPointsCount; i++) {
+        const point = newUniquePoints[i]
+        const index = startIndex + i * 3
+        positions[index] = (point.x || 0) * this.pointScale
+        positions[index + 1] = (point.y || 0) * this.pointScale
+        positions[index + 2] = 0
+      }
+
+      this.pointCloudGeometry.getAttribute('position').needsUpdate = true
+    },
+
+    adjustCameraByBounds() {
+      const aspect = this.canvasSize.width / this.canvasSize.height
+
+      const pointRangeX = this.pointBounds.maxX - this.pointBounds.minX
+      const pointRangeY = this.pointBounds.maxY - this.pointBounds.minY
+
+      let baseViewSize = DEFAULT_VIEW_SIZE
+      if (this.allPoints.length > 0 && !(pointRangeX === 0 && pointRangeY === 0)) {
+        const requiredViewSizeX = pointRangeX * (1 + BOUND_MARGIN)
+        const requiredViewSizeY = pointRangeY * (1 + BOUND_MARGIN)
+        baseViewSize = Math.max(requiredViewSizeX / aspect, requiredViewSizeY)
+        
+        // 确保视口不会太小
+        baseViewSize = Math.max(baseViewSize, DEFAULT_VIEW_SIZE)
+      }
+      this.baseViewSize = baseViewSize
+
+      this.viewSize = baseViewSize
+      this.camera.left = -this.viewSize * aspect / 2
+      this.camera.right = this.viewSize * aspect / 2
+      this.camera.top = this.viewSize / 2
+      this.camera.bottom = -this.viewSize / 2
+      this.camera.updateProjectionMatrix()
+
+      // 初始时将小车定位到中心
+      this.locateCarToCenter()
+
+      if (this.controls) {
+        this.controls.minZoom = MIN_ZOOM_RATIO
+        this.controls.maxZoom = MAX_ZOOM_RATIO
+        this.controls.minDistance = 50
+        this.controls.maxDistance = 200
+        this.controls.zoomToCursor = false
+      }
+
+      this.calculateCarSize()
+    },
+    
+    /**
+     * 限制相机位置，确保点云始终在视口内
+     */
+    limitCameraPosition() {
+      if (this.allPoints.length === 0) return
+
+      const aspect = this.canvasSize.width / this.canvasSize.height
+      const halfViewWidth = this.viewSize * aspect / 2
+      const halfViewHeight = this.viewSize / 2
+
+      // 计算带留白的点云边界
+      const boundMinX = this.pointBounds.minX - BOUND_PADDING
+      const boundMaxX = this.pointBounds.maxX + BOUND_PADDING
+      const boundMinY = this.pointBounds.minY - BOUND_PADDING
+      const boundMaxY = this.pointBounds.maxY + BOUND_PADDING
+
+      // 计算相机可移动的范围
+      const maxCameraX = boundMaxX - halfViewWidth
+      const minCameraX = boundMinX + halfViewWidth
+      const maxCameraY = boundMaxY - halfViewHeight
+      const minCameraY = boundMinY + halfViewHeight
+
+      // 限制相机位置在有效范围内
+      this.camera.position.x = Math.max(minCameraX, Math.min(this.camera.position.x, maxCameraX))
+      this.camera.position.y = Math.max(minCameraY, Math.min(this.camera.position.y, maxCameraY))
+      
+      // 保持控制器目标与相机位置一致
+      this.controls.target.set(this.camera.position.x, this.camera.position.y, 0)
+    },
+    
+    /**
+     * 处理窗口大小变化
+     */
+    handleWindowResize() {
+      // 重新设置正方形画布尺寸
+      const container = this.$refs.canvasContainer
+      const containerWidth = container.clientWidth
+      this.canvasSize.width = containerWidth
+      this.canvasSize.height = containerWidth
+
+      // 更新渲染器尺寸
+      this.renderer.setSize(this.canvasSize.width, this.canvasSize.height)
+
+      // 重新计算相机视口
+      const aspect = this.canvasSize.width / this.canvasSize.height
+      this.camera.left = -this.viewSize * aspect / 2
+      this.camera.right = this.viewSize * aspect / 2
+      this.camera.top = this.viewSize / 2
+      this.camera.bottom = -this.viewSize / 2
+      this.camera.updateProjectionMatrix()
+
+      // 重新计算小车尺寸
+      this.calculateCarSize()
+      
+      // 重新限制相机位置
+      this.limitCameraPosition()
+    },
+    
+    startAnimationLoop() {
+      const animate = () => {
+        this.animationId = requestAnimationFrame(animate)
+        if (this.controls) {
+          this.controls.update()
+        }
+        this.renderer.render(this.scene, this.camera)
+      }
+      animate()
+    },
+    
+    cleanup() {
+      this.isDestroyed = true
+      
+      this.closeWebSocket()
+      
+      if (this.animationId) {
+        cancelAnimationFrame(this.animationId)
+        this.animationId = null
+      }
+      
+      if (this.controls) {
+        this.controls.dispose()
+        this.controls = null
+      }
+      
+      if (this.scene) {
+        if (this.pointCloudMesh) {
+          this.scene.remove(this.pointCloudMesh)
+        }
+        if (this.carMesh) {
+          this.scene.remove(this.carMesh)
+        }
+        this.scene.clear()
+        this.scene = null
+      }
+      
+      if (this.renderer) {
+        const container = this.$refs.canvasContainer
+        if (container && this.renderer.domElement) {
+          container.removeChild(this.renderer.domElement)
+        }
+        this.renderer.dispose()
+        this.renderer.forceContextLoss()
+        this.renderer = null
+      }
+      
+      if (this.pointCloudGeometry) {
+        this.pointCloudGeometry.dispose()
+        this.pointCloudGeometry = null
+      }
+      
+      if (this.pointCloudMaterial) {
+        this.pointCloudMaterial.map = null
+        this.pointCloudMaterial.dispose()
+        this.pointCloudMaterial = null
+      }
+      
+      if (this.carTexture) {
+        this.carTexture.dispose()
+        this.carTexture = null
+      }
+      
+      this.camera = null
+      this.carMesh = null
+      this.pointCloudMesh = null
+    }
+  }
+}
+</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>

src/pages/shells/index.vue

@@ -78,8 +78,8 @@ export default {
       //   state: 'Unknown State', // 车辆状态
       //   stateId: 7, // 车辆状态ID
       //   theta: 0.9073792099952698, // 车辆航向角
-      //   x: 0.004027, // 车辆x坐标
+      //   x: 10.004027, // 车辆x坐标
-      //   y: -0.001812, // 车辆y坐标
+      //   y: -10.001812, // 车辆y坐标
       //   task_seq: '点位1,点位2,work point 3,顶地方的方法顶顶顶点位3',
       //   task_point: '点位2',
       //   anomalyLevel: 1,

src/pages/shells/login-modal.vue

@@ -58,11 +58,11 @@ export default {
       if (this.dataForm.password === config.password) {
         this.setUserRole(1)
         this.$message({
-          message: '登录成功',
+          message: this.$t('Loginsuccessful'),
           type: 'success'
         })
       } else {
-        this.$message.error('登录失败')
+        this.$message.error(this.$t('Loginfailed'))
       }
       this.dataForm = {password: ''}
     },