From b12d8fb2182b9c7d0c26637c6978cd84cff1693c Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 10 Jan 2025 18:38:08 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/modules/header-banner.vue | 190 +++++++++++++---------- 1 file changed, 109 insertions(+), 81 deletions(-) diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue index 2ad78e5..958f4f0 100644 --- a/src/views/home/modules/header-banner.vue +++ b/src/views/home/modules/header-banner.vue @@ -5,7 +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(); @@ -257,94 +257,122 @@ const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: // 添加峰值速率的 ref const peakTrafficRate = ref(0); +// 添加检查是否可以上网的函数 +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().catch(err => { + console.warn('Auto auth failed:', err); + }); + } +} // 修改 mockDataUpdate 函数，在获取数据后添加检查 async function mockDataUpdate() { try { const response = await authStore.getDashboardData(); - if (response) { - // 更新余额和设备数据 - const numBalance = Number(response.balance); - baseData.value[0] = { - ...baseData.value[0], - value: numBalance, // 使用转换后的数字 - max: Math.max(numBalance, 100), - displayValue: formatBalance(response.balance), - unit: '元', - subTitle: t('page.headerbanner.deviceCount') + `: ${response.clientNum}台` - }; - - // 先计算剩余流量（字节单位） - const totalTraffic = response.traffic; // 总流量（字节） - const usedTraffic = response.trafficUsed; // 已用流量（字节） - - // 计算剩余流量，确保不会出现负数 - const remainingTraffic = Math.max(0, totalTraffic - usedTraffic); // 剩余流量（字节） - - // 计算进度比例，确保在 0-1 之间 - const progressRatio = Math.min(1, Math.max(0, remainingTraffic / totalTraffic)); - - // 格式化流量显示 - const formattedTotal = formatTraffic(totalTraffic); - const formattedUsed = formatTraffic(usedTraffic); - const formattedRemaining = formatTraffic(remainingTraffic); - - // 更新流量数据显示 - baseData.value[1] = { - ...baseData.value[1], - 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}` - }; - - // 获取当前速率 - const currentActivity = Number(response.activity ?? 0); - - // 更新峰值速率 - if (currentActivity > peakTrafficRate.value) { - peakTrafficRate.value = currentActivity; - } - - // 格式化当前速度和峰值速度 - const currentSpeed = formatSpeed(currentActivity); - const peakSpeed = formatSpeed(peakTrafficRate.value); - - // 设置速率的最大值 - 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 => { - const newOpts = updateGaugeData(opts, baseData.value[1], progressRatio); - // 添加动画配置 - return { - ...newOpts, - animation: true, - animationDuration: 1000, - animationEasing: 'cubicInOut' + // 检查响应是否有效 + if (response && typeof response === 'object') { + // 检查必要的字段是否存在 + if (response.balance !== undefined) { + // 更新余额和设备数据 + const numBalance = Number(response.balance); + baseData.value[0] = { + ...baseData.value[0], + value: numBalance, + max: Math.max(numBalance, 100), + displayValue: formatBalance(response.balance), + unit: '元', + subTitle: t('page.headerbanner.deviceCount') + `: ${response.clientNum || 0}台` }; - }); - updateGauge3(opts => updateGaugeData(opts, baseData.value[2])); + + // 处理流量数据，使用默认值处理可能的空值 + const totalTraffic = response.traffic || 0; + const usedTraffic = response.trafficUsed || 0; + const remainingTraffic = Math.max(0, totalTraffic - usedTraffic); + const progressRatio = totalTraffic ? Math.min(1, Math.max(0, remainingTraffic / totalTraffic)) : 0; + + // 格式化流量显示 + const formattedTotal = formatTraffic(totalTraffic); + const formattedUsed = formatTraffic(usedTraffic); + const formattedRemaining = formatTraffic(remainingTraffic); + + // 更新流量数据显示 + baseData.value[1] = { + ...baseData.value[1], + 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}` + }; + + // 获取当前速率 + const currentActivity = Number(response.activity ?? 0); + + // 更新峰值速率 + if (currentActivity > peakTrafficRate.value) { + peakTrafficRate.value = currentActivity; + } + + // 格式化当前速度和峰值速度 + const currentSpeed = formatSpeed(currentActivity); + const peakSpeed = formatSpeed(peakTrafficRate.value); + + // 设置速率的最大值 + 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}` + }; + + // 静默执行自动上网检查 + try { + await checkAndTriggerAuth(response); + } catch (error) { + console.warn('Auto auth check failed:', error); + } + + // 更新图表 + updateGauge1(opts => updateGaugeData(opts, baseData.value[0])); + 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])); + } else { + console.warn('Invalid dashboard data structure:', response); + } } } catch (error) { - console.error('Failed to fetch dashboard data:', error); + // 只记录真正的错误 + if (error instanceof Error) { + console.warn('Dashboard data update failed:', error.message); + } } }