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

租户的仪表盘

Browse Source
This commit is contained in:
lai
2024-06-14 17:20:24 +08:00
parent 0d0603058c
commit 322dccfbc1
3 changed files with 398 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
src/views/index/moduleInfo.vue Normal file
View File

@@ -0,0 +1,260 @@
<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 { listSub } from '@/api/neUser/sub';
import { listUENumBySMF } from '@/api/neUser/smf';
import { listBase5G } from '@/api/neUser/base5G';
const { t } = useI18n();
/**概览状态类型 */
type SkimStateType = {
/**UDM签约用户数量 */
udmSubNum: number;
/**SMF在线用户数 */
smfUeNum: number;
/**5G基站数量 */
gnbNum: number;
/**5G在线用户数量 */
gnbUeNum: number;
/**4G基站数量 */
enbNum: number;
/**4G在线用户数量 */
enbUeNum: number;
};
/**概览状态信息 */
let skimState: SkimStateType = reactive({
udmSubNum: 0,
smfUeNum: 0,
gnbNum: 0,
gnbUeNum: 0,
enbNum: 0,
enbUeNum: 0,
});
/**获取概览信息 */
async function fnGetSkim() {
const resArr = await Promise.allSettled([
listSub({
neid: '001',
pageNum: 1,
pageSize: 1,
}),
listUENumBySMF('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.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;
});
}
}
}
onMounted(() => {
fnGetSkim();
});
</script>
<template>
<a-row :gutter="[8, 8]" justify="space-between">
<a-col :lg="6" :md="24" :xs="24">
<a-card
:bordered="false"
style="background: linear-gradient(135deg, #abdcff, #0396ff)"
:hoverable="true"
class="cardClass"
>
<div class="visual">
<rise-outlined />
</div>
<div class="details">
<div class="number">
<UserOutlined class="spaceButton" />
{{ skimState.udmSubNum }}
</div>
<div class="desc">
<span class="flexibleSpan gNodeBSpan">
{{ t('views.dashboard.overview.skim.users') }}
</span>
</div>
</div>
</a-card>
</a-col>
<a-col :lg="6" :md="24" :xs="24">
<a-card
:bordered="false"
style="background: linear-gradient(135deg, #1d976c, #93f9b9)"
:hoverable="true"
class="cardClass"
>
<div class="visual">
<bar-chart-outlined />
</div>
<div class="details">
<div class="number">
<database-outlined class="spaceButton" />
{{ skimState.smfUeNum }}
</div>
<div class="desc">
<span class="flexibleSpan dataSpan">
{{ t('views.dashboard.overview.skim.smfUeNum') }}
</span>
</div>
</div>
</a-card>
</a-col>
<a-col :lg="6" :md="24" :xs="24">
<a-card
:bordered="false"
style="background: linear-gradient(135deg, #3c8ce7, #00eaff)"
:hoverable="true"
class="cardClass"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<div class="visual45G">
<bar-chart-outlined />
</div>
<div class="details">
<div class="number">
<wifi-outlined class="spaceButton" />
{{ skimState.gnbNum }}
</div>
<div class="desc">
<span class="flexibleSpan gNodeBSpan">{{
t('views.dashboard.overview.skim.gnbBase')
}}</span>
</div>
</div>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<div class="visual45G">
<bar-chart-outlined />
</div>
<div class="details">
<div class="number">
<UserOutlined class="spaceButton" />
{{ skimState.gnbUeNum }}
</div>
<div class="desc">
<span class="flexibleSpan gUserSpan">{{
t('views.dashboard.overview.skim.gnbUeNum')
}}</span>
</div>
</div>
</a-col>
</a-row>
</a-card>
</a-col>
<a-col :lg="6" :md="24" :xs="24">
<a-card
:bordered="false"
style="background: linear-gradient(135deg, #42e695, #3bb2b8)"
:hoverable="true"
class="cardClass"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<div class="visual45G">
<bar-chart-outlined />
</div>
<div class="details">
<div class="number">
<wifi-outlined class="spaceButton" />
{{ skimState.enbNum }}
</div>
<div class="desc">
<span class="flexibleSpan eNodeBSpan">{{
t('views.dashboard.overview.skim.enbBase')
}}</span>
</div>
</div>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<div class="visual45G">
<bar-chart-outlined />
</div>
<div class="details">
<div class="number">
<UserOutlined class="spaceButton" /> {{ skimState.enbUeNum }}
</div>
<div class="desc">
<span class="flexibleSpan eUserSpan">{{
t('views.dashboard.overview.skim.enbUeNum')
}}</span>
</div>
</div>
</a-col>
</a-row>
</a-card>
</a-col>
</a-row>
<!-- <a-card style="width: 300px">
<a-row>
<a-col :span="8"
><a-avatar :size="48">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-col>
<a-col :span="8">
<a-statistic
title="Active Users"
:value="112893"
style="margin-right: 50px"
/>
</a-col>
<a-col :span="8">
<a-statistic
title="Active Users"
:value="112893"
style="margin-right: 50px"
/>
</a-col>
</a-row>
</a-card> -->
</template>
<style lang="less" scoped>
@import url('./css/module.css');
</style>