From 086ed0766679e26f03ab1314173c3cac5ddf4e4b Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Wed, 18 Dec 2024 17:28:30 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=BD=93=E5=89=8D=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E6=8E=A5=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/endpoint/access/index.vue | 84 ++++++++++++++++++++---------
 1 file changed, 60 insertions(+), 24 deletions(-)

diff --git a/src/views/endpoint/access/index.vue b/src/views/endpoint/access/index.vue
index c240404..2ef9dfc 100644
--- a/src/views/endpoint/access/index.vue
+++ b/src/views/endpoint/access/index.vue
@@ -5,14 +5,16 @@ import {WifiOutlined} from '@ant-design/icons-vue'
 import {useI18n} from "vue-i18n";
 import {clientAuth, clientInfo, clientUnAuth} from '@/service/ue/client';
 
-const {t} = useI18n();
+const { t } = useI18n();
 
-interface DeviceInfo {
-  key: string
-  deviceName: string
-  macAddress: string
-  speed: string
-}
+// 设备列表数据
+const deviceList = ref<{
+  deviceName: string;
+  macAddress: string;
+  speed: string;
+  id: number;
+}[]>([]);
+const loading = ref(false);
 
 const columns: TableColumnsType = [
   {
@@ -34,23 +36,56 @@ const columns: TableColumnsType = [
     width: '30%',
     align: 'right'
   }
-]
-
-// 模拟数据，实际使用时应该从API获取
-const deviceList = ref<DeviceInfo[]>([
-  {
-    key: '1',
-    deviceName: 'iPhone 13',
-    macAddress: '00:11:22:33:44:55',
-    speed: '2.5 Mbps'
-  },
-  {
-    key: '2',
-    deviceName: 'MacBook Pro',
-    macAddress: '66:77:88:99:AA:BB',
-    speed: '8.1 Mbps'
+];
+// 格式化速度函数
+function formatSpeed(bytesPerSecond: number): string {
+  // 处理 0 值、undefined 或 null 的情况
+  if (!bytesPerSecond || bytesPerSecond === 0) {
+    return '0 B/s';
   }
-])
+
+  if (bytesPerSecond < 1024) {
+    return `${Number(bytesPerSecond.toFixed(2))} B/s`;
+  } else if (bytesPerSecond < 1024 * 1024) {
+    return `${Number((bytesPerSecond / 1024).toFixed(2))} KB/s`;
+  } else if (bytesPerSecond < 1024 * 1024 * 1024) {
+    return `${Number((bytesPerSecond / (1024 * 1024)).toFixed(2))} MB/s`;
+  } else {
+    return `${Number((bytesPerSecond / (1024 * 1024 * 1024)).toFixed(2))} GB/s`;
+  }
+}
+
+// 获取设备列表数据
+async function getDeviceList() {
+  loading.value = true;
+  try {
+    const { data, error } = await fetchCurrentDevices();
+    if (!error && data) {
+      // 将API返回的数据映射到表格所需的格式
+      deviceList.value = data.rows.map(item => ({
+        id: item.id,
+        deviceName: item.clientName,
+        macAddress: item.clientMac,
+        speed: formatSpeed(item.activity) // 如果需要显示设备类型作为速度
+      }));
+    }
+  } catch (err) {
+    console.error('Failed to fetch device list:', err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 刷新设备列表
+async function handleRefresh() {
+  await getDeviceList();
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getDeviceList();
+});
+
 
 /**
  * 模拟测试上网
@@ -86,7 +121,7 @@ function clickBtn(type: string) {
       </template>
 
       <template #extra>
-        <a-button type="primary">
+        <a-button type="primary" :loading="loading" @click="handleRefresh">
           <template #icon>
             <span class="i-carbon:refresh"></span>
           </template>
@@ -95,6 +130,7 @@ function clickBtn(type: string) {
       </template>
 
       <a-table
+        :loading="loading"
         :columns="columns"
         :data-source="deviceList"
         :pagination="{