435 lines
12 KiB
Vue
435 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, markRaw, reactive } from 'vue';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import { listUDMSub } from '@/api/neData/udm_sub';
|
|
import { listUEInfoBySMF } from '@/api/neUser/smf';
|
|
import svgBasefff from '@/assets/svg/basefff.svg';
|
|
import fourEvent from '@/assets/svg/4gEvent.svg';
|
|
import fiveEvent from '@/assets/svg/5gEvent.svg';
|
|
import smscCdr from '@/assets/svg/smscCdr.svg';
|
|
import { listBase5G } from '@/api/neUser/base5G';
|
|
import { useRouter } from 'vue-router';
|
|
import { listUENumByIMS } from '@/api/neUser/ims';
|
|
import { listSMFDataCDR } from '@/api/neData/smf';
|
|
import { listIMSDataCDR } from '@/api/neData/ims';
|
|
import { listSMSCDataCDR } from '@/api/neData/smsc';
|
|
import { listMMEDataUE } from '@/api/neData/mme';
|
|
import { listAMFDataUE } from '@/api/neData/amf';
|
|
const router = useRouter();
|
|
const { t } = useI18n();
|
|
|
|
/**概览状态类型 */
|
|
type SkimStateType = {
|
|
/**UDM签约用户数量 */
|
|
udmSubNum: number;
|
|
/**SMF在线用户数 */
|
|
smfUeNum: number;
|
|
/**5G基站数量 */
|
|
gnbNum: number;
|
|
/**5G在线用户数量 */
|
|
gnbUeNum: number;
|
|
/**4G基站数量 */
|
|
enbNum: number;
|
|
/**4G在线用户数量 */
|
|
enbUeNum: number;
|
|
/**IMS在线用户数量 */
|
|
imsUeNum: number;
|
|
/**SMF CDR数量 */
|
|
smfCdrNum: number;
|
|
/**IMS CDR数量 */
|
|
imsCdrNum: number;
|
|
/**SMSC CDR数量 */
|
|
smscCdrNum: number;
|
|
/**4G事件数量 */
|
|
EventNum: number;
|
|
/**5G事件数量 */
|
|
gEventNum: number;
|
|
};
|
|
|
|
/**概览状态信息 */
|
|
let skimState: SkimStateType = reactive({
|
|
udmSubNum: 0,
|
|
smfUeNum: 0,
|
|
gnbNum: 0,
|
|
gnbUeNum: 0,
|
|
enbNum: 0,
|
|
enbUeNum: 0,
|
|
imsUeNum: 0,
|
|
smfCdrNum: 0,
|
|
imsCdrNum: 0,
|
|
smscCdrNum: 0,
|
|
EventNum: 0,
|
|
gEventNum: 0,
|
|
});
|
|
|
|
/**获取概览信息 */
|
|
async function fnGetSkim() {
|
|
const resArr = await Promise.allSettled([
|
|
listUDMSub({
|
|
neid: '001',
|
|
pageNum: 1,
|
|
pageSize: 1,
|
|
}),
|
|
listUEInfoBySMF({
|
|
neId: '001',
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
}),
|
|
listBase5G({
|
|
neType: 'AMF',
|
|
neId: '001',
|
|
}),
|
|
listBase5G({
|
|
neType: 'MME',
|
|
neId: '001',
|
|
}),
|
|
listUENumByIMS('001'),
|
|
listSMFDataCDR({
|
|
neType: 'SMF',
|
|
neId: '001',
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
}),
|
|
listIMSDataCDR({
|
|
neType: 'IMS',
|
|
neId: '001',
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
}),
|
|
listMMEDataUE({
|
|
neType: 'MME',
|
|
neId: '001',
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
}),
|
|
listAMFDataUE({
|
|
neType: 'AMF',
|
|
neId: '001',
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
}),
|
|
listSMSCDataCDR({
|
|
neType: 'SMSC',
|
|
neId: '001',
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
}),
|
|
]);
|
|
|
|
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.total;
|
|
}
|
|
}
|
|
|
|
if (resArr[2].status === 'fulfilled') {
|
|
const res2 = resArr[2].value;
|
|
if (res2.code === RESULT_CODE_SUCCESS) {
|
|
skimState.gnbNum = res2.total;
|
|
skimState.gnbUeNum = 0;
|
|
res2.rows.map((item: any) => {
|
|
skimState.gnbUeNum += item.ueNum;
|
|
});
|
|
}
|
|
}
|
|
if (resArr[3].status === 'fulfilled') {
|
|
const res3 = resArr[3].value;
|
|
if (res3.code === RESULT_CODE_SUCCESS) {
|
|
skimState.enbNum = res3.total;
|
|
skimState.enbUeNum = 0;
|
|
res3.rows.map((item: any) => {
|
|
skimState.enbUeNum += item.ueNum;
|
|
});
|
|
}
|
|
}
|
|
if (resArr[4].status === 'fulfilled') {
|
|
const res4 = resArr[4].value;
|
|
if (res4.code === RESULT_CODE_SUCCESS) {
|
|
skimState.imsUeNum = res4.data;
|
|
}
|
|
}
|
|
if (resArr[5].status === 'fulfilled') {
|
|
const res5 = resArr[5].value;
|
|
if (res5.code === RESULT_CODE_SUCCESS) {
|
|
skimState.smfCdrNum = res5.total;
|
|
}
|
|
}
|
|
|
|
if (resArr[6].status === 'fulfilled') {
|
|
const res6 = resArr[6].value;
|
|
if (res6.code === RESULT_CODE_SUCCESS) {
|
|
skimState.imsCdrNum = res6.total;
|
|
}
|
|
}
|
|
if (resArr[7].status === 'fulfilled') {
|
|
const res7 = resArr[7].value;
|
|
if (res7.code === RESULT_CODE_SUCCESS) {
|
|
skimState.EventNum = res7.total;
|
|
}
|
|
}
|
|
|
|
if (resArr[8].status === 'fulfilled') {
|
|
const res8 = resArr[8].value;
|
|
if (res8.code === RESULT_CODE_SUCCESS) {
|
|
skimState.gEventNum = res8.total;
|
|
}
|
|
}
|
|
if (resArr[9].status === 'fulfilled') {
|
|
const res9 = resArr[9].value;
|
|
if (res9.code === RESULT_CODE_SUCCESS) {
|
|
skimState.smscCdrNum = res9.total;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**栏目信息跳转 */
|
|
function fnToRouter(name: string, query?: any) {
|
|
router.push({ name, query });
|
|
}
|
|
|
|
onMounted(() => {
|
|
fnGetSkim();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<a-row :gutter="[16, 16]" justify="space-between">
|
|
<!-- UDM 签约用户 -->
|
|
<a-col :lg="8" :md="24" :xs="24">
|
|
<a-card
|
|
:bordered="false"
|
|
style="background: linear-gradient(135deg, #abdcff, #0396ff)"
|
|
:hoverable="true"
|
|
class="cardClass"
|
|
>
|
|
<div style="text-align: center">
|
|
<span style="font-size: 24px; font-weight: bold; color: #fff">
|
|
{{ t('views.dashboard.overview.skim.users') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="visual">
|
|
<rise-outlined />
|
|
</div>
|
|
<div class="details">
|
|
<div class="number" @click="fnToRouter('Sub_10010')">
|
|
<UserOutlined class="spaceButton" />
|
|
{{ skimState.udmSubNum }}
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
<!-- 5G基站-AMF -->
|
|
<a-col :lg="8" :md="24" :xs="24">
|
|
<a-card
|
|
:bordered="false"
|
|
style="background: linear-gradient(135deg, #3c8ce7, #00eaff)"
|
|
:hoverable="true"
|
|
class="cardClass"
|
|
>
|
|
<div style="text-align: center">
|
|
<span style="font-size: 24px; font-weight: bold; color: #fff">
|
|
{{ t('views.neUser.base5G.gnb') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="detailsLeft">
|
|
<div
|
|
class="number"
|
|
@click="fnToRouter('Base5G_10012', { neType: '5g' })"
|
|
>
|
|
<img
|
|
:src="svgBasefff"
|
|
style="height: 2rem; color: #fff; margin-top: -9px"
|
|
class="spaceButton"
|
|
/>
|
|
{{ skimState.gnbNum }}
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div
|
|
class="number"
|
|
@click="fnToRouter('Base5G_10012', { neType: '5g' })"
|
|
>
|
|
<UserOutlined class="spaceButton" />
|
|
{{ skimState.gnbUeNum }}
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
<!-- 4G基站-MME -->
|
|
<a-col :lg="8" :md="24" :xs="24">
|
|
<a-card
|
|
:bordered="false"
|
|
style="background: linear-gradient(135deg, #00eaff, #3c8ce7)"
|
|
:hoverable="true"
|
|
class="cardClass"
|
|
>
|
|
<div style="text-align: center">
|
|
<span style="font-size: 24px; font-weight: bold; color: #fff">
|
|
{{ t('views.neUser.base5G.enb') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="detailsLeft">
|
|
<div
|
|
class="number"
|
|
@click="fnToRouter('Base5G_10012', { neType: '4g' })"
|
|
>
|
|
<img
|
|
:src="svgBasefff"
|
|
style="height: 2rem; color: #fff; margin-top: -9px"
|
|
class="spaceButton"
|
|
/>
|
|
{{ skimState.enbNum }}
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div
|
|
class="number"
|
|
@click="fnToRouter('Base5G_10012', { neType: '4g' })"
|
|
>
|
|
<UserOutlined class="spaceButton" /> {{ skimState.enbUeNum }}
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
<!-- 在线信息 SMF以及IMS -->
|
|
<a-col :lg="8" :md="24" :xs="24">
|
|
<a-card
|
|
:bordered="false"
|
|
style="background: linear-gradient(135deg, #93f9b9, #1d976c)"
|
|
:hoverable="true"
|
|
class="cardClass"
|
|
>
|
|
<div style="text-align: center">
|
|
<span style="font-size: 24px; font-weight: bold; color: #fff">
|
|
Online Sessions
|
|
</span>
|
|
</div>
|
|
<div class="detailsLeft">
|
|
<div class="number" @click="fnToRouter('Ims_10020')">
|
|
<PhoneOutlined />
|
|
{{ skimState.imsUeNum }}
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div class="number" @click="fnToRouter('Ue_10011')">
|
|
<database-outlined class="spaceButton" />
|
|
{{ skimState.smfUeNum }}
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
<!-- CDR SMF以及IMS -->
|
|
<a-col :lg="8" :md="24" :xs="24">
|
|
<a-card
|
|
:bordered="false"
|
|
style="background: linear-gradient(135deg, #1d976c, #93f9b9)"
|
|
:hoverable="true"
|
|
class="cardClass"
|
|
>
|
|
<div style="text-align: center">
|
|
<span style="font-size: 24px; font-weight: bold; color: #fff">
|
|
CDR
|
|
</span>
|
|
</div>
|
|
|
|
<div class="details-container">
|
|
<div class="details-item cdrLeft">
|
|
<div
|
|
class="cdrNumber"
|
|
@click="fnToRouter('ImsCDR_10013')"
|
|
title="Voice CDR Number"
|
|
>
|
|
<PhoneOutlined class="spaceButton" />
|
|
<!-- <span class="value">{{ skimState.imsCdrNum }}</span> -->
|
|
<span class="value"> {{ skimState.imsCdrNum }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="details-item cdrCenter">
|
|
<div
|
|
class="cdrNumber"
|
|
@click="fnToRouter('SmscCDR_10021')"
|
|
title="SMS CDR Number"
|
|
>
|
|
<img
|
|
:src="smscCdr"
|
|
style="height: 2.5rem; color: #fff; margin-top: 5px"
|
|
class="spaceButton"
|
|
/>
|
|
<!-- <span class="value"> {{skimState.smfCdrNum}}</span> -->
|
|
<span class="value"> {{ skimState.smscCdrNum }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="details-item cdrRight">
|
|
<div
|
|
class="cdrNumber"
|
|
@click="fnToRouter('SmfCDR_10014')"
|
|
title="Data CDR Number"
|
|
>
|
|
<database-outlined class="spaceButton" />
|
|
<span class="value"> {{ skimState.smfCdrNum }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
|
|
<!--UE EVENT -->
|
|
<a-col :lg="8" :md="24" :xs="24">
|
|
<a-card
|
|
:bordered="false"
|
|
style="background: linear-gradient(135deg, #93f9b9, #1d976c)"
|
|
:hoverable="true"
|
|
class="cardClass"
|
|
>
|
|
<div style="text-align: center">
|
|
<span style="font-size: 24px; font-weight: bold; color: #fff">
|
|
UE Event
|
|
</span>
|
|
</div>
|
|
|
|
<div class="detailsLeft">
|
|
<div class="number" @click="fnToRouter('MmeUE_10017')">
|
|
<img
|
|
:src="fourEvent"
|
|
style="height: 2.5rem; color: #fff; margin-top: -14px"
|
|
class="spaceButton"
|
|
/>
|
|
{{ skimState.EventNum }}
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div class="number" @click="fnToRouter('AmfUE_10016')">
|
|
<img
|
|
:src="fiveEvent"
|
|
style="height: 2.5rem; color: #fff; margin-top: -14px"
|
|
class="spaceButton"
|
|
/>
|
|
{{ skimState.gEventNum }}
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
@import url('./css/module.css');
|
|
</style>
|