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

Merge remote-tracking branch 'origin/main' into multi-tenant

Browse Source
This commit is contained in:
TsMask
2025-01-03 21:34:31 +08:00
parent efa30f4ee3 7ab2b3b546
commit 33bdbd6d08
25 changed files with 2322 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
src/views/dashboard/amfUE/index.vue
View File

@@ -12,17 +12,24 @@ import {
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import useDictStore from '@/store/modules/dict';
import useNeInfoStore from '@/store/modules/neinfo';
import { listAMFDataUE, delAMFDataUE, exportAMFDataUE } from '@/api/neData/amf';
import { parseDateToStr } from '@/utils/date-utils';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import dayjs, { Dayjs } from 'dayjs';
import saveAs from 'file-saver';
import PQueue from 'p-queue';
import useUserStore from '@/store/modules/user';
import { TENANTADMIN_ROLE_KEY } from '@/constants/admin-constants';
import { listTenant } from '@/api/system/tenant';
import { useClipboard } from '@vueuse/core';
const { copy } = useClipboard({ legacy: true });
const { t } = useI18n();
const { getDict } = useDictStore();
const ws = new WS();
const queue = new PQueue({ concurrency: 1, autoStart: true });
/**网元可选 */
let neOtions = ref<Record<string, any>[]>([]);
/**字典数据 */
let dict: {
@@ -39,7 +46,10 @@ let dict: {
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
dayjs().startOf('hour'),
dayjs().endOf('hour'),
]);
/**查询参数 */
let queryParams = reactive({
@@ -53,9 +63,9 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
startTime: undefined as undefined | number,
/**结束时间 */
endTime: '',
endTime: undefined as undefined | number,
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -74,7 +84,7 @@ function fnQueryReset() {
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -151,9 +161,15 @@ let tableColumns: ColumnsType = [
{
title: t('views.dashboard.ue.time'),
dataIndex: 'eventJSON',
key: 'time',
align: 'left',
width: 150,
customRender(opt) {
const record = opt.value;
if (record?.time) {
return record.time;
}
return parseDateToStr(+record.timestamp * 1000);
},
},
{
title: t('views.dashboard.cdr.tenantName'),
@@ -269,11 +285,19 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
// 时间范围
if (
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.startTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.startTime = undefined;
queryParams.endTime = undefined;
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listAMFDataUE(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
@@ -341,6 +365,18 @@ function fnExportList() {
});
}
/**
* 复制CDR
* @param jsonStr JSON字符串
*/
function fnRecordCopy(jsonStr: string) {
if (!jsonStr) return;
const text = JSON.stringify(jsonStr, null, 2);
copy(text).then(() => {
message.success(t('common.copyOk'), 3);
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
@@ -350,31 +386,30 @@ const realTimeData = ref<boolean>(false);
function fnRealTime() {
realTimeData.value = !realTimeData.value;
if (realTimeData.value) {
tableState.seached = false;
// 建立链接
const options: OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* AMF_UE会话事件(GroupID:1010)
* AMF_UE会话事件(GroupID:1010_neId)
*/
subGroupID: '1010',
subGroupID: `1010_${queryParams.neId}`,
},
onmessage: wsMessage,
onerror: wsError,
onerror: (ev: any) => {
console.error(ev);
},
};
ws.connect(options);
} else {
ws.close();
tableState.seached = true;
fnGetList(1);
}
}
/**接收数据后回调 */
function wsError(ev: any) {
// 接收数据后回调
console.error(ev);
}
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
@@ -388,7 +423,7 @@ function wsMessage(res: Record<string, any>) {
return;
}
// ueEvent AMF_UE会话事件
if (data.groupId === '1010') {
if (data.groupId === `1010_${queryParams.neId}`) {
const ueEvent = data.data;
queue.add(async () => {
modalState.maxId += 1;
@@ -410,24 +445,46 @@ function wsMessage(res: Record<string, any>) {
}
}
onMounted(() => {
// 初始字典数据
Promise.allSettled([
getDict('ue_auth_code'),
getDict('ue_event_type'),
getDict('ue_event_cm_state'),
])
.then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.ueAauthCode = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.ueEventType = resArr[1].value;
}
if (resArr[2].status === 'fulfilled') {
dict.ueEventCmState = resArr[2].value;
]).then(resArr => {
if (resArr[0].status === 'fulfilled') {
dict.ueAauthCode = resArr[0].value;
}
if (resArr[1].status === 'fulfilled') {
dict.ueEventType = resArr[1].value;
}
if (resArr[2].status === 'fulfilled') {
dict.ueEventCmState = resArr[2].value;
}
});
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'AMF') {
arr.push({ value: i.neId, label: i.neName });
}
});
neOtions.value = arr;
if (arr.length > 0) {
queryParams.neId = arr[0].value;
}
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
@@ -478,6 +535,16 @@ onBeforeUnmount(() => {
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="AMF" name="neId ">
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('common.selectPlease')"
@change="fnGetList(1)"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.ue.eventType')"
@@ -492,7 +559,7 @@ onBeforeUnmount(() => {
></a-select>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi ">
<a-input
v-model:value="queryParams.imsi"
@@ -512,6 +579,20 @@ onBeforeUnmount(() => {
></a-auto-complete>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
@@ -528,20 +609,6 @@ onBeforeUnmount(() => {
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
@@ -604,6 +671,7 @@ onBeforeUnmount(() => {
:checked-children="t('common.switch.show')"
:un-checked-children="t('common.switch.hide')"
size="small"
:disabled="realTimeData"
/>
</a-tooltip>
<a-tooltip>
@@ -669,7 +737,7 @@ onBeforeUnmount(() => {
<span v-if="record.eventType === 'auth-result'">
<DictTag
:options="dict.ueAauthCode"
:value="record.eventJSON.authCode"
:value="record.eventJSON.result"
/>
</span>
<span v-if="record.eventType === 'detach'">
@@ -678,32 +746,23 @@ onBeforeUnmount(() => {
<span v-if="record.eventType === 'cm-state'">
<DictTag
:options="dict.ueEventCmState"
:value="record.eventJSON.status"
:value="record.eventJSON.result"
/>
</span>
</template>
<template v-if="column.key === 'time'">
<span
v-if="record.eventType === 'auth-result'"
:title="record.eventJSON.authTime"
>
{{ record.eventJSON.authTime }}
</span>
<span
v-if="record.eventType === 'detach'"
:title="record.eventJSON.detachTime"
>
{{ record.eventJSON.detachTime }}
</span>
<span
v-if="record.eventType === 'cm-state'"
:title="record.eventJSON.changeTime"
>
{{ record.eventJSON.changeTime }}
</span>
</template>
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.copyText') }}</template>
<a-button
type="link"
@click.prevent="fnRecordCopy(record.eventJSON)"
>
<template #icon>
<CopyOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.deleteText') }}</template>
<a-button
@@ -722,29 +781,30 @@ onBeforeUnmount(() => {
<template #expandedRowRender="{ record }">
<a-row :gutter="16">
<a-col :lg="8" :md="12" :xs="24" :offset="2">
<a-divider orientation="left">
{{ t('views.dashboard.ue.ueInfo') }}
</a-divider>
<div>
<span>{{ t('views.ne.common.neName') }}: </span>
<span>{{ record.neName }}</span>
</div>
<div>
<span>{{ t('views.ne.common.rmUid') }}: </span>
<span>{{ record.rmUID }}</span>
</div>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-divider orientation="left">
{{ t('views.dashboard.ue.rowInfo') }}
</a-divider>
<div>
<span>{{ t('views.dashboard.ue.time') }}: </span>
<span
v-if="record.eventType === 'auth-result'"
:title="record.eventJSON.authTime"
>
{{ record.eventJSON.authTime }}
</span>
<span
v-if="record.eventType === 'detach'"
:title="record.eventJSON.detachTime"
>
{{ record.eventJSON.detachTime }}
</span>
<span
v-if="record.eventType === 'cm-state'"
:title="record.eventJSON.changeTime"
>
{{ record.eventJSON.changeTime }}
</span>
<template v-if="record.eventJSON?.time">
{{ record.eventJSON.time }}
</template>
<template v-else>
{{ parseDateToStr(record.eventJSON.timestamp * 1000) }}
</template>
</div>
<div>
<span>{{ t('views.dashboard.ue.eventType') }}: </span>
@@ -758,7 +818,7 @@ onBeforeUnmount(() => {
<span v-if="record.eventType === 'auth-result'">
<DictTag
:options="dict.ueAauthCode"
:value="record.eventJSON.authCode"
:value="record.eventJSON.result"
/>
</span>
<span v-if="record.eventType === 'detach'">
@@ -767,7 +827,7 @@ onBeforeUnmount(() => {
<span v-if="record.eventType === 'cm-state'">
<DictTag
:options="dict.ueEventCmState"
:value="record.eventJSON.status"
:value="record.eventJSON.result"
/>
</span>
</div>

111
src/views/dashboard/mmeUE/index.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import dayjs, { Dayjs } from 'dayjs';
import { reactive, onMounted, toRaw, ref, onBeforeUnmount } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { message, Modal } from 'ant-design-vue/es';
@@ -18,7 +19,8 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
import saveAs from 'file-saver';
import PQueue from 'p-queue';
import { listTenant } from '@/api/system/tenant';
import { useClipboard } from '@vueuse/core';
const { copy } = useClipboard({ legacy: true });
const { t } = useI18n();
const { getDict } = useDictStore();
const ws = new WS();
@@ -42,7 +44,10 @@ let dict: {
});
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
dayjs().startOf('hour'),
dayjs().endOf('hour'),
]);
/**查询参数 */
let queryParams = reactive({
@@ -56,9 +61,9 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
startTime: undefined as undefined | number,
/**结束时间 */
endTime: '',
endTime: undefined as undefined | number,
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -77,7 +82,7 @@ function fnQueryReset() {
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -154,8 +159,11 @@ let tableColumns: ColumnsType = [
align: 'left',
width: 150,
customRender(opt) {
const cdrJSON = opt.value;
return parseDateToStr(+cdrJSON.timestamp * 1000);
const record = opt.value;
if (record?.time) {
return record.time;
}
return parseDateToStr(+record.timestamp * 1000);
},
},
{
@@ -272,11 +280,19 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
// 时间范围
if (
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.startTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.startTime = undefined;
queryParams.endTime = undefined;
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listMMEDataUE(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
// 取消勾选
@@ -344,6 +360,18 @@ function fnExportList() {
});
}
/**
* 复制CDR
* @param jsonStr JSON字符串
*/
function fnRecordCopy(jsonStr: string) {
if (!jsonStr) return;
const text = JSON.stringify(jsonStr, null, 2);
copy(text).then(() => {
message.success(t('common.copyOk'), 3);
});
}
/**实时数据开关 */
const realTimeData = ref<boolean>(false);
@@ -360,12 +388,14 @@ function fnRealTime() {
params: {
/**订阅通道组
*
* MME_UE会话事件(GroupID:1011)
* MME_UE会话事件(GroupID:1011_neId)
*/
subGroupID: `1011_${queryParams.neId}`,
},
onmessage: wsMessage,
onerror: wsError,
onerror: (ev: any) => {
console.error(ev);
},
};
ws.connect(options);
} else {
@@ -375,12 +405,6 @@ function fnRealTime() {
}
}
/**接收数据后回调 */
function wsError(ev: any) {
// 接收数据后回调
console.error(ev);
}
/**接收数据后回调 */
function wsMessage(res: Record<string, any>) {
const { code, requestId, data } = res;
@@ -508,6 +532,7 @@ onBeforeUnmount(() => {
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('common.selectPlease')"
@change="fnGetList(1)"
/>
</a-form-item>
</a-col>
@@ -525,7 +550,7 @@ onBeforeUnmount(() => {
></a-select>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMSI" name="imsi ">
<a-input
v-model:value="queryParams.imsi"
@@ -545,6 +570,20 @@ onBeforeUnmount(() => {
></a-auto-complete>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
<a-col :lg="8" :md="12" :xs="24">
<a-form-item
:label="t('views.dashboard.cdr.time')"
@@ -561,20 +600,6 @@ onBeforeUnmount(() => {
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList(1)">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button type="default" @click.prevent="fnQueryReset">
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
@@ -709,6 +734,17 @@ onBeforeUnmount(() => {
</template>
<template v-if="column.key === 'id'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ t('common.copyText') }}</template>
<a-button
type="link"
@click.prevent="fnRecordCopy(record.eventJSON)"
>
<template #icon>
<CopyOutlined />
</template>
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ t('common.deleteText') }}</template>
<a-button
@@ -745,7 +781,12 @@ onBeforeUnmount(() => {
</a-divider>
<div>
<span>{{ t('views.dashboard.ue.time') }}: </span>
{{ parseDateToStr(record.eventJSON.timestamp * 1000) }}
<template v-if="record.eventJSON?.time">
{{ record.eventJSON.time }}
</template>
<template v-else>
{{ parseDateToStr(record.eventJSON.timestamp * 1000) }}
</template>
</div>
<div>
<span>{{ t('views.dashboard.ue.eventType') }}: </span>

22
src/views/dashboard/overview/components/UserActivity/index.vue
View File

@@ -137,18 +137,12 @@ onMounted(() => {
</div>
<div>
{{ t('views.dashboard.overview.userActivity.time') }}:
<span
v-if="item.type === 'auth-result'"
:title="item.data.authTime"
>
{{ item.data.authTime }}
</span>
<span v-if="item.type === 'detach'" :title="item.data.detachTime">
{{ item.data.detachTime }}
</span>
<span v-if="item.type === 'cm-state'" :title="item.data.changeTime">
{{ item.data.changeTime }}
</span>
<template v-if="item.data?.time">
{{ item.data.time }}
</template>
<template v-else>
{{ parseDateToStr(+item.data.timestamp * 1000) }}
</template>
</div>
</div>
@@ -167,7 +161,7 @@ onMounted(() => {
<div v-if="item.type === 'auth-result'">
{{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
<span>
<DictTag :options="dict.ueAauthCode" :value="item.data.authCode" />
<DictTag :options="dict.ueAauthCode" :value="item.data.result" />
</span>
</div>
<div v-if="item.type === 'detach'">
@@ -177,7 +171,7 @@ onMounted(() => {
<div class="card-ue-w33" v-if="item.type === 'cm-state'">
{{ t('views.dashboard.overview.userActivity.result') }}:&nbsp;
<span>
<DictTag :options="dict.ueEventCmState" :value="item.data.status" />
<DictTag :options="dict.ueEventCmState" :value="item.data.result" />
</span>
</div>
</div>

14
src/views/dashboard/overview/hooks/useWS.ts
View File

@@ -1,6 +1,6 @@
import { RESULT_CODE_ERROR } from '@/constants/result-constants';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { onBeforeUnmount, ref } from 'vue';
import {
eventListParse,
eventItemParseAndPush,
@@ -49,7 +49,7 @@ export default function useWS() {
// 普通信息
switch (requestId) {
// AMF_UE会话事件
case 'amf_1010':
case 'amf_1010_001':
if (Array.isArray(data.rows)) {
eventListParse('amf_ue', data);
}
@@ -95,13 +95,13 @@ export default function useWS() {
}
break;
// MME_UE会话事件
case '1011_001':
case '1011':
if (data.data) {
queue.add(() => eventItemParseAndPush('mme_ue', data.data));
}
break;
// IMS_CDR会话事件
case '1005_001':
case '1005':
if (data.data) {
queue.add(() => eventItemParseAndPush('ims_cdr', data.data));
}
@@ -132,7 +132,7 @@ export default function useWS() {
function userActivitySend() {
// AMF_UE会话事件
ws.send({
requestId: 'amf_1010',
requestId: 'amf_1010_001',
type: 'amf_ue',
data: {
neType: 'AMF',
@@ -189,11 +189,11 @@ export default function useWS() {
/**订阅通道组
*
* 指标UPF (GroupID:12_neId)
* AMF_UE会话事件(GroupID:1010)
* AMF_UE会话事件(GroupID:1010_neId)
* MME_UE会话事件(GroupID:1011_neId)
* IMS_CDR会话事件(GroupID:1005_neId)
*/
subGroupID: '12_' + rmUid + ',1010,1011_001,1005_001',
subGroupID: '12_' + rmUid + ',1010,1011,1005',
},
onmessage: wsMessage,
onerror: (ev: any) => {

2
src/views/dashboard/overview/index.vue
View File

@@ -252,7 +252,7 @@ function fnSelectNe(value: any, option: any) {
for (var key in upfTotalFlow.value) {
upfTotalFlow.value[key].requestFlag = false;
}
loadData();
// loadData();
}
// 定义一个方法返回 views 容器

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

@@ -94,7 +94,7 @@ let tableState: TabeStateType = reactive({
});
/**表格字段列 */
let tableColumns: ColumnsType = [
let tableColumns = ref<ColumnsType>([
{
title: t('common.rowId'),
dataIndex: 'id',
@@ -238,7 +238,7 @@ let tableColumns: ColumnsType = [
key: 'id',
align: 'left',
},
];
]);
/**表格分页器参数 */
let tablePagination = reactive({
@@ -818,14 +818,14 @@ onBeforeUnmount(() => {
</a-divider>
<div v-for="u in record.cdrJSON.listOfMultipleUnitUsage">
<div>RatingGroup: {{ u.ratingGroup }}</div>
<!-- <div>RatingGroup: {{ u.ratingGroup }}</div> -->
<div
v-for="(udata, i) in u.usedUnitContainer"
style="display: flex"
>
<strong style="margin-right: 12px">
<!-- <strong style="margin-right: 12px">
{{ i }}
</strong>
</strong> -->
<div>
<div>
<span>Data Total Volume: </span>
@@ -839,10 +839,10 @@ onBeforeUnmount(() => {
<span>Data Volume Uplink: </span>
<span>{{ udata.dataVolumeUplink }}</span>
</div>
<div>
<!-- <div>
<span>Time: </span>
<span>{{ udata.time }}</span>
</div>
</div> -->
</div>
</div>
</div>

664
src/views/dashboard/smfCDRByIMSI/index.vue Normal file
View File

@@ -0,0 +1,664 @@
<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
DataZoomComponent,
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent,
DataZoomComponent,
LineChart,
CanvasRenderer,
UniversalTransition,
]);
import { reactive, onMounted, toRaw, onBeforeUnmount, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import useI18n from '@/hooks/useI18n';
import { listSMFDataCDR } from '@/api/neData/smf';
import {
RESULT_CODE_ERROR,
RESULT_CODE_SUCCESS,
} from '@/constants/result-constants';
import { parseSizeFromByte } from '@/utils/parse-utils';
import { message } from 'ant-design-vue';
import useNeInfoStore from '@/store/modules/neinfo';
import dayjs, { Dayjs } from 'dayjs';
const { t, currentLocale } = useI18n();
const ws = new WS();
/**图DOM节点实例对象 */
const cdrChartDom = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
let cdrChart: echarts.ECharts | null = null;
/**图表配置 */
const option = {
title: {
text: 'Data Usage Report',
left: 'left',
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true,
},
formatter: (params: any) => {
const title = params[0].name;
let uplinkValue = 0;
let downlinkValue = 0;
if (params[0].seriesName === 'Uplink') {
uplinkValue = params[0].value;
} else {
downlinkValue = params[0].value;
}
if (params[1].seriesName === 'Uplink') {
uplinkValue = params[1].value;
} else {
downlinkValue = params[1].value;
}
const uplinkValueF = parseSizeFromByte(uplinkValue);
const downlinkValueF = parseSizeFromByte(downlinkValue);
return `
<div style="font-weight: bold;">${title}</div>
<div>Uplink: ${uplinkValueF}</div>
<div>Downlink: ${downlinkValueF}</div>
`;
},
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none',
},
saveAsImage: {},
},
},
axisPointer: {
link: [
{
xAxisIndex: 'all',
},
],
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 100,
xAxisIndex: [0, 1],
},
{
type: 'inside',
realtime: true,
start: 0,
end: 100,
xAxisIndex: [0, 1],
},
],
grid: [
{
left: '10%',
right: 50,
height: '30%',
},
{
left: '10%',
right: 50,
top: '50%',
height: '30%',
},
],
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: { onZero: true },
data: [], // x轴初始数据
axisLabel: {
show: true, // 显示标签
rotate: 15, // 设置倾斜角度（如15度）
},
},
{
gridIndex: 1,
type: 'category',
boundaryGap: false,
axisLine: { onZero: true },
data: [], // x轴初始数据
axisLabel: {
show: false, // 隐藏第二个 x 轴的标签
},
position: 'top',
},
],
yAxis: [
{
name: 'Uplink (Byte)',
type: 'value',
},
{
gridIndex: 1,
name: 'Downlink (Byte)',
type: 'value',
inverse: true,
},
],
series: [
{
name: 'Uplink',
type: 'line',
data: [], // y轴初始数据
symbol: 'circle', // 数据点形状
symbolSize: 6, // 数据点大小
smooth: true, // 平滑曲线
color: 'rgb(17, 178, 255)',
areaStyle: {
color: {
colorStops: [
{ offset: 0, color: 'rgba(17, 178, 255, .5)' },
{ offset: 1, color: 'rgba(17, 178, 255, 0.5)' },
],
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
},
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
{
name: 'Downlink',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
data: [], // y轴初始数据
symbol: 'circle', // 数据点形状
symbolSize: 6, // 数据点大小
smooth: true, // 平滑曲线
color: 'rgb(0, 190, 99)',
areaStyle: {
color: {
colorStops: [
{ offset: 0, color: 'rgba(0, 190, 99, .5)' },
{ offset: 1, color: 'rgba(0, 190, 99, 0.5)' },
],
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
},
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10,
},
},
],
};
/**绘制图表 */
function fnRanderChart() {
const container: HTMLElement | undefined = cdrChartDom.value;
if (!container) return;
const locale = currentLocale.value.split('_')[0];
cdrChart = echarts.init(container, 'light', {
// https://github.com/apache/echarts/tree/release/src/i18n 取值langEN.ts ==> EN
locale: locale.toUpperCase(),
});
cdrChart.setOption(option);
// cdrChart.showLoading('default', {
// text: 'Please enter IMSI to query user traffic',
// fontSize: 16, // 字体大小
// });
// 创建 ResizeObserver 实例 监听图表容器大小变化，并在变化时调整图表大小
var observer = new ResizeObserver(entries => {
if (cdrChart) {
cdrChart.resize();
}
});
// 监听元素大小变化
observer.observe(container);
}
/**网元可选 */
let neOtions = ref<Record<string, any>[]>([]);
/**开始结束时间 */
let queryRangePicker = ref<[Dayjs, Dayjs] | undefined>([
dayjs().startOf('hour'),
dayjs().endOf('hour'),
]);
/**时间范围 */
let rangePickerPresets = ref([
{
label: 'Now hour',
value: [dayjs().startOf('hour'), dayjs().endOf('hour')],
},
{ label: 'Today', value: [dayjs().startOf('day'), dayjs().endOf('day')] },
{
label: 'Yesterday',
value: [
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day').endOf('day'),
],
},
]);
/**查询参数 */
let queryParams = reactive({
/**网元类型 */
neType: 'SMF',
neId: '001',
subscriberID: '',
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: undefined as undefined | number,
/**结束时间 */
endTime: undefined as undefined | number,
/**当前页数 */
pageNum: 1,
/**每页条数 */
pageSize: 1000,
});
/**查询参数重置 */
function fnQueryReset() {
queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
fnGetList(1);
}
let state = reactive({
/**表格数据 */
data: [] as any[],
/**表格总数 */
total: 0,
/**表格加载状态 */
loading: false,
});
/**查询列表, pageNum初始页数 */
function fnGetList(pageNum?: number) {
if (state.loading) return;
state.loading = true;
if (!queryParams.subscriberID) {
message.warning('Please enter IMSI to query user traffic');
state.loading = false;
return;
}
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (cdrChart) {
cdrChart.showLoading('default', {
text: 'Loading...',
fontSize: 16, // 字体大小
});
}
// 时间范围
if (
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.startTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.startTime = undefined;
queryParams.endTime = undefined;
}
listSMFDataCDR(toRaw(queryParams))
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
state.total = res.total;
// 遍历处理cdr字符串数据
state.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;
})
.reverse();
}
})
.finally(() => {
state.loading = false;
fnRanderChartDataLoad();
});
}
/**图表配置数据x轴 */
let dataTimeXAxisData: string[] = [];
/**图表配置数据y轴 */
let dataVolumeUplinkYSeriesData: number[] = [];
let dataVolumeDownlinkYSeriesData: number[] = [];
/**图表数据渲染 */
function fnRanderChartDataLoad() {
if (!cdrChart) return;
dataTimeXAxisData = [];
dataVolumeUplinkYSeriesData = [];
dataVolumeDownlinkYSeriesData = [];
if (state.data.length > 0) {
// 处理数据渲染图表
for (const item of state.data) {
if (!item.cdrJSON.invocationTimestamp) {
break;
}
// 时间
const dataTime = item.cdrJSON.invocationTimestamp;
const listOfMultipleUnitUsage = item.cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
// 数据
let dataVolumeUplink = 0;
let dataVolumeDownlink = 0;
for (const v of listOfMultipleUnitUsage) {
if (Array.isArray(v.usedUnitContainer)) {
for (const used of v.usedUnitContainer) {
dataVolumeUplink += +used.dataVolumeUplink;
dataVolumeDownlink += +used.dataVolumeDownlink;
}
}
}
dataTimeXAxisData.push(dataTime);
dataVolumeUplinkYSeriesData.push(dataVolumeUplink);
dataVolumeDownlinkYSeriesData.push(dataVolumeDownlink);
}
// 绘制图数据
fnRanderChartDataUpdate();
} else {
cdrChart.showLoading('default', {
text: 'No Data',
fontSize: 16, // 字体大小
});
cdrChart.setOption({
title: {
text: `Data Volume Uplink / Downlink By IMSI ${queryParams.subscriberID}`,
},
xAxis: [
{
data: dataTimeXAxisData,
},
{
data: dataTimeXAxisData,
},
],
series: [
{
data: dataVolumeUplinkYSeriesData,
},
{
data: dataVolumeDownlinkYSeriesData,
},
],
});
}
}
/**图表数据渲染 */
function fnRanderChartDataUpdate() {
if (cdrChart == null) return;
// 绘制图数据
cdrChart.setOption({
title: {
text: `Data Usage Report of IMSI ${queryParams.subscriberID}`,
},
xAxis: [
{
data: dataTimeXAxisData,
},
{
data: dataTimeXAxisData,
},
],
series: [
{
data: dataVolumeUplinkYSeriesData,
},
{
data: dataVolumeDownlinkYSeriesData,
},
],
});
cdrChart.hideLoading();
}
/**
* 实时数据
*/
function fnRealTime() {
if (ws.state() === WebSocket.OPEN) {
ws.close();
}
// 建立链接
const options: OptionsType = {
url: '/ws',
params: {
/**订阅通道组
*
* CDR会话事件-SMF (GroupID:1006)
*/
subGroupID: `1006_${queryParams.neId}`,
},
onmessage: (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_${queryParams.neId}`) {
const cdrEvent = data.data;
// 对应结束时间内
if (queryParams.endTime) {
const endTime = Math.round(queryParams.endTime / 1000);
if (cdrEvent.timestamp > endTime) {
return;
}
}
const cdrJSON = cdrEvent.CDR;
if (!cdrJSON.invocationTimestamp) {
return;
}
// 对应IMSI
if (
cdrJSON.subscriberIdentifier.subscriptionIDData !==
queryParams.subscriberID
) {
return;
}
// 时间
const dataTime = cdrJSON.invocationTimestamp;
const listOfMultipleUnitUsage = cdrJSON.listOfMultipleUnitUsage;
if (
!Array.isArray(listOfMultipleUnitUsage) ||
listOfMultipleUnitUsage.length < 1
) {
return 0;
}
// 数据
let dataVolumeUplink = 0;
let dataVolumeDownlink = 0;
for (const v of listOfMultipleUnitUsage) {
if (Array.isArray(v.usedUnitContainer)) {
for (const used of v.usedUnitContainer) {
dataVolumeUplink += +used.dataVolumeUplink;
dataVolumeDownlink += +used.dataVolumeDownlink;
}
}
}
// 添加数据
dataTimeXAxisData.push(dataTime);
dataVolumeUplinkYSeriesData.push(dataVolumeUplink);
dataVolumeDownlinkYSeriesData.push(dataVolumeDownlink);
fnRanderChartDataUpdate();
}
},
onerror: (ev: any) => {
console.error(ev);
},
};
ws.connect(options);
}
onMounted(() => {
// 获取网元网元列表
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'SMF') {
arr.push({ value: i.neId, label: i.neName });
}
});
neOtions.value = arr;
if (arr.length > 0) {
queryParams.neId = arr[0].value;
}
}
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
})
.finally(() => {
fnRanderChart();
fnRealTime();
});
});
onBeforeUnmount(() => {
ws.close();
if (cdrChart) {
cdrChart.clear();
cdrChart.dispose();
}
});
</script>
<template>
<PageContainer>
<a-card
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
>
<!-- 表格搜索栏 -->
<a-form :model="queryParams" name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="SMF" name="neId ">
<a-select
v-model:value="queryParams.neId"
:options="neOtions"
:placeholder="t('common.selectPlease')"
@change="fnRealTime()"
:disabled="state.loading"
/>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item label="IMSI" name="subscriberID" :required="true">
<a-input
v-model:value="queryParams.subscriberID"
allow-clear
:placeholder="t('common.inputPlease')"
:maxlength="40"
:disabled="state.loading"
></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"
:presets="rangePickerPresets"
:bordered="true"
:allow-clear="false"
style="width: 100%"
:show-time="{ format: 'HH:mm:ss' }"
format="YYYY-MM-DD HH:mm:ss"
:disabled="state.loading"
></a-range-picker>
</a-form-item>
</a-col>
<a-col :lg="4" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button
type="primary"
@click.prevent="fnGetList(1)"
:loading="state.loading"
>
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
<a-button
type="default"
@click.prevent="fnQueryReset"
:disabled="state.loading"
>
<template #icon><ClearOutlined /></template>
{{ t('common.reset') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
<a-card :bordered="false">
<!-- 图数据 -->
<div ref="cdrChartDom" style="height: 600px; width: 100%"></div>
</a-card>
</PageContainer>
</template>
<style lang="less" scoped></style>