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

src/views/home/modules/header-banner.vue

@@ -95,11 +95,15 @@ const baseData = ref<GaugeDisplayData[]>([
     value: 0,
     max: 1024,
     unit: 'B',
-    description: t('page.headerbanner.monthflowr'),
+    //description: t('page.headerbanner.monthflowr'),
-    subTitle: t('page.headerbanner.Used') + ': 0B',
+    //subTitle: t('page.headerbanner.Used') + ': 0B',
+    description: '-',
+    subTitle: '-',
     speedLimits: {
-      upLimit: t('page.headerbanner.nolimit'),
+      // upLimit: t('page.headerbanner.nolimit'),
-      downLimit: 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'),
+  // upLimit: t('page.headerbanner.nolimit'),
-  downLimit: t('page.headerbanner.nolimit')
+  // downLimit: t('page.headerbanner.nolimit')
+  upLimit: '-',
+  downLimit: '-'
 });
 
 // 添加套餐信息的响应式引用
 const packageInfo = ref({
-  packageName: '',
+  // packageName: '',
-  price: '0.00'
+  // 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}`,
+          displayValue: response.trafficEnable ? `${formattedRemaining.value}${formattedRemaining.unit}` : t('page.headerbanner.nolimit'),
-        unit: '',
+          description: response.trafficEnable ? `${formattedTotal.value}${formattedTotal.unit}` : t('page.headerbanner.nolimit'),
-        description: !response.trafficEnable
+          subTitle: response.trafficEnable ? formattedUsed.value+formattedUsed.unit : t('page.headerbanner.nolimit')
-          ? 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)
+      }
+
       // 更新速率限制显示
-      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>