From 7c86916a53b8c457530f8466672d905b602d4483 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Fri, 27 Dec 2024 10:29:51 +0800
Subject: [PATCH] 11

---
 src/components/Map/location/LocationMapss.vue | 212 +++++++++++++++---
 src/views/system/device/index.vue             |   6 +-
 2 files changed, 177 insertions(+), 41 deletions(-)

diff --git a/src/components/Map/location/LocationMapss.vue b/src/components/Map/location/LocationMapss.vue
index c56d541..b9c1a50 100644
--- a/src/components/Map/location/LocationMapss.vue
+++ b/src/components/Map/location/LocationMapss.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="place-search-map" :style="{ width: width, height: height }" v-loading="loading">
+    <div class="place-search-map" :style="{ width: width, height: height }" >
         <div id="container"></div>
 
         <!-- 轨迹回放控制面板 -->
@@ -72,6 +72,10 @@
                     <span class="label">锁状态:</span>
                     <span class="value">{{ currentLockStatus }}</span>
                 </div>
+                <div class="info-item">
+                    <span class="label">电门:</span>
+                    <span class="value">{{ currentEleLock }}</span>
+                </div>
             </div>
         </div>
     </div>
@@ -162,7 +166,8 @@ export default {
             parkingPolygons: [],
             currentStatus: '',
             currentBattery: '',
-            currentLockStatus: ''
+            currentLockStatus: '',
+            currentEleLock: ''
         }
     },
 
@@ -175,7 +180,7 @@ export default {
             // 获取区域信息
             await this.getAreas()
             // 获取轨迹数据（移到最后执行）
-           
+
         } catch (error) {
             console.error('初始化失败:', error)
             this.$message.error('初始化失败')
@@ -217,6 +222,35 @@ export default {
                 });
             });
         },
+        clearTrackData() {
+            if (this.polyline) {
+                this.map.remove(this.polyline);
+            }
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline);
+            }
+            if (this.marker) {
+                this.map.remove(this.marker);
+            }
+            // 清除起终点标记
+            if (this.startMarker) {
+                this.map.remove(this.startMarker);
+            }
+            if (this.endMarker) {
+                this.map.remove(this.endMarker);
+            }
+
+            this.trackPoints = [];
+            this.currentProgress = 0;
+            this.currentPoint = null;
+            this.currentPointTime = '';
+            this.currentSpeed = '0.00';
+            this.location = '';
+            this.currentStatus = '';
+            this.currentBattery = '';
+            this.currentLockStatus = '';
+            this.currentEleLock = ''
+        },
         formatStatus(status) {
             const statusMap = {
                 '0': '仓库中',
@@ -256,7 +290,7 @@ export default {
         initMarker() {
             this.removeAllMarker()
             if (this.currentLng != null && this.currentLat != null) {
-                 this.updateTrackData()
+                this.updateTrackData()
                 this.addArea(JSON.parse(this.area.boundaryStr) || []);
                 //停车区
                 this.parkingList.forEach(parking => {
@@ -576,6 +610,11 @@ export default {
 
         async updateTrackData() {
             try {
+                // 停止当前播放
+                this.stopPlayback()
+                // 清除旧数据
+                this.clearTrackData()
+
                 const params = {
                     sn: this.deviceSn,
                     startTime: this.startTime,
@@ -586,23 +625,26 @@ export default {
                 if (res.code === 200) {
                     if (!res.data?.length) {
                         this.$message.warning('该时间段内无轨迹数据')
-                        this.clearTrackData()
                         return
                     }
 
-                    // 确保数据处理和绘制都执行
+                    // 处理新的轨迹数据
                     this.trackPoints = res.data.map(point => ({
                         latitude: parseFloat(point.latitude),
                         longitude: parseFloat(point.longitude),
                         time: point.at,
                         status: point.status,
-                        onlineStatus: point.onlineStatus
+                        onlineStatus: point.onlineStatus,
+                        bat: point.bat,
+                        lockStatus: point.lockStatus,
+                        q: point.q
                     }))
 
-                    // 立即绘制轨迹线和起终点标记
+                    // 绘制新的轨迹线
                     this.drawTrackLine()
-                    // 重置播放位置
-                    this.resetPlayback()
+                    // 初始化播放位置
+                    this.currentProgress = 0
+                    this.updateMapPoint(0)
                 }
             } catch (error) {
                 console.error("获取轨迹数据失败:", error)
@@ -610,6 +652,48 @@ export default {
             }
         },
 
+        clearTrackData() {
+            // 停止播放定时器
+            if (this.playbackTimer) {
+                clearInterval(this.playbackTimer)
+                this.playbackTimer = null
+            }
+
+            // 清除地图上的元素
+            if (this.polyline) {
+                this.map.remove(this.polyline)
+                this.polyline = null
+            }
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline)
+                this.passedPolyline = null
+            }
+            if (this.marker) {
+                this.map.remove(this.marker)
+                this.marker = null
+            }
+            if (this.startMarker) {
+                this.map.remove(this.startMarker)
+                this.startMarker = null
+            }
+            if (this.endMarker) {
+                this.map.remove(this.endMarker)
+                this.endMarker = null
+            }
+
+            // 重置数据
+            this.trackPoints = []
+            this.currentProgress = 0
+            this.currentPoint = null
+            this.currentPointTime = ''
+            this.currentSpeed = '0.00'
+            this.location = ''
+            this.currentStatus = ''
+            this.currentBattery = ''
+            this.currentLockStatus = ''
+            this.currentEleLock = ''
+            this.isPlaying = false
+        },
         processTrackData(data) {
             this.trackPoints = data.map(point => ({
                 latitude: parseFloat(point.latitude),
@@ -631,6 +715,12 @@ export default {
             if (this.polyline) {
                 this.map.remove(this.polyline)
             }
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline)
+            }
+            if (this.marker) {
+                this.map.remove(this.marker)
+            }
 
             // 添加轨迹线
             this.polyline = new this.AMap.Polyline({
@@ -701,6 +791,7 @@ export default {
             this.currentStatus = ''
             this.currentBattery = ''
             this.currentLockStatus = ''
+            this.currentEleLock = ''
         },
 
         updateMapPoint(index) {
@@ -710,43 +801,91 @@ export default {
             this.currentPoint = point
             this.currentPointTime = point.time
             this.location = `${point.longitude}, ${point.latitude}`
-
-            // 添加新字段的更新
+            console.log(point,'pointpointpoint');
+            // 更新状态信息
             this.currentStatus = this.formatStatus(point.status)
-            this.currentBattery = point.bta == null ? '未知' : (point.bta / 10).toFixed(1) + 'V'
+            this.currentBattery = point.bat == null ? '未知' : (point.bat / 10).toFixed(1) + 'V'
             this.currentLockStatus = point.lockStatus == '0' ? '关锁' : '开锁'
+            this.currentEleLock = point.q == null ? '未知' : (point.q == '0' ? '关锁' : '开锁')
 
+            // 计算速度
             if (index > 0) {
                 const prevPoint = this.trackPoints[index - 1]
-                const distance = this.calculateDistance(
+                // 使用 Haversine 公式计算实际距离（单位：千米）
+                const distance = this.calculateHaversineDistance(
                     prevPoint.latitude,
                     prevPoint.longitude,
                     point.latitude,
                     point.longitude
                 )
-                const timeGap = (new Date(point.time) - new Date(prevPoint.time)) / 1000
-                this.currentSpeed = timeGap > 0 ? ((distance / timeGap) * 3.6).toFixed(1) : '0.00'
+                // 计算时间差（单位：小时）
+                const timeGap = (new Date(point.time) - new Date(prevPoint.time)) / (1000 * 3600)
+                // 计算速度（公里/小时）
+                this.currentSpeed = timeGap > 0 ? (distance / timeGap).toFixed(2) : '0.00'
+            } else {
+                this.currentSpeed = '0.00'
             }
 
+            // 更新已经走过的轨迹线
             this.updatePassedPolyline(index)
-            this.updateMarkerPosition(point)
+
+            // 更新标记位置
+            if (!this.marker) {
+                this.marker = new this.AMap.Marker({
+                    position: [point.longitude, point.latitude],
+                    icon: this.getMarkerIcon(point.status, point.onlineStatus),
+                    offset: new this.AMap.Pixel(-12.5, -19.5)
+                })
+                this.map.add(this.marker)
+            } else {
+                this.marker.setPosition([point.longitude, point.latitude])
+                this.marker.setIcon(this.getMarkerIcon(point.status, point.onlineStatus))
+            }
         },
 
+        // 添加 Haversine 距离计算方法
+        calculateHaversineDistance(lat1, lon1, lat2, lon2) {
+            // 地球半径（单位：千米）
+            const R = 6371
+
+            // 将经纬度转换为弧度
+            const dLat = this.toRad(lat2 - lat1)
+            const dLon = this.toRad(lon2 - lon1)
+            const radLat1 = this.toRad(lat1)
+            const radLat2 = this.toRad(lat2)
+
+            // Haversine 公式
+            const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+                Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(radLat1) * Math.cos(radLat2)
+            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+
+            // 返回距离（单位：千米）
+            return R * c
+        },
+
+        // 角度转弧度
+        toRad(degrees) {
+            return degrees * Math.PI / 180
+        },
+
+
         updatePassedPolyline(index) {
             const passedPath = this.trackPoints
                 .slice(0, index + 1)
                 .map(p => [p.longitude, p.latitude])
 
-            if (!this.passedPolyline) {
-                this.passedPolyline = new this.AMap.Polyline({
-                    path: passedPath,
-                    strokeColor: "#AF5",
-                    strokeWeight: 6
-                })
-                this.map.add(this.passedPolyline)
-            } else {
-                this.passedPolyline.setPath(passedPath)
+            // 移除旧的已经走过的轨迹线
+            if (this.passedPolyline) {
+                this.map.remove(this.passedPolyline)
             }
+
+            // 创建新的已经走过的轨迹线
+            this.passedPolyline = new this.AMap.Polyline({
+                path: passedPath,
+                strokeColor: "#AF5",
+                strokeWeight: 6
+            })
+            this.map.add(this.passedPolyline)
         },
 
         updateMarkerPosition(point) {
@@ -770,17 +909,14 @@ export default {
         },
 
         startPlayback() {
-            if (this.playbackTimer) return
+            if (this.playbackTimer) {
+                clearInterval(this.playbackTimer)
+            }
 
             this.playbackTimer = setInterval(() => {
                 if (this.currentProgress >= this.trackPoints.length - 1) {
                     this.pausePlayback()
                     this.isPlaying = false
-                    // 添加延时，让最后一个点的位置显示片刻后再回到起点
-                    setTimeout(() => {
-                        this.currentProgress = 0
-                        this.updateMapPoint(0)
-                    }, 1000)
                     return
                 }
                 this.currentProgress++
@@ -794,12 +930,12 @@ export default {
                 this.playbackTimer = null
             }
         },
-
         stopPlayback() {
-            this.pausePlayback()
+            if (this.playbackTimer) {
+                clearInterval(this.playbackTimer)
+                this.playbackTimer = null
+            }
             this.isPlaying = false
-            this.currentProgress = 0
-            this.updateMapPoint(0) // 更新到起始点，而不是清除轨迹
         },
 
         changeSpeed(direction) {
@@ -852,13 +988,15 @@ export default {
         },
 
         onSliderChange(value) {
+            this.stopPlayback() // 停止当前播放
             this.currentProgress = value
             this.updateMapPoint(value)
         },
 
         onSliderChanging(value) {
+            // this.stopPlayback() // 停止当前播放
             this.updateMapPoint(value)
-        }
+        },
     }
 }
 </script>
diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue
index 60ee9fe..01cc990 100644
--- a/src/views/system/device/index.vue
+++ b/src/views/system/device/index.vue
@@ -1349,7 +1349,7 @@ handleAreaChange(val) {
         // this.fetchData(response.data.deptId)
         // this.open = true;
         //     this.title = "修改设备1";
-        if (response.data.deptId) {
+        
           selectAreaListByDeptId(response.data.deptId).then((res) => {
             // 方案1: 使用Vue.set确保响应式更新
             setTimeout(() => {
@@ -1375,9 +1375,7 @@ handleAreaChange(val) {
           }).finally(() => {
             this.isUpdating = false;
           });
-        } else {
-          this.isUpdating = false;
-        }
+        
       });
     },
     handleListing(row) {