fix:首页仪表盘部分接口对接

src/views/home/modules/header-banner.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, watch, ref } from 'vue';
+import { computed, watch, ref, onUnmounted } from 'vue';
 import { useEcharts } from '@/hooks/common/echarts';
 import { useAppStore } from '@/store/modules/app';
 import type { ECOption } from '@/hooks/common/echarts';
-import { useBillingStore } from '@/store/modules/billing/billing';
 import { useI18n } from 'vue-i18n';
+import { useAuthStore } from '@/store/modules/auth';
 
 const { t } = useI18n();
-const billingStore = useBillingStore();
+const authStore = useAuthStore();
 defineOptions({
   name: 'HeaderBanner'
 });
@@ -47,11 +47,11 @@ const baseData = ref([
   {
     id: 2,
     title: t('page.headerbanner.Trafficrate'),
-    value: 3,
+    value: 0,
     max: 10,
-    unit: 'MB/s',
+    unit: 'B/s',
     description: t('page.headerbanner.Currentspeed'),
-    subTitle: t('page.headerbanner.maxspeed')+'8MB/s'
+    subTitle: t('page.headerbanner.maxspeed') + '0B/s'
   }
 ]);
 
@@ -191,41 +191,8 @@ const updateGaugeData = (opts: ECOption, data: GaugeData) => {
   return opts;
 };
 
-// 更新话费和流量数据的函数
-function updateBillingData() {
-  // 更新话费数据
-  const remainingBill = Number((Math.random() * 50).toFixed(2)); // 0-50元
-  const usedBill = Number((100 - remainingBill).toFixed(2));
-  // 更新 store 中的数据
-  billingStore.updateBalance(remainingBill);
-  billingStore.updateUsedAmount(usedBill);
-
-  baseData.value[0] = {
-    ...baseData.value[0],
-    value: remainingBill,
-    subTitle: t('page.headerbanner.Used')+`: ${usedBill}元`
-  };
-
-  // 更新流量数据
-  const remainingData = Number((Math.random() * 1024).toFixed(2)); // 0-1024MB
-  const usedData = Number((1024 - remainingData).toFixed(2));
-  baseData.value[1] = {
-    ...baseData.value[1],
-    value: remainingData,
-    subTitle: t('page.headerbanner.Used')+`: ${usedData}MB`
-  };
-
-  // 更新图表
-  updateGauge1(opts => updateGaugeData(opts, baseData.value[0]));
-  updateGauge2(opts => updateGaugeData(opts, baseData.value[1]));
-}
-
 // 更新图表数据
 async function mockData() {
-  await new Promise(resolve => {
-    setTimeout(resolve, 1000);
-  });
-
   updateGauge1(opts => updateGaugeData(opts, gaugeData.value[0]));
   updateGauge2(opts => updateGaugeData(opts, gaugeData.value[1]));
   updateGauge3(opts => updateGaugeData(opts, gaugeData.value[2]));
@@ -238,60 +205,91 @@ function updateLocale() {
   updateGauge3((opts) => updateGaugeData(opts, gaugeData.value[2]));
 }
 
-// 修改初始峰值为 0
+// 添加速度格式化函数
-const peakSpeed = ref(0); // 初始峰值设为 0MB/s
+function formatSpeed(bytesPerSecond: number): { value: number; unit: string } {
+  // 处理 0 值、undefined 或 null 的情况
+  if (!bytesPerSecond || bytesPerSecond === 0) {
+    return { value: 0, unit: 'B/s' };
+  }
 
-// 重置峰值函数
+  if (bytesPerSecond < 1024) {
-function resetPeakSpeed() {
+    return { value: Number(bytesPerSecond.toFixed(2)), unit: 'B/s' };
-  peakSpeed.value = 0;  // 重置为 0
+  } else if (bytesPerSecond < 1024 * 1024) {
-  // 同时更新显示
+    return { value: Number((bytesPerSecond / 1024).toFixed(2)), unit: 'KB/s' };
-  baseData.value[2] = {
+  } else if (bytesPerSecond < 1024 * 1024 * 1024) {
-    ...baseData.value[2],
+    return { value: Number((bytesPerSecond / (1024 * 1024)).toFixed(2)), unit: 'MB/s' };
-    value: 0,  // 同时也将当前值重置为 0
+  } else {
-    subTitle: t('page.headerbanner.maxspeed')+`: ${peakSpeed.value.toFixed(2)}MB/s`
+    return { value: Number((bytesPerSecond / (1024 * 1024 * 1024)).toFixed(2)), unit: 'GB/s' };
-  };
+  }
-  // 更新图表
-  updateGauge3(opts => updateGaugeData(opts, baseData.value[2]));
 }
 
-// 模拟数据更新
+// 修改 mockDataUpdate 函数
-function mockDataUpdate() {
+async function mockDataUpdate() {
-  // 先重置峰值
+  // 获取实际数据
-  resetPeakSpeed();
+  const data = await authStore.getDashboardData();
-
+  if (data) {
-  // 更新话费和流量数据
+    // 更新话费数据
-  updateBillingData();
+    baseData.value[0] = {
-
+      ...baseData.value[0],
-  setInterval(() => {
+      value: data.remainingCredit,
-    // 更新话费和流量数据（每30秒更新一次）
+      subTitle: t('page.headerbanner.Used') + `: ${data.usedCredit}元`
-    if (Math.random() > 0.5) { // 50%的概率更新
-      updateBillingData();
-    }
-
-    // 模拟流量速率变化
-    const speedValue = Math.random() * 6 + 1; // 1-7 MB/s
-
-    // 更新峰值
-    peakSpeed.value = Math.max(peakSpeed.value, speedValue);
-
-    // 更新基础数据
-    baseData.value[2] = {
-      ...baseData.value[2],
-      value: Number(speedValue.toFixed(2)),
-      subTitle: t('page.headerbanner.maxspeed')+`: ${peakSpeed.value.toFixed(2)}MB/s`
     };
 
-    // 更新图表
+    // 更新流量数据
+    baseData.value[1] = {
+      ...baseData.value[1],
+      value: data.remainingFlow,
+      subTitle: t('page.headerbanner.Used') + `: ${data.usedFlow}MB`
+    };
+
+    // 格式化当前速度和峰值速度
+    const currentSpeed = formatSpeed(data.trafficRate || 0);
+    const peakSpeed = formatSpeed(data.peakTrafficRate || 0);
+
+    // 设置一个最小的最大值，避免当速度为0时仪表盘显示异常
+    const minMax = 1024; // 1KB/s 作为最小最大值
+    const dynamicMax = Math.max(
+      currentSpeed.value * 1.5,
+      peakSpeed.value,
+      minMax
+    );
+
+    // 更新速率数据
+    baseData.value[2] = {
+      ...baseData.value[2],
+      value: currentSpeed.value,
+      unit: currentSpeed.unit,
+      max: dynamicMax,
+      subTitle: t('page.headerbanner.maxspeed') + `: ${peakSpeed.value}${peakSpeed.unit}`
+    };
+
+    // 更新表
+    updateGauge1(opts => updateGaugeData(opts, baseData.value[0]));
+    updateGauge2(opts => updateGaugeData(opts, baseData.value[1]));
     updateGauge3(opts => updateGaugeData(opts, baseData.value[2]));
-  }, 3000); // 每3秒更新一次
+  }
 }
 
+// 添加 timer 声明
+let timer: ReturnType<typeof setInterval> | null = null;
+
 // 初始化
 async function init() {
   await mockData();
-  mockDataUpdate();
+  // 立即执行一次
+  await mockDataUpdate();
+  // 设置定期执行的定时器
+  timer = setInterval(mockDataUpdate, 30000);
 }
 
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+});
+
 // 监听语言变化
 watch(
   () => appStore.locale,
@@ -429,7 +427,7 @@ init();
     font-size: 10px;
   }
 
-  /* 调整仪表盘在小屏幕下的配置 */
+  /* 调整仪表盘在小屏幕下的置 */
   :deep(.echarts-container) {
     top: 0;
     transform: scale(0.9);