end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化

master
陈裕财 4 years ago
parent
caffe8ecfe
commit
b2330a0fb3
1 changed files with 166 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 314
      src/views/xm/core/xmIteration/XmIterationOverview.vue

314
src/views/xm/core/xmIteration/XmIterationOverview.vue
View File

@ -1,12 +1,14 @@
<template>
<section>
<el-row :style="{overflowX: 'hidden',height:maxTableHeight+'px'}" ref="table">
<section class="page-container padding">
<el-row class="page-main" :style="{overflowX:'hidden',height:maxTableHeight+'px'}" ref="pageMainRef">
<el-row style="margin-bottom:10px">
<el-card class="box-card" style="padding:0px ;height:100px">
<div>
<el-row style="padding:10px">
<el-steps :active="calcIterationCurrStep" align-center finish-status="success">
<el-step :title="item.name" v-for="(item,index) in dicts['iterationStatus']" :key="index"></el-step>
<el-row style="padding:10px">
<el-steps :active="calcXmIterationPstatusStep" align-center finish-status="success">
<el-step v-for="(i,index) in dicts['iterationStatus']" :title="i.name" :key="index" >
</el-step>
</el-steps>
</el-row>
</div>
@ -20,7 +22,7 @@
</div>
<el-row style="margin-bottom:18px">
<el-row>
<span>负责人</span> <span v-text="this.xmIteration.adminUsername"></span>
<span>迭代负责人</span><span v-text="this.xmIteration.pmUsername"></span>
</el-row>
</el-row>
<el-row style="margin-bottom:18px">
@ -31,7 +33,7 @@
</div>
<div class="info">
<div v-text="this.xmIteration.taskCnt"></div>
<div class="title">总任务量</div>
<div class="title">任务总数</div>
</div>
</div>
</el-col>
@ -53,7 +55,7 @@
<i class="el-icon-check"></i>
</div>
<div class="info">
<div v-text="this.xmIteration.taskCnt-notStart" >
<div v-text="this.xmIteration.taskCnt-this.notStart" >
</div>
<div class="title">已完成</div>
</div>
@ -66,7 +68,7 @@
<i class="el-icon-date"></i>
</div>
<div class="info">
<div v-text="iterationStartTime+'~'+iterationEndTime">
<div v-text="productStartTime+'~'+productEndTime">
</div>
<div class="title">迭代计划周期</div>
</div>
@ -81,17 +83,7 @@
<div class="title"> 需求数： {{this.xmIteration.menuCnt}}</div>
</div>
</div>
</el-row>
<el-row style="margin-bottom:18px">
<div class="item">
<div class="icon2" style="background-color: rgb(204, 204, 204);">
<i class="el-icon-refresh"></i>
</div>
<div class="info">
<div class="title"> 产品数： {{(this.xmIteration.productCnt)}} </div>
</div>
</div>
</el-row>
</el-row>
<el-row style="margin-bottom:18px">
<div class="item">
<div class="icon2" style="background-color: rgb(204, 204, 204);">
@ -99,8 +91,8 @@
</div>
<div>
<div class="progress-item">
<el-progress :percentage="taskProgress"></el-progress>
<div class="title">任务进度</div>
<el-progress :percentage="taskProgress"></el-progress>
<div class="title" style="width: 100%">任务进度</div>
</div>
</div>
</div>
@ -130,92 +122,91 @@
</el-row>
<el-row :gutter="10" style="margin-bottom:10px">
<el-col :span="8" >
<el-card class="box-card" style="padding:0px ;height:425px">
<div slot="header" class="clearfix">
<span>迭代工时</span>
</div>
<div>
<el-row >
<div class="item">
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="this.xmIteration.estimateWorkload"></span>
<span style="font-size:5px;">h</span>
</div>
<div style="text-align:center;font-size:5px;">预估工时</div>
<el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix">
<span>迭代工时</span>
</div>
<div>
<el-row >
<div class="item">
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="this.xmIterationCpd.estimateWorkload"></span>
<span style="font-size:5px;">h</span>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="this.xmIteration.actWorkload"></span>
<span style="font-size:5px;">h</span>
</div>
<div style="text-align:center;font-size:5px;">登记工时</div>
<div style="text-align:center;font-size:5px;">预估工时</div>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="this.xmIteration.actWorkload"></span>
<span style="font-size:5px;">h</span>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="workloadProgress"></span>
<span style="font-size:5px;">%</span>
</div>
<div style="text-align:center;font-size:5px;">工时进度</div>
<div style="text-align:center;font-size:5px;">登记工时</div>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="workloadProgress"></span>
<span style="font-size:5px;">%</span>
</div>
</el-col>
</div>
</el-row>
<el-row >
<div class="item">
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="remainWorkload"></span>
<span style="font-size:5px;">h</span>
</div>
<div style="text-align:center;font-size:5px;">剩余工时</div>
<div style="text-align:center;font-size:5px;">工时进度</div>
</div>
</el-col>
</div>
</el-row>
<el-row >
<div class="item">
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="remainWorkload"></span>
<span style="font-size:5px;">h</span>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="deviation"></span>
<span style="font-size:5px;">h</span>
</div>
<div style="text-align:center;font-size:5px;">预估偏差</div>
<div style="text-align:center;font-size:5px;">剩余工时</div>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="deviation"></span>
<span style="font-size:5px;">h</span>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="deviationRate"></span>
<span style="font-size:5px;">%</span>
</div>
<div style="text-align:center;font-size:5px;">预估偏差率</div>
<div style="text-align:center;font-size:5px;">预估偏差</div>
</div>
</el-col>
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="deviationRate"></span>
<span style="font-size:5px;">%</span>
</div>
</el-col>
</div>
</el-row>
<el-row>
<span style="margin-left:20px;">项目预计进度</span>
<el-progress style="width: 90%;margin-left:20px;margin-top: 10px;margin-bottom: 20px;" :stroke-width="14" :percentage="planProgress"></el-progress>
</el-row>
<el-row>
<span style="margin-left:20px;">项目实际进度</span>
<el-progress style="width: 90%;margin-left:20px;margin-top: 10px;" color="#47CBF6" :stroke-width="14" :percentage="realProgress"></el-progress>
</el-row>
</div>
</el-card>
</el-col>
<div style="text-align:center;font-size:5px;">预估偏差率</div>
</div>
</el-col>
</div>
</el-row>
<el-row>
<span style="margin-left:20px;">工时预计进度</span>
<el-progress style="width: 90%;margin-left:20px;margin-top: 10px;margin-bottom: 20px;" :stroke-width="14" :percentage="planProgress"></el-progress>
</el-row>
<el-row>
<span style="margin-left:20px;">工时实际进度</span>
<el-progress style="width: 90%;margin-left:20px;margin-top: 10px;" color="#47CBF6" :stroke-width="14" :percentage="realProgress"></el-progress>
</el-row>
</div>
</el-card>
</el-col>
<el-col :span="8" >
<el-card class="box-card" style="padding:0px ;height:425px">
<el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix">
<span>迭代相关联产品与项目数</span>
<span>迭代相关联项目与迭代数</span>
</div>
<div>
<div id="productAndProject" :style="{width: '100%', height: '350px'}"></div>
<div id="projectAndIteration" :style="{width: '100%', height: '350px'}"></div>
</div>
</el-card>
</el-col>
@ -236,9 +227,10 @@
<script>
import util from "@/common/js/util"; // 全局公共库
import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询
import { mapGetters } from "vuex";
import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询
export default {
computed: {
...mapGetters(["userInfo"]),
@ -246,37 +238,57 @@ export default {
return this.xmIteration.taskUnstartCnt+this.xmIteration.taskExecCnt;
},
taskProgress: function (){
return this.xmIteration.finishRate||0;
return this.xmIteration.finishRate?parseInt(this.xmIteration.finishRate):0;
},
iterationStartTime: function (){
return this.xmIteration.startTime?this.xmIteration.startTime.substring(0,10):'';
productStartTime: function (){
if(this.xmIteration.planStartTime){
return this.xmIteration.planStartTime.substring(0,10);
} else{
return '暂无';
}
},
iterationEndTime: function (){
return this.xmIteration.endTime?this.xmIteration.endTime.substring(0,10):'';
productEndTime: function (){
if(this.xmIteration.planEndTime){
return this.xmIteration.planEndTime.substring(0,10);
} else{
return '暂无';
}
},
workloadProgress:function (){
if(!this.xmIteration.budgetWorkload || !this.xmIteration.actWorkload){
if(this.xmIteration.budgetWorkload>0){
return Math.round(this.xmIteration.actWorkload/this.xmIteration.budgetWorkload*100);
}else{
return 0;
}
return Math.round(this.xmIteration.actWorkload/this.xmIteration.budgetWorkload*100);
},
deviation:function (){
return this.xmIteration.actWorkload -this.xmIteration.estimateWorkload
remainWorkload:function (){
return this.xmIteration.budgetWorkload - this.xmIteration.actWorkload;
},
deviationRate:function (){
if(!this.xmIteration.estimateWorkload){
return 0;
deviation:function (){
let now = new Date();
let productStartTime = new Date(this.xmIteration.planStartTime);
let productEndTime = new Date(this.xmIteration.planEndTime);
if(now<=productEndTime){
let allDays=productEndTime-productStartTime;
return this.xmIteration.budgetWorkload - Math.round((now-productStartTime)/allDays*this.xmIteration.budgetWorkload);
}else{
return this.xmIteration.actWorkload - this.xmIteration.budgetWorkload;
}
return Math.round(this.deviation/this.xmIteration.estimateWorkload*100);
},
remainWorkload:function (){
return this.xmIteration.budgetWorkload - this.xmIteration.actWorkload;
deviationRate:function (){
return Math.round(this.deviation/this.xmIteration.budgetWorkload*100);
},
planProgress:function (){
if(!this.xmIteration.budgetWorkload){
return 0;
let now = new Date();
let productStartTime = new Date(this.xmIteration.planStartTime);
let productEndTime = new Date(this.xmIteration.planEndTime);
if(now<=productEndTime){
let allDays=productEndTime-productStartTime;
return Math.round((now-productStartTime)/allDays*100)
}else{
return 100;
}
return Math.round(this.xmIteration.estimateWorkload/this.xmIteration.budgetWorkload*100)
},
realProgress:function (){
if(this.xmIteration.actWorkload < this.xmIteration.budgetWorkload){
@ -285,39 +297,43 @@ export default {
return 100;
}
},
xmIterationStateCpd(){
return this.xmIteration
xmIterationCpd(){
return this.xmIteration;
},
calcIterationCurrStep(){
var istatus= this.dicts.iterationStatus
if(!istatus){
return 1;
calcXmIterationPstatusStep(){
if(this.dicts['iterationStatus']){
var index=this.dicts['iterationStatus'].findIndex(i=>{
if(i.id==this.xmIterationCpd.pstatus){
return true;
}else{
return false;
}
})
return index+1;
}else{
var status=istatus.findIndex(i=>this.xmIteration.iphase==i.id)
if(status>=0){
return status+1;
}else{
return 1;
}
return 0;
}
}
}
},
props:['xmIteration'],
watch:{
xmIterationStateCpd:function(){
xmIterationCpd:function(){
this.drawAllBar();
this.drawPieBug();
this.drawProductAndProject();
this.drawProjectAndIteration();
this.drawCasePie();
}
},
},
data() {
return {
isActive: true,
dicts:{
iterationStatus:[]
},
maxTableHeight:300,
dicts:{},
};
};
},
methods:{
@ -459,8 +475,8 @@ export default {
// 绘制图表
bugPieChart.setOption(option);
},
drawProductAndProject() {
let productAndProject = this.$echarts.init(document.getElementById("productAndProject"));
drawProjectAndIteration() {
let projectAndIteration = this.$echarts.init(document.getElementById("projectAndIteration"));
let option = {
tooltip: {
trigger: 'axis',
@ -471,7 +487,7 @@ export default {
},
xAxis: {
type: 'category',
data: ['产品数', '项目数']
data: ['项目数', '迭代数']
},
yAxis: {
type: 'value'
@ -484,7 +500,7 @@ export default {
color:'#000000',
}
},
data: [this.xmIteration.productCnt, this.xmIteration.projectCnt],
data: [this.xmIteration.projectCnt, this.xmIteration.iterationCnt],
type: 'bar',
showBackground: true,
itemStyle: {
@ -499,7 +515,7 @@ export default {
};
// 绘制图表
productAndProject.setOption(option);
projectAndIteration.setOption(option);
},
drawCasePie() {
let casePie = this.$echarts.init(document.getElementById("casePie"));
@ -571,16 +587,18 @@ export default {
},
mounted() {
initSimpleDicts('all',['iterationStatus'] ).then(res=>{
this.dicts=res.data.data;
})
this.$nextTick(() => {
this.maxTableHeight=util.calcTableMaxHeight(this.$refs.table.$el)
initSimpleDicts('all',['iterationStatus'] ).then(res=>{
if(res.data.tips.isOk){
this.dicts['iterationStatus']=res.data.data.iterationStatus
}
});
this.$nextTick(() => {
this.maxTableHeight=util.calcTableMaxHeight(this.$refs.pageMainRef.$el)
});
this.drawAllBar();
this.drawPieBug();
this.drawProductAndProject();
this.drawProjectAndIteration();
this.drawCasePie();
},
@ -637,7 +655,7 @@ export default {
position: relative;
.progress-item{
position:absolute; width:80%;
}
};
}
.card-font {

Write Preview
Loading…
Cancel
Save