feat:综合仪表盘样式优化

src/views/dashboard/overview2/css/index.css

@@ -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-size:80% 80%;
-    background-attachment:fixed;
+  background-attachment:fixed;
-    -webkit-background-size: cover;
+  -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;
 }
 

src/views/dashboard/overview2/index.vue

@@ -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"
+              <a-dropdown
-                class="toDeep" style="color: #fff;" @change="fnSelectNe" />
+                :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 }}