From 4fbb71c68184cdba05cb1b94a9348c575dd52deb Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 31 Dec 2024 17:02:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BB=AA=E8=A1=A8=E7=9B=98=E9=87=91?=
 =?UTF-8?q?=E9=A2=9D=E7=B2=BE=E7=A1=AE=E5=BA=A6=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 | 28 +++++++++++++++++++-----
 1 file changed, 22 insertions(+), 6 deletions(-)

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<GaugeDisplayData[]>([
   {
@@ -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({
           }"></div>
           <div class="gauge-info">
             <div class="gauge-title">{{ item.title }}</div>
-            <div class="gauge-value">{{ item.displayValue || `${item.value}${item.unit}` }}</div>
+            <div class="gauge-value">{{ item.displayValue ? `${item.displayValue}${item.unit}` : `${item.value}${item.unit}` }}</div>
             <div class="gauge-desc">{{ item.description }}</div>
             <div class="sub-title">{{ item.subTitle }}</div>
           </div>