增加刷新页面定时

src/views/dustMonitoring/index.vue

 <template>
-  <div class="dust-box">
+  <div class="dust-box" ref="dustBox">
     <div class="top-box">
       <el-form
         :model="form"
@@ -676,9 +676,12 @@ const resizeFun = () => {
 onMounted(() => {
   getDusterNameEnum();
   window.addEventListener("resize", resizeFun);
+  refeshFun();
+  getAllMouseEvent();
 });
 onUnmounted(() => {
   window.removeEventListener("resize", resizeFun);
+  cancelAllMouseEvent();
   chartRemoveEvent();
 });
 watch(
@@ -714,6 +717,39 @@ const handleStatusDotClick = () => {
     },
   });
 };
+// 定时刷新页面数据请求 30分钟一次。
+const refreshData = () => {
+  getHealthIndex();
+  getPressure();
+  getEnergy();
+  getDustDetail();
+  getAlarmInfo();
+}
+let refreshTimer = null;
+const refeshFun = () => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+  }
+  refreshTimer = setTimeout(() => {
+    refreshData();
+    refeshFun()
+  }, 1000 * 60 * 30);
+}
+const dustBox = ref(null);
+// 获取鼠标所有事件
+const getAllMouseEvent = () => {
+  dustBox.value.addEventListener("mousemove", cancelRefreshEvent)
+  dustBox.value.addEventListener("mousedown", cancelRefreshEvent)
+}
+const cancelRefreshEvent = () => {
+   clearTimeout(refreshTimer);
+   refeshFun();
+}
+// 取消鼠标事件
+const cancelAllMouseEvent = () => {
+  dustBox.value.removeEventListener("mousemove", cancelRefreshEvent)
+  dustBox.value.removeEventListener("mousedown", cancelRefreshEvent)
+}
 </script>
 <style lang="scss" scoped>
 $borderColor: #3a3f45;