fix:cdr记录界面路径修改以及组件封装
This commit is contained in:
zhongzm
@@ -1,261 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue'
|
import cdrlrecords from '@/views/userInfo/cdrlrecords/index.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();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="device-list-container">
|
<cdrlrecords/>
|
||||||
<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>
|
</template>
|
||||||
|
<style scoped></style>
|
||||||
<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>
|
|
||||||
|
|||||||
263
src/views/userInfo/cdrlrecords/index.vue
Normal file
263
src/views/userInfo/cdrlrecords/index.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user