自动刷新设置

src/views/statistics/index.vue

@@ -13,7 +13,8 @@
               <i class="el-icon-user-solid"></i>
               分公司数量
             </div>
-            <div class="card-value highlight">{{dealderCount}}</div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="dealderCount" :duration="3600" class="card-panel-num" /></div>
           </div>
         </el-col>
 
@@ -23,7 +24,9 @@
               <i class="el-icon-user"></i>
               销售数量
             </div>
-            <div class="card-value highlight">{{groupMgrCount}}</div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="groupMgrCount" :duration="3600" class="card-panel-num" />
+            </div>
           </div>
         </el-col>
 
@@ -33,7 +36,8 @@
               <i class="el-icon-shopping-cart-full"></i>
               会员数量
             </div>
-            <div class="card-value highlight">{{memberCount}}</div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num" /></div>
             <div class="card-badge">
             </div>
           </div>
@@ -45,7 +49,9 @@
               <i class="el-icon-money"></i>
               可用余额
             </div>
-            <div class="card-value highlight">{{formatNumberWithCommas(balance)}}</div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="balance" :duration="3600" class="card-panel-num" />
+            </div>
           </div>
         </el-col>
 
@@ -54,10 +60,14 @@
             <div class="card-title">
               <span>今日消耗</span>
             </div>
-            <div class="card-value highlight">{{formatNumberWithCommas(todayComsumption)}}</div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="todayComsumption" :duration="3600" class="card-panel-num" />
+            </div>
             <div class="card-sub">
               <span>昨日消耗（元）</span>
-              <span class="sub-value">{{formatNumberWithCommas(yesterdayComsumption)}}</span>
+              <span class="sub-value">
+                <count-to :start-val="0" :end-val="yesterdayComsumption" :duration="3600" class="card-panel-num" />
+              </span>
             </div>
             <el-progress :percentage="percentage" :show-text="false" color="#409EFF"></el-progress>
             <div class="card-desc">{{remainMessage}}</div>
@@ -70,7 +80,8 @@
               <span class="cdn-label">CDN</span>
               今日
             </div>
-            <div class="card-value highlight">{{formatBytes(this.todayTraffic)}}</div>
+            <div class="card-value highlight">{{formatBytes(this.todayTraffic)}}
+            </div>
             <div class="card-sub">
               <span>本月</span>
               <span class="sub-value">{{formatBytes(this.thisMonthTraffic)}}</span>
@@ -84,7 +95,9 @@
               <i class="el-icon-message"></i>
               短信剩余条数
             </div>
-            <div class="card-value highlight">{{formatNumberWithCommas(smsRemainCount)}}</div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="smsRemainCount" :duration="3600" class="card-panel-num" />
+            </div>
           </div>
         </el-col>
 
@@ -93,10 +106,13 @@
             <div class="card-title">
               平台今日看课人数
             </div>
-            <div class="card-value highlight">{{formatNumberWithCommas(todayWatchUserCount)}}</div>
+            <div class="card-value highlight">
+              <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />
+            </div>
             <div class="card-sub">
               <span>配额上限</span>
-              <span class="sub-value">{{todayWatchUserCount}}/{{versionLimit}}</span>
+              <span class="sub-value">
+                <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />/<count-to :start-val="0" :end-val="versionLimit" :duration="3600" class="card-panel-num" /></span>
             </div>
             <el-progress :percentage="todayWatchUserCount/versionLimit" :show-text="false" color="#409EFF"></el-progress>
           </div>
@@ -145,11 +161,15 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>观看人数</span>
-                  <span class="highlight">{{formatNumberWithCommas(watchUserCount)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="watchUserCount" :duration="3600" class="card-panel-num" />
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>完播人数</span>
-                  <span class="highlight">{{formatNumberWithCommas(completedUserCount)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="completedUserCount" :duration="3600" class="card-panel-num" />
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>完播率</span>
@@ -162,11 +182,14 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>观看次数</span>
-                  <span class="highlight">{{formatNumberWithCommas(watchCount)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="watchCount" :duration="3600" class="card-panel-num" /></span>
                 </div>
                 <div class="card-row">
                   <span>完播次数</span>
-                  <span class="highlight">{{formatNumberWithCommas(completedCount)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="completedCount" :duration="3600" class="card-panel-num" />
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>视频完播率</span>
@@ -184,11 +207,15 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>答题人数</span>
-                  <span class="highlight">{{formatNumberWithCommas(answerMemberCount)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="answerMemberCount" :duration="3600" class="card-panel-num" />
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>正确人数</span>
-                  <span class="highlight">{{formatNumberWithCommas(correctUserCount)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="correctUserCount" :duration="3600" class="card-panel-num" />
+                    </span>
                 </div>
                 <div class="card-row">
                   <span>正确率</span>
@@ -206,11 +233,14 @@
               <div class="card-content">
                 <div class="card-row">
                   <span>答题红包个数</span>
-                  <span class="highlight">{{formatNumberWithCommas(rewardCount)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="rewardCount" :duration="3600" class="card-panel-num" />
+                    </span>
                 </div>
                 <div class="card-row">
                   <span>答题红包金额(元)</span>
-                  <span class="highlight">{{formatNumberWithCommas(rewardMoney)}}</span>
+                  <span class="highlight">
+                    <count-to :start-val="0" :end-val="rewardMoney" :duration="3600" class="card-panel-num" /></span>
                 </div>
               </div>
             </div>
@@ -342,6 +372,7 @@
 
 <script>
 import * as echarts from 'echarts'
+import CountTo from "vue-count-to";
 import {
   analysisPreview,
   authorizationInfo,
@@ -618,6 +649,7 @@ const redPackageOption = {
 }
 export default {
   name: 'StatisticsDashboard',
+  components: {CountTo},
   data() {
     return {
       percentage: 0,