From 96422a4723357d83bf0d8cdce651f37c3d8fa81c Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 24 Dec 2024 18:38:01 +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=E8=B7=AF=E5=BE=84=E4=BF=AE=E6=94=B9=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/endpoint/access/index.vue | 191 +-------------------------
 src/views/userInfo/access/index.vue | 206 ++++++++++++++++++++++++++++
 2 files changed, 209 insertions(+), 188 deletions(-)
 create mode 100644 src/views/userInfo/access/index.vue

diff --git a/src/views/endpoint/access/index.vue b/src/views/endpoint/access/index.vue
index 2ef9dfc..01b090a 100644
--- a/src/views/endpoint/access/index.vue
+++ b/src/views/endpoint/access/index.vue
@@ -1,192 +1,7 @@
 <script setup lang="ts">
-import {ref} from 'vue'
-import type {TableColumnsType} from 'ant-design-vue'
-import {WifiOutlined} from '@ant-design/icons-vue'
-import {useI18n} from "vue-i18n";
-import {clientAuth, clientInfo, clientUnAuth} from '@/service/ue/client';
-
-const { t } = useI18n();
-
-// 设备列表数据
-const deviceList = ref<{
-  deviceName: string;
-  macAddress: string;
-  speed: string;
-  id: number;
-}[]>([]);
-const loading = ref(false);
-
-const columns: TableColumnsType = [
-  {
-    title: t('page.access.devicename'),
-    dataIndex: 'deviceName',
-    key: 'deviceName',
-    width: '30%'
-  },
-  {
-    title: t('page.access.mac'),
-    dataIndex: 'macAddress',
-    key: 'macAddress',
-    width: '40%'
-  },
-  {
-    title: t('page.access.speed'),
-    dataIndex: 'speed',
-    key: 'speed',
-    width: '30%',
-    align: 'right'
-  }
-];
-// 格式化速度函数
-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();
-});
-
-
-/**
- * 模拟测试上网
- * @param type
- */
-function clickBtn(type: string) {
-  if (type === "auth") {
-    clientAuth().then((res) => {
-      alert(JSON.stringify(res))
-    })
-  }
-  if (type === "unauth") {
-    clientUnAuth().then((res) => {
-      alert(JSON.stringify(res))
-    })
-  }
-  if (type === "info") {
-    clientInfo().then((res) => {
-      alert(JSON.stringify(res))
-    })
-  }
-}
+import access from '@/views/userInfo/access/index.vue'
 </script>
-
 <template>
-  <div class="device-list-container">
-    <a-card :bordered="false">
-      <template #title>
-        <div class="card-title">
-          <WifiOutlined/>
-          <span>{{ t('page.access.currentdevice') }}</span>
-        </div>
-      </template>
-
-      <template #extra>
-        <a-button type="primary" :loading="loading" @click="handleRefresh">
-          <template #icon>
-            <span class="i-carbon:refresh"></span>
-          </template>
-          {{ t('page.access.refresh') }}
-        </a-button>
-      </template>
-
-      <a-table
-        :loading="loading"
-        :columns="columns"
-        :data-source="deviceList"
-        :pagination="{
-          total: deviceList.length,
-          pageSize: 10,
-          showSizeChanger: false,
-          showTotal: (total) => `共 ${total} 条`
-        }"
-      >
-      </a-table>
-    </a-card>
-
-    <!-- 终端测试上网 -->
-    <a-space wrap>
-      <a-button type="primary" @click="clickBtn('auth')">终端上网</a-button>
-      <a-button @click="clickBtn('unauth')">终端下线</a-button>
-      <a-button type="dashed" @click="clickBtn('info')">终端信息</a-button>
-    </a-space>
-  </div>
+<access/>
 </template>
-
-<style scoped>
-.device-list-container {
-  padding: 8px;
-  background-color: #f5f5f7;
-  min-height: 100vh;
-}
-
-.card-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-:deep(.ant-card-head) {
-  border-bottom: 1px solid #f0f0f0;
-  padding: 0 12px;
-}
-
-:deep(.ant-card-body) {
-  padding: 12px;
-}
-
-:deep(.ant-table-wrapper) {
-  width: 100%;
-}
-
-:deep(.ant-table) {
-  width: 100%;
-}
-
-@media screen and (min-width: 768px) {
-  .device-list-container {
-    padding: 16px;
-  }
-}
-</style>
+<style scoped></style>
diff --git a/src/views/userInfo/access/index.vue b/src/views/userInfo/access/index.vue
new file mode 100644
index 0000000..633a6e6
--- /dev/null
+++ b/src/views/userInfo/access/index.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import type {TableColumnsType} from 'ant-design-vue'
+import {WifiOutlined} from '@ant-design/icons-vue'
+import {useI18n} from "vue-i18n";
+import {clientAuth, clientInfo, clientUnAuth} from '@/service/ue/client';
+import { useRouter } from 'vue-router';
+defineOptions({
+  name: 'access'
+});
+const { t } = useI18n();
+const router = useRouter();
+
+const handleBack = () => {
+  router.push('/userInfo/usercard');
+};
+
+// 设备列表数据
+const deviceList = ref<{
+  deviceName: string;
+  macAddress: string;
+  speed: string;
+  id: number;
+}[]>([]);
+const loading = ref(false);
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.access.devicename'),
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    width: '30%'
+  },
+  {
+    title: t('page.access.mac'),
+    dataIndex: 'macAddress',
+    key: 'macAddress',
+    width: '40%'
+  },
+  {
+    title: t('page.access.speed'),
+    dataIndex: 'speed',
+    key: 'speed',
+    width: '30%',
+    align: 'right'
+  }
+];
+// 格式化速度函数
+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();
+});
+
+
+/**
+ * 模拟测试上网
+ * @param type
+ */
+function clickBtn(type: string) {
+  if (type === "auth") {
+    clientAuth().then((res) => {
+      alert(JSON.stringify(res))
+    })
+  }
+  if (type === "unauth") {
+    clientUnAuth().then((res) => {
+      alert(JSON.stringify(res))
+    })
+  }
+  if (type === "info") {
+    clientInfo().then((res) => {
+      alert(JSON.stringify(res))
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="device-list-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <WifiOutlined/>
+          <span>{{ t('page.access.currentdevice') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="handleRefresh">
+          <template #icon>
+            <span class="i-carbon:refresh"></span>
+          </template>
+          {{ t('page.access.refresh') }}
+        </a-button>
+      </template>
+
+      <a-table
+        :loading="loading"
+        :columns="columns"
+        :data-source="deviceList"
+        :pagination="{
+          total: deviceList.length,
+          pageSize: 10,
+          showSizeChanger: false,
+          showTotal: (total) => `共 ${total} 条`
+        }"
+      >
+      </a-table>
+    </a-card>
+
+    <!-- 终端测试上网 -->
+    <a-space wrap>
+      <a-button type="primary" @click="clickBtn('auth')">终端上网</a-button>
+      <a-button @click="clickBtn('unauth')">终端下线</a-button>
+      <a-button type="dashed" @click="clickBtn('info')">终端信息</a-button>
+      <a-button @click="handleBack">
+        {{ t('page.login.common.back') }}
+      </a-button>
+    </a-space>
+  </div>
+</template>
+
+<style scoped>
+.device-list-container {
+  padding: 8px;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+:deep(.ant-card-head) {
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 12px;
+}
+
+:deep(.ant-card-body) {
+  padding: 12px;
+}
+
+:deep(.ant-table-wrapper) {
+  width: 100%;
+}
+
+:deep(.ant-table) {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .device-list-container {
+    padding: 16px;
+  }
+}
+</style>