自动刷新设置

src/api/statistics/statistics.js

@@ -41,6 +41,30 @@ export function dealerAggregated() {
   })
 }
 
+/**
+ * 消费余额
+ * @returns {AxiosPromise}
+ */
+export function rechargeComsumption(){
+  return request({
+    url: '/index/statistics/rechargeComsumption',
+    method: 'get',
+    params: {}
+  })
+}
+/**
+ * 获取统计流量
+ * @returns {AxiosPromise}
+ */
+export function trafficLog(){
+  return request({
+    url: '/index/statistics/trafficLog',
+    method: 'get',
+    params: {}
+  })
+}
+
+
 
 /**
  * 数据概览

src/views/statistics/index.vue

@@ -45,7 +45,7 @@
               <i class="el-icon-money"></i>
               可用余额
             </div>
-            <div class="card-value highlight">143,650.07</div>
+            <div class="card-value highlight">{{balance}}</div>
           </div>
         </el-col>
 
@@ -54,13 +54,13 @@
             <div class="card-title">
               <span>今日消耗</span>
             </div>
-            <div class="card-value highlight">1,093.70</div>
+            <div class="card-value highlight">{{todayComsumption}}</div>
             <div class="card-sub">
               <span>昨日消耗（元）</span>
-              <span class="sub-value">1952.8</span>
+              <span class="sub-value">{{yesterdayComsumption}}</span>
             </div>
-            <el-progress :percentage="74" :show-text="false" color="#409EFF"></el-progress>
-            <div class="card-desc">预测不足74天</div>
+            <el-progress :percentage="percentage" :show-text="false" color="#409EFF"></el-progress>
+            <div class="card-desc">{{remainMessage}}</div>
           </div>
         </el-col>
 
@@ -70,10 +70,10 @@
               <span class="cdn-label">CDN</span>
               今日
             </div>
-            <div class="card-value highlight">1.79T</div>
+            <div class="card-value highlight">{{formatBytes(this.todayTraffic)}}</div>
             <div class="card-sub">
               <span>本月</span>
-              <span class="sub-value">18.45T</span>
+              <span class="sub-value">{{formatBytes(this.thisMonthTraffic)}}</span>
             </div>
           </div>
         </el-col>
@@ -345,8 +345,8 @@ import * as echarts from 'echarts'
 import {
   analysisPreview,
   authorizationInfo,
-  dealerAggregated, deaMemberTopTen, rewardMoneyTopTen, rewardMoneyTrend,
-  smsBalance,
+  dealerAggregated, deaMemberTopTen, rechargeComsumption, rewardMoneyTopTen, rewardMoneyTrend,
+  smsBalance, trafficLog,
   watchCourseTopTen, watchEndPlayTrend
 } from "@/api/statistics/statistics";
 import dayjs from 'dayjs';
@@ -620,6 +620,13 @@ export default {
   name: 'StatisticsDashboard',
   data() {
     return {
+      percentage: 0,
+      // 预测message
+      remainMessage: '',
+      // 当天使用流量
+      todayTraffic: 0,
+      // 当月使用流量
+      thisMonthTraffic: 0,
       dataType: '0',
       delerSort: 'DESC',
       smsRemainCount: 0,
@@ -664,7 +671,10 @@ export default {
       selectedDiv: 0,
       filterType: 0,
       answerRedPackViewerChart: null,
-      answerRedPackMoneyViewerChart: null
+      answerRedPackMoneyViewerChart: null,
+      todayComsumption: 0,
+      yesterdayComsumption: 0,
+      balance: 0
     }
   },
   mounted() {
@@ -686,6 +696,77 @@ export default {
     this.refresh();
   },
   methods: {
+    /**
+     * 计算余额预计可持续的天数
+     * @param {number} balance - 当前账户余额
+     * @param {number} todayConsumption - 今日消耗金额
+     * @param {number} yesterdayConsumption - 昨日消耗金额
+     * @return {Object} 包含天数和进度百分比的对象
+     */
+    calculateRemainingDays(balance, todayConsumption, yesterdayConsumption) {
+      // 如果今日和昨日消耗都为0，则无法预测（避免除以0）
+      if (todayConsumption === 0 && yesterdayConsumption === 0) {
+        return {
+          days: Infinity,
+          percentage: 0,
+          message: '暂无消耗数据'
+        };
+      }
+
+      // 计算每日平均消耗量
+      const avgDailyConsumption = (todayConsumption + yesterdayConsumption) / 2;
+
+      // 如果平均消耗为0，则无法预测
+      if (avgDailyConsumption === 0) {
+        return {
+          days: Infinity,
+          percentage: 0,
+          message: '暂无消耗数据'
+        };
+      }
+
+      // 计算剩余天数（向下取整）
+      const remainingDays = Math.floor(balance / avgDailyConsumption);
+
+      // 计算进度条百分比，最大为100
+      // 这里假设100天是满值，可以根据需要调整
+      const maxDays = 100;
+      const percentage = Math.min(100, Math.max(0, Math.round((remainingDays / maxDays) * 100)));
+
+      let message = '';
+      if (remainingDays > 365) {
+        message = '预测余额充足';
+      } else {
+        message = `预测不足${remainingDays}天`;
+      }
+
+      return {
+        days: remainingDays,
+        percentage: 100 - percentage,
+        message: message
+      };
+    },
+    /**
+     * 将字节数转换为合适的单位表示（Byte、KB、MB、GB、TB）
+     * @param {number} bytes - 字节数
+     * @param {number} [decimals=2] - 小数点后保留的位数
+     * @returns {string} 格式化后的字符串，包含数值和单位
+     */
+    formatBytes(bytes, decimals = 2) {
+      if (bytes === 0) return '0 Byte';
+
+      const k = 1024;
+      const sizes = ['Byte', 'KB', 'MB', 'GB', 'TB'];
+
+      // 计算合适的单位级别
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+      // 转换为对应单位的值
+      const value = bytes / Math.pow(k, i);
+
+      // 格式化为指定小数位的字符串
+      return parseFloat(value.toFixed(decimals)) + ' ' + sizes[Math.min(i, sizes.length - 1)];
+    },
     // 手动刷新
     manualRefresh() {
       this.refresh();
@@ -713,6 +794,24 @@ export default {
       }
     },
     refresh() {
+      rechargeComsumption().then(res=>{
+        if(res.code === 200){
+          this.balance = res.data.balance;
+          this.todayComsumption = res.data.todayComsumption;
+          this.yesterdayComsumption = res.data.yesterdayComsumption;
+          let calculateRemainingDays1 = this.calculateRemainingDays(this.balance,this.todayComsumption,this.yesterdayComsumption);
+          this.percentage = calculateRemainingDays1.percentage;
+          this.remainMessage = calculateRemainingDays1.message;
+        }
+      });
+
+      trafficLog().then(res=>{
+        if(res.code === 200) {
+          this.todayTraffic = res.data.today;
+          this.thisMonthTraffic = res.data.thisMonth;
+        }
+      })
+
       dealerAggregated().then(res=>{
         if(res.code === 200){
           this.dealderCount = res.data.dealderCount;