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

fix: 页面字段/接口调整

Browse Source
This commit is contained in:
TsMask
2025-02-20 10:47:23 +08:00
parent 814bae0b94
commit 485fa89833
85 changed files with 1133 additions and 1792 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,6 +46,21 @@ 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({
@@ -57,7 +72,7 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: undefined as undefined | number,
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: undefined as undefined | number,
/**当前页数 */
@@ -72,8 +87,8 @@ function fnQueryReset() {
queryParams = Object.assign(queryParams, {
eventType: '',
imsi: '',
startTime: '',
endTime: '',
beginTime: undefined,
endTime: undefined,
pageNum: 1,
pageSize: 20,
});
@@ -274,22 +289,23 @@ function fnGetList(pageNum?: number) {
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.startTime = queryRangePicker.value[0].valueOf();
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.startTime = undefined;
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
listAMFDataUE(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
if (res.code === RESULT_CODE_SUCCESS) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
const { total, rows } = res.data;
tablePagination.total = total;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
tableState.data = rows.map((item: any) => {
let eventJSON = item.eventJSON;
if (!eventJSON) {
Reflect.set(item, 'eventJSON', {});
@@ -450,12 +466,12 @@ onMounted(() => {
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
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 });
res.data.forEach((v:any) => {
if (v.neType === 'AMF') {
arr.push({ value: v.neId, label: v.neName });
}
});
neOtions.value = arr;
@@ -545,14 +561,14 @@ onBeforeUnmount(() => {
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:presets="rangePickerPresets"
:bordered="true"
:allow-clear="false"
style="width: 100%"
: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>

71
src/views/dashboard/imsCDR/index.vue
View File

@@ -22,6 +22,7 @@ import { OptionsType, WS } from '@/plugins/ws-websocket';
import saveAs from 'file-saver';
import PQueue from 'p-queue';
import { useClipboard } from '@vueuse/core';
import dayjs, { type Dayjs } from 'dayjs';
const { copy } = useClipboard({ legacy: true });
const { t } = useI18n();
const { getDict } = useDictStore();
@@ -43,7 +44,25 @@ let dict: {
let neOtions = ref<Record<string, any>[]>([]);
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
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({
@@ -56,9 +75,9 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: '',
endTime: undefined as undefined | number,
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -72,12 +91,12 @@ function fnQueryReset() {
recordType: '',
callerParty: '',
calledParty: '',
startTime: '',
endTime: '',
beginTime: undefined,
endTime: undefined,
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -328,20 +347,30 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
// 时间范围
if (
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listIMSDataCDR(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
if (res.code === RESULT_CODE_SUCCESS) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
const { total, rows } = res.data;
tablePagination.total = total;
tableState.data = rows;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
tableState.data = rows.map((item: any) => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
@@ -483,12 +512,12 @@ onMounted(() => {
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'IMS') {
arr.push({ value: i.neId, label: i.neName });
res.data.forEach((v: any) => {
if (v.neType === 'IMS') {
arr.push({ value: v.neId, label: v.neName });
}
});
neOtions.value = arr;
@@ -595,12 +624,12 @@ onBeforeUnmount(() => {
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:presets="rangePickerPresets"
:bordered="true"
:allow-clear="false"
style="width: 100%"
: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>

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

@@ -47,6 +47,21 @@ 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({
@@ -58,7 +73,7 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: undefined as undefined | number,
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: undefined as undefined | number,
/**当前页数 */
@@ -73,8 +88,8 @@ function fnQueryReset() {
queryParams = Object.assign(queryParams, {
eventType: '',
imsi: '',
startTime: '',
endTime: '',
beginTime: undefined,
endTime: undefined,
pageNum: 1,
pageSize: 20,
});
@@ -275,22 +290,24 @@ function fnGetList(pageNum?: number) {
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.startTime = queryRangePicker.value[0].valueOf();
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.startTime = undefined;
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
listMMEDataUE(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
if (res.code === RESULT_CODE_SUCCESS) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
const { total, rows } = res.data;
tablePagination.total = total;
// tableState.data = rows;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
tableState.data = rows.map((item: any) => {
let eventJSON = item.eventJSON;
if (!eventJSON) {
Reflect.set(item, 'eventJSON', {});
@@ -457,12 +474,12 @@ onMounted(() => {
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'MME') {
arr.push({ value: i.neId, label: i.neName });
res.data.forEach((v: any) => {
if (v.neType === 'MME') {
arr.push({ value: v.neId, label: v.neName });
}
});
neOtions.value = arr;
@@ -552,14 +569,14 @@ onBeforeUnmount(() => {
:label="t('views.dashboard.cdr.time')"
name="queryRangePicker"
>
<a-range-picker
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:presets="rangePickerPresets"
:bordered="true"
:allow-clear="false"
style="width: 100%"
: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>

202
src/views/dashboard/mocn/components/AlarnTypeBar/index.vue
View File

@@ -1,202 +0,0 @@
<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
TitleComponent,
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
LegendComponent,
LegendComponentOption,
} from 'echarts/components';
import {
PieChart,
PieSeriesOption,
BarChart,
BarSeriesOption,
} from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { markRaw, onMounted, ref } from 'vue';
import { origGet, top3Sel } from '@/api/faultManage/actAlarm';
import useI18n from '@/hooks/useI18n';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const { t } = useI18n();
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
PieChart,
BarChart,
CanvasRenderer,
LabelLayout,
]);
type EChartsOption = echarts.ComposeOption<
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| LegendComponentOption
| PieSeriesOption
| BarSeriesOption
>;
/**图DOM节点实例对象 */
const alarmTypeBar = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
const alarmTypeBarChart = ref<any>(null);
/**告警类型数据 */
const alarmTypeType = ref<any>([
{
value: 0,
name: t('views.index.Critical'),
},
{
value: 0,
name: t('views.index.Major'),
},
{
value: 0,
name: t('views.index.Minor'),
},
{
value: 0,
name: t('views.index.Warning'),
},
{
value: 0,
name: t('views.index.Event'),
},
]);
//
function initPicture() {
Promise.allSettled([origGet()])
.then(resArr => {
if (resArr[0].status === 'fulfilled') {
const res0 = resArr[0].value;
if (res0.code === RESULT_CODE_SUCCESS && Array.isArray(res0.data)) {
for (const item of res0.data) {
let index = 0;
switch (item.name) {
case 'Critical':
index = 0;
break;
case 'Major':
index = 1;
break;
case 'Minor':
index = 2;
break;
case 'Warning':
index = 3;
break;
case 'Event':
index = 4;
break;
}
alarmTypeType.value[index].value = Number(item.value);
}
}
}
})
.then(() => {
const optionData: EChartsOption = {
title: [
{
show: false,
},
],
tooltip: {
trigger: 'item',
formatter: '{b} : {c}',
},
legend: {
orient: 'vertical',
right: '2%',
top: '10%',
data: alarmTypeType.value.map((item: any) => item.name), //label数组
textStyle: {
color: '#A7D6F4', // 设置图例文字颜色
},
},
grid: [
{
top: '60%',
left: '15%',
right: '25%',
bottom: '10%',
},
],
series: [
//饼图:
{
type: 'pie',
radius: '60%',
color: ['#f5222d', '#fa8c16', '#fadb14', '#1677ff', '#13c2c2'],
label: {
show: true,
position: 'inner',
formatter: (params: any) => {
if (!params.value) return '';
return `${params.value}`;
},
},
labelLine: {
show: false,
},
center: ['30%', '40%'],
data: alarmTypeType.value,
zlevel: 2, // 设置zlevel为1，使得柱状图在下层显示
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
],
};
fnDesign(alarmTypeBar.value, optionData);
});
}
function fnDesign(container: HTMLElement | undefined, option: any) {
if (!container) return;
alarmTypeBarChart.value = markRaw(echarts.init(container, 'light'));
option && alarmTypeBarChart.value.setOption(option);
// 创建 ResizeObserver 实例
var observer = new ResizeObserver(entries => {
if (alarmTypeBarChart.value) {
alarmTypeBarChart.value.resize();
}
});
// 监听元素大小变化
observer.observe(container);
}
onMounted(() => {
initPicture();
});
</script>
<template>
<div ref="alarmTypeBar" class="chart-container"></div>
</template>
<style lang="less" scoped>
.chart-container {
/* 设置图表容器大小和位置 */
width: 100%;
height: 100%;
}
</style>

92
src/views/dashboard/mocn/components/setting.vue
View File

@@ -1,92 +0,0 @@
<script setup lang="ts">
import { reactive, toRaw, watch } from 'vue';
import { ProModal } from 'antdv-pro-modal';
import { dbGetJSON, dbSetJSON } from '@/utils/cache-db-utils';
const emit = defineEmits(['ok', 'cancel', 'update:open']);
const props = defineProps({
title: {
type: String,
default: '标题',
},
open: {
type: Boolean,
default: false,
},
});
/**数据参数 */
let dataState = reactive({
/**基站数 */
baseNum: 0,
/**核心网数 */
coreNetNum: 0,
/**在线用户数 */
onlineUserNum: 0,
});
/**弹框取消按钮事件 */
function fnModalOk() {
dbSetJSON('tbl_mocn', `tmp`, toRaw(dataState));
emit('ok');
emit('update:open', false);
}
/**弹框取消按钮事件 */
function fnModalCancel() {
emit('cancel');
emit('update:open', false);
}
/**显示弹框时初始数据 */
function init() {
// 读取数据
dbGetJSON('tbl_mocn', `tmp`).then(data => {
if (data) {
Object.assign(dataState, data);
}
});
}
/**监听是否显示，初始数据 */
watch(
() => props.open,
val => {
if (val) init();
}
);
</script>
<template>
<ProModal
:drag="true"
:width="800"
:title="props.title"
:open="props.open"
:keyboard="false"
:mask-closable="false"
@cancel="fnModalCancel"
@ok="fnModalOk"
>
<a-form
name="dataState"
layout="horizontal"
:label-col="{ span: 6 }"
:labelWrap="true"
>
<a-form-item label="baseNum" name="baseNum">
<a-input-number v-model:value="dataState.baseNum"> </a-input-number>
</a-form-item>
<a-form-item label="coreNetNum" name="coreNetNum">
<a-input-number v-model:value="dataState.coreNetNum"> </a-input-number>
</a-form-item>
<a-form-item label="onlineUserNum" name="onlineUserNum">
<a-input-number v-model:value="dataState.onlineUserNum">
</a-input-number>
</a-form-item>
</a-form>
</ProModal>
</template>
<style lang="less" scoped></style>
<style lang="less" scoped></style>

570
src/views/dashboard/mocn/index.vue
View File

@@ -1,570 +0,0 @@
<script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import svgBase from '@/assets/svg/base.svg';
import svgUserIMS from '@/assets/svg/userIMS.svg';
import svgUserSMF from '@/assets/svg/userSMF.svg';
import useI18n from '@/hooks/useI18n';
import Topology from '../overview/components/Topology/index.vue';
import NeResources from '../overview/components/NeResources/index.vue';
import UserActivity from '../overview/components/UserActivity/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import Setting from './components/setting.vue';
import UPFFlow from '../overview/components/UPFFlow/index.vue';
import { listUDMSub } from '@/api/neData/udm_sub';
import { listUENumBySMF } from '@/api/neUser/smf';
import { listUENumByIMS } from '@/api/neUser/ims';
import { listBase5G } from '@/api/neUser/base5G';
import {
graphNodeClickID,
graphState,
notNeNodes,
graphNodeStateNum,
neStateRequestMap,
} from '../overview/hooks/useTopology';
import { upfTotalFlow, upfTFActive } from '../overview/hooks/useUPFTotalFlow';
import { useFullscreen } from '@vueuse/core';
import useWS from '../overview/hooks/useWS';
import useAppStore from '@/store/modules/app';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { useRouter } from 'vue-router';
import { dbGetJSON } from '@/utils/cache-db-utils';
const router = useRouter();
const appStore = useAppStore();
const { t } = useI18n();
const { wsSend, userActivitySend, upfTFSend } = useWS();
/**概览状态类型 */
type SkimStateType = {
/**UDM签约用户数量 */
udmSubNum: number;
/**SMF在线用户数 */
smfUeNum: number;
/**IMS在线用户数 */
imsUeNum: number;
/**5G基站数量 */
gnbNum: number;
/**5G在线用户数量 */
gnbUeNum: number;
/**4G基站数量 */
enbNum: number;
/**4G在线用户数量 */
enbUeNum: number;
};
/**概览状态信息 */
let skimState: SkimStateType = reactive({
udmSubNum: 0,
smfUeNum: 0,
imsUeNum: 0,
gnbNum: 0,
gnbUeNum: 0,
enbNum: 0,
enbUeNum: 0,
});
/**总览节点 */
const viewportDom = ref<HTMLElement | null>(null);
const { isFullscreen, toggle } = useFullscreen(viewportDom);
/**10s调度器 */
const interval10s = ref<any>(null);
/**5s调度器 */
const interval5s = ref<any>(null);
/**查询网元状态 */
function fnGetNeState() {
// 获取节点状态
for (const node of graphState.data.nodes) {
if (notNeNodes.includes(node.id)) continue;
const { neType, neId } = node.neInfo;
if (!neType || !neId) continue;
// 请求标记检查避免重复发送
if (neStateRequestMap.value.get(neType)) continue;
neStateRequestMap.value.set(neType, true);
wsSend({
requestId: `neState_${neType}_${neId}`,
type: 'ne_state',
data: {
neType: neType,
neId: neId,
},
});
}
}
/**获取概览信息 */
async function fnGetSkim() {
const resArr = await Promise.allSettled([
listUDMSub({
neid: '001',
pageNum: 1,
pageSize: 1,
}),
listUENumBySMF('001'),
listUENumByIMS('001'),
listBase5G({
neType: 'AMF',
neId: '001',
}),
listBase5G({
neType: 'MME',
neId: '001',
}),
]);
if (resArr[0].status === 'fulfilled') {
const res0 = resArr[0].value;
if (res0.code === RESULT_CODE_SUCCESS) {
skimState.udmSubNum = res0.total;
}
}
if (resArr[1].status === 'fulfilled') {
const res1 = resArr[1].value;
if (res1.code === RESULT_CODE_SUCCESS) {
skimState.smfUeNum = res1.data;
}
}
if (resArr[2].status === 'fulfilled') {
const res2 = resArr[2].value;
if (res2.code === RESULT_CODE_SUCCESS) {
skimState.imsUeNum = res2.data;
}
}
if (resArr[3].status === 'fulfilled') {
const res3 = resArr[3].value;
if (res3.code === RESULT_CODE_SUCCESS) {
skimState.gnbNum = res3.total;
skimState.gnbUeNum = 0;
res3.rows.map((item: any) => {
skimState.gnbUeNum += item.ueNum;
});
}
}
if (resArr[4].status === 'fulfilled') {
const res4 = resArr[4].value;
if (res4.code === RESULT_CODE_SUCCESS) {
skimState.enbNum = res4.total;
skimState.enbUeNum = 0;
res4.rows.map((item: any) => {
skimState.enbUeNum += item.ueNum;
});
}
}
}
/**初始数据函数 */
function loadData() {
fnGetNeState(); // 获取网元状态
userActivitySend();
upfTFSend('0');
upfTFSend('7');
upfTFSend('30');
clearInterval(interval10s.value);
interval10s.value = setInterval(() => {
if (upfTFActive.value === '0') {
upfTFSend('7');
upfTFActive.value = '7';
} else if (upfTFActive.value === '7') {
upfTFSend('30');
upfTFActive.value = '30';
} else if (upfTFActive.value === '30') {
upfTFSend('0');
upfTFActive.value = '0';
}
}, 10_000);
clearInterval(interval5s.value);
interval5s.value = setInterval(() => {
fnGetSkim(); // 获取概览信息
fnGetNeState(); // 获取网元状态
}, 5_000);
}
/**栏目信息跳转 */
function fnToRouter(name: string, query?: any) {
router.push({ name, query });
}
onMounted(() => {
fnGetSkim().then(() => {
loadData();
});
// 读取数据
dbGetJSON('tbl_mocn', `tmp`).then(data => {
if (data) {
Object.assign(mocnState.data, data);
}
});
});
onBeforeUnmount(() => {
clearInterval(interval10s.value);
clearInterval(interval5s.value);
});
/**MOCN状态 */
const mocnState = reactive({
title: 'Set MOCN Data',
open: false,
data: {
/**基站数 */
baseNum: 0,
/**核心网数 */
coreNetNum: 0,
/**在线用户数 */
onlineUserNum: 0,
},
});
/**MOCN 右击设置 */
function fnRightClick() {
mocnState.open = true;
}
</script>
<template>
<div class="viewport" ref="viewportDom">
<div class="brand">
<div
class="brand-title"
@click="toggle"
:title="t('views.dashboard.overview.fullscreen')"
>
{{ t('views.dashboard.overview.title') }}
<FullscreenExitOutlined v-if="isFullscreen" />
<FullscreenOutlined v-else />
</div>
<div class="brand-desc">{{ appStore.appName }}</div>
</div>
<div class="column">
<!--概览-->
<div class="skim panel">
<div class="inner">
<h3>
<IdcardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.skim.userTitle') }}
</h3>
<div class="data">
<div
class="item toRouter"
@click="fnToRouter('Sub_2010')"
:title="t('views.dashboard.overview.toRouter')"
>
<div>
<UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
{{ skimState.udmSubNum }}
</div>
<span>
{{ t('views.dashboard.overview.skim.users') }}
</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('Ims_2080')"
:title="t('views.dashboard.overview.toRouter')"
style="margin: 0 12px"
>
<div>
<img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
{{ skimState.imsUeNum }}
</div>
<span>
{{ t('views.dashboard.overview.skim.imsUeNum') }}
</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('Ue_2081')"
:title="t('views.dashboard.overview.toRouter')"
>
<div>
<img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
{{ skimState.smfUeNum }}
</div>
<span>
{{ t('views.dashboard.overview.skim.smfUeNum') }}
</span>
</div>
</div>
</div>
</div>
<div class="skim panel base">
<div class="inner">
<h3>
<GlobalOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.skim.baseTitle') }}
</h3>
<div class="data">
<div
class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start">
<img
:src="svgBase"
style="width: 18px; margin-right: 8px; height: 2rem"
/>
{{ skimState.gnbNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start">
<UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
{{ skimState.gnbUeNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.gnbUeNum') }}</span>
</div>
</div>
<div class="data">
<div
class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start">
<img
:src="svgBase"
style="width: 18px; margin-right: 8px; height: 2rem"
/>
{{ skimState.enbNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
</div>
<div
class="item toRouter"
@click="fnToRouter('Base5G_2082', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')"
>
<div style="align-items: flex-start">
<UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
{{ skimState.enbUeNum }}
</div>
<span>{{ t('views.dashboard.overview.skim.enbUeNum') }}</span>
</div>
</div>
</div>
</div>
<!-- 用户行为 -->
<div class="userActivity panel">
<div class="inner">
<h3>
<WhatsAppOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.userActivity.title') }}
</h3>
<div class="chart">
<UserActivity />
</div>
</div>
</div>
</div>
<div class="column" style="flex: 4; margin: 1.333rem 0.833rem 0">
<!-- 实时流量 -->
<div class="upfFlow panel">
<div class="inner">
<h3
class="toRouter"
@click="fnToRouter('GoldTarget_2104')"
:title="t('views.dashboard.overview.toRouter')"
>
<AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.upfFlow.title') }}
</h3>
<div class="chart">
<UPFFlow />
</div>
</div>
</div>
<!-- 网络拓扑 -->
<div class="topology panel">
<div class="inner">
<h3
class="toRouter"
@click="fnToRouter('TopologyArchitecture_2128')"
:title="t('views.dashboard.overview.toRouter')"
>
<span>
<ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.topology.title') }}
</span>
<span>
{{ t('views.dashboard.overview.topology.normal') }}:
<span class="normal"> {{ graphNodeStateNum[0] }} </span>
{{ t('views.dashboard.overview.topology.abnormal') }}:
<span class="abnormal"> {{ graphNodeStateNum[1] }} </span>
</span>
</h3>
<div class="chart">
<Topology />
</div>
</div>
</div>
</div>
<div class="column">
<!-- 流量统计 -->
<div class="upfFlowTotal panel">
<div class="inner">
<h3>
<span>
<SwapOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.upfFlowTotal.title') }}
</span>
<!-- 筛选 -->
<div class="filter">
<span
:data-key="v"
:class="{ active: upfTFActive === v }"
v-for="v in ['0', '7', '30']"
:key="v"
@click="
() => {
upfTFActive = v;
}
"
>
{{
v === '0'
? '24' + t('common.units.hour')
: v + t('common.units.day')
}}
</span>
</div>
</h3>
<div class="chart">
<!-- 数据 -->
<div class="data">
<div class="item">
<span>
<ArrowUpOutlined style="color: #597ef7" />
{{ t('views.dashboard.overview.upfFlowTotal.up') }}
</span>
<h4>{{ upfTotalFlow[upfTFActive].upFrom }}</h4>
</div>
<div class="item">
<span>
<ArrowDownOutlined style="color: #52c41a" />
{{ t('views.dashboard.overview.upfFlowTotal.down') }}
</span>
<h4>{{ upfTotalFlow[upfTFActive].downFrom }}</h4>
</div>
</div>
</div>
</div>
</div>
<!-- MOCN -->
<div class="skim panel mocn">
<div class="inner">
<h3
class="toRouter"
@contextmenu.prevent="fnRightClick()"
@click="fnToRouter('GoldTarget_2104', { neType: 'MOCNGW' })"
:title="t('views.dashboard.overview.toRouter')"
>
<PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp; MOCN
Information
</h3>
<div class="chart">
<div class="data">
<div class="item" title="NodeB">
<div>
<img :src="svgBase" style="width: 18px; margin-right: 8px" />
{{ mocnState.data.baseNum }}
</div>
<span> NodeB </span>
</div>
<div class="item" title="CoreNet">
<div>
<img
:src="svgUserSMF"
style="width: 18px; margin-right: 8px"
/>
{{ mocnState.data.coreNetNum }}
</div>
<span> CoreNet </span>
</div>
</div>
<div class="data">
<div class="item" title="OnlineUser">
<div>
<UserOutlined
style="color: #4096ff; margin-right: 8px; font-size: 1.1rem"
/>
{{ mocnState.data.onlineUserNum }}
</div>
<span> OnlineUser </span>
</div>
</div>
</div>
</div>
</div>
<!-- 告警统计 -->
<div class="alarmType panel">
<div class="inner">
<h3
class="toRouter"
@click="fnToRouter('HistoryAlarm_2097')"
:title="t('views.dashboard.overview.toRouter')"
>
<PieChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.alarmTypeBar.alarmSum') }}
</h3>
<div class="chart">
<AlarnTypeBar />
</div>
</div>
</div>
<!-- 资源情况 -->
<div class="resources panel">
<div class="inner">
<h3>
<DashboardOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.resources.title') }}：
{{ graphNodeClickID }}
</h3>
<div class="chart">
<NeResources />
</div>
</div>
</div>
</div>
<Setting
:title="mocnState.title"
v-model:open="mocnState.open"
></setting>
</div>
</template>
<style lang="less" scoped>
@import url('../overview/css/index.css');
.mocn {
height: 20.6%;
}
.mocn .inner .chart .data {
height: unset;
}
.mocn .inner .chart .data .item {
width: 50%;
}
.alarmType {
height: 24.4%;
}
</style>

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

@@ -216,7 +216,7 @@ function fnGetInitData() {
sortOrder: 'asc',
})
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
for (const item of res.data) {
upfFlowParse(item);
}

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

@@ -10,9 +10,10 @@ import UserActivity from './components/UserActivity/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import UPFFlow from './components/UPFFlow/index.vue';
import { listUDMSub } from '@/api/neData/udm_sub';
import { listUENumBySMF } from '@/api/neUser/smf';
import { listUENumByIMS } from '@/api/neUser/ims';
import { listBase5G } from '@/api/neUser/base5G';
import { listIMSSessionNum } from '@/api/neData/ims';
import { listAMFNblist } from '@/api/neData/amf';
import { listMMENblist } from '@/api/neData/mme';
import { listSMFSubNum } from '@/api/neData/smf';
import {
graphNodeClickID,
graphState,
@@ -110,13 +111,13 @@ async function fnGetSkim() {
listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }),
process: (res: any) =>
res.code === RESULT_CODE_SUCCESS &&
(skimState.udmSubNum += res.total),
(skimState.udmSubNum += res.data.total),
},
],
[
'SMF',
{
request: (neId: string) => listUENumBySMF(neId),
request: (neId: string) => listSMFSubNum(neId),
process: (res: any) =>
res.code === RESULT_CODE_SUCCESS && (skimState.smfUeNum += res.data),
},
@@ -124,7 +125,7 @@ async function fnGetSkim() {
[
'IMS',
{
request: (neId: string) => listUENumByIMS(neId),
request: (neId: string) => listIMSSessionNum(neId),
process: (res: any) =>
res.code === RESULT_CODE_SUCCESS && (skimState.imsUeNum += res.data),
},
@@ -132,11 +133,11 @@ async function fnGetSkim() {
[
'AMF',
{
request: (neId: string) => listBase5G({ neType: 'AMF', neId }),
request: (neId: string) => listAMFNblist({ neId }),
process: (res: any) => {
if (res.code === RESULT_CODE_SUCCESS) {
skimState.gnbNum += res.total;
skimState.gnbUeNum += res.rows.reduce(
skimState.gnbNum += res.data.length;
skimState.gnbUeNum += res.data.reduce(
(sum: number, item: any) => sum + item.ueNum,
0
);
@@ -147,11 +148,11 @@ async function fnGetSkim() {
[
'MME',
{
request: (neId: string) => listBase5G({ neType: 'MME', neId }),
request: (neId: string) => listMMENblist({ neId }),
process: (res: any) => {
if (res.code === RESULT_CODE_SUCCESS) {
skimState.enbNum += res.total;
skimState.enbUeNum += res.rows.reduce(
skimState.enbNum += res.data.length;
skimState.enbUeNum += res.data.reduce(
(sum: number, item: any) => sum + item.ueNum,
0
);
@@ -267,12 +268,12 @@ onMounted(() => {
neInfoStore
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'UPF') {
arr.push({ value: i.neId, label: i.neName, rmUid: i.rmUid });
res.data.forEach((v: any) => {
if (v.neType === 'UPF') {
arr.push({ value: v.neId, label: v.neName, rmUid: v.rmUid });
}
});

85
src/views/dashboard/sgwcCDR/index.vue
View File

@@ -17,6 +17,7 @@ import {
listSGWCDataCDR,
} from '@/api/neData/sgwc';
import { OptionsType, WS } from '@/plugins/ws-websocket';
import dayjs, { type Dayjs } from 'dayjs';
import PQueue from 'p-queue';
import saveAs from 'file-saver';
import { useClipboard } from '@vueuse/core';
@@ -29,7 +30,25 @@ const queue = new PQueue({ concurrency: 1, autoStart: true });
let neOtions = ref<Record<string, any>[]>([]);
/**开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);
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({
@@ -41,9 +60,9 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: '',
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: '',
endTime: undefined as undefined | number,
/**当前页数 */
pageNum: 1,
/**每页条数 */
@@ -55,12 +74,12 @@ function fnQueryReset() {
queryParams = Object.assign(queryParams, {
imsi: '',
msisdn: '',
startTime: '',
endTime: '',
beginTime: undefined,
endTime: undefined,
pageNum: 1,
pageSize: 20,
});
queryRangePicker.value = ['', ''];
queryRangePicker.value = [dayjs().startOf('hour'), dayjs().endOf('hour')];
tablePagination.current = 1;
tablePagination.pageSize = 20;
fnGetList();
@@ -310,20 +329,30 @@ function fnGetList(pageNum?: number) {
if (pageNum) {
queryParams.pageNum = pageNum;
}
if (!queryRangePicker.value) {
queryRangePicker.value = ['', ''];
// 时间范围
if (
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listSGWCDataCDR(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
if (res.code === RESULT_CODE_SUCCESS) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
const { total, rows } = res.data;
tablePagination.total = total;
// tableState.data = rows;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
tableState.data = rows.map((item: any) => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
@@ -454,12 +483,12 @@ onMounted(() => {
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'SGWC') {
arr.push({ value: i.neId, label: i.neName });
res.data.forEach((v: any) => {
if (v.neType === 'SGWC') {
arr.push({ value: v.neId, label: v.neName });
}
});
neOtions.value = arr;
@@ -554,12 +583,12 @@ onBeforeUnmount(() => {
>
<a-range-picker
v-model:value="queryRangePicker"
allow-clear
bordered
:presets="rangePickerPresets"
:bordered="true"
:allow-clear="false"
style="width: 100%"
: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>
@@ -768,12 +797,18 @@ onBeforeUnmount(() => {
<span> {{ record.cdrJSON.servedMSISDN }} </span>
</div>
<div>
<span>PGW Address Used: </span>
<span> {{ record.cdrJSON.pGWAddressUsed }} </span>
<span>GGSN Address: </span>
<span>
{{
record.cdrJSON.pGWAddressUsed || record.cdrJSON.GGSNAddress
}}
</span>
</div>
<div>
<span>SGW Address: </span>
<span> {{ record.cdrJSON.sGWAddress }} </span>
<span>SGSN Address: </span>
<span>
{{ record.cdrJSON.sGWAddress || record.cdrJSON.SGSNAddress }}
</span>
</div>
<div>
<span>RAT Type: </span>

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

@@ -19,7 +19,7 @@ import {
import { OptionsType, WS } from '@/plugins/ws-websocket';
import PQueue from 'p-queue';
import saveAs from 'file-saver';
import dayjs, { Dayjs } from 'dayjs';
import dayjs, { type Dayjs } from 'dayjs';
import { useClipboard } from '@vueuse/core';
const { copy } = useClipboard({ legacy: true });
const { t } = useI18n();
@@ -59,7 +59,7 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: undefined as undefined | number,
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: undefined as undefined | number,
/**当前页数 */
@@ -362,22 +362,24 @@ function fnGetList(pageNum?: number) {
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.startTime = queryRangePicker.value[0].valueOf();
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.startTime = undefined;
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
listSMFDataCDR(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
if (res.code === RESULT_CODE_SUCCESS) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
const { total, rows } = res.data;
tablePagination.total = total;
// tableState.data = rows;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
tableState.data = rows.map((item: any) => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
@@ -508,12 +510,12 @@ onMounted(() => {
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
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 });
res.data.forEach((v: any) => {
if (v.neType === 'SMF') {
arr.push({ value: v.neId, label: v.neName });
}
});
neOtions.value = arr;

20
src/views/dashboard/smfCDRByIMSI/index.vue
View File

@@ -229,7 +229,7 @@ function fnRanderChart() {
// 创建 ResizeObserver 实例 监听图表容器大小变化，并在变化时调整图表大小
var observer = new ResizeObserver(entries => {
if (cdrChart) {
if (cdrChart && !cdrChart.isDisposed) {
cdrChart.resize();
}
});
@@ -271,7 +271,7 @@ let queryParams = reactive({
sortField: 'timestamp',
sortOrder: 'desc',
/**开始时间 */
startTime: undefined as undefined | number,
beginTime: undefined as undefined | number,
/**结束时间 */
endTime: undefined as undefined | number,
/**当前页数 */
@@ -321,20 +321,20 @@ function fnGetList(pageNum?: number) {
Array.isArray(queryRangePicker.value) &&
queryRangePicker.value.length > 0
) {
queryParams.startTime = queryRangePicker.value[0].valueOf();
queryParams.beginTime = queryRangePicker.value[0].valueOf();
queryParams.endTime = queryRangePicker.value[1].valueOf();
} else {
queryParams.startTime = undefined;
queryParams.beginTime = undefined;
queryParams.endTime = undefined;
}
listSMFDataCDR(toRaw(queryParams))
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
if (res.code === RESULT_CODE_SUCCESS) {
state.total = res.total;
// 遍历处理cdr字符串数据
state.data = res.rows
.map(item => {
.map((item: any) => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
@@ -546,12 +546,12 @@ onMounted(() => {
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
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 });
res.data.forEach((v: any) => {
if (v.neType === 'SMF') {
arr.push({ value: v.neId, label: v.neName });
}
});
neOtions.value = arr;

16
src/views/dashboard/smscCDR/index.vue
View File

@@ -310,14 +310,16 @@ function fnGetList(pageNum?: number) {
queryParams.startTime = queryRangePicker.value[0];
queryParams.endTime = queryRangePicker.value[1];
listSMSCDataCDR(toRaw(queryParams)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
if (res.code === RESULT_CODE_SUCCESS) {
// 取消勾选
if (tableState.selectedRowKeys.length > 0) {
tableState.selectedRowKeys = [];
}
tablePagination.total = res.total;
const { total, rows } = res.data;
tablePagination.total = total;
// tableState.data = rows;
// 遍历处理cdr字符串数据
tableState.data = res.rows.map(item => {
tableState.data = rows.map((item:any) => {
let cdrJSON = item.cdrJSON;
if (!cdrJSON) {
Reflect.set(item, 'cdrJSON', {});
@@ -454,12 +456,12 @@ onMounted(() => {
useNeInfoStore()
.fnNelist()
.then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.data)) {
if (res.code === RESULT_CODE_SUCCESS) {
if (res.data.length > 0) {
let arr: Record<string, any>[] = [];
res.data.forEach(i => {
if (i.neType === 'SMSC') {
arr.push({ value: i.neId, label: i.neName });
res.data.forEach((v:any) => {
if (v.neType === 'SMSC') {
arr.push({ value: v.neId, label: v.neName });
}
});
neOtions.value = arr;