fix:仪表盘显示修复

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

@@ -5,6 +5,7 @@ import { useAppStore } from '@/store/modules/app';
 import type { ECOption } from '@/hooks/common/echarts';
 import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '@/store/modules/auth';
+import { clientAuth } from '@/service/ue/client';
 
 const { t } = useI18n();
 const authStore = useAuthStore();
@@ -21,6 +22,7 @@ interface GaugeDisplayData {
   value: number;
   max: number;
   unit: string;
+  displayValue?: string;
   subTitle?: string;
   description?: string;
 }
@@ -171,68 +173,100 @@ const { domRef: gauge3Ref, updateOptions: updateGauge3 } = useEcharts(() => getG
 });
 
 // 更新单个图表的数据
-const updateGaugeData = (opts: ECOption, data: GaugeDisplayData) => {
-  if (!opts.series || !Array.isArray(opts.series)) {
-    opts.series = [{
+const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: number) => {
+  // 创建完整的新配置
+  const newOpts: ECOption = {
+    backgroundColor: 'transparent',
+    series: [{
       name: data.title,
       type: 'gauge',
       min: 0,
       max: data.max,
-      data: [],
-      detail: { show: false },
-      title: { show: false }
-    }] as any[];
-  }
-
-  // 获取第一个系列并使用类型断言
-  const series = opts.series[0] as {
-    axisLine?: {
-      lineStyle: {
-        width: number;
-        color: Array<[number, string]>;
-      };
-    };
-    data: Array<{
-      value: number;
-      name: string;
-    }>;
-  };
-
-  // 更新轴线颜色
-  if (!series.axisLine) {
-    series.axisLine = {
+      startAngle: 200,
+      endAngle: -20,
+      radius: '85%',
+      center: ['50%', '55%'],
+      axisLine: {
         lineStyle: {
           width: 15,
           color: [
-          [(data.value / data.max), '#4284f5'],
+            [(progressRatio !== undefined ? progressRatio : data.value / data.max), '#4284f5'],
             [1, '#0c47a7']
           ]
         }
-    };
-  } else {
-    series.axisLine.lineStyle = {
-      width: 15,
-      color: [
-        [(data.value / data.max), '#4284f5'],
-        [1, '#0c47a7']
-      ]
-    };
+      },
+      pointer: {
+        width: 3,
+        length: '60%',
+        itemStyle: {
+          color: '#ffeb3b'
         }
-
-  // 更新数据
-  series.data = [{
+      },
+      axisTick: {
+        show: true,
+        distance: -23,
+        length: 8,
+        lineStyle: {
+          color: '#fff',
+          width: 1,
+          opacity: 0.3
+        }
+      },
+      splitLine: {
+        show: true,
+        distance: -22,
+        length: 12,
+        lineStyle: {
+          color: '#fff',
+          width: 2,
+          opacity: 0.3
+        }
+      },
+      axisLabel: {
+        show: false
+      },
+      detail: {
+        show: false
+      },
+      title: {
+        show: false
+      },
+      data: [{
         value: data.value,
         name: data.title
-  }];
+      }]
+    }]
+  };
 
-  return opts;
+  return newOpts;
 };
 
 // 添加峰值速率的 ref
 const peakTrafficRate = ref(0);
-//  mockDataUpdate 函数
 
-// 修改 mockDataUpdate 函数
+// 添加检查是否可以上网的函数
+function checkAndTriggerAuth(dashboardData: any) {
+  // 检查是否有余额
+  const hasBalance = dashboardData.balance > 0;
+
+  // 检查是否不限制流量
+  const noTrafficLimit = !dashboardData.trafficEnable;
+
+  // 检查是否有剩余流量
+  const hasRemainingTraffic = dashboardData.trafficEnable &&
+    (dashboardData.traffic - dashboardData.trafficUsed) > 0;
+
+  // 如果满足任一条件，触发上网
+  if (hasBalance || noTrafficLimit || hasRemainingTraffic) {
+    clientAuth().then((res) => {
+      console.log('Auto auth triggered:', res);
+    }).catch(err => {
+      console.error('Auto auth failed:', err);
+    });
+  }
+}
+
+// 修改 mockDataUpdate 函数，在获取数据后添加检查
 async function mockDataUpdate() {
   try {
     const response = await authStore.getDashboardData();
@@ -263,27 +297,14 @@ async function mockDataUpdate() {
       // 更新流量数据显示
       baseData.value[1] = {
         ...baseData.value[1],
-        value: formattedRemaining.value,  // 仪表盘显示剩余流量
-        unit: formattedRemaining.unit,    // 使用转换后的单位
-        max: formattedTotal.value,        // 最大值为总流量
-        description: `${t('page.headerbanner.monthflowr')} (${formattedTotal.value}${formattedTotal.unit})`, // 显示总流量
-        subTitle: t('page.headerbanner.Used') + `: ${formattedUsed.value}${formattedUsed.unit}` // 显示已用流量
+        value: remainingTraffic,
+        max: totalTraffic,
+        displayValue: `${formattedRemaining.value}${formattedRemaining.unit}`,
+        unit: '',
+        description: `${t('page.headerbanner.monthflowr')} (${formattedTotal.value}${formattedTotal.unit})`,
+        subTitle: t('page.headerbanner.Used') + `: ${formattedUsed.value}${formattedUsed.unit}`
       };
 
-      // 更新仪表盘的进度比例
-      updateGauge2(opts => {
-        if (opts.series && Array.isArray(opts.series)) {
-          const series = opts.series[0] as any;
-          if (series.axisLine) {
-            series.axisLine.lineStyle.color = [
-              [progressRatio, '#4284f5'],
-              [1, '#0c47a7']
-            ];
-          }
-        }
-        return updateGaugeData(opts, baseData.value[1]);
-      });
-
       // 获取当前速率
       const currentActivity = Number(response.activity ?? 0);
 
@@ -313,9 +334,21 @@ async function mockDataUpdate() {
         subTitle: t('page.headerbanner.maxspeed') + `: ${peakSpeed.value}${peakSpeed.unit}`
       };
 
-      // 更新图表
+      // 在数据处理完成后，添加自动上网检查
+      checkAndTriggerAuth(response);
+
+      // 统一更新所有图表
       updateGauge1(opts => updateGaugeData(opts, baseData.value[0]));
-      updateGauge2(opts => updateGaugeData(opts, baseData.value[1]));
+      updateGauge2(opts => {
+        const newOpts = updateGaugeData(opts, baseData.value[1], progressRatio);
+        // 添加动画配置
+        return {
+          ...newOpts,
+          animation: true,
+          animationDuration: 1000,
+          animationEasing: 'cubicInOut'
+        };
+      });
       updateGauge3(opts => updateGaugeData(opts, baseData.value[2]));
     }
   } catch (error) {
@@ -377,7 +410,7 @@ defineExpose({
           }"></div>
           <div class="gauge-info">
             <div class="gauge-title">{{ item.title }}</div>
-            <div class="gauge-value">{{ item.value }}{{ item.unit }}</div>
+            <div class="gauge-value">{{ item.displayValue || `${item.value}${item.unit}` }}</div>
             <div class="gauge-desc">{{ item.description }}</div>
             <div class="sub-title">{{ item.subTitle }}</div>
           </div>