肖凡4.8提交

src/utils/request.js

@@ -55,7 +55,7 @@ service.interceptors.request.use(config => {
       const s_url = sessionObj.url;                  // 请求地址
       const s_data = sessionObj.data;                // 请求数据
       const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+      const interval = 500;                         // 间隔时间(ms)，小于此时间视为重复提交
       if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
         const message = '数据正在处理，请勿重复提交';
         console.warn(`[${s_url}]: ` + message)

src/views/system/car/index.vue

@@ -163,7 +163,7 @@
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-delete"
+            icon="el-icon-eleme"
             @click="$router.push({
           path:'track',
           query:{

src/views/system/track/index.vue

@@ -1,9 +1,16 @@
 <template>
-  <div id="container"></div>
+  <div>
+    <div id="container" style="width: 25%; height: 250px;"></div>
+    <div>
+      {{carData}}
+    </div>
+
+  </div>
+
+
 </template>
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
-import {getRealTimeData} from "@/api/system/car";
 import {getRealTimeDataTwo} from "@/api/system/car";
 
 
@@ -13,21 +20,23 @@ export default {
     return {
       carPosition: ["116.397428", "39.90923"], // 初始化小汽车位置
       carMarker: null, // 存储小汽车Marker
-      animationInterval:null//存储动画定时器
+      animationInterval:null,//存储动画定时器
+      lastUpdateTime:0,//上次更新时间
+      animationFramId:null,//存储动画帧的ID
+      carData:[],//小汽车经纬度
     };
-
-
   },
 
   mounted() {
-    this.initAMap();
+    this.initAMap()
+    // this.getRealTimeDataAndUpdatePosition(this.$route.query.carVin); // 添加此行
   },
   beforeDestroy() {
     clearInterval(this.animationInterval);//清除定时器
     this.map?.destroy();
+    cancelAnimationFrame(this.animationFramId);//取消动画帧请求
   },
   methods: {
-
     initAMap() {
       AMapLoader.load({
         key: "e7398786b61ee782417e1749de1f2b39", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -57,53 +66,44 @@ export default {
         });
     },
     startCarAnimation() {
-     this.animationInterval = setInterval(() => {
-     let vin=this.$route.query.carVin;
-        this.getRealTimeDataAndUpdatePosition(vin);
-      }, 1000);
+      // this.animationInterval = setInterval(() => {
+      //   let vin = this.$route.query.carVin;
+      //   this.getRealTimeDataAndUpdatePosition(vin);
+      // }, 1000);
+        const animate = () => {
+          const currentTime = Date.now();
+          const deltaTime = currentTime - this.lastUpdateTime;
+
+          if (deltaTime > 1000) {
+            //每秒更新一次位置
+            this.lastUpdateTime = currentTime;
+            let vin = this.$route.query.carVin;
+            this.getRealTimeDataAndUpdatePosition(vin);
+          }
+          this.animationFramId = requestAnimationFrame(animate);
+        };
+        this.animationFramId = requestAnimationFrame(animate);
+
+
     },
-    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);
-      //   })
+    getRealTimeDataAndUpdatePosition(vin) {
       getRealTimeDataTwo(vin)
-        .then(response=>{
-          // debugger
-          // 假设实时数据的格式为 { longitude: ..., latitude: ... }
-          this.$message.success('Real-time data:',response);
-          let carData=response
+        .then(response => {
+          console.log('Response from getRealTimeDataTwo:', response);
+          // this.$message.success('Real-time data:',response);
+          this.carData = response
           //更新小汽车位置
-          this.carPosition=[carData.longitude,carData.latitude];
-          // debugger
+          this.carPosition = [this.carData.longitude, this.carData.latitude];
           //更新小汽车Marker的位置
           this.carMarker.setPosition(this.carPosition);
+          //显示实时数据
+
         })
-        // .catch(error=>{
-        //   console.error("Error fetching real-time data:",error)
-        // });
-    }
+    },
 
 
   },
 };
 </script>
 <style scoped>
-#container {
-  width: 25%;
-  height: 250px;
-}
-.amap-marker-icon {
-   border: none !important; /* 移除Marker的边框 */
-   box-shadow: none !important; /* 移除Marker的阴影 */
- }
-
 </style>