From b40b81ffb857cc66fe7752e4c42c09f9104e3ac9 Mon Sep 17 00:00:00 2001
From: zhongzm <zhongzm@agt.com>
Date: Tue, 24 Dec 2024 18:38:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:cdr=E8=AE=B0=E5=BD=95=E7=95=8C=E9=9D=A2?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E4=BF=AE=E6=94=B9=E4=BB=A5=E5=8F=8A=E7=BB=84?=
 =?UTF-8?q?=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/cdrlrecords/index.vue | 260 +---------------------
 src/views/userInfo/cdrlrecords/index.vue | 263 +++++++++++++++++++++++
 2 files changed, 266 insertions(+), 257 deletions(-)
 create mode 100644 src/views/userInfo/cdrlrecords/index.vue

diff --git a/src/views/endpoint/cdrlrecords/index.vue b/src/views/endpoint/cdrlrecords/index.vue
index e15c5eb..30c6b39 100644
--- a/src/views/endpoint/cdrlrecords/index.vue
+++ b/src/views/endpoint/cdrlrecords/index.vue
@@ -1,261 +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 { fetchCDRHistory } from '@/service/api/auth';
-
-const { t } = useI18n();
-
-// 定义记录类型
-interface CDRRecord {
-  id: number;
-  deviceName: string;
-  macAddress: string;
-  trafficUp: string;
-  trafficDown: string;
-  startTime: string;
-  endTime: string;
-}
-
-// 定义API返回的原始数据类型
-interface RawCDRRecord {
-  id: number;
-  clientName: string;
-  clientMac: string;
-  trafficUp: number;  // 字节数
-  trafficDown: number;  // 字节数
-  startTime: number;  // 时间戳
-  endTime: number;    // 时间戳
-}
-
-// CDR记录数据
-const cdrData = ref<CDRRecord[]>([]);
-const loading = ref(false);
-const pagination = ref({
-  current: 1,
-  pageSize: 10,
-  total: 0
-});
-
-// 展开行控制
-const expandedRowKeys = ref<number[]>([]);
-
-// 处理展开行变化
-function handleExpandChange(expanded: boolean, record: CDRRecord) {
-  if (expanded) {
-    expandedRowKeys.value = [record.id];
-  } else {
-    expandedRowKeys.value = [];
-  }
-}
-
-// 格式化流量数据的函数
-const formatTraffic = (bytes: number): string => {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
-}
-
-// 格式化时间戳
-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'
-  });
-}
-
-const columns: TableColumnsType = [
-  {
-    title: t('page.cdrlrecords.devicename'),
-    dataIndex: 'deviceName',
-    key: 'deviceName',
-    width: '40%'
-  },
-  {
-    title: t('page.cdrlrecords.uptraffic'),
-    dataIndex: 'trafficUp',
-    key: 'trafficUp',
-    width: '30%',
-    align: 'right'
-  },
-  {
-    title: t('page.cdrlrecords.downtraffic'),
-    dataIndex: 'trafficDown',
-    key: 'trafficDown',
-    width: '30%',
-    align: 'right'
-  }
-];
-
-// 获取CDR记录数据
-async function getCDRHistory(page = pagination.value.current, pageSize = pagination.value.pageSize) {
-  loading.value = true;
-  try {
-    const { data, error } = await fetchCDRHistory({
-      pageNum: page,
-      pageSize: pageSize
-    });
-    if (!error && data) {
-      // 将原始数据映射为显示所需的格式
-      cdrData.value = data.rows.map((item: RawCDRRecord) => ({
-        id: item.id,
-        deviceName: item.clientName,
-        macAddress: item.clientMac,
-        trafficUp: formatTraffic(item.trafficUp),      // 格式化上传流量
-        trafficDown: formatTraffic(item.trafficDown),   // 格式化下载流量
-        startTime: formatTimestamp(item.startTime),     // 格式化开始时间
-        endTime: formatTimestamp(item.endTime)          // 格式化结束时间
-      }));
-      pagination.value.total = data.total;
-    }
-  } catch (err) {
-    console.error('Failed to fetch CDR history:', err);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 处理分页变化
-function handleTableChange(pag: any) {
-  pagination.value.current = pag.current;
-  pagination.value.pageSize = pag.pageSize;
-  getCDRHistory(pag.current, pag.pageSize);
-}
-
-// 刷新设备列表
-async function handleRefresh() {
-  await getCDRHistory();
-}
-
-// 组件挂载时获取数据
-onMounted(() => {
-  getCDRHistory();
-});
+import cdrlrecords from '@/views/userInfo/cdrlrecords/index.vue'
 </script>
-
 <template>
-  <div class="device-list-container">
-    <a-card :bordered="false">
-      <template #title>
-        <div class="card-title">
-          <HistoryOutlined />
-          <span>{{ t('page.cdrlrecords.cdr') }}</span>
-        </div>
-      </template>
-
-      <template #extra>
-        <a-button type="primary" :loading="loading" @click="handleRefresh">
-          <template #icon>
-            <span class="i-carbon:refresh"></span>
-          </template>
-          {{ t('page.cdrlrecords.refresh') }}
-        </a-button>
-      </template>
-
-      <a-table
-        :loading="loading"
-        :columns="columns"
-        :data-source="cdrData"
-        :row-key="(record: CDRRecord) => record.id"
-        :expanded-row-keys="expandedRowKeys"
-        @expand="handleExpandChange"
-        :pagination="{
-          current: pagination.current,
-          pageSize: pagination.pageSize,
-          total: pagination.total,
-          showTotal: (total: number) => `共 ${total} 条`,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: ['10', '20', '50', '100']
-        }"
-        @change="handleTableChange"
-      >
-        <template #expandedRowRender="{ record }">
-          <div class="pl-4">
-            <div>{{ t('page.cdrlrecords.mac') }}: {{ record.macAddress }}</div>
-            <div>{{ t('page.cdrlrecords.uptime') }}: {{ record.startTime }}</div>
-            <div>{{ t('page.cdrlrecords.lasttime') }}: {{ record.endTime }}</div>
-          </div>
-        </template>
-      </a-table>
-    </a-card>
-  </div>
+  <cdrlrecords/>
 </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%;
-}
-
-/* 使表格更紧凑的样式 */
-:deep(.ant-table) .ant-table-thead > tr > th,
-:deep(.ant-table) .ant-table-tbody > tr > td {
-  padding: 8px 4px;
-  font-size: 14px;
-}
-
-/* 在小屏幕下进一步压缩内边距 */
-@media screen and (max-width: 768px) {
-  :deep(.ant-table) .ant-table-thead > tr > th,
-  :deep(.ant-table) .ant-table-tbody > tr > td {
-    padding: 4px 2px;
-    font-size: 13px;
-  }
-}
-
-/* 确保表头文字也能自动换行 */
-:deep(.ant-table) .ant-table-thead > tr > th {
-  white-space: normal;
-  word-break: break-word;
-}
-
-/* 允许单元格内容自动换行 */
-:deep(.ant-table) .ant-table-tbody > tr > td {
-  white-space: normal;
-  word-break: break-word;
-}
-
-@media screen and (min-width: 768px) {
-  .device-list-container {
-    padding: 16px;
-  }
-}
-
-.pl-4 {
-  padding-left: 1rem;
-}
-</style>
+<style scoped></style>
diff --git a/src/views/userInfo/cdrlrecords/index.vue b/src/views/userInfo/cdrlrecords/index.vue
new file mode 100644
index 0000000..ce14a0b
--- /dev/null
+++ b/src/views/userInfo/cdrlrecords/index.vue
@@ -0,0 +1,263 @@
+<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 { fetchCDRHistory } from '@/service/api/auth';
+defineOptions({
+  name: 'cdrlrecords'
+});
+const { t } = useI18n();
+
+// 定义记录类型
+interface CDRRecord {
+  id: number;
+  deviceName: string;
+  macAddress: string;
+  trafficUp: string;
+  trafficDown: string;
+  startTime: string;
+  endTime: string;
+}
+
+// 定义API返回的原始数据类型
+interface RawCDRRecord {
+  id: number;
+  clientName: string;
+  clientMac: string;
+  trafficUp: number;  // 字节数
+  trafficDown: number;  // 字节数
+  startTime: number;  // 时间戳
+  endTime: number;    // 时间戳
+}
+
+// CDR记录数据
+const cdrData = ref<CDRRecord[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0
+});
+
+// 展开行控制
+const expandedRowKeys = ref<number[]>([]);
+
+// 处理展开行变化
+function handleExpandChange(expanded: boolean, record: CDRRecord) {
+  if (expanded) {
+    expandedRowKeys.value = [record.id];
+  } else {
+    expandedRowKeys.value = [];
+  }
+}
+
+// 格式化流量数据的函数
+const formatTraffic = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
+}
+
+// 格式化时间戳
+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'
+  });
+}
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.cdrlrecords.devicename'),
+    dataIndex: 'deviceName',
+    key: 'deviceName',
+    width: '40%'
+  },
+  {
+    title: t('page.cdrlrecords.uptraffic'),
+    dataIndex: 'trafficUp',
+    key: 'trafficUp',
+    width: '30%',
+    align: 'right'
+  },
+  {
+    title: t('page.cdrlrecords.downtraffic'),
+    dataIndex: 'trafficDown',
+    key: 'trafficDown',
+    width: '30%',
+    align: 'right'
+  }
+];
+
+// 获取CDR记录数据
+async function getCDRHistory(page = pagination.value.current, pageSize = pagination.value.pageSize) {
+  loading.value = true;
+  try {
+    const { data, error } = await fetchCDRHistory({
+      pageNum: page,
+      pageSize: pageSize
+    });
+    if (!error && data) {
+      // 将原始数据映射为显示所需的格式
+      cdrData.value = data.rows.map((item: RawCDRRecord) => ({
+        id: item.id,
+        deviceName: item.clientName,
+        macAddress: item.clientMac,
+        trafficUp: formatTraffic(item.trafficUp),      // 格式化上传流量
+        trafficDown: formatTraffic(item.trafficDown),   // 格式化下载流量
+        startTime: formatTimestamp(item.startTime),     // 格式化开始时间
+        endTime: formatTimestamp(item.endTime)          // 格式化结束时间
+      }));
+      pagination.value.total = data.total;
+    }
+  } catch (err) {
+    console.error('Failed to fetch CDR history:', err);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 处理分页变化
+function handleTableChange(pag: any) {
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+  getCDRHistory(pag.current, pag.pageSize);
+}
+
+// 刷新设备列表
+async function handleRefresh() {
+  await getCDRHistory();
+}
+
+// 组件挂载时获取数据
+onMounted(() => {
+  getCDRHistory();
+});
+</script>
+
+<template>
+  <div class="device-list-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <HistoryOutlined />
+          <span>{{ t('page.cdrlrecords.cdr') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-button type="primary" :loading="loading" @click="handleRefresh">
+          <template #icon>
+            <span class="i-carbon:refresh"></span>
+          </template>
+          {{ t('page.cdrlrecords.refresh') }}
+        </a-button>
+      </template>
+
+      <a-table
+        :loading="loading"
+        :columns="columns"
+        :data-source="cdrData"
+        :row-key="(record: CDRRecord) => record.id"
+        :expanded-row-keys="expandedRowKeys"
+        @expand="handleExpandChange"
+        :pagination="{
+          current: pagination.current,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          showTotal: (total: number) => `共 ${total} 条`,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }"
+        @change="handleTableChange"
+      >
+        <template #expandedRowRender="{ record }">
+          <div class="pl-4">
+            <div>{{ t('page.cdrlrecords.mac') }}: {{ record.macAddress }}</div>
+            <div>{{ t('page.cdrlrecords.uptime') }}: {{ record.startTime }}</div>
+            <div>{{ t('page.cdrlrecords.lasttime') }}: {{ record.endTime }}</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;
+}
+
+: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%;
+}
+
+/* 使表格更紧凑的样式 */
+:deep(.ant-table) .ant-table-thead > tr > th,
+:deep(.ant-table) .ant-table-tbody > tr > td {
+  padding: 8px 4px;
+  font-size: 14px;
+}
+
+/* 在小屏幕下进一步压缩内边距 */
+@media screen and (max-width: 768px) {
+  :deep(.ant-table) .ant-table-thead > tr > th,
+  :deep(.ant-table) .ant-table-tbody > tr > td {
+    padding: 4px 2px;
+    font-size: 13px;
+  }
+}
+
+/* 确保表头文字也能自动换行 */
+:deep(.ant-table) .ant-table-thead > tr > th {
+  white-space: normal;
+  word-break: break-word;
+}
+
+/* 允许单元格内容自动换行 */
+:deep(.ant-table) .ant-table-tbody > tr > td {
+  white-space: normal;
+  word-break: break-word;
+}
+
+@media screen and (min-width: 768px) {
+  .device-list-container {
+    padding: 16px;
+  }
+}
+
+.pl-4 {
+  padding-left: 1rem;
+}
+</style>