This commit is contained in:
lai
2024-01-31 16:17:24 +08:00
8 changed files with 130 additions and 51 deletions

View File

@@ -7,7 +7,8 @@ import UserActivity from './components/UserActivity/index.vue';
import AlarnTypeBar from './components/AlarnTypeBar/index.vue';
import UPFFlow from './components/UPFFlow/index.vue';
import { listSub } from '@/api/neUser/sub';
import { listUENum } from '@/api/neUser/ue';
import { listUENumBySMF } from '@/api/neUser/smf';
import { listUENumByIMS } from '@/api/neUser/ims';
import { listBase5G } from '@/api/neUser/base5G';
import {
@@ -15,31 +16,36 @@ import {
graphState,
notNeNodes,
graphNodeStateNum,
neStateRequestMap,
} from './hooks/useTopology';
import { upfTotalFlow, upfTFActive } from './hooks/useUPFTotalFlow';
import { useFullscreen } from '@vueuse/core';
import useWS from './hooks/useWS';
import useAppStore from '@/store/modules/app';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
const appStore = useAppStore();
const { t } = useI18n();
const { wsSend, cdrEventSend, ueEventSend, upfTFSend } = useWS();
/**用户在线信息 */
let onlineInfo: {
/**签约用户数量 */
subNum: number;
/**在线用户数 */
ueNum: any;
/**概览状态类型 */
type SkimStateType = {
/**UDM签约用户数量 */
udmSubNum: number;
/**SMF在线用户数 */
smfUeNum: number;
/**IMS在线用户数 */
imsUeNum: number;
/**基站数量 */
nbNum: number;
/**原始严重程度 */
activeAlarmSeverity: DictType[];
} = reactive({
subNum: 0,
ueNum: 0,
};
/**概览状态信息 */
let skimState: SkimStateType = reactive({
udmSubNum: 0,
smfUeNum: 0,
imsUeNum: 0,
nbNum: 0,
activeAlarmSeverity: [],
});
/**总览节点 */
@@ -53,13 +59,17 @@ const stateInterval = ref<any>(null);
const stateTimeout = ref<any>(null);
/**查询网元状态 */
async function fnGetState() {
function fnGetState() {
clearTimeout(stateTimeout.value);
// 获取节点状态
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',
@@ -70,7 +80,7 @@ async function fnGetState() {
});
}
// stateTimeout.value = setTimeout(() => fnGetState(), 5_000);
stateTimeout.value = setTimeout(() => fnGetState(), 5_000);
}
/**初始数据函数 */
@@ -97,11 +107,9 @@ function InitData() {
onMounted(() => {
Promise.allSettled([
listSub({
neid: '003',
sortField: 'imsi',
sortOrder: 'asc',
pageNum: '1',
pageSize: '20',
neid: '001',
pageNum: 1,
pageSize: 1,
}),
listBase5G({
//
@@ -112,11 +120,15 @@ onMounted(() => {
/**每页条数 */
pageSize: 20,
}),
listUENum('001'),
listUENumBySMF('001'),
listUENumByIMS('001'),
])
.then(resArr => {
if (resArr[0].status === 'fulfilled') {
onlineInfo.subNum = resArr[0].value.total;
const res = resArr[0].value;
if (res.code === RESULT_CODE_SUCCESS) {
skimState.udmSubNum = res.total;
}
}
if (
@@ -124,14 +136,21 @@ onMounted(() => {
resArr[1].value.code === RESULT_CODE_SUCCESS &&
Array.isArray(resArr[1].value.rows)
) {
onlineInfo.nbNum = resArr[1].value.rows.length;
skimState.nbNum = resArr[1].value.rows.length;
}
if (
resArr[2].status === 'fulfilled' &&
resArr[2].value?.code === RESULT_CODE_SUCCESS
) {
onlineInfo.ueNum = resArr[2].value?.data;
if (resArr[2].status === 'fulfilled') {
const res = resArr[2].value;
if (res.code === RESULT_CODE_SUCCESS) {
skimState.smfUeNum = res.data;
}
}
if (resArr[3].status === 'fulfilled') {
const res = resArr[3].value;
if (res.code === RESULT_CODE_SUCCESS) {
skimState.imsUeNum = res.data;
}
}
})
.finally(() => {
@@ -165,33 +184,33 @@ onBeforeUnmount(() => {
<div class="skim panel">
<div class="inner">
<div class="item">
<h4>{{ onlineInfo.subNum }}</h4>
<h4>{{ skimState.udmSubNum }}</h4>
<span>
<UserOutlined style="color: #006cff" />
{{ t('views.dashboard.overview.skim.users') }}
</span>
</div>
<div class="item">
<h4>{{ onlineInfo.nbNum }}</h4>
<h4>{{ skimState.nbNum }}</h4>
<span>
<GlobalOutlined style="color: #edcb35" />
{{ t('views.dashboard.overview.skim.base') }}
</span>
</div>
<div class="item">
<h4>{{ onlineInfo.ueNum }}</h4>
<span>
<UserSwitchOutlined style="color: #6acca3" />
Data {{ t('views.dashboard.overview.skim.session') }}
</span>
</div>
<div class="item">
<h4>0</h4>
<h4>{{ skimState.imsUeNum }}</h4>
<span>
<UserSwitchOutlined style="color: #6acca3" />
IMS {{ t('views.dashboard.overview.skim.session') }}
</span>
</div>
<div class="item">
<h4>{{ skimState.smfUeNum }}</h4>
<span>
<UserSwitchOutlined style="color: #6acca3" />
Data {{ t('views.dashboard.overview.skim.session') }}
</span>
</div>
</div>
</div>