fe.wfc.user/src/views/billing/cdrlrecords/index.vue

<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';
import {useRouter} from "vue-router";
defineOptions({
  name: 'cdrlrecords'
});
const { t } = useI18n();
const router = useRouter();
const handleBack = () => {
  router.push('/billing/billservice');
};
// 定义记录类型
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 @click="handleBack">
          {{ t('page.login.common.back') }}
        </a-button>
        <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>