fix：仪表盘显示修复

src/typings/api.d.ts

@@ -620,24 +620,20 @@ declare namespace Api {
       connected: boolean;
     };
     siteNum: number;
-    devices: {
-      totalGatewayNum: number;
-      connectedGatewayNum: number;
-      disconnectedGatewayNum: number;
-      totalSwitchNum: number;
-      connectedSwitchNum: number;
-      disconnectedSwitchNum: number;
-      totalApNum: number;
-      connectedApNum: number;
-      disconnectedApNum: number;
-      isolatedApNum: number;
-    };
-    client: {
-      totalClientNum: number;
-      wiredClientNum: number;
-      wirelessClientNum: number;
-      guestNum: number;
-    };
+    totalGatewayNum: number;
+    connectedGatewayNum: number;
+    disconnectedGatewayNum: number;
+    totalSwitchNum: number;
+    connectedSwitchNum: number;
+    disconnectedSwitchNum: number;
+    totalApNum: number;
+    connectedApNum: number;
+    disconnectedApNum: number;
+    isolatedApNum: number;
+    totalClientNum: number;
+    wiredClientNum: number;
+    wirelessClientNum: number;
+    guestNum: number;
     registerUserNum: number;
     onlineUserNum: number;
   }

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

@@ -17,24 +17,20 @@ defineOptions({
 const overviewData = ref<Api.DashboardOverview>({
   cloud: { connected: false },
   siteNum: 0,
-  devices: {
-    totalGatewayNum: 0,
-    connectedGatewayNum: 0,
-    disconnectedGatewayNum: 0,
-    totalSwitchNum: 0,
-    connectedSwitchNum: 0,
-    disconnectedSwitchNum: 0,
-    totalApNum: 0,
-    connectedApNum: 0,
-    disconnectedApNum: 0,
-    isolatedApNum: 0
-  },
-  client: {
-    totalClientNum: 0,
-    wiredClientNum: 0,
-    wirelessClientNum: 0,
-    guestNum: 0
-  },
+  totalGatewayNum: 0,
+  connectedGatewayNum: 0,
+  disconnectedGatewayNum: 0,
+  totalSwitchNum: 0,
+  connectedSwitchNum: 0,
+  disconnectedSwitchNum: 0,
+  totalApNum: 0,
+  connectedApNum: 0,
+  disconnectedApNum: 0,
+  isolatedApNum: 0,
+  totalClientNum: 0,
+  wiredClientNum: 0,
+  wirelessClientNum: 0,
+  guestNum: 0,
   registerUserNum: 0,
   onlineUserNum: 0
 });
@@ -42,31 +38,30 @@ const overviewData = ref<Api.DashboardOverview>({
 const fetchOverviewData = async () => {
   try {
     const { data } = await getDashboardOverview();
+    console.log('Raw API response:', data);
     if (data) {
       overviewData.value = {
-        cloud: { connected: data.cloud?.connected || false },
-        siteNum: data.siteNum || 0,
-        devices: {
-          totalGatewayNum: data.devices?.totalGatewayNum || 0,
-          connectedGatewayNum: data.devices?.connectedGatewayNum || 0,
-          disconnectedGatewayNum: data.devices?.disconnectedGatewayNum || 0,
-          totalSwitchNum: data.devices?.totalSwitchNum || 0,
-          connectedSwitchNum: data.devices?.connectedSwitchNum || 0,
-          disconnectedSwitchNum: data.devices?.disconnectedSwitchNum || 0,
-          totalApNum: data.devices?.totalApNum || 0,
-          connectedApNum: data.devices?.connectedApNum || 0,
-          disconnectedApNum: data.devices?.disconnectedApNum || 0,
-          isolatedApNum: data.devices?.isolatedApNum || 0
-        },
-        client: {
-          totalClientNum: data.client?.totalClientNum || 0,
-          wiredClientNum: data.client?.wiredClientNum || 0,
-          wirelessClientNum: data.client?.wirelessClientNum || 0,
-          guestNum: data.client?.guestNum || 0
-        },
-        registerUserNum: data.registerUserNum || 0,
-        onlineUserNum: data.onlineUserNum || 0
+        cloud: { connected: data.cloud?.connected ?? false },
+        siteNum: data.siteNum ?? 0,
+        totalGatewayNum: data.totalGatewayNum ?? 0,
+        connectedGatewayNum: data.connectedGatewayNum ?? 0,
+        disconnectedGatewayNum: data.disconnectedGatewayNum ?? 0,
+        totalSwitchNum: data.totalSwitchNum ?? 0,
+        connectedSwitchNum: data.connectedSwitchNum ?? 0,
+        disconnectedSwitchNum: data.disconnectedSwitchNum ?? 0,
+        totalApNum: data.totalApNum ?? 0,
+        connectedApNum: data.connectedApNum ?? 0,
+        disconnectedApNum: data.disconnectedApNum ?? 0,
+        isolatedApNum: data.isolatedApNum ?? 0,
+        totalClientNum: data.totalClientNum ?? 0,
+        wiredClientNum: data.wiredClientNum ?? 0,
+        wirelessClientNum: data.wirelessClientNum ?? 0,
+        guestNum: data.guestNum ?? 0,
+        registerUserNum: data.registerUserNum ?? 0,
+        onlineUserNum: data.onlineUserNum ?? 0
       };
+      console.log('Processed overviewData:', overviewData.value);
+      console.log('AP Connected Count:', overviewData.value.connectedApNum);
     }
   } catch (error) {
     console.error('Failed to fetch overview data:', error);
@@ -77,38 +72,42 @@ onMounted(() => {
   fetchOverviewData();
 });
 
-const deviceStatus = computed(() => ({
-  ap: {
-    connected: overviewData.value.devices.connectedApNum,
-    disconnected: overviewData.value.devices.disconnectedApNum,
-    isolated: overviewData.value.devices.isolatedApNum
-  },
-  client: {
-    wiredUsers: overviewData.value.client.wiredClientNum,
-    wirelessUsers: overviewData.value.client.wirelessClientNum,
-    wirelessGuests: overviewData.value.client.guestNum
-  },
-  users: {
-    registered: overviewData.value.registerUserNum,
-    online: overviewData.value.onlineUserNum
-  },
-  alerts: 0
-}));
+const deviceStatus = computed(() => {
+  const status = {
+    ap: {
+      connected: Number(overviewData.value.connectedApNum) || 0,
+      disconnected: Number(overviewData.value.disconnectedApNum) || 0,
+      isolated: Number(overviewData.value.isolatedApNum) || 0
+    },
+    client: {
+      wiredUsers: Number(overviewData.value.wiredClientNum) || 0,
+      wirelessUsers: Number(overviewData.value.wirelessClientNum) || 0,
+      wirelessGuests: Number(overviewData.value.guestNum) || 0
+    },
+    users: {
+      registered: Number(overviewData.value.registerUserNum) || 0,
+      online: Number(overviewData.value.onlineUserNum) || 0
+    },
+    alerts: 0
+  };
+  console.log('Computed deviceStatus:', status);
+  return status;
+});
 
 const siteInfo = computed(() => ({
-  total: overviewData.value.siteNum
+  total: Number(overviewData.value.siteNum) || 0
 }));
 
 const otherDevices = computed(() => ({
   gateways: {
-    total: overviewData.value.devices.totalGatewayNum,
-    connected: overviewData.value.devices.connectedGatewayNum,
-    disconnected: overviewData.value.devices.disconnectedGatewayNum
+    total: Number(overviewData.value.totalGatewayNum) || 0,
+    connected: Number(overviewData.value.connectedGatewayNum) || 0,
+    disconnected: Number(overviewData.value.disconnectedGatewayNum) || 0
   },
   switches: {
-    total: overviewData.value.devices.totalSwitchNum,
-    connected: overviewData.value.devices.connectedSwitchNum,
-    disconnected: overviewData.value.devices.disconnectedSwitchNum
+    total: Number(overviewData.value.totalSwitchNum) || 0,
+    connected: Number(overviewData.value.connectedSwitchNum) || 0,
+    disconnected: Number(overviewData.value.disconnectedSwitchNum) || 0
   },
   olts: {
     total: 0,
@@ -211,8 +210,7 @@ const otherDevices = computed(() => ({
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Total: {{ deviceStatus.users.registered }}</span>
-              <span>Online: {{ deviceStatus.users.online }}</span>
+              <span>Register: {{ deviceStatus.users.registered }}</span>
             </div>
           </div>
 
@@ -226,16 +224,18 @@ const otherDevices = computed(() => ({
             </div>
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
-              <span>Active: {{ deviceStatus.users.online }}</span>
-              <span>Total: {{ deviceStatus.users.registered }}</span>
+              <span>Online: {{ deviceStatus.users.online }}</span>
             </div>
           </div>
 
           <!-- AP Status -->
           <div class="flex flex-col p-6px">
             <div class="flex items-center gap-6px mb-6px">
-              <div class="size-48px flex-center bg-green-50 rounded-lg">
+              <div class="size-48px flex-center bg-green-50 rounded-lg relative">
                 <icon-mdi-access-point class="text-primary text-24px" />
+                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">
+                  {{ overviewData.totalApNum }}
+                </span>
               </div>
               <div class="text-16px font-medium">AP</div>
             </div>
@@ -250,8 +250,11 @@ const otherDevices = computed(() => ({
           <!-- Client Status -->
           <div class="flex flex-col p-6px">
             <div class="flex items-center gap-6px mb-6px">
-              <div class="size-48px flex-center bg-purple-50 rounded-lg">
+              <div class="size-48px flex-center bg-purple-50 rounded-lg relative">
                 <icon-mdi-laptop class="text-primary text-24px" />
+                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">
+                  {{ overviewData.totalClientNum }}
+                </span>
               </div>
               <div class="text-16px font-medium">Client</div>
             </div>