fix：首页仪表盘

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

@@ -7,6 +7,8 @@ import {
   UserAddOutlined,
   UserSwitchOutlined
 } from '@ant-design/icons-vue';
+import { computed, ref, onMounted } from 'vue';
+import { getDashboardOverview } from '@/service/api/auth';
 
 defineOptions({
   name: 'HeaderBanner'
@@ -14,25 +16,61 @@ defineOptions({
 
 const overviewData = ref<Api.DashboardOverview>({
   cloud: { connected: false },
-  sites: { total: 0, countries: 0, connected: 0, disconnected: 0 },
+  siteNum: 0,
   devices: {
-    gateways: { connected: 0, disconnected: 0 },
-    switches: { connected: 0, disconnected: 0 },
-    olts: { connected: 0, disconnected: 0 },
-    ap: { connected: 0, disconnected: 0, isolated: 0 }
+    totalGatewayNum: 0,
+    connectedGatewayNum: 0,
+    disconnectedGatewayNum: 0,
+    totalSwitchNum: 0,
+    connectedSwitchNum: 0,
+    disconnectedSwitchNum: 0,
+    totalApNum: 0,
+    connectedApNum: 0,
+    disconnectedApNum: 0,
+    isolatedApNum: 0
   },
-  client: { wiredUsers: 0, wirelessUsers: 0, wirelessGuests: 0 },
-  alerts: 0,
-  users: { registered: 0, online: 0 }
+  client: {
+    totalClientNum: 0,
+    wiredClientNum: 0,
+    wirelessClientNum: 0,
+    guestNum: 0
+  },
+  registerUserNum: 0,
+  onlineUserNum: 0
 });
 
 const fetchOverviewData = async () => {
-  // try {
-  //   const data = await authStore.getDashboardOverview();
-  //   overviewData.value = data;
-  // } catch (error) {
-  //   console.error('Failed to fetch overview data:', error);
-  // }
+  try {
+    const { data } = await getDashboardOverview();
+    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
+      };
+    }
+  } catch (error) {
+    console.error('Failed to fetch overview data:', error);
+  }
 };
 
 onMounted(() => {
@@ -40,18 +78,43 @@ onMounted(() => {
 });
 
 const deviceStatus = computed(() => ({
-  ap: overviewData.value.devices.ap,
-  client: overviewData.value.client,
-  alerts: overviewData.value.alerts,
-  users: overviewData.value.users
+  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 siteInfo = computed(() => overviewData.value.sites);
+const siteInfo = computed(() => ({
+  total: overviewData.value.siteNum
+}));
 
 const otherDevices = computed(() => ({
-  gateways: overviewData.value.devices.gateways,
-  switches: overviewData.value.devices.switches,
-  olts: overviewData.value.devices.olts
+  gateways: {
+    total: overviewData.value.devices.totalGatewayNum,
+    connected: overviewData.value.devices.connectedGatewayNum,
+    disconnected: overviewData.value.devices.disconnectedGatewayNum
+  },
+  switches: {
+    total: overviewData.value.devices.totalSwitchNum,
+    connected: overviewData.value.devices.connectedSwitchNum,
+    disconnected: overviewData.value.devices.disconnectedSwitchNum
+  },
+  olts: {
+    total: 0,
+    connected: 0,
+    disconnected: 0
+  }
 }));
 </script>
 
@@ -87,9 +150,6 @@ const otherDevices = computed(() => ({
             <div class="border-t border-gray-100 my-4px"></div>
             <div class="flex flex-col text-12px text-gray-500">
               <span>Total Sites: {{ siteInfo.total }}</span>
-              <span>Countries: {{ siteInfo.countries }}</span>
-              <span>Connected: {{ siteInfo.connected }}</span>
-              <span>Disconnected: {{ siteInfo.disconnected }}</span>
             </div>
           </div>
 
@@ -130,7 +190,7 @@ const otherDevices = computed(() => ({
             <div class="flex items-center gap-6px mb-6px">
               <div class="size-48px flex-center bg-gray-100 rounded-lg relative">
                 <group-outlined class="text-24px text-primary" />
-                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.olts.connected + otherDevices.olts.disconnected }}</span>
+                <span class="text-20px font-semibold absolute -right-2 -top-2 bg-primary text-white rounded-full w-6 h-6 flex-center">{{ otherDevices.olts.total }}</span>
               </div>
               <div class="text-16px font-medium">OLTs</div>
             </div>
@@ -213,8 +273,8 @@ 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.alerts }}</span>
-              <span>Active: {{ deviceStatus.alerts }}</span>
+              <span>Total: {{ deviceStatus.alerts || 0 }}</span>
+              <span>Active: {{ deviceStatus.alerts || 0 }}</span>
             </div>
           </div>
         </div>