fix(性能测试): 修复测试报告图表缓存的问题

--bug=1008160 --user=刘瑞斌 【性能测试】测试报告-测试详情,自定义指标显示后不能取消显示 https://www.tapd.cn/55049933/s/1074750
This commit is contained in:
CaptainB 2021-11-24 19:49:53 +08:00 committed by 刘瑞斌
parent 47d9047803
commit a5b2df3104
1 changed files with 37 additions and 65 deletions

View File

@ -231,6 +231,7 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<ms-chart ref="chart2" <ms-chart ref="chart2"
v-if="refresh"
class="chart-config" class="chart-config"
:options="totalOption" :options="totalOption"
@datazoom="changeDataZoom" @datazoom="changeDataZoom"
@ -240,47 +241,47 @@
<el-row> <el-row>
<el-col :offset="2" :span="20"> <el-col :offset="2" :span="20">
<el-table <el-table
:data="tableData" :data="tableData"
stripe stripe
border border
style="width: 100%"> style="width: 100%">
<el-table-column label="Label" align="center"> <el-table-column label="Label" align="center">
<el-table-column <el-table-column
prop="label" prop="label"
label="Label" label="Label"
sortable> sortable>
</el-table-column> </el-table-column>
</el-table-column> </el-table-column>
<el-table-column label="Aggregate" align="center"> <el-table-column label="Aggregate" align="center">
<el-table-column <el-table-column
prop="avg" prop="avg"
label="Avg." label="Avg."
width="100" width="100"
sortable sortable
/> />
<el-table-column <el-table-column
prop="min" prop="min"
label="Min." label="Min."
width="100" width="100"
sortable sortable
/> />
<el-table-column <el-table-column
prop="max" prop="max"
label="Max." label="Max."
width="100" width="100"
sortable sortable
/> />
</el-table-column> </el-table-column>
<el-table-column label="Range" align="center"> <el-table-column label="Range" align="center">
<el-table-column <el-table-column
prop="startTime" prop="startTime"
label="Start" label="Start"
width="160" width="160"
/> />
<el-table-column <el-table-column
prop="endTime" prop="endTime"
label="End" label="End"
width="160" width="160"
/> />
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -293,10 +294,7 @@
<script> <script>
import MsChart from "@/business/components/common/chart/MsChart"; import MsChart from "@/business/components/common/chart/MsChart";
import { import {getPerformanceReportDetailContent, getSharePerformanceReportDetailContent,} from "@/network/load-test";
getPerformanceReportDetailContent,
getSharePerformanceReportDetailContent,
} from "@/network/load-test";
const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']; const color = ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
@ -341,6 +339,7 @@ export default {
label: 'label' label: 'label'
}, },
init: false, init: false,
refresh: true,
tableData: [], tableData: [],
baseOption: { baseOption: {
color: color, color: color,
@ -438,20 +437,15 @@ export default {
} }
}, },
handleChecked(name) { handleChecked(name) {
// let minus = this.checkOptions[name].filter((v) => {
// return this.checkList[name].indexOf(v) === -1;
// })
// let groupName = this.$t('load_test.report.' + name) + ': ';
// for (const m of minus) {
// this.chartData = this.chartData.filter(c => c.groupName !== groupName + m);
// }
// this.totalOption = this.generateOption(this.baseOption, this.chartData);
// this.getChart(name, this.checkList[name]);
this.getTotalChart(); this.getTotalChart();
this.refresh = false;
this.$nextTick(() => {
this.refresh = true;
});
}, },
initTableData() { initTableData() {
// this.init = true;
for (const name of CHART_MAP) { for (const name of CHART_MAP) {
this.getCheckOptions(name); this.getCheckOptions(name);
} }
@ -462,7 +456,7 @@ export default {
if (this.planReportTemplate) { if (this.planReportTemplate) {
let data = this.planReportTemplate.checkOptions[reportKey]; let data = this.planReportTemplate.checkOptions[reportKey];
this.handleGetCheckOptions(data, reportKey); this.handleGetCheckOptions(data, reportKey);
} else if (this.isShare){ } else if (this.isShare) {
return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => { return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => {
this.handleGetCheckOptions(res.data.data, reportKey); this.handleGetCheckOptions(res.data.data, reportKey);
}); });
@ -493,7 +487,7 @@ export default {
let chars = []; let chars = [];
for (let name in this.checkList) { for (let name in this.checkList) {
let data = this.planReportTemplate.checkOptions[name]; let data = this.planReportTemplate.checkOptions[name];
chars.push({data, 'reportKey' : name}); chars.push({data, 'reportKey': name});
} }
this.handleGetTotalChart(chars); this.handleGetTotalChart(chars);
} else { } else {
@ -544,7 +538,7 @@ export default {
return; return;
} }
this.totalOption = {}; this.totalOption = {};
if (this.isShare){ if (this.isShare) {
return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => { return getSharePerformanceReportDetailContent(this.shareId, reportKey, this.id).then(res => {
return this.handleGetChart(res.data.data, reportKey, checkList); return this.handleGetChart(res.data.data, reportKey, checkList);
}); });
@ -593,28 +587,6 @@ export default {
item.groupName = this.$t('load_test.report.' + reportKey) + ': ' + item.groupName; item.groupName = this.$t('load_test.report.' + reportKey) + ': ' + item.groupName;
}); });
return {data, reportKey}; return {data, reportKey};
// if (this.baseOption.yAxis.length === 0) {
// this.baseOption.yAxis.push({
// name: this.$t('load_test.report.' + reportKey),
// type: 'value',
// min: 0,
// position: 'left',
// boundaryGap: [0, '100%']
// });
// } else {
// this.baseOption.yAxis.push({
// name: this.$t('load_test.report.' + reportKey),
// type: 'value',
// min: 0,
// position: 'right',
// nameRotate: 20,
// offset: (this.baseOption.yAxis.length - 1) * 50,
// boundaryGap: [0, '100%']
// });
// this.baseOption.grid.right = (this.baseOption.yAxis.length - 1) * 5 + '%';
// }
// let yAxisIndex = this.baseOption.yAxis.length - 1;
// this.totalOption = this.generateOption(this.baseOption, data, yAxisIndex);
}, },
generateOption(option, data, yAxisIndex) { generateOption(option, data, yAxisIndex) {
let chartData = data; let chartData = data;