地图定时刷新

resources/js/views/map/index.vue

@@ -184,6 +184,7 @@ export default {
   data(){
     const _this = this;
     return {
+      intervalId: null,
       map: {},
       amapManager: new AMapManager(),
       zoom: 6,
@@ -247,10 +248,17 @@ export default {
       .then(res => {
         this.markersDevice = res.data;
       });
+    this.dataRefresh();
+  },
+  destroyed(){
+    // 在页面销毁后，清除计时器
+    this.clearIntv();
   },
   methods: {
     checkPermission,
     allDevices() {
+      this.clearIntv();
+      this.dataRefresh();
       devices()
         .then(res => {
           this.leftDeviceName = '全部设备';
@@ -290,10 +298,13 @@ export default {
     },
     // 获取单个用户下的设备
     getUserDeviceList(uid) {
+      // 停止定时器
+      this.clearIntv();
       devices({ uid: uid })
         .then(res => {
           this.markersDevice = res.data;
         });
+      this.dataRefresh(uid);
     },
     // 获取设备详细信息
     getUserDeviceInfo(id) {
@@ -367,6 +378,41 @@ export default {
     openDeviceBox(row, column, event) {
       this.getUserDeviceInfo(row.id);
     },
+    // 定时刷新数据
+    dataRefresh(uid = null) {
+      // 计时器正在进行中，退出函数
+      if (this.intervalId != null) {
+        return;
+      }
+      // 计时器为空，操作
+      this.intervalId = setInterval(() => {
+        console.log('刷新' + uid + '--' + new Date());
+        if (uid > 0) {
+          users({ uid: uid })
+            .then(res => {
+              this.markers = res.data;
+            });
+          devices({ uid: uid })
+            .then(res => {
+              this.markersDevice = res.data;
+            });
+        } else {
+          users()
+            .then(res => {
+              this.markers = res.data;
+            });
+          devices({})
+            .then(res => {
+              this.markersDevice = res.data;
+            });
+        }
+      }, 3000);
+    },
+    // 停止定时器
+    clearIntv() {
+      clearInterval(this.intervalId); // 清除计时器
+      this.intervalId = null; // 设置为null
+    },
   },
 };
 </script>