feat:当前接入设备界面及中英适配

src/locales/langs/en-us.ts

@@ -2,8 +2,11 @@ const viewEn: any = {
   "view.endpoint": "endpoint",
   "view.endpoint_access": "current",
   "view.endpoint_records": "Historical",
+  "view.endpoint_cdrlrecords":"CDR records",
   "view.billing": "Billing",
   "view.billing_histories": "Historical",
+  "view.billing_Rechargehistory":"Recharge history",
+  "view.billing_Internetdetails":"Internet details",
   "view.set-meal": "Package",
   "view.userInfo":"User Information",
 };
@@ -535,6 +538,45 @@ const local: any = {
       Paid:'Paid',
       Unpaid:'Unpaid',
     },
+    Internetdetails:{
+      month:"month",
+      year:"year",
+      starttime:"Start Time",
+      totaltraffic:"Total Traffic",
+      fee:" Fee",
+      monthtraffic:"Month Total Traffic",
+    },
+    Rechargehistory:{
+      topupdate:"Top up date",
+      amount:"Amount",
+      Payment:"Payment Method",
+      recharge:"Recharge History",
+    },
+    cdrlrecords:{
+      devicename:"Device name",
+      uptraffic:"Traffic Up",
+      downtraffic:"Traffic Down",
+      uptime:"Up Time",
+      lasttime:"Last seen Time",
+      cdr:"CDR Records",
+    },
+    records:{
+      clientID:"Client ID",
+      clientname:"Client Name",
+      clienttype:"Client Type",
+      clientmac:"MAC",
+      starttime:"Start Time",
+      endtime:"End Time",
+      clienthistory:"Client history",
+      refresh:"Refresh",
+    },
+    access:{
+      devicename:"Device Name",
+      mac:"Mac",
+      speed:"Current Rate",
+      currentdevice:"The device is currently connected",
+      refresh:"Refresh",
+    },
   },
   form: {
     required: 'Cannot be empty',

src/locales/langs/zh-cn.ts

@@ -2,8 +2,11 @@ const viewZh: any = {
   "view.endpoint": "终端设备",
   "view.endpoint_access": "当前设备",
   "view.endpoint_records": "历史设备",
+  "view.endpoint_cdrlrecords":"cdr记录",
   "view.billing": "账单",
   "view.billing_histories": "历史查询",
+  "view.billing_Rechargehistory":"充值记录",
+  "view.billing_Internetdetails":"上网详单",
   "view.set-meal": "套餐",
   "view.userInfo":"个人信息"
 };
@@ -535,6 +538,45 @@ const local:any = {
       Paid:'已支付',
       Unpaid:'未支付',
     },
+    Internetdetails:{
+      month:"月",
+      year:"年",
+      starttime:"起始时间",
+      totaltraffic:"总流量",
+      fee:"费用",
+      monthtraffic:"月总流量",
+    },
+    Rechargehistory:{
+      topupdate:"充值日期",
+      amount:"充值金额",
+      Payment:"充值方式",
+      recharge:"充值记录",
+    },
+    cdrlrecords:{
+      devicename:"设备名称",
+      uptraffic:"上传流量",
+      downtraffic:"下载流量",
+      uptime:"接入时间",
+      lasttime:"断开时间",
+      cdr:"CDR记录",
+    },
+    records:{
+      clientID:"设备ID",
+      clientname:"设备名",
+      clienttype:"设备类型",
+      clientmac:"MAC地址",
+      starttime:"开始时间",
+      endtime:"结束时间",
+      clienthistory:"接入历史记录",
+      refresh:"刷新",
+    },
+    access:{
+      devicename:"设备名称",
+      mac:"mac地址",
+      speed:"当前速率",
+      currentdevice:"当前接入设备",
+      refresh:"刷新",
+    },
   },
   form: {
     required: '不能为空',

src/views/endpoint/records/index.vue

@@ -1,7 +1,297 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { TableColumnsType } from 'ant-design-vue'
+import { HistoryOutlined } from '@ant-design/icons-vue'
+import type { Dayjs } from 'dayjs'
+import {useI18n} from "vue-i18n";
+
+const  {t}  = useI18n();
+
+interface AccessRecord {
+  key: string
+  clientId: string
+  clientName: string
+  clientDeviceType: string
+  clientMac: string
+  startTime: string
+  endTime: string
+}
+
+const columns: TableColumnsType = [
+  {
+    title: t('page.records.clientID'),
+    dataIndex: 'clientId',
+    key: 'clientId',
+    width: 100,
+    responsive: ['md']
+  },
+  {
+    title: t('page.records.clientname'),
+    dataIndex: 'clientName',
+    key: 'clientName',
+    width: 90,
+    className: 'wrap-cell'
+  },
+  {
+    title: t('page.records.clienttype'),
+    dataIndex: 'clientDeviceType',
+    key: 'clientDeviceType',
+    width: 90,
+    responsive: ['lg']
+  },
+  {
+    title: t('page.records.clientmac'),
+    dataIndex: 'clientMac',
+    key: 'clientMac',
+    width: 140,
+    responsive: ['md']
+  },
+  {
+    title: t('page.records.starttime'),
+    dataIndex: 'startTime',
+    key: 'startTime',
+    width: 110,
+    ellipsis: true
+  },
+  {
+    title: t('page.records.endtime'),
+    dataIndex: 'endTime',
+    key: 'endTime',
+    width: 110,
+    ellipsis: true
+  }
+]
+
+// 添加一个存储所有记录的数组和当前显示记录的数组
+const allRecords = ref<AccessRecord[]>([
+  {
+    key: '1',
+    clientId: 'DEV001',
+    clientName: 'iPhone 13',
+    clientDeviceType: '手机',
+    clientMac: '00:11:22:33:44:55',
+    startTime: '2024-03-20 10:00:00',
+    endTime: '2024-03-20 12:30:00'
+  },
+  {
+    key: '2',
+    clientId: 'DEV002',
+    clientName: 'MacBook Pro',
+    clientDeviceType: '笔记本',
+    clientMac: '66:77:88:99:AA:BB',
+    startTime: '2024-03-20 14:00:00',
+    endTime: '2024-03-20 18:00:00'
+  }
+])
+
+const accessRecords = ref<AccessRecord[]>(allRecords.value)
+
+// 日期范围变更处理函数
+const onRangeChange = (
+  value: [Dayjs, Dayjs] | [string, string] | null,
+  dateStrings: [string, string]
+) => {
+  if (!value) {
+    // 如果清空日期范围，显示所有记录
+    accessRecords.value = allRecords.value
+    return
+  }
+
+  // 使用字符串数组进行过滤
+  const [startStr, endStr] = dateStrings
+
+  // 筛选在选定时间范围内的记录
+  accessRecords.value = allRecords.value.filter((record: AccessRecord) => {
+    const recordStart = new Date(record.startTime).getTime()
+    const recordEnd = new Date(record.endTime).getTime()
+    const filterStart = new Date(startStr).getTime()
+    const filterEnd = new Date(endStr).getTime()
+
+    // 记录的时间范围与选择的时间范围有重叠
+    return !(recordEnd < filterStart || recordStart > filterEnd)
+  })
+}
+
+// 刷新数据的方法
+const refreshData = () => {
+
+  // 模拟刷新操作
+  accessRecords.value = allRecords.value
+  console.log('刷新数据')
+}
+
+// 确认选择时间范围
+const onRangeOk = (dates: [Dayjs, Dayjs] | [string, string]) => {
+  console.log('确认选择时间范围: ', dates)
+}
+</script>
 
 <template>
-  <div>当前接入AP接入记录</div>
+  <div class="records-container">
+    <a-card :bordered="false">
+      <template #title>
+        <div class="card-title">
+          <HistoryOutlined />
+          <span>{{ t('page.records.clienthistory') }}</span>
+        </div>
+      </template>
+
+      <template #extra>
+        <a-space>
+          <a-range-picker
+            style="margin-right: 8px"
+            :show-time="{ format: 'HH:mm' }"
+            format="YYYY-MM-DD HH:mm"
+            :placeholder="['开始时间', '结束时间']"
+            @change="onRangeChange"
+            @ok="onRangeOk"
+          />
+          <a-button type="primary" @click="refreshData">
+            <template #icon>
+              <span class="i-carbon:refresh"></span>
+            </template>
+            {{ t('page.records.refresh') }}
+          </a-button>
+        </a-space>
+      </template>
+
+      <a-table
+        :columns="columns"
+        :data-source="accessRecords"
+        :scroll="{ x: 'max-content' }"
+        size="small"
+        :pagination="{
+          total: accessRecords.length,
+          pageSize: 10,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          size: 'small',
+          showTotal: (total) => `共 ${total} 条记录`
+        }"
+      >
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.key === 'clientDeviceType'">
+            <a-tag :color="text === '手机' ? 'blue' : 'green'">{{ text }}</a-tag>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.records-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) {
+  font-size: 14px;
+}
+
+:deep(.wrap-cell) {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.2;
+}
+
+@media screen and (max-width: 768px) {
+  .records-container {
+    padding: 4px;
+  }
+
+  :deep(.ant-card-head-wrapper) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  :deep(.ant-card-extra) {
+    margin-left: 0;
+    margin-top: 8px;
+    width: 100%;
+  }
+
+  :deep(.ant-picker) {
+    width: 100%;
+  }
+
+  :deep(.ant-space) {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  :deep(.ant-space-item) {
+    width: 100%;
+    margin-right: 0 !important;
+  }
+
+  :deep(.ant-btn) {
+    width: 100%;
+  }
+
+  :deep(.ant-table) {
+    font-size: 12px;
+  }
+
+  :deep(.ant-table th),
+  :deep(.ant-table td:not(.wrap-cell)) {
+    padding: 8px 4px !important;
+    white-space: nowrap;
+  }
+
+  :deep(.wrap-cell) {
+    padding: 4px !important;
+  }
+
+  :deep(.ant-tag) {
+    margin-right: 0;
+    padding: 0 4px;
+  }
+
+  :deep(.ant-picker-panels) {
+    flex-direction: column;
+  }
+
+  :deep(.ant-picker-panel) {
+    width: auto !important;
+  }
+
+  :deep(.ant-picker-datetime-panel) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :deep(.ant-picker-time-panel) {
+    width: auto !important;
+    border-left: none !important;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .records-container {
+    padding: 16px;
+  }
+}
+</style>