From 8ee741606c61e8713e4b8f9f6d9c19fa3c8e3e18 Mon Sep 17 00:00:00 2001
From: chentaisen <14615430+chentaisen@user.noreply.gitee.com>
Date: Tue, 8 Oct 2024 09:21:24 +0800
Subject: [PATCH] =?UTF-8?q?feat():=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/car/trajectory/index.vue | 66 +++++++++++++++---------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/views/car/trajectory/index.vue b/src/views/car/trajectory/index.vue
index d67a4bd0..b8847153 100644
--- a/src/views/car/trajectory/index.vue
+++ b/src/views/car/trajectory/index.vue
@@ -6,7 +6,7 @@
 
 <script>
 
-import { getDataByRedis } from "@/api/car/ListManager";
+import { getDataByRedis } from '@/api/car/ListManager'
 
 export default {
   data() {
@@ -14,10 +14,10 @@ export default {
       map: null,
       polyline: null,
       carMarker: null,
-      carVin: this.$route.query.carVin || null ,
+      carVin: this.$route.query.carVin || null,
       intervalId: null,
-      data: {}, // 数据存储变量
-    };
+      data: {} // 数据存储变量
+    }
   },
   created() {
     // 创建定时器，每隔一定时间间隔调用fetchData方法
@@ -26,26 +26,26 @@ export default {
   methods: {
     async fetchData() {
       try {
-        const res = await getDataByRedis(this.carVin);
-        this.data = res.data;
+        const res = await getDataByRedis(this.carVin)
+        this.data = res.data
 
         // 更新车辆位置
-        this.updateCarMarker();
+        this.updateCarMarker()
       } catch (error) {
-        console.error("Error fetching vehicle data:", error);
+        console.error('Error fetching vehicle data:', error)
       }
     },
     initMap() {
       this.map = new AMap.Map('map', {
         center: [116.397428, 39.90923], // 初始化地图中心点
-        zoom: 20, // 地图缩放级别
-      });
+        zoom: 20 // 地图缩放级别
+      })
       this.polyline = new AMap.Polyline({
         map: this.map,
         path: [], // 初始为空
         strokeColor: '#3366FF',
-        strokeWeight: 5,
-      });
+        strokeWeight: 5
+      })
 
       // 初始化车辆模型标记
       this.carMarker = new AMap.Marker({
@@ -53,43 +53,41 @@ export default {
         position: [116.397428, 39.90923], // 初始位置
         icon: 'https://webapi.amap.com/images/car.png',
         offset: new AMap.Pixel(-26, -13),
-        autoRotation: true,
-      });
+        autoRotation: true
+      })
     },
     updateCarMarker() {
       if (this.data.longitude && this.data.latitude) {
-        const newPoint = [this.data.longitude, this.data.latitude];
+        const newPoint = [this.data.longitude, this.data.latitude]
 
         // 更新车辆模型位置
-        this.carMarker.setPosition(newPoint);
+        this.carMarker.setPosition(newPoint)
 
         // 更新路径线条坐标
-        const path = this.polyline.getPath();
-        path.push(new AMap.LngLat(this.data.longitude, this.data.latitude));
-        this.polyline.setPath(path);
+        const path = this.polyline.getPath()
+        path.push(new AMap.LngLat(this.data.longitude, this.data.latitude))
+        this.polyline.setPath(path)
 
         // 调整地图视野
-        this.map.setCenter(newPoint);
+        this.map.setCenter(newPoint)
       }
-    },
+    }
   },
   mounted() {
-    this.$store.dispatch('app/toggleSideBarHide',true);
-    document.querySelector('.navbar').style.display = 'none';
-    document.querySelector('.tags-view-container').style.display = 'none';
+    this.$store.dispatch('app/toggleSideBarHide', true)
+    document.querySelector('.navbar').style.display = 'none'
+    document.querySelector('.tags-view-container').style.display = 'none'
 
-
-    const script = document.createElement('script');
-    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=7df1851ffb059e1e75c31b9bcd892b6b';
+    const script = document.createElement('script')
+    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=7df1851ffb059e1e75c31b9bcd892b6b'
     script.onload = () => {
-      this.initMap();
-    };
-    document.head.appendChild(script);
-    this.initMap();
+      this.initMap()
+    }
+    document.head.appendChild(script)
+    this.initMap()
 
+  }
 
-  },
-
-};
+}
 
 </script>