From 134a417eb1ace06d2902af431491db69d5ea7329 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 14 Jan 2025 14:09:27 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E9=A6=96=E9=A1=B5=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/api/auth.ts                       |   9 +
 src/typings/api.d.ts                          |  77 +++---
 src/typings/auto-imports.d.ts                 |   1 +
 src/views/dashboard/modules/card-data.vue     | 248 ++++++++++--------
 src/views/dashboard/modules/header-banner.vue | 116 ++++++--
 5 files changed, 279 insertions(+), 172 deletions(-)

diff --git a/src/service/api/auth.ts b/src/service/api/auth.ts
index e46bee5..cb674bd 100644
--- a/src/service/api/auth.ts
+++ b/src/service/api/auth.ts
@@ -209,6 +209,15 @@ export function getDashboardOverview() {
     method: 'get'
   });
 }
+/** 获取仪表盘站点列表 */
+export function getDashboardSiteList(params: { pageNum: number; pageSize: number; name?: string }) {
+  return request<Api.DashboardSiteResponse>({
+    url: '/system/dashboard/page',
+    method: 'get',
+    params
+  });
+}
+
 
 
 
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index 475b304..434079b 100644
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -608,44 +608,59 @@ declare namespace Api {
     }
   }
 
+
   interface DashboardOverview {
     cloud: {
       connected: boolean;
     };
-    sites: {
-      total: number;
-      countries: number;
-      connected: number;
-      disconnected: number;
-    };
+    siteNum: number;
     devices: {
-      gateways: {
-        connected: number;
-        disconnected: number;
-      };
-      switches: {
-        connected: number;
-        disconnected: number;
-      };
-      olts: {
-        connected: number;
-        disconnected: number;
-      };
-      ap: {
-        connected: number;
-        disconnected: number;
-        isolated: number;
-      };
+      totalGatewayNum: number;
+      connectedGatewayNum: number;
+      disconnectedGatewayNum: number;
+      totalSwitchNum: number;
+      connectedSwitchNum: number;
+      disconnectedSwitchNum: number;
+      totalApNum: number;
+      connectedApNum: number;
+      disconnectedApNum: number;
+      isolatedApNum: number;
     };
     client: {
-      wiredUsers: number;
-      wirelessUsers: number;
-      wirelessGuests: number;
-    };
-    alerts: number;
-    users: {
-      registered: number;
-      online: number;
+      totalClientNum: number;
+      wiredClientNum: number;
+      wirelessClientNum: number;
+      guestNum: number;
     };
+    registerUserNum: number;
+    onlineUserNum: number;
+  }
+  interface DashboardSite {
+    siteId: string;
+    name: string;
+    region: string;
+    tagIds: string[];
+    timeZone: string;
+    scenario: string;
+    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;
+  }
+
+
+  interface DashboardSiteResponse {
+    rows: DashboardSite[];
+    total: number;
   }
 }
diff --git a/src/typings/auto-imports.d.ts b/src/typings/auto-imports.d.ts
index 05bd787..e5a4198 100644
--- a/src/typings/auto-imports.d.ts
+++ b/src/typings/auto-imports.d.ts
@@ -153,6 +153,7 @@ declare global {
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
   const getDashboardOverview: typeof import('../service/api/auth')['getDashboardOverview']
+  const getDashboardSiteList: typeof import('../service/api/auth')['getDashboardSiteList']
   const getData: typeof import('../service/api/dictData')['getData']
   const getDefaultHomeTab: typeof import('../store/modules/tab/shared')['getDefaultHomeTab']
   const getDictDataType: typeof import('../service/api/dict')['getDictDataType']
diff --git a/src/views/dashboard/modules/card-data.vue b/src/views/dashboard/modules/card-data.vue
index 670e7d2..324f3a9 100644
--- a/src/views/dashboard/modules/card-data.vue
+++ b/src/views/dashboard/modules/card-data.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref, watch } from 'vue';
+import type { TableColumnType } from 'ant-design-vue';
 import {
   EnvironmentOutlined,
   EditOutlined,
@@ -10,28 +11,59 @@ import {
   PlusOutlined
 } from '@ant-design/icons-vue';
 
+import { getDashboardSiteList } from '@/service/api/auth';
+
 defineOptions({
   name: 'CardData'
 });
 
-interface SiteData {
-  id: number;
-  name: string;
-  region: string;
-  alerts: number;
-  gateway: string;
-  switches: string;
-  olts: string;
-  eaps: string;
-}
 
 // 搜索和分页状态
 const searchValue = ref('');
 const currentPage = ref(1);
 const pageSize = ref(10);
+const loading = ref(false);
+const total = ref(0);
+
+const siteData = ref<Api.DashboardSite[]>([]);
+
+const fetchSiteList = async () => {
+  try {
+    loading.value = true;
+    const { data } = await getDashboardSiteList({
+      pageNum: currentPage.value,
+      pageSize: pageSize.value,
+      name: searchValue.value
+    });
+    console.log('API Response:', data);
+    if (data) {
+      siteData.value = data.rows || [];
+      total.value = data.total || 0;
+      console.log('Processed Site Data:', siteData.value);
+      console.log('Total:', total.value);
+    } else {
+      siteData.value = [];
+      total.value = 0;
+    }
+  }catch (error){
+    console.error('Failed to fetch site list:', error);
+    siteData.value = [];
+    total.value = 0;
+  }finally {
+    loading.value = false;
+  }
+};
+
+// 修改监听方式
+
+watch([currentPage, pageSize, searchValue], () => {
+  fetchSiteList();
+}, { immediate: true });
+
+
 
 // 表格列定义
-const columns = [
+const columns: TableColumnType<Api.DashboardSite>[] = [
   {
     title: 'NAME',
     key: 'name',
@@ -45,95 +77,69 @@ const columns = [
   {
     title: 'ALERTS',
     key: 'alerts',
-    dataIndex: 'alerts',
     width: 100
   },
   {
     title: 'GATEWAY',
     key: 'gateway',
-    dataIndex: 'gateway',
     width: 100
   },
   {
     title: 'SWITCHES',
     key: 'switches',
-    dataIndex: 'switches',
     width: 100
   },
   {
     title: 'OLTS',
     key: 'olts',
-    dataIndex: 'olts',
     width: 100
   },
   {
     title: 'EAPS',
     key: 'eaps',
-    dataIndex: 'eaps',
     width: 100
   },
   {
-    title: 'ACTION',
-    key: 'action',
-    width: 150,
-    fixed: 'right'
-  }
-];
-
-const siteData = computed<SiteData[]>(() => [
-  {
-    id: 1,
-    name: 'wfc-dev-omada1-site1',
-    region: 'China mainland',
-    alerts: 0,
-    gateway: '-',
-    switches: '0 / 0',
-    olts: '0 / 0',
-    eaps: '1 / 1'
+    title: 'CLIENTS',
+    key: 'clients',
+    width: 150
   },
-  {
-    id: 2,
-    name: 'wfc-dev-omada1-site2',
-    region: 'China mainland',
-    alerts: 0,
-    gateway: '-',
-    switches: '0 / 0',
-    olts: '0 / 0',
-    eaps: '0 / 1'
-  }
-]);
-
+  // {
+  //   title: 'ACTION',
+  //   key: 'action',
+  //   width: 150,
+  //   fixed: 'right'
+  // }
+];
 // 按钮操作处理函数
-const handleEdit = (record: SiteData) => {
-  console.log('Edit:', record);
-};
-
-const handleCopy = (record: SiteData) => {
-  console.log('Copy:', record);
-};
-
-const handleDelete = (record: SiteData) => {
-  console.log('Delete:', record);
-};
-
-const handleHome = (record: SiteData) => {
-  console.log('Home:', record);
-};
+// const handleEdit = (record: Api.DashboardSite) => {
+//   console.log('Edit:', record);
+// };
+//
+// const handleCopy = (record: Api.DashboardSite) => {
+//   console.log('Copy:', record);
+// };
+//
+// const handleDelete = (record: Api.DashboardSite) => {
+//   console.log('Delete:', record);
+// };
+//
+// const handleHome = (record: Api.DashboardSite) => {
+//   console.log('Home:', record);
+// };
 
 // 分页处理函数
-// const handlePageChange = (page: number) => {
-//   currentPage.value = page;
-// };
+const handlePageChange = (page: number, pageSize: number) => {
+  currentPage.value = page;
+  if (pageSize !== undefined) {
+    handlePageSizeChange(pageSize);
+  }
+};
 
-// const handlePageSizeChange = (size: number) => {
-//   pageSize.value = size;
-//   currentPage.value = 1;
-// };
-
-// const handleGoToPage = () => {
-//   // 处理跳转页面逻辑
-//   console.log('Go to page:', currentPage.value);
-// };
+const handlePageSizeChange = (size: number) => {
+  pageSize.value = size;
+  currentPage.value = 1;
+};
 </script>
 
 <template>
@@ -141,7 +147,6 @@ const handleHome = (record: SiteData) => {
     <div class="flex justify-between items-center mb-16px">
       <div class="flex items-center gap-8px">
         <span class="text-16px font-medium">Site List</span>
-<!--        <span class="text-12px text-gray-500">1-2 of 2 records</span>-->
       </div>
       <div class="flex items-center gap-16px">
         <AInput
@@ -154,65 +159,82 @@ const handleHome = (record: SiteData) => {
             <search-outlined />
           </template>
         </AInput>
-        <AButton type="primary">
-          <template #icon>
-            <plus-outlined />
-          </template>
-          Import Site
-        </AButton>
-        <AButton type="primary">
-          <template #icon>
-            <plus-outlined />
-          </template>
-          Add New Site
-        </AButton>
+<!--        <AButton type="primary">-->
+<!--          <template #icon>-->
+<!--            <plus-outlined />-->
+<!--          </template>-->
+<!--          Import Site-->
+<!--        </AButton>-->
+<!--        <AButton type="primary">-->
+<!--          <template #icon>-->
+<!--            <plus-outlined />-->
+<!--          </template>-->
+<!--          Add New Site-->
+<!--        </AButton>-->
       </div>
     </div>
 
     <ATable
       :columns="columns"
       :data-source="siteData"
-      :pagination="false"
+      :pagination="{
+    current: currentPage,
+    pageSize: pageSize,
+    total: total,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: (total: number) => `共 ${total} 条`,
+    onChange: handlePageChange,
+    onShowSizeChange: handlePageSizeChange
+  }"
+      row-key="siteId"
       :scroll="{ x: 1200 }"
-      row-key="id"
+      :loading="loading"
     >
+      <!-- 添加一个调试信息 -->
+      <template #headerCell="{ column }">
+        <span>{{ column.title }}</span>
+      </template>
       <template #bodyCell="{ column, record }">
+        <!-- 添加调试信息 -->
+        {{ console.log('Rendering cell:', column.key, record) }}
         <template v-if="column.key === 'name'">
           <div class="flex items-center gap-8px">
             <environment-outlined class="text-16px" />
             <span>{{ record.name }}</span>
           </div>
         </template>
+        <template v-else-if="column.key === 'region'">
+          <span>{{ record.region }}</span>
+        </template>
         <template v-else-if="column.key === 'alerts'">
-          <ATag v-if="record.alerts > 0" color="error">{{ record.alerts }}</ATag>
-          <span v-else>{{ record.alerts }}</span>
+          <span>0</span>
         </template>
-        <template v-else-if="column.key === 'action'">
-          <div class="flex items-center gap-8px">
-            <edit-outlined class="cursor-pointer text-primary" @click="handleEdit(record)" />
-            <copy-outlined class="cursor-pointer text-primary" @click="handleCopy(record)" />
-            <delete-outlined class="cursor-pointer text-red-500" @click="handleDelete(record)" />
-            <home-outlined class="cursor-pointer text-primary" @click="handleHome(record)" />
-          </div>
+        <template v-else-if="column.key === 'gateway'">
+          <span>{{ record.connectedGatewayNum }}/{{ record.disconnectedGatewayNum }}</span>
         </template>
+        <template v-else-if="column.key === 'switches'">
+          <span>{{ record.connectedSwitchNum }}/{{ record.disconnectedSwitchNum }}</span>
+        </template>
+        <template v-else-if="column.key === 'olts'">
+          <span>0/0</span>
+        </template>
+        <template v-else-if="column.key === 'eaps'">
+          <span>{{ record.connectedApNum }}/{{ record.disconnectedApNum }}/{{ record.isolatedApNum }}</span>
+        </template>
+        <template v-else-if="column.key === 'clients'">
+          <span>{{ record.wiredClientNum }}/{{ record.wirelessClientNum }}/{{ record.guestNum }}</span>
+        </template>
+<!--        <template v-else-if="column.key === 'action'">-->
+<!--          <div class="flex items-center gap-8px">-->
+<!--            <edit-outlined class="cursor-pointer text-primary" @click="handleEdit(record)" />-->
+<!--            <copy-outlined class="cursor-pointer text-primary" @click="handleCopy(record)" />-->
+<!--            <delete-outlined class="cursor-pointer text-red-500" @click="handleDelete(record)" />-->
+<!--            <home-outlined class="cursor-pointer text-primary" @click="handleHome(record)" />-->
+<!--          </div>-->
+<!--        </template>-->
       </template>
     </ATable>
-
-    <div class="flex justify-between items-center mt-16px">
-      <div class="text-12px text-gray-500">
-        Showing 1-2 of 2 records
-      </div>
-      <div class="flex items-center gap-8px">
-        <ASelect v-model:value="pageSize" style="width: 100px">
-          <ASelectOption :value="10">10 / page</ASelectOption>
-          <ASelectOption :value="20">20 / page</ASelectOption>
-          <ASelectOption :value="50">50 / page</ASelectOption>
-        </ASelect>
-        <span class="text-12px text-gray-500">Go to page:</span>
-        <AInput v-model:value="currentPage" style="width: 50px" />
-        <AButton>Go</AButton>
-      </div>
-    </div>
   </ACard>
 </template>
 
diff --git a/src/views/dashboard/modules/header-banner.vue b/src/views/dashboard/modules/header-banner.vue
index 149105a..116478b 100644
--- a/src/views/dashboard/modules/header-banner.vue
+++ b/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>