From 123a2a90461dbd508c4da1a1dca462a75b73ad71 Mon Sep 17 00:00:00 2001 From: "Captain.B" Date: Tue, 10 Nov 2020 10:41:07 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=80=A7=E8=83=BD=E6=B5=8B=E8=AF=95):=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E4=B8=8D=E5=90=8C=E7=9A=84?= =?UTF-8?q?=E7=BA=BF=E7=A8=8B=E7=BB=84=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PerformancePressureConfig.vue | 75 ++++++++---------- .../components/PerformancePressureConfig.vue | 76 +++++++++---------- 2 files changed, 67 insertions(+), 84 deletions(-) diff --git a/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue b/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue index 38d7be1413..5784764d67 100644 --- a/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue +++ b/frontend/src/business/components/performance/report/components/PerformancePressureConfig.vue @@ -2,7 +2,7 @@
- + @@ -64,7 +64,7 @@
{{ $t('load_test.pressure_prediction_chart') }}
- + @@ -83,6 +83,14 @@ const STEPS = "Steps"; const DURATION = "duration"; const RPS_LIMIT = "rpsLimit"; const RPS_LIMIT_ENABLE = "rpsLimitEnable"; +const hexToRgba = function (hex, opacity) { + return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'; +} +const hexToRgb = function (hex) { + return 'rgb(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + + ',' + parseInt('0x' + hex.slice(5, 7)) + ')'; +} export default { name: "MsPerformancePressureConfig", @@ -97,7 +105,7 @@ export default { step: 0, rpsLimit: 0, rpsLimitEnable: false, - orgOptions: {}, + options: {}, resourcePool: null, resourcePools: [], activeNames: ["0"], @@ -196,7 +204,7 @@ export default { if (response.data) { this.threadGroups = findThreadGroup(response.data); this.threadGroups.forEach(tg => { - tg.orgOptions = {}; + tg.options = {}; }); this.getLoadConfig(); } @@ -210,7 +218,8 @@ export default { if (handler.rampUpTime < handler.step) { handler.step = handler.rampUpTime; } - handler.orgOptions = { + handler.options = { + color: ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'], xAxis: { type: 'category', boundaryGap: false, @@ -221,15 +230,14 @@ export default { }, tooltip: { trigger: 'axis', - formatter: '{a}: {c0}', - axisPointer: { - lineStyle: { - color: '#57617B' - } - } }, - series: [{ - name: 'User', + series: [] + }; + + + for (let i = 0; i < handler.threadGroups.length; i++) { + let seriesData = { + name: handler.threadGroups[i].attributes.testname, data: [], type: 'line', step: 'start', @@ -245,10 +253,10 @@ export default { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, - color: 'rgba(137, 189, 27, 0.3)' + color: hexToRgba(handler.options.color[i], 0.3), }, { offset: 0.8, - color: 'rgba(137, 189, 27, 0)' + color: hexToRgba(handler.options.color[i], 0), }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 @@ -256,17 +264,14 @@ export default { }, itemStyle: { normal: { - color: 'rgb(137,189,27)', + color: hexToRgb(handler.options.color[i]), borderColor: 'rgba(137,189,2,0.27)', borderWidth: 12 } }, - }] - }; - let threads = []; - for (let i = 0; i < handler.threadGroups.length; i++) { + }; + let tg = handler.threadGroups[i]; - threads[i] = []; let timePeriod = Math.floor(tg.rampUpTime / tg.step); let timeInc = timePeriod; @@ -290,27 +295,13 @@ export default { } } // x 轴 - let xAxis = handler.orgOptions.xAxis.data; + let xAxis = handler.options.xAxis.data; if (xAxis.indexOf(j) < 0) { xAxis.push(j); } - threads[i].push(threadPeriod); + seriesData.data.push(threadPeriod); } - } - let maxLength = 0; - for (let i = 0; i < threads.length; i++) { - if (maxLength < threads[i].length) { - maxLength = threads[i].length; - } - } - for (let i = 0; i < maxLength; i++) { - let temp = 0; - for (let j = 0; j < threads.length; j++) { - if (threads[j].length <= maxLength) { - temp += threads[j][i] || 0; - } - } - handler.orgOptions.series[0].data.push(temp); + handler.options.series.push(seriesData); } }, calculateChart(threadGroup) { @@ -324,7 +315,7 @@ export default { if (handler.rampUpTime < handler.step) { handler.step = handler.rampUpTime; } - handler.orgOptions = { + handler.options = { xAxis: { type: 'category', boundaryGap: false, @@ -386,7 +377,7 @@ export default { let inc2count = handler.threadNumber - handler.step * threadInc1; for (let i = 0; i <= handler.duration; i++) { // x 轴 - handler.orgOptions.xAxis.data.push(i); + handler.options.xAxis.data.push(i); if (i > timePeriod) { timePeriod += timeInc; if (inc2count > 0) { @@ -398,9 +389,9 @@ export default { if (threadPeriod > handler.threadNumber) { threadPeriod = handler.threadNumber; } - handler.orgOptions.series[0].data.push(threadPeriod); + handler.options.series[0].data.push(threadPeriod); } else { - handler.orgOptions.series[0].data.push(threadPeriod); + handler.options.series[0].data.push(threadPeriod); } } this.calculateTotalChart(); diff --git a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue index 7ee1d89881..386fd432f4 100644 --- a/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue +++ b/frontend/src/business/components/performance/test/components/PerformancePressureConfig.vue @@ -14,7 +14,7 @@ - + @@ -81,7 +81,7 @@
{{ $t('load_test.pressure_prediction_chart') }}
- + @@ -102,6 +102,15 @@ const RPS_LIMIT = "rpsLimit"; const RPS_LIMIT_ENABLE = "rpsLimitEnable"; const HOLD = "Hold"; +const hexToRgba = function (hex, opacity) { + return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'; +} +const hexToRgb = function (hex) { + return 'rgb(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + + ',' + parseInt('0x' + hex.slice(5, 7)) + ')'; +} + export default { name: "PerformancePressureConfig", components: {MsChart}, @@ -126,7 +135,7 @@ export default { step: 0, rpsLimit: 0, rpsLimitEnable: false, - orgOptions: {}, + options: {}, resourcePool: null, resourcePools: [], activeNames: ["0"], @@ -233,7 +242,7 @@ export default { if (response.data) { this.threadGroups = findThreadGroup(response.data); this.threadGroups.forEach(tg => { - tg.orgOptions = {}; + tg.options = {}; }); this.getLoadConfig(); } @@ -248,7 +257,8 @@ export default { if (handler.rampUpTime < handler.step) { handler.step = handler.rampUpTime; } - handler.orgOptions = { + handler.options = { + color: ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'], xAxis: { type: 'category', boundaryGap: false, @@ -259,15 +269,14 @@ export default { }, tooltip: { trigger: 'axis', - formatter: '{a}: {c0}', - axisPointer: { - lineStyle: { - color: '#57617B' - } - } }, - series: [{ - name: 'User', + series: [] + }; + + + for (let i = 0; i < handler.threadGroups.length; i++) { + let seriesData = { + name: handler.threadGroups[i].attributes.testname, data: [], type: 'line', step: 'start', @@ -283,10 +292,10 @@ export default { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, - color: 'rgba(137, 189, 27, 0.3)' + color: hexToRgba(handler.options.color[i], 0.3), }, { offset: 0.8, - color: 'rgba(137, 189, 27, 0)' + color: hexToRgba(handler.options.color[i], 0), }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 @@ -294,17 +303,14 @@ export default { }, itemStyle: { normal: { - color: 'rgb(137,189,27)', + color: hexToRgb(handler.options.color[i]), borderColor: 'rgba(137,189,2,0.27)', borderWidth: 12 } }, - }] - }; - let threads = []; - for (let i = 0; i < handler.threadGroups.length; i++) { + }; + let tg = handler.threadGroups[i]; - threads[i] = []; let timePeriod = Math.floor(tg.rampUpTime / tg.step); let timeInc = timePeriod; @@ -328,27 +334,13 @@ export default { } } // x 轴 - let xAxis = handler.orgOptions.xAxis.data; + let xAxis = handler.options.xAxis.data; if (xAxis.indexOf(j) < 0) { xAxis.push(j); } - threads[i].push(threadPeriod); + seriesData.data.push(threadPeriod); } - } - let maxLength = 0; - for (let i = 0; i < threads.length; i++) { - if (maxLength < threads[i].length) { - maxLength = threads[i].length; - } - } - for (let i = 0; i < maxLength; i++) { - let temp = 0; - for (let j = 0; j < threads.length; j++) { - if (threads[j].length <= maxLength) { - temp += threads[j][i] || 0; - } - } - handler.orgOptions.series[0].data.push(temp); + handler.options.series.push(seriesData); } }, calculateChart(threadGroup) { @@ -362,7 +354,7 @@ export default { if (handler.rampUpTime < handler.step) { handler.step = handler.rampUpTime; } - handler.orgOptions = { + handler.options = { xAxis: { type: 'category', boundaryGap: false, @@ -424,7 +416,7 @@ export default { let inc2count = handler.threadNumber - handler.step * threadInc1; for (let i = 0; i <= handler.duration; i++) { // x 轴 - handler.orgOptions.xAxis.data.push(i); + handler.options.xAxis.data.push(i); if (i > timePeriod) { timePeriod += timeInc; if (inc2count > 0) { @@ -436,9 +428,9 @@ export default { if (threadPeriod > handler.threadNumber) { threadPeriod = handler.threadNumber; } - handler.orgOptions.series[0].data.push(threadPeriod); + handler.options.series[0].data.push(threadPeriod); } else { - handler.orgOptions.series[0].data.push(threadPeriod); + handler.options.series[0].data.push(threadPeriod); } } this.calculateTotalChart();