定时拉取数据

src/views/modules/home/workboard.vue

@@ -3,7 +3,11 @@
     <div>
       <div>
         <el-row style="margin-bottom: 20px;">
-          <el-col :span="12"><el-button @click="handleUser">选择用户</el-button></el-col>
+          <el-col :span="12">
+            <el-button @click="handleUser">选择用户</el-button>
+            <el-button type="primary" :loading="isRefreshingList" @click="refreshNow"
+              style="margin-left: 10px;">立即刷新</el-button>
+          </el-col>
           <el-col :span="12">
             <!-- <span>当前时间：</span><span>2025-05-12</span> -->
           </el-col>
@@ -72,7 +76,12 @@ export default {
       current: 1,
       size: 50,
       total: 0,
-      loading: false // 防止重复请求
+      loading: false, // 防止重复请求（用户列表加载）
+      // 自动刷新相关
+      refreshMs: 30000, // 列表自动刷新间隔（毫秒）
+      refreshTimer: null, // 定时器句柄
+      isRefreshingList: false, // 防止 getList 并发触发
+      _visibilityHandler: null // 绑定后的可见性事件处理器，便于移除
     }
   },
   created() {
@@ -81,17 +90,56 @@ export default {
   mounted() {
     this.calcHeight()
     window.addEventListener('resize', this.calcHeight)
+    // 启动自动刷新，并在页面可见性变化时进行控制
+    this.startAutoRefresh()
+    this._visibilityHandler = this.handleVisibilityChange.bind(this)
+    document.addEventListener('visibilitychange', this._visibilityHandler)
 
     this.startScroll()
   },
   beforeDestroy() {
     window.removeEventListener('resize', this.calcHeight) // 避免内存泄漏
+    this.stopAutoRefresh()
+    if (this._visibilityHandler) {
+      document.removeEventListener('visibilitychange', this._visibilityHandler)
+      this._visibilityHandler = null
+    }
   },
   methods: {
+    // 立即刷新
+    refreshNow() {
+      this.getList()
+    },
+    // 自动刷新控制
+    startAutoRefresh() {
+      this.stopAutoRefresh()
+      this.refreshTimer = setInterval(() => {
+        // 页面不可见时不刷新
+        if (!document.hidden) {
+          this.getList()
+        }
+      }, this.refreshMs)
+    },
+    stopAutoRefresh() {
+      if (this.refreshTimer) {
+        clearInterval(this.refreshTimer)
+        this.refreshTimer = null
+      }
+    },
+    handleVisibilityChange() {
+      if (document.hidden) {
+        this.stopAutoRefresh()
+      } else {
+        // 页面重新可见时，立即刷新一次并重启自动刷新
+        this.getList()
+        this.startAutoRefresh()
+      }
+    },
     calcHeight() {
       this.$nextTick(() => {
         setTimeout(() => {
           const container = this.$refs.tableContainer
+          if (!container) return
           const top = container.getBoundingClientRect().top
           this.tableHeight = window.innerHeight - top - 50 // 50px 为预留边距
         }, 300) // 预留资源加载时间
@@ -169,6 +217,8 @@ export default {
       })
     },
     getList() {
+      if (this.isRefreshingList) return
+      this.isRefreshingList = true
       this.$http({
         url: this.$http.adornUrl(`/biz-service/workBoard/list`),
         method: 'get',
@@ -180,16 +230,23 @@ export default {
         if (data && data.code === '200') {
           this.list = data.data.records
         }
+      }).catch(() => {
+        // 静默失败，避免大屏闪烁；可按需添加消息提示
+      }).then(() => {
+        this.isRefreshingList = false
       })
     },
     getSelectedUsers() {
       this.$http({
         url: this.$http.adornUrl(`/biz-service/workBoard/selected/user/list`),
         method: 'get',
-        data: {}
+        // GET 请求无需 data，保留空对象会被忽略
       }).then(({ data }) => {
         if (data && data.code === '200') {
-          this.selectedUsers = this.oldSelectedUsers = data.data
+          // 避免两个变量指向同一引用，便于后续差异对比
+          const arr = Array.isArray(data.data) ? data.data : []
+          this.selectedUsers = arr.slice()
+          this.oldSelectedUsers = arr.slice()
         }
       })
     },