自动刷新设置

src/views/statistics/index.vue

@@ -119,9 +119,20 @@
         </div>
 
         <div class="action-group">
-          <el-button size="small" plain icon="el-icon-refresh">手动刷新</el-button>
-          <el-button size="small" plain>自动刷新</el-button>
-          <el-button size="small" type="primary">刷新</el-button>
+          <el-button size="small" plain icon="el-icon-refresh" @click="manualRefresh">手动刷新</el-button>
+          <el-dropdown @command="handleAutoRefresh" trigger="click">
+            <el-button size="small" plain>
+              自动刷新
+              <i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="0" :class="{ 'is-active': !autoRefreshInterval }">关闭</el-dropdown-item>
+              <el-dropdown-item :command="5" :class="{ 'is-active': autoRefreshInterval === 5 }">5分钟</el-dropdown-item>
+              <el-dropdown-item :command="10" :class="{ 'is-active': autoRefreshInterval === 10 }">10分钟</el-dropdown-item>
+              <el-dropdown-item :command="15" :class="{ 'is-active': autoRefreshInterval === 15 }">15分钟</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <el-button size="small" type="primary" @click="refresh">刷新</el-button>
         </div>
       </div>
     </div>
@@ -672,61 +683,94 @@ export default {
     })
   },
   created() {
-    dealerAggregated().then(res=>{
-      if(res.code === 200){
-        this.dealderCount = res.data.dealderCount;
-        this.groupMgrCount = res.data.groupMgrCount;
-        this.memberCount = res.data.memberCount;
-        this.normalNum = res.data.normalNum;
-        this.blackNum = res.data.blackNum;
-      }
-    })
-    let param = {
-      startTime: '',
-      endTime: ''
-    };
-    // 获取当前日期时间
-    const today = dayjs();
-    param.startTime = this.formatDate(today);
-    param.endTime = this.formatDate(today);
-    analysisPreview(param).then(res=>{
-      if(res.code === 200){
-        this.watchUserCount = res.data.watchUserCount;
-        this.completedUserCount = res.data.completedUserCount;
-        this.completedRate = res.data.completedRate;
-        this.watchCount = res.data.watchCount;
-        this.completedCount = res.data.completedCount;
-        this.answerMemberCount = res.data.answerMemberCount;
-        this.correctUserCount = res.data.correctUserCount;
-        this.correctRate = res.data.correctRate;
-        this.rewardCount = res.data.rewardCount;
-        this.rewardMoney = res.data.rewardMoney;
-      }
-    })
-    smsBalance().then(res=>{
-      if(res.code === 200){
-        this.smsRemainCount = res.data;
+    this.refresh();
+  },
+  methods: {
+    // 手动刷新
+    manualRefresh() {
+      this.refresh();
+    },
+    // 处理自动刷新选项
+    handleAutoRefresh(command) {
+      // 清除之前的定时器
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
       }
-    })
-    authorizationInfo().then(res=>{
-      if(res.code === 200){
-        this.todayWatchUserCount = res.data.todayWatchUserCount;
-        this.versionLimit = res.data.versionLimit;
+
+      // 设置新的刷新间隔
+      this.autoRefreshInterval = parseInt(command);
+
+      // 如果间隔大于0，设置新的定时器
+      if (this.autoRefreshInterval > 0) {
+        this.timer = setInterval(() => {
+          this.refresh();
+        }, this.autoRefreshInterval * 60 * 1000); // 转换为毫秒
+
+        this.$message.success(`已设置${this.autoRefreshInterval}分钟自动刷新`);
+      } else {
+        this.$message.info('已关闭自动刷新');
       }
-    })
+    },
+    refresh() {
+      dealerAggregated().then(res=>{
+        if(res.code === 200){
+          this.dealderCount = res.data.dealderCount;
+          this.groupMgrCount = res.data.groupMgrCount;
+          this.memberCount = res.data.memberCount;
+          this.normalNum = res.data.normalNum;
+          this.blackNum = res.data.blackNum;
+        }
+      })
+      let param = {
+        startTime: '',
+        endTime: ''
+      };
+      // 获取当前日期时间
+      const today = dayjs();
+      param.startTime = this.formatDate(today);
+      param.endTime = this.formatDate(today);
+      analysisPreview(param).then(res=>{
+        if(res.code === 200){
+          this.watchUserCount = res.data.watchUserCount;
+          this.completedUserCount = res.data.completedUserCount;
+          this.completedRate = res.data.completedRate;
+          this.watchCount = res.data.watchCount;
+          this.completedCount = res.data.completedCount;
+          this.answerMemberCount = res.data.answerMemberCount;
+          this.correctUserCount = res.data.correctUserCount;
+          this.correctRate = res.data.correctRate;
+          this.rewardCount = res.data.rewardCount;
+          this.rewardMoney = res.data.rewardMoney;
+        }
+      })
+      smsBalance().then(res=>{
+        if(res.code === 200){
+          if(res.data == null) {
+            this.smsRemainCount = 0;
+          } else {
+            this.smsRemainCount = res.data;
+          }
+        }
+      })
+      authorizationInfo().then(res=>{
+        if(res.code === 200){
+          this.todayWatchUserCount = res.data.todayWatchUserCount;
+          this.versionLimit = res.data.versionLimit;
+        }
+      })
 
-    this.handleCourseWatchChart()
-    this.handleViewChartData()
+      this.handleCourseWatchChart()
+      this.handleViewChartData()
 
-    // 经销商会员观看TOP10
-    this.handleDealerChartData()
+      // 经销商会员观看TOP10
+      this.handleDealerChartData()
 
-    this.handleAnswerRedPackViewerChart()
+      this.handleAnswerRedPackViewerChart()
 
-    this.handleAnswerRedPackMoneyViewerChart()
+      this.handleAnswerRedPackMoneyViewerChart()
 
-  },
-  methods: {
+    },
     handleToggleDiv(selected){
       this.selectedDiv = selected;
 
@@ -947,7 +991,12 @@ export default {
   },
 
   beforeDestroy() {
-    window.removeEventListener('resize', this.resizeHandler)
+    // 组件销毁时清除定时器
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+    // window.removeEventListener('resize', this.resizeHandler)
     this.viewerChart && this.viewerChart.dispose()
     this.dealerChart && this.dealerChart.dispose()
   }
@@ -955,6 +1004,14 @@ export default {
 </script>
 
 <style scoped>
+.action-group .el-button + .el-button,
+.action-group .el-dropdown {
+  margin-left: 10px;
+}
+.is-active {
+  color: #409EFF;
+  font-weight: bold;
+}
 ::v-deep .el-radio-button__inner:hover {
   color: #409EFF; /* 鼠标悬浮时的文字颜色，可以根据需要调整 */
 }