陈裕财
3 years ago
6 changed files with 402 additions and 8 deletions
-
2src/api/xm/core/xmTestCase.js
-
25src/api/xm/rpt.js
-
2src/views/xm/rpt/product/menuSort.vue
-
22src/views/xm/rpt/product/questionSort.vue
-
11src/views/xm/rpt/reportIndex.vue
-
342src/views/xm/rpt/testCase/testCaseSort.vue
@ -0,0 +1,25 @@ |
|||
|
|||
//格式化柱状图底部名称太长换行
|
|||
export const formatterLabel = (params) => { |
|||
var newParamsName = '' |
|||
const paramsNameNumber = params.length |
|||
const provideNumber = 4 // 单行显示文字个数
|
|||
const rowNumber = Math.ceil(paramsNameNumber / provideNumber) |
|||
if (paramsNameNumber > provideNumber) { |
|||
for (let p = 0; p < rowNumber; p++) { |
|||
var tempStr = '' |
|||
var start = p * provideNumber |
|||
var end = start + provideNumber |
|||
if (p === rowNumber - 1) { |
|||
tempStr = params.substring(start, paramsNameNumber) |
|||
} else { |
|||
tempStr = params.substring(start, end) + '\n' |
|||
} |
|||
newParamsName += tempStr |
|||
} |
|||
} else { |
|||
newParamsName = params |
|||
} |
|||
return newParamsName |
|||
}; |
|||
|
|||
@ -0,0 +1,342 @@ |
|||
<template> |
|||
<section> |
|||
|
|||
|
|||
<el-row :gutter="5" > |
|||
<el-col :span="18"> |
|||
<div> |
|||
<div class="echart-box" id="testCaseSort"></div> |
|||
<div class="progress"></div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6" class="border"> |
|||
<el-form :model="filters" class="padding" :style="{width:'100%',maxHeight:maxTableHeight+'px',overflow: 'auto'}" ref="filtersRef"> |
|||
<el-form-item label="分组属性"> |
|||
<el-select v-model="groupBy"> |
|||
<el-option v-for="i in this.groupBys" :label="i.name" :key="i.id" :value="i.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="测试库" v-if="xmTestCasedb && xmTestCasedb.id" > |
|||
<span >{{xmTestCasedb.id}} <span v-if="xmTestCasedb.name"><br/>{{ xmTestCasedb.name }} </span> </span> |
|||
</el-form-item> |
|||
<el-form-item label="归属项目" > |
|||
<xm-project-select v-if="!xmProject" ref="xmProjectSelect" style="display:inline;" :auto-select="false" :link-product-id="xmProductCpd?xmProductCpd.id:null" @row-click="onProjectSelected" @clear="onProjectClear"></xm-project-select> |
|||
<span v-else>{{xmProject.id}} <span v-if="xmProject.name"><br/>{{ xmProject.name }} </span> </span> |
|||
</el-form-item> |
|||
<el-form-item label="归属产品" > |
|||
<xm-product-select v-if="!xmProductCpd || !xmProductCpd.id" ref="xmProductSelect" style="display:inline;" :auto-select="false" :link-project-id="xmProject?xmProject.id:null" @row-click="onProductSelected" :iterationId="xmTestPlan?xmTestPlan.id:null" @clear="onProductClear"></xm-product-select> |
|||
<span v-else>{{xmProductCpd.id}} <span v-if="xmProductCpd.productName"><br/>{{ xmProductCpd.productName }} </span> </span> |
|||
</el-form-item> |
|||
<el-form-item label="归属迭代" v-if="xmIteration && xmIteration.id"> |
|||
<span> {{xmIteration.id}} |
|||
<span v-if="xmIteration.iterationName"><br/>{{ xmIteration.iterationName }} </span> |
|||
</span> |
|||
</el-form-item> |
|||
<el-form-item label="归属迭代" v-else-if="filters.product && filters.product.id"> |
|||
<xm-iteration-select ref="xmIterationSelect" :auto-select="false" :product-id="filters.product?filters.product.id:null" :link-project-id="xmProject?xmProject.id:null" placeholder="迭代" @row-click="onIterationSelected" @clear="onIterationClear"></xm-iteration-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="用例状态" prop="caseStatus"> |
|||
<el-select v-model="filters.caseStatus" clearable> |
|||
<el-option v-for="i in this.dicts.caseStatus" :label="i.name" :key="i.id" :value="i.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="用例类型" prop="caseType" > |
|||
<el-select v-model="filters.bugType" clearable> |
|||
<el-option v-for="i in this.dicts.bugType" :label="i.name" :key="i.id" :value="i.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="测试方式" prop="testType"> |
|||
<el-select v-model="filters.testType" clearable> |
|||
<el-option v-for="i in this.dicts.testType" :label="i.name" :key="i.id" :value="i.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="优先级" prop="cpriority" > |
|||
<el-select v-model="filters.cpriority" clearable> |
|||
<el-option v-for="i in dicts.priority" :label="i.name" :key="i.id" :value="i.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="el-icon-search" @click="searchXmTestCaseSort">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
</el-row> |
|||
</section> |
|||
</template> |
|||
|
|||
<script> |
|||
import util from '@/common/js/util';//全局公共库 |
|||
import {formatterLabel} from '@/api/xm/rpt.js';//全局公共库 |
|||
import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询 |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
import { getXmTestCaseSort } from '@/api/xm/core/xmTestCase'; |
|||
|
|||
import XmProjectSelect from '@/views/xm/core/components/XmProjectSelect';//项目 |
|||
import XmProductSelect from '@/views/xm/core/components/XmProductSelect';//产品 |
|||
import XmIterationSelect from '@/views/xm/core/components/XmIterationSelect';//迭代选择界面 |
|||
|
|||
export default { |
|||
|
|||
components: { |
|||
XmProjectSelect,XmProductSelect,XmIterationSelect |
|||
}, |
|||
props:['xmProject','xmProduct','xmIteration','xmTestCasedb','initGroupBy'], |
|||
computed: { |
|||
...mapGetters([ |
|||
'userInfo','roles' |
|||
]), |
|||
|
|||
xmTestCaseSortCpd(){ |
|||
if(this.xmTestCaseSort.length==0){ |
|||
return [] |
|||
}else{ |
|||
return this.xmTestCaseSort.map(i=>i.value) |
|||
} |
|||
}, |
|||
legendCpd(){ |
|||
if(this.xmTestCaseSort.length==0){ |
|||
return [] |
|||
}else{ |
|||
return this.xmTestCaseSort.map(i=>i.name) |
|||
} |
|||
}, |
|||
title(){ |
|||
var preName="" |
|||
if(this.filters.testCasedb && this.filters.testCasedb.id){ |
|||
preName=`测试库【${this.filters.testCasedb.name}】` |
|||
}else if(this.filters.iteration && this.filters.iteration.id){ |
|||
preName=`迭代【${this.filters.iteration.iterationName}】` |
|||
}else if(this.filters.project && this.filters.project.id){ |
|||
if(this.filters.project.name){ |
|||
preName=`项目【${this.filters.project.name}】` |
|||
}else{ |
|||
preName=`项目【${this.filters.project.id}】` |
|||
} |
|||
}else if(this.filters.product && this.filters.product.id){ |
|||
if(this.filters.product.productName){ |
|||
preName=`产品【${this.filters.product.productName}】` |
|||
}else{ |
|||
preName=`产品【${this.filters.product.id}】` |
|||
} |
|||
|
|||
} |
|||
return preName+ this.groupBys.find(i=>i.id==this.groupBy).name+'排行榜' |
|||
}, |
|||
xmProductCpd(){ |
|||
if(this.xmIteration && this.xmIteration.id && this.xmIteration.productId){ |
|||
return {id:this.xmIteration.productId,productName:this.xmIteration.productName} |
|||
} |
|||
if(this.xmTestCasedb && this.xmTestCasedb.id && this.xmTestCasedb.productId){ |
|||
return {id:this.xmTestCasedb.productId,productName:this.xmTestCasedb.productName} |
|||
} |
|||
if(this.xmProduct && this.xmProduct.id){ |
|||
return this.xmProduct |
|||
} |
|||
return null; |
|||
} |
|||
}, |
|||
watch: { |
|||
xmTestCaseSortCpd(){ |
|||
this.drawCharts(); |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
filters:{ |
|||
product:null, |
|||
project:null, |
|||
iteration:null, |
|||
testCasedb:null, |
|||
caseStatus:'', |
|||
testType:'', |
|||
cpriority:'', |
|||
caseType:'', |
|||
}, |
|||
groupBy:'menu_id', |
|||
groupBys:[ |
|||
{id:'menu_id', name:'故事'}, |
|||
{id:'cuserid', name:'负责人'}, |
|||
{id:'func_id', name:'模块'}, |
|||
|
|||
], |
|||
dicts:{testPlanTcode:[]},//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} |
|||
load:{ list: false, edit: false, del: false, add: false },//查询中... |
|||
dateRanger:[], |
|||
maxTableHeight:300, |
|||
visible:false, |
|||
xmTestCaseSort:[], |
|||
conditionBtnVisible:false, |
|||
|
|||
}//end return |
|||
},//end data |
|||
methods: { |
|||
formatDict(itemId,val){ |
|||
var dict=this.dicts[itemId] |
|||
if(dict){ |
|||
var item=dict.find(i=>i.id==val) |
|||
if(item){ |
|||
return item.name |
|||
} |
|||
} |
|||
return val; |
|||
}, |
|||
drawCharts() { |
|||
this.myChart = this.$echarts.init(document.getElementById("testCaseSort")); |
|||
this.myChart.setOption( |
|||
{ |
|||
title: { |
|||
text: this.title, |
|||
left: 'center', |
|||
}, |
|||
|
|||
tooltip: { |
|||
trigger: 'axis', |
|||
}, |
|||
barMaxWidth: 100, |
|||
toolbox: { |
|||
show: true, |
|||
top:"5%", |
|||
top:"5%", |
|||
right:"10px", |
|||
feature: { |
|||
dataView: { show: true, readOnly: false }, |
|||
magicType: { show: true, type: ['line', 'bar'] }, |
|||
|
|||
saveAsImage: { show: true } |
|||
} |
|||
}, |
|||
|
|||
calculable: true, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: this.legendCpd, |
|||
axisLabel: { |
|||
formatter: formatterLabel |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: this.xmTestCaseSortCpd, |
|||
type: 'bar', |
|||
label:{ |
|||
show: true, |
|||
}, |
|||
} |
|||
] |
|||
} |
|||
) |
|||
}, |
|||
searchXmTestCaseSort(){ |
|||
var params={ } |
|||
if(this.filters.product && this.filters.product.id){ |
|||
params.productId=this.filters.product.id |
|||
} |
|||
|
|||
if(this.filters.project && this.filters.project.id){ |
|||
params.projectId=this.filters.project.id |
|||
} |
|||
if(this.filters.iteration && this.filters.iteration.id){ |
|||
params.iterationId=this.filters.iteration.id |
|||
} |
|||
if(this.filters.testCasedb && this.filters.testCasedb.id){ |
|||
params.casedbId=this.filters.testCasedb.id |
|||
} |
|||
|
|||
if(this.filters.testType){ |
|||
params.testType=this.filters.testType |
|||
} |
|||
if(this.filters.caseType){ |
|||
params.caseType=this.filters.caseType |
|||
} |
|||
if(this.filters.caseStatus){ |
|||
params.caseStatus=this.filters.caseStatus |
|||
} |
|||
if(this.filters.cpriority){ |
|||
params.cpriority=this.filters.cpriority |
|||
} |
|||
params.groupBy=this.groupBy; |
|||
getXmTestCaseSort(params).then(res=>{ |
|||
var data=res.data.data |
|||
if(data){ |
|||
data.sort((a,b)=>{ |
|||
if(a.value<b.value){ |
|||
return 1 |
|||
}else if(a.value>b.value){ |
|||
return -1 |
|||
}else{ |
|||
return 0 |
|||
} |
|||
}) |
|||
} |
|||
this.xmTestCaseSort=data |
|||
}) |
|||
|
|||
|
|||
}, |
|||
onProjectSelected(project){ |
|||
this.filters.project=project |
|||
}, |
|||
|
|||
onProjectClear(){ |
|||
this.filters.project=null |
|||
|
|||
}, |
|||
onProductSelected(product){ |
|||
this.filters.product=product |
|||
}, |
|||
|
|||
onProductClear(){ |
|||
this.filters.product=null |
|||
|
|||
}, |
|||
|
|||
onIterationSelected(iteration){ |
|||
this.filters.iteration=iteration |
|||
}, |
|||
|
|||
onIterationClear(){ |
|||
this.filters.iteration=null |
|||
}, |
|||
|
|||
initData(){ |
|||
}, |
|||
sizeAutoChange(){ |
|||
this.myChart.resize(); |
|||
}, |
|||
open(){ |
|||
this.visible=true; |
|||
if(this.initGroupBy){ |
|||
this.groupBy=this.initGroupBy |
|||
} |
|||
this.filters.product=this.xmProduct |
|||
this.filters.project=this.xmProject |
|||
this.filters.iteration=this.xmIteration |
|||
this.filters.testCasedb=this.xmTestCasedb |
|||
this.searchXmTestCaseSort(); |
|||
} |
|||
},//end method |
|||
mounted() { |
|||
initSimpleDicts('all',['caseStatus','testType','priority','bugType'] ).then(res=>{ |
|||
this.dicts=res.data.data; |
|||
}) |
|||
this.initData(); |
|||
this.maxTableHeight = util.calcTableMaxHeight(this.$refs.filtersRef.$el) |
|||
//this.charts(); |
|||
this.open(); |
|||
|
|||
}//end mounted |
|||
} |
|||
|
|||
</script> |
|||
|
|||
<style scoped> |
|||
.image { |
|||
width: 100%; |
|||
display: block; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue