150 lines
3.3 KiB
Vue
150 lines
3.3 KiB
Vue
<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>
|