feat:CDR记录界面及路径

src/router/elegant/routes.ts

@@ -224,7 +224,7 @@ export const customRoutes: GeneratedRoute[] = [
       i18nKey: 'view.endpoint',
       icon: 'icon-park-outline:all-application',
       order: 11,
-      hideInMenu: true
+      //hideInMenu: true
     },
     children: [
       {
@@ -249,6 +249,16 @@ export const customRoutes: GeneratedRoute[] = [
           order: 3,
         }
       },
+      {
+        name: 'endpoint_cdrlrecords',
+        path: '/endpoint/cdrlrecords',
+        component: 'view.endpoint_cdrlrecords',
+        meta: {
+          title: 'cdr记录',
+          i18nKey: 'view.endpoint_cdrlrecords',
+          icon: 'material-symbols:filter-list-off',
+          order: 4
+        },}
     ]
   },
   {
@@ -260,7 +270,7 @@ export const customRoutes: GeneratedRoute[] = [
       i18nKey: 'view.billing',
       icon: 'icon-park-outline:all-application',
       order: 13,
-      hideInMenu: true
+      //hideInMenu: true
     },
     children: [
       {
@@ -274,6 +284,28 @@ export const customRoutes: GeneratedRoute[] = [
           order: 2
         },
       },
+      {
+        name: 'billing_Rechargehistory',
+        path: '/billing/Rechargehistory',
+        component: 'view.billing_Rechargehistory',
+        meta: {
+          title: '充值记录',
+          i18nKey: 'view.billing_Rechargehistory',
+          icon: 'material-symbols:filter-list-off',
+          order: 7
+        },
+      },
+      {
+        name: 'billing_Internetdetails',
+        path: '/billing/Internetdetails',
+        component: 'view.billing_Internetdetails',
+        meta: {
+          title: '上网详单',
+          i18nKey: 'view.billing_Internetdetails',
+          icon: 'material-symbols:filter-list-off',
+          order: 8
+        },
+      },
     ]
   },
   {
@@ -285,18 +317,41 @@ export const customRoutes: GeneratedRoute[] = [
       i18nKey: 'view.set-meal',
       icon: 'icon-park-outline:all-application',
       order: 15,
-      hideInMenu: true
+      //hideInMenu: true
     }
   },
   {
     name: 'user-info',
     path: '/userInfo',
     component: 'layout.base$view.userInfo',
+    redirect: '/userInfo/index',
     meta: {
       title: '个人信息',
       i18nKey: 'view.userInfo',
       icon: 'icon-park-outline:all-application',
       order: 16,
+    },
+    children: [
+      {
+        name: 'user-info_index',
+        path: 'index',
+        component: 'view.userInfo.index',
+        meta: {
+          title: '个人信息',
+          i18nKey: 'view.userInfo_index',
+          hideInMenu: true
         }
       },
+      {
+        name: 'user-info_profile',
+        path: 'profile',
+        component: 'view.userInfo.profile',
+        meta: {
+          title: '个人资料',
+          i18nKey: 'view.userInfo_profile',
+          hideInMenu: true
+        }
+      }
+    ]
+  },
 ]

src/views/endpoint/cdrlrecords/index.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { Table as ATable } from 'ant-design-vue'
+import {useI18n} from "vue-i18n";
+
+const  {t}  = useI18n();
+
+interface CDRRecord {
+  id: number
+  ap_name: string
+  traffic_up: number
+  traffic_down: number
+  up_time: string
+  last_seen_time: string
+}
+
+// 模拟数据
+const cdrData = ref<CDRRecord[]>([
+  {
+    id: 1,
+    ap_name: 'AP-Office-01',
+    traffic_up: 1024,
+    traffic_down: 2048,
+    up_time: '2024-03-15 08:00:00',
+    last_seen_time: '2024-03-15 17:30:00'
+  },
+  {
+    id: 2,
+    ap_name: 'AP-Meeting-02',
+    traffic_up: 512,
+    traffic_down: 1536,
+    up_time: '2024-03-15 09:15:00',
+    last_seen_time: '2024-03-15 16:45:00'
+  },
+  // 可以添加更多测试数据...
+])
+
+// 格式化流量数据的函数
+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`
+}
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.cdrlrecords.devicename'),
+    dataIndex: 'ap_name',
+    key: 'ap_name',
+    width: 140
+  },
+  {
+    title: t('page.cdrlrecords.uptraffic'),
+    dataIndex: 'traffic_up',
+    key: 'traffic_up',
+    width: 100,
+    customRender: ({ text }) => formatTraffic(text)
+  },
+  {
+    title: t('page.cdrlrecords.downtraffic'),
+    dataIndex: 'traffic_down',
+    key: 'traffic_down',
+    width: 100,
+    customRender: ({ text }) => formatTraffic(text)
+  },
+  {
+    title: t('page.cdrlrecords.uptime'),
+    dataIndex: 'up_time',
+    key: 'up_time',
+    width: 160
+  },
+  {
+    title: t('page.cdrlrecords.lasttime'),
+    dataIndex: 'last_seen_time',
+    key: 'last_seen_time',
+    width: 160
+  }
+]
+</script>
+
+<template>
+  <div class="p-4">
+    <div class="text-lg font-bold mb-4">{{t('page.cdrlrecords.cdr')}}</div>
+    <div class="table-container">
+      <ATable
+        :columns="columns"
+        :data-source="cdrData"
+        :row-key="(record: CDRRecord) => record.id"
+        :pagination="{
+          pageSize: 10,
+          total: cdrData.length,
+          showTotal: (total: number) => `共 ${total} 条`,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          pageSizeOptions: ['10', '20', '50', '100']
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.p-4 {
+  padding: 1rem;
+}
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.text-lg {
+  font-size: 1.125rem;
+}
+.font-bold {
+  font-weight: bold;
+}
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+/* 使表格更紧凑的样式 */
+: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;
+}
+</style>