fix:当前设备界面接口对接

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="{