自动刷新设置

src/views/statistics/index.vue

@@ -45,7 +45,7 @@
               <i class="el-icon-money"></i>
               可用余额
             </div>
-            <div class="card-value highlight">{{balance}}</div>
+            <div class="card-value highlight">{{formatNumberWithCommas(balance)}}</div>
           </div>
         </el-col>
 
@@ -54,10 +54,10 @@
             <div class="card-title">
               <span>今日消耗</span>
             </div>
-            <div class="card-value highlight">{{todayComsumption}}</div>
+            <div class="card-value highlight">{{formatNumberWithCommas(todayComsumption)}}</div>
             <div class="card-sub">
               <span>昨日消耗（元）</span>
-              <span class="sub-value">{{yesterdayComsumption}}</span>
+              <span class="sub-value">{{formatNumberWithCommas(yesterdayComsumption)}}</span>
             </div>
             <el-progress :percentage="percentage" :show-text="false" color="#409EFF"></el-progress>
             <div class="card-desc">{{remainMessage}}</div>
@@ -84,7 +84,7 @@
               <i class="el-icon-message"></i>
               短信剩余条数
             </div>
-            <div class="card-value highlight">{{smsRemainCount}}</div>
+            <div class="card-value highlight">{{formatNumberWithCommas(smsRemainCount)}}</div>
           </div>
         </el-col>
 
@@ -93,12 +93,12 @@
             <div class="card-title">
               平台今日看课人数
             </div>
-            <div class="card-value highlight">{{todayWatchUserCount}}</div>
+            <div class="card-value highlight">{{formatNumberWithCommas(todayWatchUserCount)}}</div>
             <div class="card-sub">
               <span>配额上限</span>
               <span class="sub-value">{{todayWatchUserCount}}/{{versionLimit}}</span>
             </div>
-            <el-progress :percentage="70" :show-text="false" color="#409EFF"></el-progress>
+            <el-progress :percentage="todayWatchUserCount/versionLimit" :show-text="false" color="#409EFF"></el-progress>
           </div>
         </el-col>
       </el-row>
@@ -145,11 +145,11 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>观看人数</span>
-                  <span class="highlight">{{watchUserCount}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(watchUserCount)}}</span>
                 </div>
                 <div class="card-row">
                   <span>完播人数</span>
-                  <span class="highlight">{{completedUserCount}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(completedUserCount)}}</span>
                 </div>
                 <div class="card-row">
                   <span>完播率</span>
@@ -162,11 +162,11 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>观看次数</span>
-                  <span class="highlight">{{watchCount}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(watchCount)}}</span>
                 </div>
                 <div class="card-row">
                   <span>完播次数</span>
-                  <span class="highlight">{{completedCount}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(completedCount)}}</span>
                 </div>
                 <div class="card-row">
                   <span>视频完播率</span>
@@ -184,11 +184,11 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>答题人数</span>
-                  <span class="highlight">{{answerMemberCount}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(answerMemberCount)}}</span>
                 </div>
                 <div class="card-row">
                   <span>正确人数</span>
-                  <span class="highlight">{{correctUserCount}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(correctUserCount)}}</span>
                 </div>
                 <div class="card-row">
                   <span>正确率</span>
@@ -206,11 +206,11 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>答题红包个数</span>
-                  <span class="highlight">{{rewardCount}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(rewardCount)}}</span>
                 </div>
                 <div class="card-row">
                   <span>答题红包金额(元)</span>
-                  <span class="highlight">{{rewardMoney}}</span>
+                  <span class="highlight">{{formatNumberWithCommas(rewardMoney)}}</span>
                 </div>
               </div>
             </div>
@@ -870,6 +870,31 @@ export default {
       this.handleAnswerRedPackMoneyViewerChart()
 
     },
+    /**
+     * 将数字添加千位分隔符
+     * @param {number|string} num - 需要格式化的数字
+     * @return {string} 添加千位分隔符后的字符串
+     */
+     formatNumberWithCommas(num) {
+      if (num === null || num === undefined || isNaN(Number(num))) {
+        return '0';
+      }
+
+      const numStr = String(num);
+
+      // 处理负数
+      const isNegative = numStr.startsWith('-');
+      const absNumStr = isNegative ? numStr.slice(1) : numStr;
+
+      // 分离整数部分和小数部分
+      const parts = absNumStr.split('.');
+      const integerPart = parts[0];
+      const decimalPart = parts.length > 1 ? '.' + parts[1] : '';
+
+      const formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+      return (isNegative ? '-' : '') + formattedInteger + decimalPart;
+    },
     handleToggleDiv(selected){
       this.selectedDiv = selected;