end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1933 Commits
1 Branch
0 Tags
56 MiB
 
 
 
 
Tree: 22e326f9fa
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '22e326f9fa'
${ noResults }
program_xm_vue/src/views/xm/rpt/index/CompsSet.vue

401 lines
23 KiB
Raw Blame History

<template>
<section>
<el-row>
<el-select v-model="filters.category" clearable @change="onCategroySelect" style="width:100%;" :disabled="true">
<el-option v-for="(item,index) in categorys" :label="item" :value="item" :key="index"></el-option>
</el-select>
</el-row>
<el-row ref="table" :style="{height:maxTableHeight+'px',overflow:'auto'}">
<div class="moduleset-lg hidden-md-and-down">
<div class="nav">
<draggable @update="datadragEnd" v-model="datas" style='sort: false' >
　　 <transition-group >
<div class="nav_item" :class="{itemActive: item.isChecked,curr:item.isCurr}" v-for="(item, index) in datas" :key="index" @click="selectItem(item, index)">
<img :src="item.img" alt="">
<div class="desc">
<p>{{index+1}} {{item.rptName}}</p>
<span>
{{item.desc}}
</span>
</div>
<el-checkbox v-model="item.isChecked" @change="onChange(item,$event)"></el-checkbox>
</div>
　　 </transition-group>
</draggable>
</div>
</div>
<div class="moduleset-sm hidden-lg-and-up">
<div class="nav">
<draggable @update="datadragEnd" v-model="datas" style='sort: false' >
　　 <transition-group >
<div class="nav_item" :class="{itemActive: item.isChecked,curr:item.isCurr}" v-for="(item, index) in datas" :key="index" @click="selectItem(item, index)">
<div class="title"><p>{{index+1}} {{item.rptName}}</p></div>
<div class="context">
<img :src="item.img" alt=""></img>
<div class="desc">
<span>{{item.desc}}</span>
</div>
</div>
<el-checkbox v-model="item.isChecked" @change="onChange(item,$event)"></el-checkbox>
</div>
　　 </transition-group>
</draggable>
</div>
</div>
</el-row>
</section>
</template>
<script>
import util from '@/common/js/util';//全局公共库
import pieSimple from '../images/pie-simple.png'
import lineStack from '../images/line-stack.png'
import areaStack from '../images/area-stack.png'
import ranjintu from '../images/ranjintu.png'
import datasetLink from '../images/dataset-link.png'
import bar from '../images/bar.png'
import draggable from 'vuedraggable'
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
props: ['category','showCheckedOnly'],
components:{
draggable
},
computed: {
...mapGetters(['userInfo']),
compsCpd(){
var comps=this.rptListCpd;
if(this.showCheckedOnly){
comps=comps.filter(k=>k.isChecked)
}
comps.sort((i1,i2)=>{
return i1.index-i2.index
})
return comps;
},
rptListCpd(){
if( !this.filters.category){
return this.comps;
}else{
return this.comps.filter(i=>i.category.indexOf(this.filters.category)>=0)
}
},
categorys:function(){
var map={};
var list=[];
this.comps.forEach(e => {
var cateList=e.category.split(",")
cateList.forEach(cate=>{
if(!map[cate]){
list.push(cate);
map[cate]=cate
}
})
});
return list;
},
},
watch: {
category(){
this.filters.category=this.category
},
compsCpd(){
this.datas= this.compsCpd;
}
},
data() {
return {
filterVisible:false,
filters:{
category:'企业级'
},
datas:[],
comps: [
{isChecked:false,isCurr:false,rptName:'迭代总结',category:'迭代级',compId:'xmIterationRptOverview',desc:'显示迭代总体情况',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'迭代燃尽图',category:'迭代级',compId:'xmIterationBurnout',desc:'跟踪迭代的剩余工作量按日期变化趋势，识别迭代当前进度情况',img:ranjintu },
{isChecked:false,isCurr:false,rptName:'需求每日趋势',category:'迭代级',compId:'xmIterationMenuDayTrend',desc:'跟踪未开始、执行中、已完成、已关闭状态的需求数量按日期变化趋势，识别需求工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'需求每日累积',category:'迭代级',compId:'xmIterationMenuDayAccumulate',desc:'跟踪未开始、执行中、已完成、已关闭状态的需求数量按日期累积情况，识别需求工作的瓶颈',img:areaStack },
{isChecked:false,isCurr:false,rptName:'迭代工作项每日趋势',category:'迭代级',compId:'xmIterationWorkItemDayList',desc:'统计迭代每日工作项数量分布情况',img:datasetLink },
{isChecked:false,isCurr:false,rptName:'迭代缺陷每日趋势',category:'迭代级',compId:'xmIterationQuestionDayTrend',desc:'跟踪新提出、执行中、已解决、已关闭状态的缺陷数量按日期变化趋势，识别缺陷处理工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'迭代缺陷每日累积',category:'迭代级',compId:'xmIterationQuestionDayAccumulate',desc:'跟踪一段时间内，各种程度和类别的缺陷累积情况，监控缺陷的变化趋势',img:areaStack },
//企业级报表
//{isChecked:false,isCurr:false,rptName:'企业总结',category:'企业级',compId:'xmBranchRptOverview',desc:'显示企业总体情况',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'企业缺陷每日趋势',category:'企业级',compId:'xmBranchQuestionDayTrend',desc:'跟踪新提出、执行中、已解决、已关闭状态的缺陷数量按日期变化趋势，识别缺陷处理工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'企业工作项每日趋势',category:'企业级',compId:'xmBranchWorkItemDayList',desc:'统计迭代每日工作项数量分布情况',img:datasetLink },
//{isChecked:false,isCurr:false,rptName:'企业缺陷每日趋势',category:'企业级',compId:'xmBranchQuestionDayTrend',desc:'跟踪新提出、执行中、已解决、已关闭状态的缺陷数量按日期变化趋势，识别缺陷处理工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'企业缺陷每日累积',category:'企业级',compId:'xmBranchQuestionDayAccumulate',desc:'跟踪一段时间内，各种程度和类别的缺陷累积情况，监控缺陷的变化趋势',img:areaStack },
{isChecked:false,isCurr:false,rptName:'需求每日趋势',category:'企业级',compId:'xmBranchMenuDayTrend',desc:'跟踪未开始、执行中、已完成、已关闭状态的需求数量按日期变化趋势，识别需求工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'需求每日累积',category:'企业级',compId:'xmBranchMenuDayAccumulate',desc:'跟踪未开始、执行中、已完成、已关闭状态的需求数量按日期累积情况，识别需求工作的瓶颈',img:areaStack },
//产品报表
{isChecked:false,isCurr:false,rptName:'产品总结',category:'产品级',compId:'xmProductRptOverview',desc:'显示产品总体情况',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'产品工作项每日趋势',category:'产品级',compId:'xmProductWorkItemDayList',desc:'统计产品每日工作项数量分布情况',img:datasetLink },
{isChecked:false,isCurr:false,rptName:'需求每日趋势',category:'产品级',compId:'xmMenuDayTrend',desc:'跟踪未开始、执行中、已完成、已关闭状态的需求数量按日期变化趋势，识别需求工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'需求每日累积',category:'产品级',compId:'xmMenuDayAccumulate',desc:'跟踪未开始、执行中、已完成、已关闭状态的需求数量按日期累积情况，识别需求工作的瓶颈',img:areaStack },
{isChecked:false,isCurr:false,rptName:'需求属性分布',category:'产品级,迭代级,企业级',compId:'xmMenuAttDist',desc:'统计所有需求任意属性数量分布情况（实时数据）',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'需求年龄分布',category:'产品级,迭代级,企业级',compId:'xmMenuAgeDist',desc:'统计所有需求年龄分布情况（实时数据）',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'需求排行榜',category:'产品级,迭代级,企业级',compId:'xmMenuSort',desc:'按提出人、负责人、迭代、产品等维度统计用户故事数量按高到低进行排行（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'模块需求数量统计',category:'产品级,迭代级,企业级',compId:'xmMenuFuncSort',initGroupBy:'func_id',desc:'统计每个模块当前的需求数量（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'迭代需求数量统计',category:'产品级,迭代级,企业级',compId:'xmMenuIterationSort',initGroupBy:'iteration_id',desc:'统计每个迭代当前的需求数量（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'产品需求数量统计',category:'产品级,企业级',compId:'xmMenuProductSort',initGroupBy:'product_id',desc:'统计每个产品当前的需求数量（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'产品缺陷每日趋势',category:'产品级',compId:'xmQuestionDayTrend',desc:'跟踪新提出、执行中、已解决、已关闭状态的缺陷数量按日期变化趋势，识别缺陷处理工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'产品缺陷每日累积',category:'产品级',compId:'xmQuestionDayAccumulate',desc:'跟踪一段时间内，各种程度和类别的缺陷累积情况，监控缺陷的变化趋势',img:areaStack },
//项目报表
{isChecked:false,isCurr:false,rptName:'项目总结',category:'项目级',compId:'xmProjectRptOverview',desc:'显示项目总体情况',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'项目工作项每日趋势',category:'项目级',compId:'xmProjectWorkItemDayList',desc:'统计项目每日工作项数量分布情况',img:datasetLink },
{isChecked:false,isCurr:false,rptName:'任务每日趋势',category:'项目级',compId:'xmTaskDayTrend',desc:'跟踪未开始、执行中、已完成、已关闭状态的任务数量按日期变化趋势，识别任务工作情况',img:lineStack },
{isChecked:false,isCurr:false,rptName:'任务每日累积',category:'项目级',compId:'xmTaskDayAccumulate',desc:'跟踪未开始、执行中、已完成、已关闭状态的任务数量按日期累积情况，识别任务工作的瓶颈',img:areaStack },
{isChecked:false,isCurr:false,rptName:'任务属性分布',category:'项目级,企业级',compId:'xmTaskAttDist',desc:'统计所有任务任意属性数量分布情况（实时数据）',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'任务年龄分布',category:'项目级,企业级',compId:'xmTaskAgeDist',desc:'统计所有任务年龄分布情况（实时数据）',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'任务排行榜',category:'项目级,企业级',compId:'xmTaskSort',desc:'任务提出人、负责人的用户故事数量排行（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'项目结算工时每日趋势',category:'项目级',compId:'xmProjectWorkloadSetDayList',desc:'统计项目每日登记工时、结算工时数量分布情况',img:datasetLink },
{isChecked:false,isCurr:false,rptName:'项目结算工时每月趋势',category:'项目级',compId:'xmProjectWorkloadSetMonthList',desc:'统计项目每月登记工时、结算工时数量分布情况',img:datasetLink },
//测试库级报表
{isChecked:false,isCurr:false,rptName:'测试计划总结',category:'测试计划级',compId:'xmTestPlanRptOverview',desc:'显示测试计划总体情况',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'测试库总体测试总结',category:'测试库级',compId:'xmTestCasedbRptOverview',desc:'显示测试库总体情况',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'测试用例规划分析',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmTestCaseToPlanCalc',desc:'显示用例被规划到测试计划中的次数统计',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'测试用例需求覆盖分析',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmTestCaseMenuSort',initGroupBy:'menu_id',desc:'统计测试用例需求覆盖情况',img:bar },
{isChecked:false,isCurr:false,rptName:'测试用例模块覆盖分析',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmTestCaseFuncSort',initGroupBy:'func_id',desc:'统计测试用例覆盖各个模块的情况',img:bar },
{isChecked:false,isCurr:false,rptName:'测试用例负责人排行榜',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmTestCaseCuserSort',initGroupBy:'cuserid',desc:'统计测试团队每个人负责的测试用例数并进行排序',img:bar },
{isChecked:false,isCurr:false,rptName:'测试用例执行状态分布',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmTestPlanCaseExecStatusDist',desc:'按测试用例执行结果统计，通过、失败、忽略、阻塞',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'测试用例执行用户分布',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmTestPlanCaseUserDist',desc:'统计测试用例负责人用例执行情况',img:bar },
{isChecked:false,isCurr:false,rptName:'缺陷回归分布',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionRetestDist',desc:'统计项目中缺陷在回归测试中分布情况，跟踪缺陷的重新打开率；',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'测试次数每日统计',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmTestDayTimesCalc',desc:'统计每日测试用例执行数量',img:bar },
{isChecked:false,isCurr:false,rptName:'缺陷状态分布',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionStateDist',desc:'跟踪新提出、执行中、已解决、已关闭状态的缺陷数量按日期变化趋势，识别缺陷处理工作情况',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'缺陷排行榜',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionSort',desc:'从缺陷提出人、创建人、负责人、故事等维度统计缺陷数量排行榜（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'缺陷提出人排行榜',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionAskUserSort',initGroupBy:'ask_userid',desc:'从缺陷提出人、创建人、负责人、故事等维度统计缺陷数量排行榜（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'缺陷负责人排行榜',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionHandlerUserSort',initGroupBy:'handler_userid',desc:'从缺陷提出人、创建人、负责人、故事等维度统计缺陷数量排行榜（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'缺陷模块排行榜',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionFuncSort',initGroupBy:'func_id',desc:'从缺陷提出人、创建人、负责人、故事等维度统计缺陷数量排行榜（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'缺陷需求排行榜',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionMenuSort',initGroupBy:'menu_id',desc:'从缺陷提出人、创建人、负责人、故事等维度统计缺陷数量排行榜（实时数据）',img:bar },
{isChecked:false,isCurr:false,rptName:'缺陷属性分布',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionAttDist',desc:'统计所有缺陷任意属性数量分布情况（实时数据）',img:pieSimple },
{isChecked:false,isCurr:false,rptName:'缺陷年龄分布',category:'测试计划级,测试库级,项目级,产品级,迭代级,企业级',compId:'xmQuestionAgeDist',desc:'统计所有缺陷按照年龄的分布情况，跟踪缺陷的生命周期和响应情况',img:pieSimple },
],
maxTableHeight:300,
}
},
methods: {
setChecked(compId,checked){
var com=this.comps.find(c=>c.compId==compId)
if(com){
com.isChecked=checked
}
},
setCheckeds(compIds,checked){
this.comps.forEach(k=>{
if(compIds.some(c=>c==k.compId)){
k.isChecked=checked
}else{
k.isChecked=!checked
}
})
},
onChange(comp,checked){
this.$emit('change',comp,checked)
if(checked!=='true'){
comp.isCurr=false
}
},
onCategroySelect(){
this.selectItem(this.rptListCpd[0])
},
selectItem(item){
this.comps.forEach(k=>k.isCurr=false)
item.isCurr=true
item.isChecked=true;
this.$emit("row-click",item)
},
datadragEnd(evt){
evt.preventDefault();
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
this.$emit('sort',evt,this.datas)
}
},
mounted(){
store.dispatch("toggleSideBar",false)
this.comps.forEach((k,index)=>k.index=index)
//this.comps.forEach(k=>k.id=k.id?k.id:k.compId)
this.$nextTick(()=>{
this.maxTableHeight = util.calcTableMaxHeight(this.$refs.table.$el)
if(this.category){
this.filters.category=this.category
}else{
if(this.xmTestPlan && this.xmTestPlan.id){
this.filters.category="测试计划级"
}else if(this.xmIteration && this.xmIteration.id){
this.filters.category="迭代级"
}else if(this.xmTestCasedb && this.xmTestCasedb.id){
this.filters.category="测试库级"
}else if(this.xmProject && this.xmProject.id){
this.filters.category="项目级"
}else if(this.xmProduct && this.xmProduct.id){
this.filters.category="产品级"
}else{
this.filters.category="企业级"
}
}
this.datas=this.compsCpd
})
}
}
</script>
<style lang="scss" scoped>
.moduleset-lg {
.nav {
overflow: hidden;
display:flex;
align-items:center;
justify-content: space-between;
flex-wrap:wrap;
padding-right: 5px;
.nav_item {
padding:5px;
display: flex;
flex-direction: row;
border: 2px solid #EDF0F9;
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
border-radius: 8px;
align-items: center;
position: relative;
cursor: pointer;
margin-top: 10px;
width:100%;
img {
object-fit:cover;
max-width: 25%;
max-height: 100%;
margin-right: 5px;
}
p {
font-size: 16px;
font-weight: bold;
color: #7D7D7D;
margin-bottom: 10px;
}
span {
font-size: 14px;
color: #7D7D7D;
line-height: 16px;
}
.check {
position: absolute;
top: 5px;
right: 5px;
font-size: 30px;
color: #90B1F4;
}
}
.itemActive {
border: 2px solid #90B1F4;
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
}
.curr {
background-color: #cbd2df;
}
}
}
.moduleset-sm {
.nav {
overflow: hidden;
display:flex;
align-items:center;
justify-content: space-between;
flex-wrap:wrap;
padding-right: 5px;
.nav_item {
padding:2px;
flex-direction: row;
border: 2px solid #EDF0F9;
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
border-radius: 8px;
align-items: center;
position: relative;
cursor: pointer;
margin-top: 5px;
width:100%;
.title{
width:100%;
p {
font-size: 14px;
font-weight: bold;
color: #7D7D7D;
margin-bottom: 5px;
margin-top: 5px;
}
}
.context{
display: flex;
width: 100%;
padding: 2px;
img {
object-fit:cover;
max-width: 25%;
max-height: 100%;
padding: 2px;
}
.desc{
width:75%;
span {
font-size: 10px;
color: #7D7D7D;
line-height: 12px;
}
}
}
.check {
position: absolute;
top: 5px;
right: 5px;
font-size: 20px;
color: #90B1F4;
}
}
.itemActive {
border: 2px solid #90B1F4;
box-shadow: 0px 3px 4px 0px rgba(186, 184, 184, 0.1);
}
.curr {
background-color: #90B1F4;
}
}
}
</style>