陈裕财
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