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-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;
 }
 

src/views/dashboard/overview2/index.vue

@@ -291,6 +291,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>[]>([]);
@@ -543,24 +553,29 @@ onBeforeUnmount(() => {
       <!-- 实时流量 -->
       <div class="upfFlow panel">
         <div class="inner">
-          <h3
+          <h3 class="centerStyle">
-            class="toRouter centerStyle"
-            :title="t('views.dashboard.overview.toRouter')"
-          >
             <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
+              <a-dropdown
-                v-model:value="upfWhoId"
+                :trigger="['click']"
-                :options="neOtions"
                 :get-Popup-Container="getPopupContainer"
-                class="toDeep"
+              >
-                style="color: #fff"
+                <div class="toDeep-text">
-                @change="fnSelectNe"
+                  {{ 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>
           </h3>