OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat: SMF CDR数据列表展示和导出，未进行多语言处理

Browse Source
This commit is contained in:
TsMask
2024-06-11 16:23:57 +08:00
parent d88cec34df
commit 5133d09ec2
2 changed files with 521 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/neData/smf.ts
View File

@@ -5,10 +5,38 @@ import { request } from '@/plugins/http-fetch';
* @param query 查询参数
* @returns object
*/
export function listIMSDataCDR(query: Record<string, any>) {
export function listSMFDataCDR(query: Record<string, any>) {
return request({
url: '/neData/smf/cdr/list',
method: 'get',
params: query,
});
}
/**
* SMF-CDR会话删除
* @param id 信息ID
* @returns object
*/
export function delSMFDataCDR(cdrIds: string | number) {
return request({
url: `/neData/smf/cdr/${cdrIds}`,
method: 'delete',
timeout: 60_000,
});
}
/**
* SMF-CDR会话列表导出
* @param data 查询列表条件
* @returns object
*/
export function exportSMFDataCDR(data: Record<string, any>) {
return request({
url: '/neData/smf/cdr/export',
method: 'post',
data,
responseType: 'blob',
timeout: 60_000,
});
}

680
src/views/dashboard/smfCDR/index.vue
View File

@@ -1,40 +1,43 @@
<script setup lang="ts">
import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { Modal, message } from 'ant-design-vue/lib';
import { SizeType } from 'ant-design-vue/lib/config-provider';
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
import { ColumnsType } from 'ant-design-vue/lib/table';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useDictStore from '@/store/modules/dict';
import { listIMSDataCDR } from '@/api/neData/smf';
import { WS } from '@/plugins/ws-websocket';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import {
delSMFDataCDR,
exportSMFDataCDR,
listSMFDataCDR,
} from '@/api/neData/smf';
import { parseDateToStr } from '@/utils/date-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import PQueue from 'p-queue';
import saveAs from 'file-saver';
const { t } = useI18n();
const { getDict } = useDictStore();
const ws = new WS();
const queue = new PQueue({ concurrency: 1, autoStart: true });
/**字典数据 */
let dict: {
/**CDR SIP响应代码类别类型 */
cdrSipCode: DictType[];
/**CDR 呼叫类型 */
cdrCallType: DictType[];
} = reactive({
cdrSipCode: [],
cdrCallType: [],
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: 'SMF',
neId: '001',
recordType: 'MOC',
subscriberID: '',
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
/**结束时间 */
endTime: '',
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -43,28 +46,19 @@ let queryParams = reactive({
/**查询参数重置 */
function fnQueryReset() {
recordTypes.value = ['MOC'];
queryParams = Object.assign(queryParams, {
recordType: 'MOC',
subscriberID: '',
startTime: '',
endTime: '',
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
}
/**记录类型 */
const recordTypes = ref<string[]>(['MOC']);
/**查询记录类型变更 */
function fnQueryRecordTypeChange(value: any) {
if (Array.isArray(value)) {
queryParams.recordType = value.join(',');
}
}
/**表格状态类型 */
type TabeStateType = {
/**加载等待 */
@@ -97,57 +91,122 @@ let tableColumns: ColumnsType = [
width: 100,
},
{
title: 'Record Type',
title: 'Charging ID', // 计费ID
dataIndex: 'cdrJSON',
align: 'left',
},
{
title: 'Charging ID',
dataIndex: 'chargingId',
key: 'chargingId',
align: 'center',
width: 100,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.chargingID;
},
},
{
title: 'Subscriber ID',
dataIndex: 'subscriberId',
key: 'subscriberId',
align: 'center',
width: 120,
title: 'Subscriber ID Data', // 用户 ID 数据
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.subscriberIdentifier?.subscriptionIDData;
},
},
{
title: 'Duration',
dataIndex: 'duration',
key: 'duration',
align: 'center',
title: 'Subscriber ID Type', // 用户 ID 类型
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.subscriberIdentifier?.subscriptionIDType;
},
},
{
title: 'Data Volume Uplink',
dataIndex: 'dataVolumeUplink',
key: 'dataVolumeUplink',
align: 'center',
title: 'Data Volume Uplink', // 数据量上行链路
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
return 0;
}
return usedUnitContainer[0].dataVolumeUplink;
},
},
{
title: 'Data Volume Downlink',
dataIndex: 'dataVolumeDownlink',
key: 'dataVolumeDownlink',
align: 'center',
title: 'Data Volume Downlink', // 数据量下行链路
dataIndex: 'cdrJSON',
align: 'left',
width: 180,
customRender(opt) {
const cdrJSON = opt.value;
const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
return 0;
}
return usedUnitContainer[0].dataVolumeDownlink;
},
},
{
title: 'DataTotal Volume',
dataIndex: 'dataTotalVolume',
align: 'center',
title: 'Data Total Volume', // 数据总量
dataIndex: 'cdrJSON',
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
const usedUnitContainer = listOfMultipleUnitUsage[0].usedUnitContainer;
if (!Array.isArray(usedUnitContainer) || usedUnitContainer.length < 1) {
return 0;
}
return usedUnitContainer[0].dataTotalVolume;
},
},
{
title: 'pduAddress',
key: 'pduAddress',
dataIndex: 'pduAddress',
align: 'center',
title: 'Duration', // 持续时间
dataIndex: 'cdrJSON',
align: 'left',
width: 100,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.duration;
},
},
{
title: 'createdAt',
dataIndex: 'createdAt',
align: 'center',
title: 'Invocation Time', // 调用时间
dataIndex: 'cdrJSON',
align: 'left',
width: 250,
customRender(opt) {
const cdrJSON = opt.value;
return cdrJSON.invocationTimestamp;
},
},
{
title: t('common.operate'),
key: 'id',
align: 'left',
},
];
@@ -195,37 +254,53 @@ type ModalStateType = {
confirmLoading: boolean;
/**最大ID值 */
maxId: number;
/**表单数据 */
from: Record<string, any>;
/**标题 */
title: string;
/**详细框是否显示 */
visibleByView: boolean;
};
/**对话框对象信息状态 */
let modalState: ModalStateType = reactive({
confirmLoading: false,
maxId: 0,
from: {
iPV4dynamicAddressFlag: 'true',
iPv6dynamicPrefixFlag: 'false',
pDUIPv4Address: '',
pDUIPv6AddresswithPrefix: '',
},
title: 'View',
visibleByView: false,
});
/**
* 对话框弹出显示为 查看
* @param row 单行记录信息
* 记录删除
* @param id 编号
*/
function fnModalVisibleByVive(row: Record<string, any>) {
modalState.from = Object.assign(modalState.from, row);
modalState.from.pduAddress = JSON.parse(row.pduAddress);
modalState.title = `${row.subscriberID}`;
modalState.visibleByView = true;
function fnRecordDelete(id: string) {
if (!id || modalState.confirmLoading) return;
let msg = id;
if (id === '0') {
msg = `${id}... ${tableState.selectedRowKeys.length}`;
id = tableState.selectedRowKeys.join(',');
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.cdr.delTip', { msg }),
onOk() {
modalState.confirmLoading = true;
const hide = message.loading(t('common.loading'), 0);
delSMFDataCDR(id)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
fnGetList(1);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**查询列表, pageNum初始页数 */
@@ -235,65 +310,150 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
listIMSDataCDR(toRaw(queryParams)).then(res => {
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listSMFDataCDR(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
/**测试数据 */
// res.rows = [
// {
// id: '12',
// neType: 'SMF',
// neName: 'SMF_001',
// rmUID: '4400HX1SMF001',
// timestamp: 1700020424,
// recordType: '"21212"',
// chargingID: '82',
// subscriberID: '"82"',
// duration: '68',
// dataVolumeUplink: '[45]',
// dataVolumeDownlink: '[67]',
// dataTotalVolume: '[5]',
// pduAddress:
// '{"iPV4dynamicAddressFlag": true, "iPv6dynamicPrefixFlag":false, "pDUIPv4Address":"192.168.2.219","pDUIPv6AddresswithPrefix": ""}',
// createdAt: '2024-05-27T16:41:02Z',
// },
// ];
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
tableState.data = res.rows;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
}
try {
cdrJSON = JSON.parse(cdrJSON);
Reflect.set(item, 'cdrJSON', cdrJSON);
} catch (error) {
console.error(error);
Reflect.set(item, 'cdrJSON', {});
}
return item;
});
// 取最大值ID用作实时累加
if (res.total > 0) {
modalState.maxId = Number(res.rows[0].id);
}
}
tableState.loading = false;
});
}
/**
* 对话框弹出关闭执行函数
* 进行表达规则校验
*/
function fnModalCancel() {
modalState.visibleByView = false;
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([getDict('cdr_sip_code'), getDict('cdr_call_type')])
.then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.cdrSipCode = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.cdrCallType = resArr[1].value;
/**列表导出 */
function fnExportList() {
if (modalState.confirmLoading) return;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.dashboard.cdr.exportTipSMF'),
onOk() {
const hide = message.loading(t('common.loading'), 0);
const querys = toRaw(queryParams);
querys.pageSize = 10000;
exportSMFDataCDR(querys)
.then(res => {
if (res.code === RESULT_CODE_SUCCESS) {
message.success({
content: t('common.operateOk'),
duration: 3,
});
saveAs(res.data, `smf_cdr_event_export_${Date.now()}.xlsx`);
} else {
message.error({
content: `${res.msg}`,
duration: 3,
});
}
})
.finally(() => {
hide();
modalState.confirmLoading = false;
});
},
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
/**
* 实时数据
*/
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
// 建立链接
const options: OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* CDR会话事件-SMF (GroupID:1006)
*/
subGroupID: '1006',
},
onmessage: wsMessage,
onerror: wsError,
};
ws.connect(options);
} else {
ws.close();
}
}
/**接收数据后回调 */
function wsError(ev: any) {
// 接收数据后回调
console.error(ev);
}
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
if (code === RESULT_CODE_ERROR) {
console.warn(res.msg);
return;
}
// 订阅组信息
if (!data?.groupId) {
return;
}
// cdrEvent CDR会话事件
if (data.groupId === '1006') {
const cdrEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
tableState.data.unshift({
id: modalState.maxId,
neType: cdrEvent.neType,
neName: cdrEvent.neName,
rmUID: cdrEvent.rmUID,
timestamp: cdrEvent.timestamp,
cdrJSON: cdrEvent.CDR,
});
tablePagination.total += 1;
if (tableState.data.length > 100) {
tableState.data.pop();
}
await new Promise(resolve => setTimeout(resolve, 800));
});
}
}
onMounted(() => {
// 获取列表数据
fnGetList();
});
});
onBeforeUnmount(() => {
if (ws.state() !== -1) {
@@ -312,30 +472,32 @@ onBeforeUnmount(() => {
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.recordType')"
name="recordType "
>
<a-select
v-model:value="recordTypes"
mode="multiple"
:options="
['MOC', 'MTC', 'MOSM', 'MTSM'].map(v => ({ value: v }))
"
:placeholder="t('common.selectPlease')"
@change="fnQueryRecordTypeChange"
></a-select>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item label="Subscriber ID" name="subscriberID">
<a-col :lg="4" :md="12" :xs="24">
<a-form-item label="Subscriber ID" name="calledParty ">
<a-input
v-model:value="queryParams.subscriberID"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="40"
></a-input>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
value-format="x"
style="width: 100%"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
@@ -356,6 +518,46 @@ onBeforeUnmount(() => {
<a-card :bordered="false" :body-style="{ padding: '0px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>
<a-space :size="8" align="center">
<a-popconfirm
placement="bottomLeft"
:title="
!realTimeData
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
"
ok-text="Yes"
cancel-text="No"
@confirm="fnRealTime()"
>
<a-button type="primary" :danger="realTimeData">
<template #icon><FundOutlined /> </template>
{{
!realTimeData
? t('views.dashboard.cdr.realTimeDataStart')
: t('views.dashboard.cdr.realTimeDataStop')
}}
</a-button>
</a-popconfirm>
<a-button
type="default"
danger
:disabled="tableState.selectedRowKeys.length <= 0"
:loading="modalState.confirmLoading"
@click.prevent="fnRecordDelete('0')"
>
<template #icon><DeleteOutlined /></template>
{{ t('common.deleteText') }}
</a-button>
<a-button type="dashed" @click.prevent="fnExportList()">
<template #icon><ExportOutlined /></template>
{{ t('common.export') }}
</a-button>
</a-space>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
@@ -420,66 +622,156 @@ onBeforeUnmount(() => {
}"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'callType'">
<DictTag
:options="dict.cdrCallType"
:value="record.cdrJSON.callType"
/>
</template>
<template v-if="column.key === 'pduAddress'">
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.viewText') }}</template>
<template #title>{{ t('common.deleteText') }}</template>
<a-button
type="link"
@click.prevent="fnModalVisibleByVive(record)"
@click.prevent="fnRecordDelete(record.id)"
>
<template #icon><ProfileOutlined /></template>
<template #icon>
<DeleteOutlined />
</template>
</a-button>
</a-tooltip>
</a-space>
</template>
</template>
<template #expandedRowRender="{ record }">
<a-row :gutter="16">
<a-col :lg="8" :md="12" :xs="24" :offset="2">
<a-divider orientation="left">
{{ t('views.dashboard.cdr.cdrInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.cdr.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.rmUID') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
<div>
<span>{{ t('views.dashboard.cdr.time') }}: </span>
<span>{{ parseDateToStr(+record.timestamp * 1000) }}</span>
</div>
<a-divider orientation="left">
{{ t('views.dashboard.cdr.rowInfo') }}
</a-divider>
<div>
<span>Record Network Function ID: </span>
<span>{{ record.cdrJSON.recordingNetworkFunctionID }}</span>
</div>
<div>
<span>Record Type: </span>
<span>{{ record.cdrJSON.recordType }}</span>
</div>
<div>
<span>Record Opening Time: </span>
<span>{{ record.cdrJSON.recordOpeningTime }}</span>
</div>
<div>
<span>Charging ID: </span>
<span>{{ record.cdrJSON.chargingID }}</span>
</div>
<div>
<span>Duration: </span>
<span>{{ record.cdrJSON.duration }}</span>
</div>
<a-divider orientation="left"> SubscriberIdentifier </a-divider>
<div>
<span>Subscription ID Type: </span>
<span>
{{ record.cdrJSON.subscriberIdentifier?.subscriptionIDType }}
</span>
</div>
<div>
<span>Subscription ID Data: </span>
<span>
{{ record.cdrJSON.subscriberIdentifier?.subscriptionIDData }}
</span>
</div>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-divider orientation="left">
List Of Multiple Unit Usage
</a-divider>
<div v-for="u in record.cdrJSON.listOfMultipleUnitUsage">
<div>RatingGroup: {{ u.ratingGroup }}</div>
<div v-for="udata in u.usedUnitContainer">
<div>
<span>Data Total Volume: </span>
<span>{{ udata.dataTotalVolume }}</span>
</div>
<div>
<span>Data Volume Downlink: </span>
<span>{{ udata.dataVolumeDownlink }}</span>
</div>
<div>
<span>Data Volume Uplink: </span>
<span>{{ udata.dataVolumeUplink }}</span>
</div>
<div>
<span>Time: </span>
<span>{{ udata.time }}</span>
</div>
</div>
</div>
<a-divider orientation="left">
PDU Session Charging Information
</a-divider>
<div>
<span>User Identifier: </span>
<span>{{
record.cdrJSON.pDUSessionChargingInformation?.userIdentifier
}}</span>
</div>
<div>
<span>SSC Mode: </span>
<span>{{
record.cdrJSON.pDUSessionChargingInformation?.sSCMode
}}</span>
&nbsp;&nbsp;
<span>RAT Type: </span>
<span>{{
record.cdrJSON.pDUSessionChargingInformation?.rATType
}}</span>
&nbsp;&nbsp;
<span>DNN ID: </span>
<span>
{{ record.cdrJSON.pDUSessionChargingInformation?.dNNID }}
</span>
</div>
<div>
<span>PDU Type: </span>
<span>
{{ record.cdrJSON.pDUSessionChargingInformation?.pDUType }}
</span>
</div>
<div>
<span>PDU IPv4 Address: </span>
<span>
{{
record.cdrJSON.pDUSessionChargingInformation?.pDUAddress
?.pDUIPv4Address
}}
</span>
</div>
<div>
<span>PDU IPv6 Addres Swith Prefix: </span>
<span>
{{
record.cdrJSON.pDUSessionChargingInformation?.pDUAddress
?.pDUIPv6AddresswithPrefix
}}
</span>
</div>
</a-col>
</a-row>
</template>
</a-table>
</a-card>
<!-- 详情框 -->
<DraggableModal
width="800px"
:visible="modalState.visibleByView"
:title="modalState.title"
@cancel="fnModalCancel"
:footer="null"
>
<a-form layout="horizontal" labelAlign="left" :labelWrap="false">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="subscriberID" name="subscriberID">
{{ modalState.from.subscriberID }}
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item label="chargingID" name="chargingID">
{{ modalState.from.chargingID }}
</a-form-item>
</a-col>
</a-row>
<a-descriptions title="PDU Address" :column="2" size="small" bordered>
<a-descriptions-item label="IPV4 Dynamic Address Flag">
{{ modalState.from.pduAddress.iPV4dynamicAddressFlag }}
</a-descriptions-item>
<a-descriptions-item label="IPV6 Dynamic Prefix Flag">
{{ modalState.from.pduAddress.iPv6dynamicPrefixFlag }}
</a-descriptions-item>
<a-descriptions-item label="PDU IPV4 Address">{{
modalState.from.pduAddress.pDUIPv4Address
}}</a-descriptions-item>
<a-descriptions-item label="PDU IPV6 Address With Prefix">{{
modalState.from.pduAddress.pDUIPv6AddresswithPrefix
}}</a-descriptions-item>
</a-descriptions>
</a-form>
</DraggableModal>
</PageContainer>
</template>