feat:cdr界面

src/service/api/auth.ts

@@ -147,4 +147,20 @@ export function deletePackage(id: string) {
     method: 'delete'
   });
 }
+/** Get CDR history list */
+export function fetchCdrHistory(params: Api.Auth.CdrHistoryParams) {
+  return request<Api.Auth.CdrHistoryResponse>({
+    url: '/system/cdr/pageHistory',
+    method: 'get',
+    params
+  });
+}
+/** Get bill list */
+export function fetchBillList(params: Api.Auth.BillParams) {
+  return request<Api.Auth.BillResponse>({
+    url: '/system/order/page',
+    method: 'get',
+    params
+  });
+}
 

src/typings/api.d.ts

@@ -213,6 +213,63 @@ declare namespace Api {
       clientNum: number;
       packageEnable: boolean;
     }
+    // CDR 话单查询参数
+    interface CdrHistoryParams {
+      pageNum: number;
+      pageSize: number;
+      userName?: string;
+      clientName?: string;
+      clientMac?: string;
+      startTime?: string;
+      endTime?: string;
+    }
+
+    // CDR 话单信息
+    interface CdrHistory {
+      id: string;
+      userId: number;
+      userName: string;
+      clientName: string;
+      clientMac: string;
+      trafficUp: number;
+      trafficDown: number;
+      startTime: string;
+      endTime: string;
+      duration: number;
+    }
+
+    // CDR 话单响应
+    interface CdrHistoryResponse {
+      rows: CdrHistory[];
+      total: number;
+    }
+
+    // 账单查询参数
+    interface BillParams {
+      pageNum: number;
+      pageSize: number;
+      userName?: string;
+      type?: number;
+      status?: number;
+    }
+
+    // 账单信息
+    interface BillInfo {
+      id: string;
+      userId: number;
+      userName: string;
+      type: number;
+      packageName: string;
+      orderAmount: number;
+      status: number;
+      createTime: string;
+    }
+
+    // 账单响应
+    interface BillResponse {
+      rows: BillInfo[];
+      total: number;
+    }
   }
 
   /**

src/typings/auto-imports.d.ts

@@ -121,6 +121,8 @@ declare global {
   const exportJobLog: typeof import('../service/api/jobLog')['exportJobLog']
   const extendRef: typeof import('@vueuse/core')['extendRef']
   const extractTabsByAllRoutes: typeof import('../store/modules/tab/shared')['extractTabsByAllRoutes']
+  const fetchBillList: typeof import('../service/api/auth')['fetchBillList']
+  const fetchCdrHistory: typeof import('../service/api/auth')['fetchCdrHistory']
   const fetchCustomBackendError: typeof import('../service/api/auth')['fetchCustomBackendError']
   const fetchGetAllPages: typeof import('../service/api/menu')['fetchGetAllPages']
   const fetchGetConstantRoutes: typeof import('../service/api/route')['fetchGetConstantRoutes']

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';
-
+import { fetchCdrHistory } from '@/service/api/auth';
-// 定义话单信息接口
+import { formatStorage } from '@/utils/units';
-interface CdrInfo {
-  id: number;
-  callId: string;
-  callerNumber: string;
-  startTime: string;
-  endTime: string;
-  duration: number;
-  recordingUrl?: string;
-}
 
 // 搜索模型
 type SearchModel = {
   pageNum: number;
   pageSize: number;
-  callId?: string;
+  userName?: string;
-  callerNumber?: string;
+  clientName?: string;
-  startTime?: string;
-  endTime?: 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));
+  try {
-
+    const response = await fetchCdrHistory(params);
-  let filteredCdrs = [...mockCdrs];
+    console.log('API Response:', response);
-
+    const rows = response.data?.rows || [];
-  // 根据搜索条件过滤
+    const total = response.data?.total || 0;
-  if (params.callId) {
+    console.log('Processed data:', { rows, total });
-    filteredCdrs = filteredCdrs.filter(cdr =>
+    return {
-      cdr.callId.toLowerCase().includes(params.callId!.toLowerCase())
+      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',
+      key: 'userName',
-      dataIndex: 'callId',
+      dataIndex: 'userName',
-      title: '话单ID',
+      title: '用户名',
       align: 'center',
       width: 150
     },
     {
-      key: 'callerNumber',
+      key: 'clientName',
-      dataIndex: 'callerNumber',
+      dataIndex: 'clientName',
-      title: '主叫号码',
+      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>

src/views/user-center/cdr/modules/cdr-search.vue

@@ -2,31 +2,22 @@
 import { ref, computed } from 'vue';
 import { Form } from 'ant-design-vue';
 import type { FormInstance } from 'ant-design-vue';
-import dayjs, { Dayjs } from 'dayjs';
-
-// 修改类型定义以匹配 ARangePicker 的期望类型
-type TimeRangeValue = [Dayjs, Dayjs] | [string, string] | undefined;
 
 interface SearchModel {
   pageNum: number;
   pageSize: number;
-  callId?: string;
+  userName?: string;
-  callerNumber?: string;
+  clientName?: string;
-  startTime?: string;
-  endTime?: string;
 }
 
-// 修改 props 定义
 const props = withDefaults(defineProps<{
   model: SearchModel;
 }>(), {
   model: () => ({
     pageNum: 1,
     pageSize: 10,
-    callId: '',
+    userName: '',
-    callerNumber: '',
+    clientName: ''
-    startTime: '',
-    endTime: ''
   })
 });
 
@@ -44,22 +35,6 @@ const formModel = computed({
   set: (val: SearchModel) => emit('update:model', val)
 });
 
-// 修改 timeRange 的实现
-const timeRange = computed({
-  get() {
-    const { startTime, endTime } = formModel.value;
-    if (!startTime || !endTime) return undefined;
-    return [dayjs(startTime), dayjs(endTime)] as [Dayjs, Dayjs];
-  },
-  set(val: TimeRangeValue) {
-    emit('update:model', {
-      ...formModel.value,
-      startTime: val ? (typeof val[0] === 'string' ? val[0] : val[0].format('YYYY-MM-DD HH:mm:ss')) : '',
-      endTime: val ? (typeof val[1] === 'string' ? val[1] : val[1].format('YYYY-MM-DD HH:mm:ss')) : ''
-    });
-  }
-});
-
 function handleReset() {
   resetFields();
   emit('reset');
@@ -78,34 +53,20 @@ function handleSearch() {
       layout="inline"
       class="flex flex-wrap gap-16px items-center"
     >
-      <AFormItem label="话单ID" name="callId">
+      <AFormItem label="用户名">
         <AInput
-          v-model:value="formModel.callId"
+          v-model:value="formModel.userName"
-          placeholder="请输入话单ID"
+          placeholder="请输入用户名"
           allow-clear
         />
       </AFormItem>
-      <AFormItem label="主叫号码" name="callerNumber">
+      <AFormItem label="设备名">
         <AInput
-          v-model:value="formModel.callerNumber"
+          v-model:value="formModel.clientName"
-          placeholder="请输入主叫号码"
+          placeholder="请输入设备名"
           allow-clear
         />
       </AFormItem>
-      <AFormItem label="连接时长">
-        <ARangePicker
-          v-model:value="timeRange"
-          show-time
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          :style="{
-            width: '200px',
-            // 可以添加其他样式
-            // maxWidth: '100%',
-            // minWidth: '300px'
-          }"
-        />
-      </AFormItem>
       <AFormItem class="flex-1 justify-end">
         <ASpace>
           <AButton @click="handleReset">重置</AButton>