From 6572fd13b16b442ec7642e4461e44f799745f118 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Fri, 1 Aug 2025 16:44:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=91=8A=E8=AD=A6=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/AlarnTypeBar/index.vue | 98 ++++++++++++++----- src/views/dashboard/overview2/css/index.css | 44 ++++++++- src/views/dashboard/overview2/index.vue | 37 +++---- 3 files changed, 127 insertions(+), 52 deletions(-) diff --git a/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue b/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue index 3469a235..2fc3a9d1 100644 --- a/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue +++ b/src/views/dashboard/overview2/components/AlarnTypeBar/index.vue @@ -131,7 +131,7 @@ function initPicture() { { text: 'Top3', left: 'center', - top: '36%', + top: '48%', textStyle: { color: '#fff', fontSize: 16, @@ -144,19 +144,34 @@ function initPicture() { top: '5%', left: '20%', right: '10%', - height: '35%' + height: '38%' }, { // Top3 - top: '50%', + top: '58%', left: '20%', right: '10%', - height: '30%' + height: '32%' } ], tooltip: { - + trigger: 'axis', axisPointer: { type: 'shadow' }, - formatter: '{b} : {c}', + formatter: function(params: any) { + if (Array.isArray(params) && params.length > 0) { + const param = params[0]; + // 获取真实值而不是0.1的占位值 + let realValue = 0; + if (param.seriesIndex === 0) { + // 第一个系列（告警类型） + realValue = alarmTypeType.value[param.dataIndex]?.value || 0; + } else if (param.seriesIndex === 1) { + // 第二个系列（Top3） + realValue = alarmTypeTypeTop.value[param.dataIndex]?.value || 0; + } + return `${param.name}: ${realValue}`; + } + return ''; + }, }, legend: { show: false @@ -178,7 +193,12 @@ function initPicture() { type: 'category', gridIndex: 0, data: alarmTypeType.value.map((item: any) => item.name), - axisLabel: { color: '#fff', fontSize: 14,fontWeight: 'bold' }, + axisLabel: { + color: '#fff', + fontSize: 12, + fontWeight: 'bold', + interval: 0 // 确保显示所有标签 + }, axisLine: { show: false }, axisTick: { show: false }, inverse: true @@ -187,7 +207,12 @@ function initPicture() { type: 'category', gridIndex: 1, data: alarmTypeTypeTop.value.map((item: any) => item.name), - axisLabel: { color: '#fff', fontSize: 14,fontWeight: 'bold' }, + axisLabel: { + color: '#fff', + fontSize: 12, + fontWeight: 'bold', + interval: 0 // 确保显示所有标签 + }, axisLine: { show: false }, axisTick: { show: false }, inverse: true @@ -199,10 +224,15 @@ function initPicture() { type: 'bar', xAxisIndex: 0, yAxisIndex: 0, - barWidth: 18, + barWidth: 16, + barCategoryGap: '20%', // 添加柱状图间隙 itemStyle: { borderRadius: [0, 8, 8, 0], color: function (params: any) { + // 如果值为0，显示透明背景但有边框效果 + if (params.value === 0.1) { + return 'rgba(0,0,0,0.1)'; + } // 渐变色 const colorArr = [ new echarts.graphic.LinearGradient(0, 0, 1, 0, [ @@ -223,20 +253,23 @@ function initPicture() { ]) ]; return colorArr[params.dataIndex] || colorArr[3]; - } + }, + borderColor: '#666', + borderWidth: 1 }, label: { show: true, position: 'right', - color: '#fff', //淡蓝色 + color: '#fff', fontWeight: 'bold', - fontSize: 16, + fontSize: 14, formatter: (params: any) => { - if (!params.value) return ''; - return `${params.value}`; + // 如果是最小值0.1，显示为0 + const realValue = alarmTypeType.value[params.dataIndex]?.value || 0; + return `${realValue}`; }, }, - data: alarmTypeType.value.map((item: any) => item.value), + data: alarmTypeType.value.map((item: any) => Math.max(item.value || 0, 0.1)), zlevel: 2 }, // Top3横向柱状图 @@ -245,24 +278,37 @@ function initPicture() { type: 'bar', xAxisIndex: 1, yAxisIndex: 1, - barWidth: 18, + barWidth: 16, + barCategoryGap: '20%', // 添加柱状图间隙 itemStyle: { - borderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下） - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { offset: 0, color: '#f0f5ff' }, - { offset: 0.5, color: '#adc6ff' }, - { offset: 1, color: '#2f54eb' }, - ]), // 渐变 + borderRadius: [0, 20, 20, 0], + color: function (params: any) { + // 如果值为0，显示透明背景但有边框效果 + if (params.value === 0 || params.value === 0.1) { + return 'rgba(0,0,0,0.1)'; + } + return new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: '#f0f5ff' }, + { offset: 0.5, color: '#adc6ff' }, + { offset: 1, color: '#2f54eb' }, + ]); + }, + borderColor: '#666', + borderWidth: 1 }, label: { show: true, position: 'right', - color: '#fff', //淡蓝色 + color: '#fff', fontWeight: 'bold', - fontSize: 16, - formatter: '{c}' + fontSize: 14, + formatter: (params: any) => { + // 如果是最小值0.1，显示为0 + const realValue = alarmTypeTypeTop.value[params.dataIndex]?.value || 0; + return `${realValue}`; + } }, - data: alarmTypeTypeTop.value.map((item: any) => item.value), + data: alarmTypeTypeTop.value.map((item: any) => Math.max(item.value || 0, 0.1)), zlevel: 1 } ] diff --git a/src/views/dashboard/overview2/css/index.css b/src/views/dashboard/overview2/css/index.css index 144d96f5..aea5ac8a 100644 --- a/src/views/dashboard/overview2/css/index.css +++ b/src/views/dashboard/overview2/css/index.css @@ -18,7 +18,7 @@ -webkit-background-size: cover; } .column { - flex: 3; + flex: 2; position: relative; display: flex; flex-direction: column; @@ -41,6 +41,7 @@ position: absolute; pointer-events: none; z-index: 10; + display: none; /* 隐藏所有角框 */ } /* 左上角L形 - 相对于inner的实际边界 */ @@ -75,6 +76,7 @@ border-right: 3px solid #4c9bfd; pointer-events: none; z-index: 10; + display: none; /* 隐藏所有角框 */ } /* 左下角L形 - 相对于inner的实际边界 */ @@ -89,6 +91,7 @@ border-left: 3px solid #4c9bfd; pointer-events: none; z-index: 10; + display: none; /* 隐藏所有角框 */ } /* 为base模块调整角框显示 */ @@ -111,17 +114,23 @@ right: -1.583rem; bottom: -0.875rem; left: -5.5rem; - padding: 1rem 1.5rem; + padding: 1rem 0.3rem; } .panel h3 { font-size: 0.833rem; color: #fff; + background: rgba(76, 155, 253, 0.1); /* 为所有模块标题添加淡蓝色背景 */ + padding: 0.5rem 1.2rem; + border-radius: 0.7rem 0.7rem 0 0; + margin: 0; + box-sizing: border-box; } .leftright { width: 100%; min-height: 2.5rem; /*background: url(../images/title.png) no-repeat center center;*/ + background: rgba(76, 155, 253, 0.1); /* 添加淡蓝色背景 */ background-size: 100%; color: #4c9bfd; display: flex; @@ -150,6 +159,7 @@ width: 100%; min-height: 2.5rem; /*background: url(../images/title.png) no-repeat center center;*/ + background: rgba(76, 155, 253, 0.1); /* 添加淡蓝色背景 */ background-size: 90%; color: #4c9bfd; display: flex; @@ -225,6 +235,11 @@ flex-direction: row; justify-content: space-between; align-items: baseline; + background: rgba(76, 155, 253, 0.1); /* 为网络拓扑模块标题添加淡蓝色背景 */ + padding: 0.5rem 1.2rem; + border-radius: 0.7rem 0.7rem 0 0; + margin: 0; + box-sizing: border-box; } .topology .inner h3 .normal { color: #52c41a; @@ -238,7 +253,7 @@ .topology .inner .chart { width: 100%; height: 100%; - margin-top: 1rem; + margin-top: 0.1rem; } /* 概览区域 */ @@ -318,6 +333,8 @@ width: 100%; height: 100%; margin-top: 1rem; + padding-bottom: 1rem; + box-sizing: border-box;/*不知道为啥没生效*/ } /* 流量统计 */ @@ -328,6 +345,11 @@ .upfFlowTotal1 .inner h3 { display: flex; justify-content: space-between; + background: rgba(76, 155, 253, 0.1); /* 为流量统计模块标题添加淡蓝色背景 */ + padding: 0.5rem 1.2rem; + border-radius: 0.7rem 0.7rem 0 0; + margin: 0; + box-sizing: border-box; } .upfFlowTotal1 .inner h3 .filter { display: flex; @@ -387,6 +409,11 @@ .upfFlowTotal .inner h3 { display: flex; justify-content: space-between; + background: rgba(76, 155, 253, 0.1); /* 为流量统计模块标题添加淡蓝色背景 */ + padding: 0.5rem 1.2rem; + border-radius: 0.7rem 0.7rem 0 0; + margin: 0; + box-sizing: border-box; } .upfFlowTotal .inner h3 .filter { display: flex; @@ -445,7 +472,7 @@ .resources .inner .chart { width: 100%; height: 100%; - margin-top: 1rem; + margin-top: 2rem; } @@ -459,6 +486,15 @@ height: 100%; } +/* 为base模块的第二个模块（4G部分）添加标题样式 */ +.skim.panel.base:not(:first-of-type) h3 { + background: transparent; /* 移除背景，避免阴影问题 */ + padding: 0; + margin: 0; + min-height: 0; + display: none; /* 完全隐藏空的h3元素 */ +} + /* 跳转鼠标悬浮 */ .toRouter:hover { cursor: pointer; diff --git a/src/views/dashboard/overview2/index.vue b/src/views/dashboard/overview2/index.vue index 33d62454..5bdb9c97 100644 --- a/src/views/dashboard/overview2/index.vue +++ b/src/views/dashboard/overview2/index.vue @@ -127,22 +127,15 @@ async function fnGetSkim() { let tempEnbSumNum = 0; const neHandlers = new Map([ - // [ - // 'UDM', - // { - // request: (neId: string) => - // listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }), - // process: (res: any) => - // res.code === RESULT_CODE_SUCCESS && - // (skimState.udmSubNum += res.total), - // }, - // ], [ 'UDM', { request: (neId: string) => listUDMSub({ neId: neId, pageNum: 1, pageSize: 1 }), - process: (res: any) => - res.code === RESULT_CODE_SUCCESS && (skimState.udmSubNum = res.data.total), + process: (res: any) => { + if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'number') { + skimState.udmSubNum += res.data; + } + }, }, ], [ @@ -340,15 +333,15 @@ async function fnSelectUDM(e: any) { udmNeId.value = e.key; try { const res = await listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }); - // listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => { - if (res.code === RESULT_CODE_SUCCESS) { - skimState.udmSubNum = res.data.total; + // listUDMSub({ neId: udmNeId.value, pageNum: 1, pageSize: 1 }).then(res => { + if (res.code === RESULT_CODE_SUCCESS && typeof res.data === 'number') { + skimState.udmSubNum = res.data; }else{ skimState.udmSubNum = 0; } - // }).catch(() => { - // skimState.udmSubNum = 0; - // }); + // }).catch(() => { + // skimState.udmSubNum = 0; + // }); } catch (error) { skimState.udmSubNum = 0; } @@ -478,7 +471,7 @@ onBeforeUnmount(() => {
- {{ skimState.udmSubNum }} + {{ skimState.udmSubNum || 0 }}
@@ -500,7 +493,7 @@ onBeforeUnmount(() => { style="margin: 0 12px" v-perms:has="['dashboard:overview:imsUeNum']" v-if="neListStore.fnHasNe(['ims'])">
- {{ skimState.imsUeNum }} + {{ skimState.imsUeNum || 0 }}
{{ t('views.dashboard.overview.skim.imsUeNum') }} @@ -510,7 +503,7 @@ onBeforeUnmount(() => { v-perms:has="['dashboard:overview:smfUeNum']" v-if="neListStore.fnHasNe(['smf'])">
- {{ skimState.smfUeNum }} + {{ skimState.smfUeNum || 0 }}
{{ t('views.dashboard.overview.skim.smfUeNum') }} @@ -692,7 +685,7 @@ onBeforeUnmount(() => {

   -
{{ t('views.dashboard.overview.resources.title') }}：
+
{{ t('views.dashboard.overview.resources.title') }}：
{{ graphNodeClickID }}