diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue index 50c2bb1..f3f75df 100644 --- a/src/views/home/modules/header-banner.vue +++ b/src/views/home/modules/header-banner.vue @@ -63,6 +63,17 @@ const formatTraffic = (bytes: number): { value: number; unit: string } => { } }; +// 添加格式化余额的函数 +const formatBalance = (balance: number | string): string => { + // 确保转换为数字类型 + const numBalance = Number(balance); + // 检查是否是有效数字 + if (isNaN(numBalance)) { + return '0.00'; + } + return numBalance.toFixed(2); +}; + // 使用 ref 来存储基础数据 const baseData = ref([ { @@ -113,7 +124,7 @@ const getGaugeOptions = (data: GaugeDisplayData): ECOption => ({ lineStyle: { width: 15, color: [ - [(data.value / data.max), '#4284f5'], + [data.value / (data.max || 1), '#4284f5'], [1, '#0c47a7'] ] } @@ -174,6 +185,8 @@ const { domRef: gauge3Ref, updateOptions: updateGauge3 } = useEcharts(() => getG // 更新单个图表的数据 const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: number) => { + const ratio = progressRatio !== undefined ? progressRatio : (data.value / (data.max || 1)); + // 创建完整的新配置 const newOpts: ECOption = { backgroundColor: 'transparent', @@ -181,7 +194,7 @@ const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: name: data.title, type: 'gauge', min: 0, - max: data.max, + max: data.max || 1, startAngle: 200, endAngle: -20, radius: '85%', @@ -190,7 +203,7 @@ const updateGaugeData = (opts: ECOption, data: GaugeDisplayData, progressRatio?: lineStyle: { width: 15, color: [ - [(progressRatio !== undefined ? progressRatio : data.value / data.max), '#4284f5'], + [ratio, '#4284f5'], [1, '#0c47a7'] ] } @@ -272,10 +285,13 @@ async function mockDataUpdate() { const response = await authStore.getDashboardData(); if (response) { // 更新余额和设备数据 + const numBalance = Number(response.balance); baseData.value[0] = { ...baseData.value[0], - value: response.balance, - max: Math.max(response.balance, 100), + value: numBalance, // 使用转换后的数字 + max: Math.max(numBalance, 100), + displayValue: formatBalance(response.balance), + unit: '元', subTitle: t('page.headerbanner.deviceCount') + `: ${response.clientNum}台` }; @@ -410,7 +426,7 @@ defineExpose({ }">
{{ item.title }}
-
{{ item.displayValue || `${item.value}${item.unit}` }}
+
{{ item.displayValue ? `${item.displayValue}${item.unit}` : `${item.value}${item.unit}` }}
{{ item.description }}
{{ item.subTitle }}