更新实时轨迹

src/api/table.js

@@ -67,3 +67,19 @@ export function historyMap(recordCar) {
     data:recordCar
   })
 }
+
+export function realTime(vin) {
+  return request({
+    url: '/history/car/realTime?vin='+vin,
+    method: 'post',
+    data:vin
+  })
+}
+
+export function listRealTime(vin) {
+  return request({
+    url: '/history/car/listRealTime?vin='+vin,
+    method: 'post',
+    data:vin
+  })
+}

src/views/vehicle/car.vue

@@ -101,7 +101,7 @@
           <template slot-scope="scope">
             <el-button type="primary" @click="updateCarList(scope.row)">修改</el-button>
             <el-button type="primary" @click="delCar(scope.row.carVin)">删除</el-button>
-            <el-button type="primary" @click="realTimeTrajectory">实时轨迹</el-button>
+            <el-button type="primary" @click="realTimeTrajectory(scope.row.carVin)">实时轨迹</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -192,7 +192,7 @@
 
 <script>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import {delCar, getCarList, insertCar, listCarType, listFence, updateCar} from "@/api/table";
+import {delCar, getCarList, insertCar, listCarType, listFence, listRealTime, realTime, updateCar} from "@/api/table";
 export default {
   name: 'AMapAnimation',
   props: {
@@ -242,26 +242,8 @@ export default {
       AMap: null,
       map: null,
       marker: null,
-      lineArr: [
+      lineArr: [],
-        [116.478935,39.997761],
+      vin:null,
-        [116.478939,39.997825],
-        [116.478912,39.998549],
-        [116.478912,39.998549],
-        [116.478998,39.998555],
-        [116.478998,39.998555],
-        [116.479282,39.99856],
-        [116.479658,39.998528],
-        [116.480151,39.998453],
-        [116.480784,39.998302],
-        [116.480784,39.998302],
-        [116.481149,39.998184],
-        [116.481573,39.997997],
-        [116.481863,39.997846],
-        [116.482072,39.997718],
-        [116.482362,39.997718],
-        [116.483633,39.998935],
-        [116.48367,39.998968],
-        [116.484648,39.999861]],
     };
   },
   mounted() {
@@ -314,11 +296,24 @@ export default {
       })
     },
     /*地图展示*/
-    realTimeTrajectory(){
+    realTimeTrajectory(carVin){
+      this.vin = carVin
+      realTime(this.vin).then(res=>{
+        if(res.code!== 200){
+          this.$message.error("获取实时轨迹失败！")
+          return
+        }
+      })
       this.isShow = false
       this.isList = true
       this.initMap()
       this.startAnimation()
+      setInterval(() => {
+        // 在这里执行后台拉取数据的操作
+        listRealTime(this.vin).then(res=>{
+          this.lineArr.push(res.longitude.replace(/"/g, "") +","+res.latitude.replace(/"/g, ""))
+        })
+      }, 1000); // 每秒执行一次操作
     },
     /*刷新*/
     refreshTable(){
@@ -335,7 +330,6 @@ export default {
     /*车辆列表*/
     getList(){
       getCarList(this.form).then(response => {
-        console.log(response)
         this.carList = response.data.list
         this.total = response.data.total
       })

src/views/vehicle/record.vue

@@ -71,7 +71,7 @@ export default {
            "AMap.DragRoute",
            "AMap.MoveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
-// 获取到作为地图容器的DOM元素，创建地图实例
+         // 获取到作为地图容器的DOM元素，创建地图实例
          this.map = new AMap.Map("container", { //设置地图容器id
            resizeEnable: true,
            viewMode: "2D", // 使用3D视图