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

测试报告图表

This commit is contained in:
chenjianxing 2020-04-29 15:49:38 +08:00
parent 516b56a7ef
commit 09e4ce9ea2
6 changed files with 395 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
frontend/src/business/components/common/components/MsPieChart.vue Normal file
View File

@ -0,0 +1,110 @@
<template>
<div>
<chart :options="options">
</chart>
</div>
</template>
<script>
export default {
name: "MsPieChart",
components: {},
mounted() {
this.getDataNamesByData();
},
watch: {
data() {
this.getDataNamesByData();
}
},
data() {
return {
options: {
title: {
text: this.text,
subtext: this.subtext,
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 20,
data: this.dataNames
},
series : [
{
name: this.name,
type: 'pie',
radius: '55%',
roseType: 'angle',
data: this.data
}
]
},
dataNames: ['示例1','示例2','示例3']
}
},
props: {
text: {
type: String,
default: '图表名称'
},
name: {
type: String,
default: '数据名称'
},
subtext: {
type: String,
default: ''
},
data: {
type: Array,
default() {
return [
{
value:235, name:'示例1',
itemStyle: {
color: '#67C23A'
}
},
{
value:274, name:'示例2',
itemStyle: {
color: '#E6A23C'
}
},
{
value:274, name:'示例3',
itemStyle: {
color: '#F56C6C'
}
}
];
}
}
},
methods: {
getDataNamesByData() {
let itemNames = [];
this.data.forEach(item => {
itemNames.push(item.name);
});
this.dataNames = itemNames;
}
}
}
</script>
<style scoped>
.echarts {
margin: 0 auto;
}
</style>

81
frontend/src/business/components/settings/workspace/components/BaseInfoComponent.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<common-component :title="'基础信息'">
<el-row type="flex" justify="space-between">
<el-col :span="12">
<span>所属项目：</span>
<span class="item-value">{{reportInfo.project}}</span>
</el-col>
<el-col :span="12">
<span>测试负责人：</span>
<span class="item-value">{{reportInfo.principal}}</span>
</el-col>
</el-row>
<el-row type="flex" justify="space-between">
<el-col :span="12">
<span>开始时间：</span>
<span class="item-value">{{reportInfo.startTime}}</span>
</el-col>
<el-col :span="12">
<span>结束时间：</span>
<span class="item-value">{{reportInfo.endTime}}</span>
</el-col>
</el-row>
<el-row type="flex" justify="space-between">
<el-col :span="12">
<span>测试执行人：</span>
<span v-for="item in reportInfo.executors" :key="item">{{item}}</span>
</el-col>
</el-row>
</common-component>
</template>
<script>
import CommonComponent from "./CommonComponent";
export default {
name: "BaseInfoComponent",
components: {CommonComponent},
data() {
return {
}
},
props: {
reportInfo: {
type: Object,
default() {
return {
project: '项目名称',
principal: '由丽媛',
executors: ['由丽媛','王振','陈建星'],
startTime: '2020-6-18',
endTime: '2020-6-18'
}
}
}
}
}
</script>
<style scoped>
span {
margin-right: 5px;
display: inline-block;
}
.el-col span:first-child {
font-weight: bold;
width: 100px;
}
.el-row {
height: 60px;
}
</style>

43
frontend/src/business/components/settings/workspace/components/CommonComponent.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<el-card class="template-component">
<template v-slot:header>
<slot name="header">
<span class="title">{{title}}</span>
</slot>
</template>
<el-main>
<slot></slot>
</el-main>
</el-card>
</template>
<script>
export default {
name: "CommonComponent",
data() {
return {
}
},
props: {
title: {
type: String,
default: '标题'
}
}
}
</script>
<style scoped>
.el-main {
min-height: 200px;
}
</style>

22
frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
View File

@ -67,6 +67,11 @@
:list="previews"
group="people"
@change="log">
<base-info-component/>
<test-result-component/>
<test-result-chart-component/>
<el-card class="template-component" v-for="item in previews" :key="item.id">
<template v-slot:header>
@ -99,11 +104,17 @@
import draggable from 'vuedraggable';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import BaseInfoComponent from "./BaseInfoComponent";
import TestResultComponent from "./TestResultComponent";
import TestResultChartComponent from "./TestResultChartComponent";
let idGlobal = 8;
export default {
name: "TestCaseReportTemplateEdit",
components: {
TestResultChartComponent,
TestResultComponent,
BaseInfoComponent,
draggable
},
data() {
@ -114,10 +125,10 @@
name: '',
type: 'edit',
components: [
{ name: "dog 1", id: 1 , type: 'system'},
{ name: "dog 2", id: 2 , type: 'custom'},
{ name: "dog 3", id: 3 ,type: 'system'},
{ name: "dog 4", id: 4 ,type: 'system'}
{ name: "基础信息", id: 1 , type: 'system'},
{ name: "测试结果", id: 2 , type: 'system'},
{ name: "测试结果分布", id: 3 ,type: 'system'},
{ name: "自定义模块", id: 4 ,type: 'custom'}
],
previews: [
{ name: "cat 5", id: 5 },
@ -252,5 +263,8 @@
height: 100%;
}
.template-component {
font-size: 16px;
}
</style>

67
frontend/src/business/components/settings/workspace/components/TestResultChartComponent.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<common-component :title="'测试结果统计'">
<template>
<ms-pie-chart :text="'测试结果统计图'" :name="'测试结果'" :data="charData"/>
</template>
</common-component>
</template>
<script>
import CommonComponent from "./CommonComponent";
import MsPieChart from "../../../common/components/MsPieChart";
export default {
name: "TestResultChartComponent",
components: {MsPieChart, CommonComponent},
data() {
return {
charData: [
{
value:235, name:'通过',
itemStyle: {
color: '#67C23A'
}
},
{
value:274, name:'阻塞',
itemStyle: {
color: '#E6A23C'
}
},
{
value:310, name:'失败',
itemStyle: {
color: '#F56C6C'
}
},
{
value:335, name:'跳过',
itemStyle: {
color: '#909399'
}
},
{
value:400, name:'未完成',
itemStyle: {
color: 'lightskyblue'
}
}
]
}
}
}
</script>
<style scoped>
.echarts {
margin: 0 auto;
}
</style>

76
frontend/src/business/components/settings/workspace/components/TestResultComponent.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<common-component :title="'测试结果'">
<template>
<el-table
:data="testResults"
stripe
style="width: 100%">
<el-table-column
prop="module"
:label="'模块'"
width="180">
</el-table-column>
<el-table-column
prop="caseCount"
:label="'用例数'"
width="180">
</el-table-column>
<el-table-column
prop="passRate"
:label="'通过率'">
</el-table-column>
<el-table-column
prop="flawCount"
:label="'缺陷数'">
</el-table-column>
</el-table>
</template>
</common-component>
</template>
<script>
import CommonComponent from "./CommonComponent";
export default {
name: "TestResultComponent",
components: {CommonComponent},
data() {
return {
}
},
props: {
testResults: {
type: Array,
default() {
return [
{
module: '模块1',
caseCount: '14',
passRate: 10.8,
flawCount: 3
},
{
module: '模块2',
caseCount: '24',
passRate: 40,
flawCount: 6
},
{
module: '模块3',
caseCount: '50',
passRate: 76.9,
flawCount: 8
}
]
}
}
}
}
</script>
<style scoped>
</style>