完毕

src/api/table.js

@@ -83,3 +83,11 @@ export function listRealTime(vin) {
     data:vin
   })
 }
+
+export function removeRealTime(vinId) {
+  return request({
+    url: '/history/car/removeRealTime?vin='+vinId,
+    method: 'post',
+    data:vinId
+  })
+}

src/views/vehicle/car.vue

@@ -193,7 +193,18 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import {delCar, getCarList, insertCar, listCarType, listFence, listRealTime, realTime, updateCar} from "@/api/table";
+import {
+  delCar,
+  getCarList,
+  insertCar,
+  listCarType,
+  listFence,
+  listRealTime,
+  realTime,
+  removeRealTime,
+  updateCar
+} from "@/api/table";
+
 export default {
   name: 'AMapAnimation',
   props: {
@@ -247,7 +258,6 @@ export default {
       lineArr: [],
       vin:null,
       carMsg:[],
-      vehicle:null
     };
   },
   mounted() {
@@ -257,15 +267,8 @@ export default {
     this.getList()
     this.listCarType()
     this.listFence()
-    this.vehicle = setInterval(this.listRealTime,1000)
   },
   methods: {
-    // 在这里执行后台拉取数据的操作
-    listRealTime(){
-      listRealTime(this.vin).then(res=>{
-          this.carMsg.push(res.data)
-      })
-    },
     /*重置表单*/
     resetForm() {
       this.form = { // 这里将form对象重置为空对象或者你定义的初始值
@@ -279,8 +282,11 @@ export default {
       this.$refs.myForm.resetFields(); // 重置表单验证状态
     },
     isShowAll(){
-      removeRealTime().then(res=>{
-
+      removeRealTime(this.vinId).then(res=>{
+        if(res.code !== 200){
+          this.$message.error("删除实时轨迹事件！")
+          return
+        }
       })
       this.isShow = true
       this.isList = false
@@ -312,12 +318,30 @@ export default {
     realTimeTrajectory(carVin){
       this.vinId = carVin
       this.vin = carVin
+
       realTime(this.vin).then(res=>{
         if(res.code !== 200){
-          this.$message.error("获取实时轨迹失败！")
+          this.$message.error("注册实际轨迹事件失败！")
           return
         }
       })
+      const updateRealTimeData = () => {
+        listRealTime(this.vin).then(res => {
+          const longitude = parseFloat(res.data.longitude.replace(/"/g, ""));
+          const latitude = parseFloat(res.data.latitude.replace(/"/g, ""));
+          this.lineArr = [longitude, latitude];
+          this.carMsg.push(res.data);
+        });
+      };
+
+      // 延时三秒后开始执行获取实时数据循环
+      setTimeout(() => {
+        // 首次执行一次获取实时数据
+        updateRealTimeData();
+        // 每隔1秒钟执行一次获取实时数据
+        setInterval(updateRealTimeData, 1000);
+      }, 3000);
+
       this.isShow = false
       this.isList = true
       this.initMap()
@@ -434,17 +458,15 @@ export default {
       })
     },
     startAnimation () {
-      setTimeout(()=>{
-        AMap.plugin('AMap.MoveAnimation', () => {
-          console.log('开始回放')
-          this.marker.moveAlong(this.lineArr, {
-            // 每一段的时长
-            duration: this.duration,//可根据实际采集时间间隔设置
-            // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
-            autoRotation: true,
-          });
-        })
-      },2000)
+      AMap.plugin('AMap.MoveAnimation', () => {
+        console.log('开始回放')
+        this.marker.moveAlong(this.lineArr, {
+          // 每一段的时长
+          duration: this.duration,//可根据实际采集时间间隔设置
+          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+          autoRotation: true,
+        });
+      })
     },
   }
 }

src/views/vehicle/record.vue

@@ -67,7 +67,7 @@ export default {
            parseFloat(obj.longitude.replace(/"/g, "")),
            parseFloat(obj.latitude.replace(/"/g, ""))
          ]);
-         this.lineArr = [coordinates]
+         this.lineArr = coordinates
          console.log(this.lineArr)
        })
      },
@@ -134,23 +134,23 @@ export default {
        })
      },
      startAnimation () {
-       // setTimeout(()=>{
-       //   AMap.plugin('AMap.MoveAnimation', () => {
-       //     console.log('开始回放')
-       //     this.marker.moveAlong(this.lineArr, {
-       //       // 每一段的时长
-       //       duration: this.duration,//可根据实际采集时间间隔设置
-       //       // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
-       //       autoRotation: true,
-       //     });
-       //   })
-       // },2000)
-       this.marker.moveAlong(this.lineArr, {
-         // 每一段的时长
-         duration: 200,//可根据实际采集时间间隔设置
-         // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
-         autoRotation: true,
-       });
+       setTimeout(()=>{
+         AMap.plugin('AMap.MoveAnimation', () => {
+           console.log('开始回放')
+           this.marker.moveAlong(this.lineArr, {
+             // 每一段的时长
+             duration: this.duration,//可根据实际采集时间间隔设置
+             // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+             autoRotation: true,
+           });
+         })
+       },2000)
+       // this.marker.moveAlong(this.lineArr, {
+       //   // 每一段的时长
+       //   duration: 200,//可根据实际采集时间间隔设置
+       //   // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
+       //   autoRotation: true,
+       // });
 
      },
    },