From a99456f70ae5b61e4eb7589b9f297ab0202a7fad Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 24 Dec 2024 18:39:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=8E=86=E5=8F=B2=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/records/index.vue | 202 +-------------------------
 src/views/userInfo/records/index.vue | 205 +++++++++++++++++++++++++++
 2 files changed, 208 insertions(+), 199 deletions(-)
 create mode 100644 src/views/userInfo/records/index.vue

diff --git a/src/views/endpoint/records/index.vue b/src/views/endpoint/records/index.vue
index f761c1f..688650c 100644
--- a/src/views/endpoint/records/index.vue
+++ b/src/views/endpoint/records/index.vue
@@ -1,203 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import type { TableColumnsType } from 'ant-design-vue'
-import { HistoryOutlined } from '@ant-design/icons-vue'
-import { useI18n } from "vue-i18n";
-import { fetchHistoricalDevices } from '@/service/api/auth';
-
-const { t } = useI18n();
-
-// 格式化时间戳
-function formatTimestamp(timestamp: number): string {
-  const date = new Date(timestamp);
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit'
-  });
-}
-
-// 格式化流量
-function formatDataUsage(bytes: number): string {
-  if (bytes < 1024) {
-    return `${bytes}B`;
-  } else if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(2)}KB`;
-  } else if (bytes < 1024 * 1024 * 1024) {
-    return `${(bytes / (1024 * 1024)).toFixed(2)}MB`;
-  } else {
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)}GB`;
-  }
-}
-
-// 定义记录类型
-interface DeviceRecord {
-  id: number;
-  deviceName: string;
-  macAddress: string;
-  dataUsage: string;
-  connectionTime: string;
-  disconnectionTime: string;
-}
-
-// 设备列表数据
-const deviceList = ref<DeviceRecord[]>([]);
-
-const loading = ref(false);
-
-const columns: TableColumnsType = [
-  {
-    title: t('page.records.clientname'),
-    dataIndex: 'deviceName',
-    key: 'deviceName',
-    width: '30%'
-  },
-  {
-    title: t('page.records.clientmac'),
-    dataIndex: 'macAddress',
-    key: 'macAddress',
-    width: '40%'
-  },
-  {
-    title: t('page.records.dataUsage'),
-    dataIndex: 'dataUsage',
-    key: 'dataUsage',
-    width: '30%',
-    align: 'right'
-  }
-];
-
-// 添加展开行控制
-const expandedRowKeys = ref<number[]>([]);
-
-// 处理展开行变化
-function handleExpandChange(expanded: boolean, record: DeviceRecord) {
-  if (expanded) {
-    expandedRowKeys.value = [record.id];
-  } else {
-    expandedRowKeys.value = [];
-  }
-}
-
-// 获取历史设备列表数据
-async function getHistoricalDeviceList() {
-  loading.value = true;
-  try {
-    const { data, error } = await fetchHistoricalDevices();
-    if (!error && data) {
-      deviceList.value = data.rows.map(item => ({
-        id: item.id,
-        deviceName: item.clientName,
-        macAddress: item.clientMac,
-        dataUsage: formatDataUsage(item.duration),
-        connectionTime: formatTimestamp(item.startTime),
-        disconnectionTime: formatTimestamp(item.endTime)
-      }));
-    }
-  } catch (err) {
-    console.error('Failed to fetch historical device list:', err);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 刷新设备列表
-async function handleRefresh() {
-  await getHistoricalDeviceList();
-}
-
-// 组件挂载时获取数据
-onMounted(() => {
-  getHistoricalDeviceList();
-});
+import records from '@/views/userInfo/records/index.vue'
 </script>
-
 <template>
-  <div class="device-list-container">
-    <a-card :bordered="false">
-      <template #title>
-        <div class="card-title">
-          <HistoryOutlined />
-          <span>{{ t('page.records.clienthistory') }}</span>
-        </div>
-      </template>
-
-      <template #extra>
-        <a-button type="primary" :loading="loading" @click="handleRefresh">
-          <template #icon>
-            <span class="i-carbon:refresh"></span>
-          </template>
-          {{ t('page.records.refresh') }}
-        </a-button>
-      </template>
-
-      <a-table
-        :loading="loading"
-        :columns="columns"
-        :data-source="deviceList"
-        :row-key="(record: DeviceRecord) => record.id"
-        :expanded-row-keys="expandedRowKeys"
-        @expand="handleExpandChange"
-        :pagination="{
-          total: deviceList.length,
-          pageSize: 10,
-          showSizeChanger: false,
-          showTotal: (total) => `共 ${total} 条`
-        }"
-      >
-        <template #expandedRowRender="{ record }">
-          <div class="pl-4">
-            <div>{{ t('page.records.starttime') }}: {{ record.connectionTime }}</div>
-            <div>{{ t('page.records.endtime') }}: {{ record.disconnectionTime }}</div>
-          </div>
-        </template>
-      </a-table>
-    </a-card>
-  </div>
+  <records/>
 </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;
-}
-
-.pl-4 {
-  padding-left: 1rem;
-}
-
-: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/records/index.vue b/src/views/userInfo/records/index.vue
new file mode 100644
index 0000000..a1bf77e
--- /dev/null
+++ b/src/views/userInfo/records/index.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { HistoryOutlined } from '@ant-design/icons-vue'
+import { useI18n } from "vue-i18n";
+import { fetchHistoricalDevices } from '@/service/api/auth';
+defineOptions({
+  name: 'records'
+});
+const { t } = useI18n();
+
+// 格式化时间戳
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp);
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}
+
+// 格式化流量
+function formatDataUsage(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  } else if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(2)}KB`;
+  } else if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(2)}MB`;
+  } else {
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)}GB`;
+  }
+}
+
+// 定义记录类型
+interface DeviceRecord {
+  id: number;
+  deviceName: string;
+  macAddress: string;
+  dataUsage: string;
+  connectionTime: string;
+  disconnectionTime: string;
+}
+
+// 设备列表数据
+const deviceList = ref<DeviceRecord[]>([]);
+
+const loading = ref(false);
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.records.clientname'),
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    width: '30%'
+  },
+  {
+    title: t('page.records.clientmac'),
+    dataIndex: 'macAddress',
+    key: 'macAddress',
+    width: '40%'
+  },
+  {
+    title: t('page.records.dataUsage'),
+    dataIndex: 'dataUsage',
+    key: 'dataUsage',
+    width: '30%',
+    align: 'right'
+  }
+];
+
+// 添加展开行控制
+const expandedRowKeys = ref<number[]>([]);
+
+// 处理展开行变化
+function handleExpandChange(expanded: boolean, record: DeviceRecord) {
+  if (expanded) {
+    expandedRowKeys.value = [record.id];
+  } else {
+    expandedRowKeys.value = [];
+  }
+}
+
+// 获取历史设备列表数据
+async function getHistoricalDeviceList() {
+  loading.value = true;
+  try {
+    const { data, error } = await fetchHistoricalDevices();
+    if (!error && data) {
+      deviceList.value = data.rows.map(item => ({
+        id: item.id,
+        deviceName: item.clientName,
+        macAddress: item.clientMac,
+        dataUsage: formatDataUsage(item.duration),
+        connectionTime: formatTimestamp(item.startTime),
+        disconnectionTime: formatTimestamp(item.endTime)
+      }));
+    }
+  } catch (err) {
+    console.error('Failed to fetch historical device list:', err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 刷新设备列表
+async function handleRefresh() {
+  await getHistoricalDeviceList();
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getHistoricalDeviceList();
+});
+</script>
+
+<template>
+  <div class="device-list-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <HistoryOutlined />
+          <span>{{ t('page.records.clienthistory') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button type="primary" :loading="loading" @click="handleRefresh">
+          <template #icon>
+            <span class="i-carbon:refresh"></span>
+          </template>
+          {{ t('page.records.refresh') }}
+        </a-button>
+      </template>
+
+      <a-table
+        :loading="loading"
+        :columns="columns"
+        :data-source="deviceList"
+        :row-key="(record: DeviceRecord) => record.id"
+        :expanded-row-keys="expandedRowKeys"
+        @expand="handleExpandChange"
+        :pagination="{
+          total: deviceList.length,
+          pageSize: 10,
+          showSizeChanger: false,
+          showTotal: (total) => `共 ${total} 条`
+        }"
+      >
+        <template #expandedRowRender="{ record }">
+          <div class="pl-4">
+            <div>{{ t('page.records.starttime') }}: {{ record.connectionTime }}</div>
+            <div>{{ t('page.records.endtime') }}: {{ record.disconnectionTime }}</div>
+          </div>
+        </template>
+      </a-table>
+    </a-card>
+  </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;
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+
+: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>