WFC/fe.wfc.user
2
0
Fork 0
Code Activity

feat:仪表盘无套餐时显示修改

Browse Source
This commit is contained in:
zhongzm
2025-02-15 14:58:40 +08:00
parent f92107dbbb
commit d18d8bf393
1 changed files with 82 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/views/home/modules/header-banner.vue
View File

@@ -95,11 +95,15 @@ const baseData = ref<GaugeDisplayData[]>([
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 =>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.price') }}</span>
<span class="info-value">¥{{ packageInfo.price || '0.00' }}</span>
<span class="info-value">¥{{ packageInfo.price || '-' }}</span>
</div>
<div class="info-item">
<span class="info-label">{{ t('page.headerbanner.monthflowr') }}</span>