From 776936bbe2a893400167b48a2149d31fe9ddc2e0 Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Tue, 9 Aug 2022 11:39:08 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Dahsboard=20-=20npm=20-=20=E7=BD=91?= =?UTF-8?q?=E7=BB=9C=E8=B4=A8=E9=87=8F=E6=A6=82=E8=A7=88=E5=9B=BE=E8=A1=A8?= =?UTF-8?q?=20=E6=A0=B9=E6=8D=AE=E6=8E=A5=E5=8F=A3=E8=BF=94=E5=9B=9E?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/components/views/charts2/npmLine.scss | 12 +- .../views/charts2/npmNetworkQuantity.scss | 49 +++++---- .../views/charts2/npmRecentEvents.scss | 2 +- .../charts2/charts/NetworkOverviewLine.vue | 7 +- .../charts2/charts/NpmNetworkQuantity.vue | 104 +++++------------- src/views/charts2/charts/SingleValue.vue | 60 +++++++--- 6 files changed, 110 insertions(+), 124 deletions(-) diff --git a/src/assets/css/components/views/charts2/npmLine.scss b/src/assets/css/components/views/charts2/npmLine.scss index 7eff1216..9c8a6931 100644 --- a/src/assets/css/components/views/charts2/npmLine.scss +++ b/src/assets/css/components/views/charts2/npmLine.scss @@ -14,6 +14,14 @@ margin-right: 10px; align-items: center; } + .npm-line-header-right.active { + .npm-line-header-icon { + background: #ccc; + } + .npm-line-header-value { + color: #ccc; + } + } .npm-line-header-icon { border-radius: 3px; width: 16px; @@ -35,10 +43,6 @@ line-height: 12px; font-weight: 400; } - .npm-line-header-value.active { - color: #717171; - font-weight: 600; - } } .chart-drawing { height: 100%; diff --git a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss index a5194aa7..7abfac03 100644 --- a/src/assets/css/components/views/charts2/npmNetworkQuantity.scss +++ b/src/assets/css/components/views/charts2/npmNetworkQuantity.scss @@ -31,32 +31,37 @@ font-weight: 700; margin-right: 12px; } - .single-value__content-value { - font-size: 12px; - font-weight: 500; - height: 20px; - width: 52px; - line-height: 20px; - border-radius: 10px; + .single-value__content-trend { display: flex; + margin-left: 6px; + align-items: center; justify-content: center; - position: relative; - top: 50%; - margin-top: -10px; - div { - i { - margin-right: 5px; - } + margin-top: 2px; + border-radius: 10px; + font-weight:500; + font-size: 12px; + } + .single-value__content-trend-black { + background-color: rgba(113,113,113,0.12); + color: #717171; + width: 36px; + height: 20px; + } + .single-value__content-trend-green { + background-color: rgba(126,159,84,0.12); + width: 52px; + height: 20px; + color:#7E9F54; + } + .single-value__content-trend-red { + background-color: rgba(226,97,84,0.12); + width: 52px; + height: 20px; + color:#E26154; + .cn-icon-rise1 { + color: #E44D3E; } } - .single-value__content-value.red { - background-color: rgba(226, 97, 84, 0.12); - color: #E26154; - } - .single-value__content-value.green { - background-color: rgba(126, 159, 84, 0.12); - color: #7E9F54; - } } .single-value__circle { display: flex; diff --git a/src/assets/css/components/views/charts2/npmRecentEvents.scss b/src/assets/css/components/views/charts2/npmRecentEvents.scss index 3a8decc5..9026176f 100644 --- a/src/assets/css/components/views/charts2/npmRecentEvents.scss +++ b/src/assets/css/components/views/charts2/npmRecentEvents.scss @@ -4,7 +4,7 @@ .npm-recent-title { font-size: 14px; color: #353636; - font-weight: 500; + font-weight: 600; margin-bottom: 10px; } .npm-recent-table { diff --git a/src/views/charts2/charts/NetworkOverviewLine.vue b/src/views/charts2/charts/NetworkOverviewLine.vue index da2479ee..d88c5b08 100644 --- a/src/views/charts2/charts/NetworkOverviewLine.vue +++ b/src/views/charts2/charts/NetworkOverviewLine.vue @@ -375,12 +375,7 @@ export default { } this.legendSelectChange(t, 0) }) - } else if (!this.activeShow) { - this.mpackets.forEach((t, i) => { - t.show = true - this.legendSelectChange(t, 'index') - }) - } else if (this.activeShow) { + } else { this.mpackets.forEach((t, i) => { t.show = true this.legendSelectChange(t, 'index') diff --git a/src/views/charts2/charts/NpmNetworkQuantity.vue b/src/views/charts2/charts/NpmNetworkQuantity.vue index 3b344ed2..70553358 100644 --- a/src/views/charts2/charts/NpmNetworkQuantity.vue +++ b/src/views/charts2/charts/NpmNetworkQuantity.vue @@ -24,11 +24,11 @@ export default { data () { return { npmNetworkName: [ - { name: 'networkAppPerformance.tcpConnectionEstablishLatency'}, - { name: 'networkAppPerformance.httpResponse'}, - { name: 'networkAppPerformance.sslResponseLatency'}, - { name: 'networkAppPerformance.packetLoss'}, - { name: 'overall.packetRetrans'} + { name: 'networkAppPerformance.tcpConnectionEstablishLatency' }, + { name: 'networkAppPerformance.httpResponse' }, + { name: 'networkAppPerformance.sslResponseLatency' }, + { name: 'networkAppPerformance.packetLoss' }, + { name: 'overall.packetRetrans' } ], npmNetworkCycleData: [], npmNetworkLastCycleData: [] @@ -41,49 +41,18 @@ export default { endTime: getSecond(this.timeFilter.endTime), cycle: 0 } - // const tcp = get(api.npm.overview.tcpSessionDelay, params) - // const http = get(api.npm.overview.httpResponseDelay, params) - // const ssl = get(api.npm.overview.sslConDelay, params) - // const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params) - // const packetPercent = get(api.npm.overview.packetRetransPercent, params) - this.npmNetworkCycleData = [ - { - establishLatencyAvg: 0.51, - establishLatencyP50: 0.16, - establishLatencyP90: 0.12, - establishLatencyP95: 0.34, - establishLatencyP99: 0.73 - }, { - httpResponseLatencyAvg: 0.52, - httpResponseLatencyP50: 0.16, - httpResponseLatencyP90: 0.12, - httpResponseLatencyP95: 0.34, - httpResponseLatencyP99: 0.73 - }, { - sslConLatencyAvg: 0.53, - sslConLatencyP50: 0.16, - sslConLatencyP90: 0.12, - sslConLatencyP95: 0.34, - sslConLatencyP99: 0.73 - }, { - sequenceGapLossAvg: 0.54, - sequenceGapLossP50: 0.16, - sequenceGapLossP90: 0.12, - sequenceGapLossP95: 0.34, - sequenceGapLossP99: 0.73 - }, { - pktRetransAvg: 0.55, - pktRetransP50: 0.16, - pktRetransP90: 0.12, - pktRetransP95: 0.34, - pktRetransP99: 0.73 - } - ] - // Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => { - // if (res.code === 200) { - // console.log(res) - // } - // }) + const tcp = get(api.npm.overview.tcpSessionDelay, params) + const http = get(api.npm.overview.httpResponseDelay, params) + const ssl = get(api.npm.overview.sslConDelay, params) + const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params) + const packetPercent = get(api.npm.overview.packetRetransPercent, params) + Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => { + res.forEach(t => { + if (t.code === 200) { + this.npmNetworkCycleData.push(t.data.result) + } + }) + }) }, npmNetworkLastCycleQuery () { const params = { @@ -91,33 +60,18 @@ export default { endTime: getSecond(this.timeFilter.endTime), cycle: 1 } - // const tcp = get(api.npm.overview.tcpSessionDelay, params) - // const http = get(api.npm.overview.httpResponseDelay, params) - // const ssl = get(api.npm.overview.sslConDelay, params) - // const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params) - // const packetPercent = get(api.npm.overview.packetRetransPercent, params) - this.npmNetworkLastCycleData = [ - { - establishLatencyAvg: 0.64 - }, - { - httpResponseLatencyAvg: 0.34 - }, - { - sslConLatencyAvg: 0.86 - }, - { - sequenceGapLossAvg: 0.32 - }, - { - pktRetransAvg: 0.66 - } - ] - // Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => { - // if (res.code === 200) { - // console.log(res) - // } - // }) + const tcp = get(api.npm.overview.tcpSessionDelay, params) + const http = get(api.npm.overview.httpResponseDelay, params) + const ssl = get(api.npm.overview.sslConDelay, params) + const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params) + const packetPercent = get(api.npm.overview.packetRetransPercent, params) + Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => { + res.forEach(t => { + if (t.code === 200) { + this.npmNetworkLastCycleData.push(t.data.result) + } + }) + }) } }, mounted () { diff --git a/src/views/charts2/charts/SingleValue.vue b/src/views/charts2/charts/SingleValue.vue index 723e1498..aed23ab6 100644 --- a/src/views/charts2/charts/SingleValue.vue +++ b/src/views/charts2/charts/SingleValue.vue @@ -4,9 +4,14 @@
{{$t(npmNetworkName[index].name)}}
{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}
-
-
-
{{npm.value}}%
+
+  {{npm.value}}% +
+
+  {{npm.value}}% +
+
+
@@ -18,9 +23,14 @@
{{$t(npmNetworkName[index].name)}}
{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}
-
-
-
{{npm.value}}%
+
+  {{npm.value}}% +
+
+  {{npm.value}}% +
+
+
@@ -32,9 +42,14 @@
{{$t(npmNetworkName[index].name)}}
{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}
-
-
-
{{npm.value}}%
+
+  {{npm.value}}% +
+
+  {{npm.value}}% +
+
+
@@ -46,9 +61,14 @@
{{$t(npmNetworkName[index].name)}}
{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}
-
-
-
{{npm.value}}%
+
+  {{npm.value}}% +
+
+  {{npm.value}}% +
+
+
@@ -60,9 +80,14 @@
{{$t(npmNetworkName[index].name)}}
{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}
-
-
-
{{npm.value}}%
+
+  {{npm.value}}% +
+
+  {{npm.value}}% +
+
+
@@ -115,6 +140,9 @@ export default { } else if (period < pperiod) { periodicData.value = 'down' periodicData.total = parseInt(((pperiod - period) / pperiod) * 100) + } else { + periodicData.value = '' + periodicData.total = 0 } return periodicData } @@ -122,7 +150,7 @@ export default { mounted () { this.timer = setTimeout(() => { this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData) - }, 200) + }, 500) }, beforeUnmount () { clearTimeout(this.timer)