From d18d8bf3933da53d0037811ee61ba84a2c9c463c Mon Sep 17 00:00:00 2001 From: zhongzm Date: Sat, 15 Feb 2025 14:58:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=AA=E8=A1=A8=E7=9B=98=E6=97=A0?= =?UTF-8?q?=E5=A5=97=E9=A4=90=E6=97=B6=E6=98=BE=E7=A4=BA=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/modules/header-banner.vue | 113 ++++++++++++++++------- 1 file changed, 82 insertions(+), 31 deletions(-) diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue index 151662f..9359d0a 100644 --- a/src/views/home/modules/header-banner.vue +++ b/src/views/home/modules/header-banner.vue @@ -95,11 +95,15 @@ const baseData = ref([ value: 0, max: 1024, unit: 'B', - description: t('page.headerbanner.monthflowr'), - subTitle: t('page.headerbanner.Used') + ': 0B', + //description: t('page.headerbanner.monthflowr'), + //subTitle: t('page.headerbanner.Used') + ': 0B', + description: '-', + subTitle: '-', speedLimits: { - upLimit: t('page.headerbanner.nolimit'), - downLimit: t('page.headerbanner.nolimit') + // upLimit: t('page.headerbanner.nolimit'), + // downLimit: t('page.headerbanner.nolimit') + upLimit: '-', + downLimit: '-' } } ]); @@ -251,7 +255,13 @@ const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: }; // 修改速率格式化函数 -const formatSpeedLimit = (speed: number): string => { +const formatSpeedLimit = (speed: number | null): string => { + if (speed === null || speed === undefined) { + return '0Kbps'; + } + if (speed === -1) { + return t('page.headerbanner.nolimit'); + } if (speed >= 1048576) { return `${(speed / 1048576).toFixed(1)}Gbps`; } else if (speed >= 1024) { @@ -262,14 +272,18 @@ const formatSpeedLimit = (speed: number): string => { // 添加速率限制的响应式引用 const speedLimits = ref({ - upLimit: t('page.headerbanner.nolimit'), - downLimit: t('page.headerbanner.nolimit') + // upLimit: t('page.headerbanner.nolimit'), + // downLimit: t('page.headerbanner.nolimit') + upLimit: '-', + downLimit: '-' }); // 添加套餐信息的响应式引用 const packageInfo = ref({ - packageName: '', - price: '0.00' + // packageName: '', + // price: '0.00' + packageName: t('page.headerbanner.noPackage'), + price: '-' }); // 修改数据更新函数，添加套餐信息的更新 @@ -280,7 +294,7 @@ async function mockDataUpdate() { // 更新套餐信息 packageInfo.value = { packageName: response.packageName || t('page.headerbanner.nopackage'), - price: formatBalance(response.price || 0) + price: response.price ? formatBalance(response.price) : '-' }; // 更新余额和设备数据 @@ -292,13 +306,31 @@ async function mockDataUpdate() { displayValue: formatBalance(response.balance), unit: t('page.headerbanner.money'), subTitle: t('page.headerbanner.deviceCount') + `: ${ + response.packageName ? ( !response.clientNumEnable ? t('page.headerbanner.nolimit') : (response.clientNum || 0) + t('page.headerbanner.device') + ):'-' }` }; // 更新流量数据 + if (!response.packageName) { + // 无套餐时显示 - + baseData.value[1] = { + ...baseData.value[1], + value: 0, + max: 1024, + displayValue: '-', + description: '-', + subTitle: '-', + speedLimits: { + upLimit: '-', + downLimit: '-' + } + }; + } else { + // 有套餐时的正常显示逻辑 const totalTraffic = response.trafficEnable ? (response.traffic || 0) : 0; const usedTraffic = response.trafficEnable ? (response.trafficUsed || 0) : 0; const remainingTraffic = Math.max(0, totalTraffic - usedTraffic); @@ -310,26 +342,41 @@ async function mockDataUpdate() { const formattedRemaining = formatTraffic(remainingTraffic); // 更新流量数据显示 - baseData.value[1] = { - ...baseData.value[1], - value: remainingTraffic, - max: totalTraffic, - displayValue: !response.trafficEnable ? t('page.headerbanner.nolimit') : `${formattedRemaining.value}${formattedRemaining.unit}`, - unit: '', - description: !response.trafficEnable - ? t('page.headerbanner.nolimit') - : `${formattedTotal.value}${formattedTotal.unit}`, - subTitle: !response.trafficEnable - ? t('page.headerbanner.nolimit') - : formattedUsed.value+formattedUsed.unit, - speedLimits: { - upLimit: speedLimits.value.upLimit, - downLimit: speedLimits.value.downLimit - } - }; - console.log(baseData.value[1].description) + // baseData.value[1] = { + // ...baseData.value[1], + // value: remainingTraffic, + // max: totalTraffic, + // displayValue: !response.trafficEnable ? t('page.headerbanner.nolimit') : `${formattedRemaining.value}${formattedRemaining.unit}`, + // unit: '', + // description: !response.trafficEnable + // ? t('page.headerbanner.nolimit') + // : `${formattedTotal.value}${formattedTotal.unit}`, + // subTitle: !response.trafficEnable + // ? t('page.headerbanner.nolimit') + // : formattedUsed.value+formattedUsed.unit, + // speedLimits: { + // upLimit: speedLimits.value.upLimit, + // downLimit: speedLimits.value.downLimit + // } + // }; + // console.log(baseData.value[1].description) + baseData.value[1] = { + ...baseData.value[1], + value: remainingTraffic, + max: totalTraffic, + displayValue: response.trafficEnable ? `${formattedRemaining.value}${formattedRemaining.unit}` : t('page.headerbanner.nolimit'), + description: response.trafficEnable ? `${formattedTotal.value}${formattedTotal.unit}` : t('page.headerbanner.nolimit'), + subTitle: response.trafficEnable ? formattedUsed.value+formattedUsed.unit : t('page.headerbanner.nolimit') + }; + } + // 更新速率限制显示 - if (response.rateLimitEnable) { + if (!response.packageName) { + speedLimits.value = { + upLimit: '-', + downLimit: '-' + }; + } else if (response.rateLimitEnable) { speedLimits.value = { upLimit: !response.upLimitEnable ? t('page.headerbanner.nolimit') @@ -348,7 +395,11 @@ async function mockDataUpdate() { // 更新图表 updateGauge1(opts => updateGaugeData(opts, baseData.value[0])); updateGauge2(opts => { - const newOpts = updateGaugeData(opts, baseData.value[1], remainingTraffic / totalTraffic); + const newOpts = updateGaugeData( + opts, + baseData.value[1], + response.packageName && response.trafficEnable ? remainingTraffic / totalTraffic : 0 + ); return { ...newOpts, animation: true, @@ -446,7 +497,7 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
{{ t('page.headerbanner.price') }} - ¥{{ packageInfo.price || '0.00' }} + ¥{{ packageInfo.price || '-' }}
{{ t('page.headerbanner.monthflowr') }}