feat: 仪表盘概览数

This commit is contained in:
TsMask
2024-01-19 09:42:45 +08:00
parent 7c8091434b
commit bf246d621d

View File

@@ -3,6 +3,8 @@ import { onMounted, ref } from 'vue';
import useI18n from '@/hooks/useI18n';
import Topology from './components/Topology/index.vue';
import { useFullscreen } from '@vueuse/core';
import useAppStore from '@/store/modules/app';
const appStore = useAppStore();
const { t } = useI18n();
/**总览节点 */
@@ -20,56 +22,40 @@ onMounted(() => {});
<FullscreenExitOutlined v-if="isFullscreen" />
<FullscreenOutlined v-else />
</div>
<div class="brand-desc">5GC 核心网数据</div>
<div class="brand-desc">{{ appStore.appName }}</div>
</div>
<div class="column">
<!-- 基站数量 -->
<div class="wrap">
<div class="channel panel">
<div class="inner">
<h3>UE数量</h3>
<div class="data">
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
IMS
</span>
</div>
</div>
<div class="data">
<div class="item">
<h4>20 <small>%</small></h4>
<span>
<i class="icon-train"></i>
AMF
</span>
</div>
</div>
<!--概览-->
<div class="overview panel">
<div class="inner">
<div class="item">
<h4>2,190</h4>
<span>
<UserOutlined style="color: #006cff" />
签约用户
</span>
</div>
</div>
<div class="quarter panel">
<div class="inner">
<h3>基站数量</h3>
<div class="chart">
<div class="data">
<div class="item">
<h4>1,321</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
在线
</span>
</div>
<div class="item">
<h4>150%</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
不在线
</span>
</div>
</div>
</div>
<div class="item">
<h4>190</h4>
<span>
<UserSwitchOutlined style="color: #6acca3" />
语音在线
</span>
</div>
<div class="item">
<h4>3,001</h4>
<span>
<UserSwitchOutlined style="color: #6acca3" />
数据在线
</span>
</div>
<div class="item">
<h4>23</h4>
<span>
<WifiOutlined style="color: #edcb35" />
基站在线
</span>
</div>
</div>
</div>
@@ -208,14 +194,14 @@ onMounted(() => {});
<h4>248</h4>
<span>
<i class="icon-dot" style="color: #eacf19"></i>
cpu
cpu
</span>
</div>
<div class="item">
<h4>248</h4>
<span>
<i class="icon-dot" style="color: #eacf19"></i>
内存
内存
</span>
</div>
</div>