feat:cdr界面

src/views/user-center/cdr/index.vue

@@ -4,54 +4,17 @@ import { SimpleScrollbar } from '~/packages/materials/src';
 import CdrSearch from './modules/cdr-search.vue';
 import { computed, shallowRef } from 'vue';
 import { useElementSize } from '@vueuse/core';
-
-// 定义话单信息接口
-interface CdrInfo {
-  id: number;
-  callId: string;
-  callerNumber: string;
-  startTime: string;
-  endTime: string;
-  duration: number;
-  recordingUrl?: string;
-}
+import { fetchCdrHistory } from '@/service/api/auth';
+import { formatStorage } from '@/utils/units';
 
 // 搜索模型
 type SearchModel = {
   pageNum: number;
   pageSize: number;
-  callId?: string;
-  callerNumber?: string;
-  startTime?: string;
-  endTime?: string;
+  userName?: string;
+  clientName?: string;
 };
 
-// 模拟话单数据
-const mockCdrs: CdrInfo[] = [
-  {
-    id: 1,
-    callId: 'CALL2024031501',
-    callerNumber: '13800138000',
-    startTime: '2024-03-15 10:00:00',
-    endTime: '2024-03-15 10:05:30',
-    duration: 330,
-
-    recordingUrl: 'https://example.com/recording/1.wav'
-  },
-  {
-    id: 2,
-    callId: 'CALL2024031502',
-    callerNumber: '13800138001',
-    startTime: '2024-03-15 11:00:00',
-    endTime: '2024-03-15 11:00:15',
-    duration: 15,
-
-  }
-];
-
-
-
-
 // 格式化通话时长
 const formatDuration = (seconds: number) => {
   const hours = Math.floor(seconds / 3600);
@@ -67,34 +30,28 @@ const formatDuration = (seconds: number) => {
 };
 
 const doGetCdrInfo = async (params: SearchModel) => {
-  await new Promise(resolve => setTimeout(resolve, 500));
-
-  let filteredCdrs = [...mockCdrs];
-
-  // 根据搜索条件过滤
-  if (params.callId) {
-    filteredCdrs = filteredCdrs.filter(cdr =>
-      cdr.callId.toLowerCase().includes(params.callId!.toLowerCase())
-    );
+  try {
+    const response = await fetchCdrHistory(params);
+    console.log('API Response:', response);
+    const rows = response.data?.rows || [];
+    const total = response.data?.total || 0;
+    console.log('Processed data:', { rows, total });
+    return {
+      data: {
+        rows,
+        total
+      }
+    };
+  } catch (error) {
+    console.error('API Error:', error);
+    return {
+      data: {
+        rows: [],
+        total: 0
+      },
+      error
+    };
   }
-  if (params.callerNumber) {
-    filteredCdrs = filteredCdrs.filter(cdr =>
-      cdr.callerNumber.includes(params.callerNumber!)
-    );
-  }
-
-
-  const startIndex = (params.pageNum - 1) * params.pageSize;
-  const endIndex = startIndex + params.pageSize;
-  const paginatedCdrs = filteredCdrs.slice(startIndex, endIndex);
-
-  return {
-    data: {
-      rows: paginatedCdrs,
-      total: filteredCdrs.length
-    },
-    error: null
-  };
 };
 
 const wrapperEl = shallowRef<HTMLElement | null>(null);
@@ -113,42 +70,80 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
     pageSize: 10
   } as SearchModel,
   rowKey: 'id',
-  columns: (): AntDesign.TableColumn<AntDesign.TableDataWithIndex<CdrInfo>>[] => [
+  pagination: true,
+  columns: (): AntDesign.TableColumn<Api.Auth.CdrHistory>[] => [
     {
-      key: 'callId',
-      dataIndex: 'callId',
-      title: '话单ID',
+      key: 'userName',
+      dataIndex: 'userName',
+      title: '用户名',
       align: 'center',
       width: 150
     },
     {
-      key: 'callerNumber',
-      dataIndex: 'callerNumber',
-      title: '主叫号码',
+      key: 'clientName',
+      dataIndex: 'clientName',
+      title: '设备名',
       align: 'center',
       width: 120
     },
+    {
+      key: 'clientMac',
+      dataIndex: 'clientMac',
+      title: '设备MAC地址',
+      align: 'center',
+      width: 120
+    },
+    {
+      key: 'trafficUp',
+      dataIndex: 'trafficUp',
+      title: '上行流量',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => {
+        const { value, unit } = formatStorage(text);
+        return `${value.toFixed(2)} ${unit}`;
+      }
+    },
+    {
+      key: 'trafficDown',
+      dataIndex: 'trafficDown',
+      title: '下行流量',
+      align: 'center',
+      width: 120,
+      customRender: ({ text }) => {
+        const { value, unit } = formatStorage(text);
+        return `${value.toFixed(2)} ${unit}`;
+      }
+    },
     {
       key: 'startTime',
       dataIndex: 'startTime',
       title: '开始时间',
       align: 'center',
-      width: 180
+      width: 180,
+      customRender: ({ text }) => {
+        const timestamp = String(text).length === 13 ? Number(text) : Number(text) * 1000;
+        return new Date(timestamp).toLocaleString();
+      }
     },
     {
       key: 'endTime',
       dataIndex: 'endTime',
       title: '结束时间',
       align: 'center',
-      width: 180
+      width: 180,
+      customRender: ({ text }) => {
+        const timestamp = String(text).length === 13 ? Number(text) : Number(text) * 1000;
+        return new Date(timestamp).toLocaleString();
+      }
     },
     {
       key: 'duration',
       dataIndex: 'duration',
-      title: '连接时长',
+      title: '时长',
       align: 'center',
       width: 120,
-      customRender: ({ record }: { record: CdrInfo }) => formatDuration(record.duration)
+      customRender: ({ text }) => formatDuration(text)
     },
   ]
 });
@@ -173,7 +168,7 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
             v-model:columns="columnChecks"
             :loading="loading"
             :show-delete="false"
-            :show-add="false"
+            :not-show-add="true"
             @refresh="getData"
           />
         </template>
@@ -184,9 +179,20 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
           :loading="loading"
           row-key="id"
           size="small"
-          :pagination="mobilePagination"
+          :pagination="{
+            ...mobilePagination,
+            total: mobilePagination.total,
+            current: searchParams.pageNum,
+            pageSize: searchParams.pageSize,
+            showTotal: (total: number) => `共 ${total} 条`
+          }"
           :scroll="scrollConfig"
           class="h-full"
+          @change="(pagination) => {
+            searchParams.pageNum = pagination.current;
+            searchParams.pageSize = pagination.pageSize;
+            getData();
+          }"
         />
       </ACard>
     </div>