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

feat:综合仪表盘样式优化

Browse Source
This commit is contained in:
zhongzm
2025-07-18 16:49:33 +08:00
parent 42464bc5bd
commit 4c777245fc
2 changed files with 118 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/views/dashboard/overview2/css/index.css
View File

@@ -8,15 +8,15 @@
display: flex;
padding: 5rem 0.833rem 0;
line-height: 1.15;
background-image: url(../images/bj.png);
background-image:
linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
url(../images/bj.png);
height: 100vh;
margin-bottom: -20px;
background-size:80% 80%;
background-attachment:fixed;
-webkit-background-size: cover;
background-size:80% 80%;
background-attachment:fixed;
-webkit-background-size: cover;
}
.column {
flex: 3;
position: relative;
@@ -31,6 +31,77 @@
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
}
/* 使用伪元素创建L形角框 */
/* 添加L形角框边框效果 */
.panel::before,
.panel::after {
content: '';
position: absolute;
pointer-events: none;
z-index: 10;
}
/* 左上角L形 - 相对于inner的实际边界 */
.panel::before {
top: -2.125rem;
left: -5.5rem;
width: 10px;
height: 10px;
border-top: 3px solid #4c9bfd;
border-left: 3px solid #4c9bfd;
}
/* 右下角L形 - 相对于inner的实际边界 */
.panel::after {
bottom: -0.875rem;
right: -1.583rem;
width: 10px;
height: 10px;
border-bottom: 3px solid #4c9bfd;
border-right: 3px solid #4c9bfd;
}
/* 右上角L形 - 相对于inner的实际边界 */
.panel .inner::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-top: 3px solid #4c9bfd;
border-right: 3px solid #4c9bfd;
pointer-events: none;
z-index: 10;
}
/* 左下角L形 - 相对于inner的实际边界 */
.panel .inner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
border-bottom: 3px solid #4c9bfd;
border-left: 3px solid #4c9bfd;
pointer-events: none;
z-index: 10;
}
/* 为base模块调整角框显示 */
/* 第一个base模块：只显示上方角框（左上角和右上角） */
.skim.panel.base:first-of-type::after,
.skim.panel.base:first-of-type .inner::after {
display: none;
}
/* 第二个base模块：只显示下方角框（左下角和右下角） */
.skim.panel.base:not(:first-of-type)::before,
.skim.panel.base:not(:first-of-type) .inner::before {
display: none;
}
.panel .inner {
/* 装内容 */
@@ -50,7 +121,7 @@
.leftright {
width: 100%;
min-height: 2.5rem;
background: url(../images/title.png) no-repeat center center;
/*background: url(../images/title.png) no-repeat center center;*/
background-size: 100%;
color: #4c9bfd;
display: flex;
@@ -71,14 +142,14 @@
align-items: center;
justify-content: center;
width: 100%;
font-size: 1rem;
font-size: 1.2rem;
padding-left: 0;
}
.centerStyle {
width: 100%;
min-height: 2.5rem;
background: url(../images/title.png) no-repeat center center;
/*background: url(../images/title.png) no-repeat center center;*/
background-size: 90%;
color: #4c9bfd;
display: flex;
@@ -99,7 +170,7 @@
align-items: center;
justify-content: center;
width: 100%;
font-size: 1rem;
font-size: 1.2rem;
padding-left: 0;
}

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

@@ -302,6 +302,16 @@ function fnSelectNe(value: any, option: any) {
// loadData();
}
// UPF实时流量下拉菜单选择
function fnSelectUPF(e: any) {
upfWhoId.value = e.key;
reSendUPF(e.key);
for (var key in upfTotalFlow.value) {
upfTotalFlow.value[key].requestFlag = false;
}
}
let udmNeId = ref<string>('001');
let udmOtions = ref<Record<string, any>[]>([]);
let onlineOtions = ref<Record<string, any>[]>([]);
@@ -451,7 +461,7 @@ onBeforeUnmount(() => {
</span>
</div>
<div class="item toRouter" @click="fnToRouter('Ims_2080')" :title="t('views.dashboard.overview.toRouter')"
style="margin: 0 12px" v-perms:has="['dashboard:overview:imsUeNum']">
style="margin: 0 12px" v-perms:has="['dashboard:overview:imsUeNum']">
<div>
<img :src="svgUserIMS" style="width: 18px; margin-right: 8px" />
{{ skimState.imsUeNum }}
@@ -461,7 +471,7 @@ onBeforeUnmount(() => {
</span>
</div>
<div class="item toRouter" @click="fnToRouter('Ue_2081')" :title="t('views.dashboard.overview.toRouter')"
v-perms:has="['dashboard:overview:smfUeNum']">
v-perms:has="['dashboard:overview:smfUeNum']">
<div>
<img :src="svgUserSMF" style="width: 18px; margin-right: 8px" />
{{ skimState.smfUeNum }}
@@ -511,16 +521,30 @@ onBeforeUnmount(() => {
<!-- 实时流量 -->
<div class="upfFlow panel">
<div class="inner">
<h3 class="toRouter centerStyle" :title="t('views.dashboard.overview.toRouter')">
<h3 class="centerStyle">
<span class="title">
<div @click="fnToRouter('GoldTarget_2104')">
<div class="toRouter" @click="fnToRouter('GoldTarget_2104')" :title="t('views.dashboard.overview.toRouter')">
<AreaChartOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{
t('views.dashboard.overview.upfFlow.title')
}}
</div>&nbsp;&nbsp;&nbsp;&nbsp;
<a-select v-model:value="upfWhoId" :options="neOtions" :get-Popup-Container="getPopupContainer"
class="toDeep" style="color: #fff;" @change="fnSelectNe" />
<a-dropdown
:trigger="['click']"
:get-Popup-Container="getPopupContainer"
>
<div class="toDeep-text">
{{ neOtions.find(item => item.value === upfWhoId)?.label || 'Select UPF' }}
<DownOutlined style="margin-left: -2px; font-size: 12px" />
</div>
<template #overlay>
<a-menu @click="fnSelectUPF">
<a-menu-item v-for="v in neOtions" :key="v.value">
{{ v.label }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</span>
@@ -538,7 +562,7 @@ onBeforeUnmount(() => {
<div class="topology panel">
<div class="inner">
<h3 class="toRouter centerStyle" @click="fnToRouter('TopologyArchitecture_2128')"
:title="t('views.dashboard.overview.toRouter')">
:title="t('views.dashboard.overview.toRouter')">
<span class="title">
<ApartmentOutlined style="color: #68d8fe" />&nbsp;&nbsp;
{{ t('views.dashboard.overview.topology.title') }}
@@ -563,7 +587,7 @@ onBeforeUnmount(() => {
</h3>
<div class="data" style="margin-top: 20px;">
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')">
:title="t('views.dashboard.overview.toRouter')">
<div style="align-items: flex-start">
<img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
{{ skimState.gNbSumNum }}
@@ -571,7 +595,7 @@ onBeforeUnmount(() => {
<span>{{ t('views.dashboard.overview.skim.gnbSumBase') }}</span>
</div>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')">
: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 }}
@@ -579,7 +603,7 @@ onBeforeUnmount(() => {
<span>{{ t('views.dashboard.overview.skim.gnbBase') }}</span>
</div>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'AMF' })"
:title="t('views.dashboard.overview.toRouter')">
: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 }}
@@ -596,7 +620,7 @@ onBeforeUnmount(() => {
</h3>
<div class="data" style="margin-top: 40px;">
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')">
:title="t('views.dashboard.overview.toRouter')">
<div style="align-items: flex-start">
<img :src="svgBase" style="width: 18px; margin-right: 8px; height: 2rem" />
{{ skimState.eNbSumNum }}
@@ -604,7 +628,7 @@ onBeforeUnmount(() => {
<span>{{ t('views.dashboard.overview.skim.enbSumBase') }}</span>
</div>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')">
: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 }}
@@ -612,7 +636,7 @@ onBeforeUnmount(() => {
<span>{{ t('views.dashboard.overview.skim.enbBase') }}</span>
</div>
<div class="item toRouter" @click="fnToRouter('BaseStation_2096', { neType: 'MME' })"
:title="t('views.dashboard.overview.toRouter')">
: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 }}