fix：首页仪表盘

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>