From 3eab5881788b7f70152f362a9921b5f723fcaf56 Mon Sep 17 00:00:00 2001
From: Xiao Fan <461179989@qq.com>
Date: Sat, 6 Apr 2024 21:55:27 +0800
Subject: [PATCH] =?UTF-8?q?=E8=82=96=E5=87=A14.6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 +
 src/api/system/car.js            | 13 +++++++
 src/router/index.js              | 15 ++++++++
 src/views/system/car/index.vue   | 10 +++++
 src/views/system/track/index.vue | 66 ++++++++++++++++++++++++--------
 5 files changed, 91 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 2ed93d6..090a24e 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,9 @@
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
+    "sockjs-client": "^1.6.1",
     "sortablejs": "1.10.2",
+    "stompjs": "^2.3.3",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
diff --git a/src/api/system/car.js b/src/api/system/car.js
index fac54b3..d3d873d 100644
--- a/src/api/system/car.js
+++ b/src/api/system/car.js
@@ -73,3 +73,16 @@ export function findById(carId) {
 }
 
 
+export function getRealTimeData() {
+  return request({
+    url: '/analyze/realTimeData',
+    method: 'get'
+  })
+}
+
+export function getRealTimeDataTwo(vin) {
+  return request({
+    url: '/analyze/realTimeDataTwo/' +vin,
+    method: 'post'
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index bb897e5..d0134c6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -87,7 +87,22 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  {
+    path: '/track',
+    component: Layout,
+    hidden: true,
+    redirect: 'track',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/system/track/index'),
+        name: 'track',
+        meta: { title: '实时轨迹' }
+      }
+    ]
   }
+
 ]
 
 // 动态路由，基于用户权限动态去加载
diff --git a/src/views/system/car/index.vue b/src/views/system/car/index.vue
index 6613b12..b167944 100644
--- a/src/views/system/car/index.vue
+++ b/src/views/system/car/index.vue
@@ -160,6 +160,15 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:car:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="$router.push({
+          path:'track',
+          query:{
+            carVin:scope.row.carVin}})"
+          >实时轨迹查询</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -218,6 +227,7 @@
 
 <script>
 import {list, add, update, findById, del, exportA, selectFence,open,close} from "@/api/system/car";
+import {getRealTimeDataTwo} from "@/api/system/car";
 
 export default {
   name: "Car",
diff --git a/src/views/system/track/index.vue b/src/views/system/track/index.vue
index 086d396..60ab543 100644
--- a/src/views/system/track/index.vue
+++ b/src/views/system/track/index.vue
@@ -3,22 +3,31 @@
 </template>
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
+import {getRealTimeData} from "@/api/system/car";
+import {getRealTimeDataTwo} from "@/api/system/car";
+
 
 export default {
   name: "map-view",
   data() {
     return {
-      carPosition: [116.397428, 39.90923], // 初始化小汽车位置
+      carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
       carMarker: null, // 存储小汽车Marker
+      animationInterval:null//存储动画定时器
     };
+
+
   },
+
   mounted() {
     this.initAMap();
   },
-  unmounted() {
+  beforeDestroy() {
+    clearInterval(this.animationInterval);//清除定时器
     this.map?.destroy();
   },
   methods: {
+
     initAMap() {
       AMapLoader.load({
         key: "e7398786b61ee782417e1749de1f2b39", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -30,7 +39,7 @@ export default {
             // 设置地图容器id
             viewMode: "3D", // 是否为3D地图模式
             zoom: 11, // 初始化地图级别
-            center: [116.397428, 39.90923], // 初始化地图中心点位置
+            center: ["116.397428", "39.90923"], // 初始化地图中心点位置
           });
 
           // 车辆初始化
@@ -48,20 +57,42 @@ export default {
         });
     },
     startCarAnimation() {
-      setInterval(() => {
-        // 更新小汽车位置
-        this.carPosition = this.getRandomPosition();
-        // 更新小汽车Marker的位置
-        this.carMarker.setPosition(this.carPosition);
+     this.animationInterval = setInterval(() => {
+     let vin=this.$route.query.carVin;
+        this.getRealTimeDataAndUpdatePosition(vin);
       }, 1000);
     },
-    getRandomPosition() {
-      // 模拟随机生成新的经纬度位置
-      const delta = 0.01; // 控制随机位置变化的大小
-      const lat = this.carPosition[0] + (Math.random() - 0.5) * delta;
-      const lng = this.carPosition[1] + (Math.random() - 0.5) * delta;
-      return [lat, lng];
-    },
+    getRealTimeDataAndUpdatePosition(vin){
+      // getRealTimeData().then(response=>{
+      //   // 假设实时数据的格式为 { longitude: ..., latitude: ... }
+      //   const realTimeData = response.data; // 假设实时数据在 response.data 中
+      //   this.$message.success('Real-time data:',response.data)
+      //   // 更新小汽车位置
+      //   this.carPosition = [realTimeData.longitude, realTimeData.latitude];
+      //   // 更新小汽车Marker的位置
+      //   this.carMarker.setPosition(this.carPosition);
+      // })
+      //   .catch((error)=>{
+      //     console.error("Error fetching real-time data:",error);
+      //   })
+      getRealTimeDataTwo(vin)
+        .then(response=>{
+          // debugger
+          // 假设实时数据的格式为 { longitude: ..., latitude: ... }
+          this.$message.success('Real-time data:',response);
+          let carData=response
+          //更新小汽车位置
+          this.carPosition=[carData.longitude,carData.latitude];
+          // debugger
+          //更新小汽车Marker的位置
+          this.carMarker.setPosition(this.carPosition);
+        })
+        // .catch(error=>{
+        //   console.error("Error fetching real-time data:",error)
+        // });
+    }
+
+
   },
 };
 </script>
@@ -70,4 +101,9 @@ export default {
   width: 25%;
   height: 250px;
 }
+.amap-marker-icon {
+   border: none !important; /* 移除Marker的边框 */
+   box-shadow: none !important; /* 移除Marker的阴影 */
+ }
+
 </style>