4.12更新

src/api/business/records.js

@@ -13,7 +13,7 @@ export function listRecords(query) {
 export function delRecords(recordsId) {
   return request({
     url: '/business/records/delete/' + recordsId,
-    method: 'post'
+    method: 'delete'
   })
 }
 

src/views/business/records/history.vue

@@ -5,28 +5,44 @@
       <div id="container"></div>
     </div>
 
+    {{ this.vehicle }}
+
   </div>
 </template>
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
+import {getPosition, vehicleData} from "@/api/business/records";
 
 export default {
   name: "map-view",
   data() {
     return {
-      carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
+      carPosition: ["116.6871620", "39.5228750"], // 初始化小汽车位置
       carMarker: null, // 存储小汽车Marker
-      animationInterval:null//存储动画定时器
+      animationInterval: null,//存储动画定时器
+      lineArr: [],
+      recordsId: 0,
+      vehicle: {}
     };
   },
+  created() {
+    this.recordsId = this.$route.query.recordsId;
+    this.getFindVD()
+  },
   mounted() {
     this.initAMap();
+    // 初始化 echarts
+    this.initBarChart();
   },
   beforeDestroy() {
     clearInterval(this.animationInterval);//清除定时器
     this.map?.destroy();
   },
   methods: {
+    getFindVD() {
+      vehicleData(this.recordsId)
+    },
+
     initAMap() {
       AMapLoader.load({
         key: "ce38a6b072b603934f6270bd9e97ed49", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -40,12 +56,14 @@ export default {
             zoom: 11, // 初始化地图级别
             center: [116.397428, 39.90923], // 初始化地图中心点位置
           });
+
           // 车辆初始化
           this.carMarker = new AMap.Marker({
             position: this.carPosition,
             icon: 'https://webapi.amap.com/images/car.png',
             map: this.map, // 将Marker添加到地图上
           });
+
           // 在地图初始化完成后启动小车动画
           this.startCarAnimation();
         })
@@ -53,13 +71,98 @@ export default {
           console.log(e);
         });
     },
+
     startCarAnimation() {
       this.animationInterval = setInterval(() => {
-
+        this.getRealTimeDataAndUpdatePosition();
       }, 1000);
     },
+
+    getRealTimeDataAndUpdatePosition() {
+      getPosition(this.recordsId)
+        .then(response => {
+          this.vehicle = response.data
+          //更新小汽车位置
+          this.carPosition = [this.vehicle.longitude, this.vehicle.latitude];
+          //更新小汽车Marker的位置
+          this.carMarker.setPosition(this.carPosition);
+          // this.center.setPosition(this.carPosition);
+        })
+    },
+
+    // initBarChart() {
+    //   // 通过 $ref 进行挂载
+    //   let myChart = this.$echarts.init(this.$refs.barChart);
+    //   let option = {
+    //     series: [
+    //       {
+    //         type: 'gauge',
+    //         axisLine: {
+    //           lineStyle: {
+    //             width: 30,
+    //             color: [
+    //               [0.3, '#67e0e3'],
+    //               [0.7, '#37a2da'],
+    //               [1, '#fd666d']
+    //             ]
+    //           }
+    //         },
+    //         pointer: {
+    //           itemStyle: {
+    //             color: 'auto'
+    //           }
+    //         },
+    //         axisTick: {
+    //           distance: -30,
+    //           length: 8,
+    //           lineStyle: {
+    //             color: '#fff',
+    //             width: 2
+    //           }
+    //         },
+    //         splitLine: {
+    //           distance: -30,
+    //           length: 30,
+    //           lineStyle: {
+    //             color: '#fff',
+    //             width: 4
+    //           }
+    //         },
+    //         axisLabel: {
+    //           color: 'inherit',
+    //           distance: 40,
+    //           fontSize: 20
+    //         },
+    //         detail: {
+    //           valueAnimation: true,
+    //           formatter: '{value} km/h',
+    //           color: 'inherit'
+    //         },
+    //         data: [
+    //           {
+    //             value: 70
+    //           }
+    //         ]
+    //       }
+    //     ]
+    //   };
+    //   setInterval(function () {
+    //     myChart.setOption({
+    //       series: [
+    //         {
+    //           data: [
+    //             {
+    //               value: +(Math.random() * 100).toFixed(2)
+    //             }
+    //           ]
+    //         }
+    //       ]
+    //     });
+    //   }, 2000);
+    //   myChart.setOption(option);
+    // },
   },
-};
+}
 </script>
 <style  scoped>
 #container{
@@ -72,4 +175,16 @@ export default {
   border: none !important; /* 移除Marker的边框 */
   box-shadow: none !important; /* 移除Marker的阴影 */
 }
+.home {
+  width: 500px;
+  height: 400px;
+  margin: auto;
+  border: 3px solid lightcoral;
+
+  //  宽高是必须给的，可以给百分比、具体的像素等....
+  .barChart {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>