Merge branch 'dev' of github.com:fit2cloudrd/metersphere-server into dev
This commit is contained in:
Captain.B
commit
563a16a0cf
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue