From c367966e040c79541c14d1d039f42d59ffeffd83 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Thu, 14 Jul 2022 17:07:07 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86=20e?= =?UTF-8?q?chart=20=E5=9B=BE=E8=A1=A8bug=EF=BC=8C=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts2/networkOverviewDdosDetection.scss | 94 ++++---- .../views/charts2/networkOverviewLine.scss | 53 ++++- .../networkOverviewPerformanceEvent.scss | 78 ++++--- src/views/charts/charts/chart-table-title.js | 8 +- src/views/charts2/Chart.vue | 2 +- .../charts/NetworkOverviewDdosDetection.vue | 33 ++- .../charts2/charts/NetworkOverviewLine.vue | 206 ++++++++++-------- .../NetworkOverviewPerformanceEvent.vue | 25 ++- .../options/{pie.js => echartOption.js} | 63 ++++-- 9 files changed, 342 insertions(+), 220 deletions(-) rename src/views/charts2/charts/options/{pie.js => echartOption.js} (87%) diff --git a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss index 6f121ee6..d09e404e 100644 --- a/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss +++ b/src/assets/css/components/views/charts2/networkOverviewDdosDetection.scss @@ -1,50 +1,64 @@ .ddos-detection { - display: flex; height: 100%; - padding: 0 20px; border: 1px solid #E2E5EC; border-radius: 4px; - flex-direction: column; - justify-content: space-evenly; - .ddos-detection-type { - display: flex; - justify-content: space-between; - .ddos-detection-type-value { - display: flex; - flex-direction: column; - .ddos-detection-type-value-name { - font-size: 12px; - color: #575757; - line-height: 12px; - font-weight: 400; - margin-bottom: 12px; - } - .ddos-detection-type-value-number { - font-size: 18px; - color: #E26154; - line-height: 12px; - font-weight: 500; - } + .ddos-detection-title { + margin-top: 15px; + i { + font-size: 16px; + width: 16px; + height: 16px; + color: #38ACD2; + margin:0 8px 0 10px; } } - .el-button { - width: 117px; - min-height: 28px; - background: #FBFBFB; - border: 1px solid #C5C5C5; - box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); - border-radius: 4px; - padding: 8px 5px; - span { - font-family: NotoSansHans-Medium; - font-size: 12px; - color: #575757; - font-weight: 500; - i { - transform: rotate(-90deg); - color: #575757; + .ddos-detection-value { + height: calc(100% - 36px); + padding: 0 20px; + display: flex; + flex-direction: column; + .ddos-detection-type { + display: flex; + justify-content: space-between; + margin: 20px 0; + .ddos-detection-type-value { + display: flex; + flex-direction: column; + .ddos-detection-type-value-name { + font-size: 12px; + color: #575757; + line-height: 12px; + font-weight: 400; + margin-bottom: 12px; + } + .ddos-detection-type-value-number { + font-size: 18px; + color: #E26154; + line-height: 12px; + font-weight: 500; + } + } + } + .el-button { + margin-right: 20px; + width: 117px; + min-height: 28px; + background: #FBFBFB; + border: 1px solid #C5C5C5; + box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); + border-radius: 4px; + padding: 8px 5px; + span { + font-family: NotoSansHans-Medium; font-size: 12px; - margin-left: 4px; + color: #575757; + font-weight: 500; + i { + transform: rotate(-90deg); + color: #575757; + font-size: 12px; + margin-left: 4px; + } } } } diff --git a/src/assets/css/components/views/charts2/networkOverviewLine.scss b/src/assets/css/components/views/charts2/networkOverviewLine.scss index 2a1e7549..1fab3024 100644 --- a/src/assets/css/components/views/charts2/networkOverviewLine.scss +++ b/src/assets/css/components/views/charts2/networkOverviewLine.scss @@ -5,6 +5,8 @@ border: 1px solid #E2E5EC; border-radius: 4px; .chart-drawing { + height: 100%; + width: 100%; div:nth-of-type(2) { .cn-chart-tooltip { display: flex; @@ -21,13 +23,9 @@ } } } - #chart { - width: 1288px; - height: 340px; - } .line-select { line-height: 24px; - top: 10px; + top: 20px; right: 20px; display: flex; position: absolute; @@ -89,16 +87,16 @@ } .line-value { position: absolute; - top: 30px; + top: 20px; left: 27px; - height: 34px; - line-height: 34px; display: flex; .line-value-mpackets { margin-right: 30px; + display: flex; + flex-direction: column; span:nth-of-type(1) { font-family: 'Helvetica-Bold'; - font-size: 20px; + font-size: 28px; color: #353636; margin-right: 4px; } @@ -107,6 +105,43 @@ color: #575757; font-weight: 400; } + .table-below-box--inactivated.line-value-mpackets-name { + color: #ccc; + div:nth-of-type(1) { + background-color: #ccc !important; + } + } + .line-value-mpackets-name { + position: relative; + display: flex; + .mpackets-name { + flex: 1; + padding-left: 17px; + } + .total,.inbound,.outbound,.internal,.other { + width: 14px; + height: 14px; + border-radius: 50%; + position: absolute; + top: 50%; + margin-top: -7px; + } + .total { + background: #00A7AB; + } + .inbound { + background: #7FA054; + } + .outbound { + background: #35ADDA; + } + .internal { + background: #E48F3E; + } + .other { + background: #98709B; + } + } } } } diff --git a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss index 7ee562e1..b326aa17 100644 --- a/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss +++ b/src/assets/css/components/views/charts2/networkOverviewPerformanceEvent.scss @@ -2,42 +2,58 @@ height: 100%; border: 1px solid #E2E5EC; border-radius: 4px; - .performance-event-pie { + .performance-event-title { + margin-top: 15px; + i { + font-size: 16px; + width: 16px; + height: 16px; + color: #38ACD2; + margin:0 8px 0 10px; + } + } + .performance-event-value { width: 100%; - div { - height: 165px; - width: 324px; + height: calc(100% - 36px); + .performance-event-pie { + height: calc(100% - 47px); + width: 100%; + .chart-drawing { + height: 50%; + width: 100%; + } + .performance-event-pie-hr { + height: 1px; + width: 310px; + margin: auto; + background: #E2E5EC; + } } - .performance-event-pie-hr { - height: 1px; - width: 310px; - margin: auto; - background: #E2E5EC; + .pie-button.el-button { + width: 96px; } - } - .pie-button.el-button { - width: 96px; - } - .el-button { - width: 117px; - min-height: 28px; - background: #FBFBFB; - border: 1px solid #C5C5C5; - box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); - border-radius: 4px; - padding: 8px 5px; - margin-left: 30px; - span { - font-family: NotoSansHans-Medium; - font-size: 12px; - color: #575757; - font-weight: 500; - i { - transform: rotate(-90deg); - color: #575757; + .el-button { + width: 117px; + min-height: 28px; + background: #FBFBFB; + border: 1px solid #C5C5C5; + box-shadow: 0 2px 4px 0 rgba(51,51,51,0.02); + border-radius: 4px; + padding: 8px 5px; + margin-left: 30px; + span { + font-family: NotoSansHans-Medium; font-size: 12px; - margin-left: 4px; + color: #575757; + font-weight: 500; + i { + transform: rotate(-90deg); + color: #575757; + font-size: 12px; + margin-left: 4px; + } } } } + } diff --git a/src/views/charts/charts/chart-table-title.js b/src/views/charts/charts/chart-table-title.js index 423d62c5..a72d4033 100644 --- a/src/views/charts/charts/chart-table-title.js +++ b/src/views/charts/charts/chart-table-title.js @@ -78,6 +78,10 @@ export const legendMapping = { clientIpCount: i18n.global.t('entity.ip.clientIpCount'), serverIpCount: i18n.global.t('entity.ip.serverIpCount'), appCount: i18n.global.t('entity.ip.appCount'), - domainCount: i18n.global.t('entity.ip.domainCount') - + domainCount: i18n.global.t('entity.ip.domainCount'), + network_total: i18n.global.t('network.total'), + network_inbound: i18n.global.t('network.inbound'), + network_outbound: i18n.global.t('network.outbound'), + network_internal: i18n.global.t('network.internal'), + network_other: i18n.global.t('network.other') } diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue index 1b8370d3..b3c0c15b 100644 --- a/src/views/charts2/Chart.vue +++ b/src/views/charts2/Chart.vue @@ -1,5 +1,5 @@ @@ -23,7 +26,3 @@ export default { name: 'NetworkOverviewDdosDetection' } - - diff --git a/src/views/charts2/charts/NetworkOverviewLine.vue b/src/views/charts2/charts/NetworkOverviewLine.vue index f8cc4d2d..db35a0f4 100644 --- a/src/views/charts2/charts/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/NetworkOverviewLine.vue @@ -1,6 +1,15 @@ diff --git a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue b/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue index eaa3cbf6..ec12dded 100644 --- a/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue +++ b/src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue @@ -1,16 +1,19 @@ diff --git a/src/views/charts2/charts/options/pie.js b/src/views/charts2/charts/options/echartOption.js similarity index 87% rename from src/views/charts2/charts/options/pie.js rename to src/views/charts2/charts/options/echartOption.js index f5d0ede7..ee1890e3 100644 --- a/src/views/charts2/charts/options/pie.js +++ b/src/views/charts2/charts/options/echartOption.js @@ -108,18 +108,14 @@ export const pieChartOption2 = { } ] } +const sizes = [3, 6, 8, 9, 10] export const stackedLineChartOption = { color: chartColor3, tooltip: { trigger: 'axis' }, legend: { - type: 'scroll', - top: 10, - left: 20, - itemGap: 60, - itemWidth: 11, - itemHeight: 14 + show: false }, grid: { top: '30%', @@ -154,10 +150,8 @@ export const stackedLineChartOption = { ], series: [ { - name: 'Total', type: 'line', symbol: 'circle', - hoverAnimation: false, smooth: true, symbolSize: function (value, params) { return symbolSizeSortChange(0, value[0]) @@ -170,6 +164,14 @@ export const stackedLineChartOption = { color: chartColor3[0], width: 1 }, + itemStyle: { + emphasis: { + borderColor: chartColor4[0], + borderWidth: 2, + shadowColor: chartColor4[0], + shadowBlur: sizes[0] + 2 + } + }, areaStyle: { opacity: 0.1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -186,7 +188,6 @@ export const stackedLineChartOption = { data: [] }, { - name: 'Inbound', type: 'line', symbol: 'circle', smooth: true, @@ -201,6 +202,14 @@ export const stackedLineChartOption = { color: chartColor3[1], width: 1 }, + itemStyle: { + emphasis: { + borderColor: chartColor4[1], + borderWidth: 2, + shadowColor: chartColor4[1], + shadowBlur: sizes[1] + 2 + } + }, areaStyle: { opacity: 0.1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -217,7 +226,6 @@ export const stackedLineChartOption = { data: [] }, { - name: 'Outbound', type: 'line', symbol: 'circle', smooth: true, @@ -232,6 +240,14 @@ export const stackedLineChartOption = { color: chartColor3[2], width: 1 }, + itemStyle: { + emphasis: { + borderColor: chartColor4[2], + borderWidth: 2, + shadowColor: chartColor4[2], + shadowBlur: sizes[2] + 2 + } + }, areaStyle: { opacity: 0.1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -248,7 +264,6 @@ export const stackedLineChartOption = { data: [] }, { - name: 'Internal', type: 'line', symbol: 'circle', smooth: true, @@ -263,6 +278,14 @@ export const stackedLineChartOption = { color: chartColor3[3], width: 1 }, + itemStyle: { + emphasis: { + borderColor: chartColor4[3], + borderWidth: 2, + shadowColor: chartColor4[3], + shadowBlur: sizes[3] + 2 + } + }, areaStyle: { opacity: 0.1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -279,7 +302,6 @@ export const stackedLineChartOption = { data: [] }, { - name: 'Other', type: 'line', symbol: 'circle', smooth: true, @@ -294,6 +316,14 @@ export const stackedLineChartOption = { color: chartColor3[4], width: 1 }, + itemStyle: { + emphasis: { + borderColor: chartColor4[4], + borderWidth: 2, + shadowColor: chartColor4[4], + shadowBlur: sizes[4] + 2 + } + }, areaStyle: { opacity: 0.1, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -311,7 +341,6 @@ export const stackedLineChartOption = { } ] } -const sizes = [3, 6, 8, 9, 10] function symbolSizeSortChange (index, time) { const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value] const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time) @@ -326,13 +355,5 @@ function symbolSizeSortChange (index, time) { const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData] dataIntegrationArray.sort((a, b) => { return a[1] - b[1] }) const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index) - // stackedLineChartOption.series[sortIndex].itemStyle = { - // emphasis: { - // borderColor: chartColor4[sortIndex], - // borderWidth: 2, - // shadowColor: chartColor4[sortIndex], - // shadowBlur: sizes[sortIndex] + 2 - // } - // } return sizes[sortIndex] }