test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: 测试计划报告图表样式

This commit is contained in:
chenjianxing 2021-09-01 18:45:00 +08:00 committed by jianxing
parent e068f96901
commit c5441433b4
4 changed files with 40 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/business/components/common/components/MsDoughnutPieChart.vue
View File

@ -33,7 +33,7 @@ export default {
name: this.name,
type: 'pie',
left: -150,
radius: ['40%', '60%'],
radius: ['40%', '50%'],
avoidLabelOverlap: false,
label: {
// padding: [10, 10, 20, 10],

4
frontend/src/business/components/track/plan/view/comonents/report/detail/TestPlanReportNavigationBar.vue
View File

@ -68,7 +68,9 @@ export default {
top: 40%;
line-height: 30px;
border-radius: 0 15px 15px 0;
background-color: #acb7c1;
/*background-color: #acb7c1;*/
background-color: #783887;
color: white;
display: inline-block;
position: absolute;
cursor: pointer;

41
frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiResult.vue
View File

@ -5,7 +5,8 @@
<ms-doughnut-pie-chart :name="$t('单接口用例')" :data="caseCharData" ref="functionChar"/>
</el-col>
<el-col :span="12">
<api-scenario-char-result :data="scenarioCharData"/>
<api-scenario-char-result :name="'场景用例数'" :data="scenarioCharData"/>
<api-scenario-char-result style="margin-top: -50px;" :name="'步骤用例数'" :data="stepCharData"/>
</el-col>
</el-row>
</div>
@ -25,12 +26,16 @@ export default {
caseDataMap: new Map([
["success", {name: this.$t('test_track.plan_view.pass'), itemStyle: {color: '#67C23A'}}],
["Success", {name: this.$t('test_track.plan_view.pass'), itemStyle: {color: '#67C23A'}}],
["Pass", {name: this.$t('test_track.plan_view.pass'), itemStyle: {color: '#67C23A'}}],
["error", {name: this.$t('test_track.plan_view.failure'), itemStyle: {color: '#F56C6C'}}],
["Fail", {name: this.$t('test_track.plan_view.failure'), itemStyle: {color: '#F56C6C'}}],
["Failure", {name: this.$t('test_track.plan_view.failure'), itemStyle: {color: '#F56C6C'}}],
["Prepare", {name: this.$t('api_test.home_page.detail_card.unexecute'), itemStyle: {color: '#909399'}}],
["Underway", {name: this.$t('api_test.home_page.detail_card.unexecute'), itemStyle: {color: '#909399'}}],
]),
caseCharData: [],
scenarioCharData: [],
stepCharData: [],
isShow: true
}
},
@ -66,32 +71,20 @@ export default {
let apiScenarioData = [];
this.apiResult.apiScenarioData.forEach(item => {
let data = this.getDataByStatus(item.status);
data.data = [item.count];
for (let i = 0; i < this.apiResult.apiScenarioStepData.length; i++) {
let stepItem = this.apiResult.apiScenarioStepData[i];
if (item.status) {
if (item.status === 'Fail' && stepItem.status === 'Failure') {
data.data.push(stepItem.count);
break;
}
if (item.status === 'Success' && stepItem.status === 'Pass') {
data.data.push(stepItem.count);
break;
}
if (item.status === 'Prepare' && stepItem.status === 'Underway') {
data.data.push(stepItem.count);
break;
}
} else {
if (stepItem.status === 'Underway') {
data.data.push(stepItem.count);
break;
}
}
}
data.value = item.count;
apiScenarioData.push(data);
});
let stepCharData = [];
for (let i = 0; i < this.apiResult.apiScenarioStepData.length; i++) {
let stepItem = this.apiResult.apiScenarioStepData[i];
let data = this.getDataByStatus(stepItem.status);
data.value = stepItem.count;
stepCharData.push(data);
}
this.scenarioCharData = apiScenarioData;
this.stepCharData = stepCharData;
},
getDataByStatus(status) {
let tmp = this.caseDataMap.get(status);

83
frontend/src/business/components/track/plan/view/comonents/report/detail/component/ApiScenarioCharResult.vue
View File

@ -1,5 +1,5 @@
<template>
<ms-chart v-if="visible" :options="options"/>
<ms-chart style="height: 250px" v-if="visible" :options="options"/>
</template>
<script>
@ -26,24 +26,16 @@ export default {
},
legend: {
data: [],
// orient: 'vertical',
// right: 0,
// bottom: '40%',
},
grid: {
left: 100
},
xAxis: {
// type: 'value',
// // name: 'Days',
// axisLabel: {
// formatter: '{value}'
// }
type: 'value',
},
yAxis: {
type: 'category',
inverse: true,
data: ['场景用例数', '步骤用例数'],
data: [],
axisLabel: {
formatter: function (value) {
},
@ -64,30 +56,12 @@ export default {
},
series: [
{
name: '未执行',
data: [],
type: 'bar',
data: [165, 170],
label: seriesLabel,
itemStyle: {
color: '#909399'
}
},
{
name: '成功',
type: 'bar',
label: seriesLabel,
data: [150, 105],
itemStyle: {
color: '#F56C6C'
}
},
{
name: '失败',
type: 'bar',
label: seriesLabel,
data: [220, 82],
itemStyle: {
color: '#67C23A'
barWidth: 20,
label: {
show: true,
formatter: {}
}
}
]
@ -123,45 +97,26 @@ export default {
});
},
setFormatterFunc() {
let data = this.data;
let caseCount = 0;
let stepCount = 0;
let dataCount = 0;
this.data.forEach(item => {
caseCount += item.data[0];
if (item.data[1]) {
stepCount += item.data[1];
}
dataCount += item.value;
});
let formatterFuc = function (value) {
let total = 0;
if (value.dataIndex == 0) {
total = caseCount;
} else {
total = stepCount;
}
return value.data + '/' + ((value.data / total) * 100).toFixed(0) + '%';
let formatterFuc = function (item) {
return item.data.value + '/' + ((item.data.value / dataCount) * 100).toFixed(0) + '%';
};
this.data.forEach(item => {
item.type = 'bar';
item.label = {
show: true,
formatter: formatterFuc
};
});
this.options.series = data;
this.options.series[0].data = this.data;
this.options.series[0].label.formatter = formatterFuc;
let name = this.name;
this.options.yAxis.axisLabel.formatter = function (value) {
if (value === '场景用例数') {
return '{name|场景用例数}\n' + '{count| ' + caseCount + '}';
} else {
return '{name|步骤用例数}\n' + '{count|' + stepCount + '}';
}
return '{name|' + name + '}\n' + '{count| ' + dataCount + '}';
};
this.options.legend.data = data.map(i => i.name);
this.options.legend.data = this.data.map(i => i.name);
this.options.yAxis.data = this.data.map(i => i.name);
},
}
}