15920324470
5 years ago
2 changed files with 675 additions and 93 deletions
-
190src/views/xm/core/xmProject/XmProjectInfo.vue
-
578src/views/xm/core/xmProject/XmProjectOverview.vue
@ -0,0 +1,578 @@ |
|||||
|
<template> |
||||
|
<section> |
||||
|
<el-row class="page-header"> |
||||
|
<el-col :xs="22" :sm="22" :md="23" :lg="23" :xl="23"> |
||||
|
<span >项目总览</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="page-main"> |
||||
|
<div class="statistics" v-show="isActive"> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="8" class="col"> |
||||
|
<el-card class="box-card" style="padding:0px ;height:425px"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>项目信息</span> |
||||
|
</div> |
||||
|
<el-row style="margin-bottom:18px"> |
||||
|
<el-row> |
||||
|
<span v-text="taskMng"></span> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<span>项目负责人</span> |
||||
|
</el-row> |
||||
|
</el-row> |
||||
|
<el-row style="margin-bottom:18px"> |
||||
|
<el-col :span="8" @click=""> |
||||
|
<div class="item"> |
||||
|
<div class="icon" style="background-color: rgb(79, 140, 255);"> |
||||
|
<i class="el-icon-right"></i> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="value" v-text="totalTask"></div> |
||||
|
<div class="title">总任务量</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="item"> |
||||
|
<div class="icon" style="background-color: rgb(255, 153, 51);"> |
||||
|
<i class="el-icon-loading"></i> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="value" v-text="notStart"> |
||||
|
</div> |
||||
|
<div class="title">待完成</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<div class="item"> |
||||
|
<div class="icon" style="background-color: rgb(0, 153, 51);"> |
||||
|
<i class="el-icon-check"></i> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="value" v-text="finish" > |
||||
|
</div> |
||||
|
<div class="title">已完成</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</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-date"></i> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="value" v-text="startTime1+'~'+endTime1"> |
||||
|
</div> |
||||
|
<div class="title">项目计划周期</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-star-off"></i> |
||||
|
</div> |
||||
|
<div class="info"> |
||||
|
<div class="value" v-text="'无参数'"> |
||||
|
</div> |
||||
|
<div class="title">需求数</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="value" v-text="'无参数'"> |
||||
|
</div> |
||||
|
<div class="title">迭代数</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-alarm-clock"></i> |
||||
|
</div> |
||||
|
<div class="value"> |
||||
|
<div class="info"> |
||||
|
<el-progress v-if="progress1" :percentage="progress1"></el-progress> |
||||
|
</div> |
||||
|
<div class="title">项目进度</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="8" class="col"> |
||||
|
<el-card class="box-card" style="height:425px"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>所有工作项及其完成情况</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div id="myChart1" :style="{width: '400px', height: '300px'}"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="8" class="col"> |
||||
|
<el-card class="box-card" style="height:425px"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>缺陷情况</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div id="myChart3" :style="{width: '400px', height: '300px'}"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12" class="col"> |
||||
|
<el-card class="box-card" style="padding:0px ;height:425px"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>任务每日状态趋势</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div id="myChart2" :style="{width: '400px', height: '300px'}"></div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
<el-col :span="12" class="col"> |
||||
|
<el-card class="box-card" style="padding:0px ;height:425px"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>项目工时</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<el-row> |
||||
|
<div class="item" style="margin-bottom:18px"> |
||||
|
<div> |
||||
|
<div class="title" v-text="'可绑定工时'">200</div> |
||||
|
<div style="text-align:center">预估工时</div> |
||||
|
</div> |
||||
|
<div style="margin-left:10px"> |
||||
|
<div class="title" v-text="'可绑定工时'">200</div> |
||||
|
<div style="text-align:center">登记工时</div> |
||||
|
</div> |
||||
|
<div style="margin-left:10px;border-left:2px solid gray"></div> |
||||
|
<div style="margin-left:10px"> |
||||
|
<div class="title" v-text="'可绑定进度'">200</div> |
||||
|
<div style="text-align:center">工时进度</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="item" style="margin-bottom:18px"> |
||||
|
<div> |
||||
|
<div class="title" v-text="'可绑定工时'">200</div> |
||||
|
<div style="text-align:center">剩余工时</div> |
||||
|
</div> |
||||
|
<div style="margin-left:10px"> |
||||
|
<div class="title" v-text="'可绑定偏差'">200</div> |
||||
|
<div style="text-align:center">预估偏差</div> |
||||
|
</div> |
||||
|
<div style="margin-left:10px;border-left:2px solid gray"></div> |
||||
|
<div style="margin-left:10px"> |
||||
|
<div class="title" v-text="'1.08%'">200</div> |
||||
|
<div style="text-align:center">预估偏差率</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
//预估工时 |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
//实际工时 |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import util from "@/common/js/util"; // 全局公共库 |
||||
|
//import Sticky from "@/components/Sticky"; // 粘性header组件 |
||||
|
import { mapGetters } from "vuex"; |
||||
|
import { listXmProjectState } from "@/api/xm/core/xmProjectState"; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
computed: { |
||||
|
...mapGetters(["userInfo"]), |
||||
|
finish: function (){ |
||||
|
return this.selProject.totalCompleteTaskCnt; |
||||
|
}, |
||||
|
notStart: function() { |
||||
|
return this.selProject.totalTaskCnt-this.selProject.totalCompleteTaskCnt; |
||||
|
}, |
||||
|
totalTask: function() { |
||||
|
return this.selProject.totalTaskCnt; |
||||
|
}, |
||||
|
progress1: function (){ |
||||
|
return Math.round(this.selProject.totalCompleteTaskCnt/this.selProject.totalTaskCnt*100); |
||||
|
}, |
||||
|
startTime1: function (){ |
||||
|
return this.selProject.startTime.substring(0,10); |
||||
|
}, |
||||
|
endTime1: function (){ |
||||
|
return this.selProject.endTime.substring(0,10); |
||||
|
}, |
||||
|
taskMng: function (){ |
||||
|
return this.selProject.createUsername; |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
props:['selProject'], |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
isActive: true, |
||||
|
xmProjectState: null,//查询结果 |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
methods:{ |
||||
|
//获取对应的xmProjectsTate |
||||
|
getXmProjectState(){ |
||||
|
let params = { |
||||
|
projectId:this.selProject.id, |
||||
|
branchId:this.userInfo.branchId |
||||
|
}; |
||||
|
|
||||
|
listXmProjectState(params).then((res) => { |
||||
|
let tips=res.data.tips; |
||||
|
if(tips.isOk){ |
||||
|
this.xmProjectState = res.data.data[0]; |
||||
|
}else{ |
||||
|
this.$message({showClose: true, message: tips.msg, type: 'error' }); |
||||
|
} |
||||
|
}).catch( err => this.load.list = false ); |
||||
|
}, |
||||
|
|
||||
|
drawLine1() { |
||||
|
// 基于准备好的dom，初始化echarts实例 |
||||
|
let myChart1 = this.$echarts.init(document.getElementById("myChart1")); |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: ['需求', '任务', '缺陷'] |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [ |
||||
|
{ |
||||
|
value: 90, |
||||
|
itemStyle: { |
||||
|
normal:{ |
||||
|
color: '#99CCFF' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: this.selProject.totalTaskCnt, |
||||
|
itemStyle: { |
||||
|
normal:{ |
||||
|
color: '#99CCFF' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
value: this.selProject.totalBugCnt, |
||||
|
itemStyle: { |
||||
|
normal:{ |
||||
|
color: '#99CCFF' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
], |
||||
|
type: 'bar' |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
// 绘制图表 |
||||
|
myChart1.setOption(option); |
||||
|
}, |
||||
|
drawLine2() { |
||||
|
let myChart2 = this.$echarts.init(document.getElementById("myChart2")); |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
color:['rgb(0, 153, 255)','#6699CC'], |
||||
|
legend: { |
||||
|
data: ['未开始', '进行中'] |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '3%', |
||||
|
right: '4%', |
||||
|
bottom: '3%', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '未开始', |
||||
|
type: 'line', |
||||
|
//stack: '总量', |
||||
|
data: [120, 132, 101, 134, 90, 230, 210], |
||||
|
areaStyle: { |
||||
|
normal:{ |
||||
|
color:"rgb(153, 204, 255)" , //设置折线图颜色 |
||||
|
} |
||||
|
}, |
||||
|
lineStyle:{ |
||||
|
normal:{ |
||||
|
color:'rgb(0, 153, 255)' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
name: '进行中', |
||||
|
type: 'line', |
||||
|
//stack: '总量', |
||||
|
data: [220, 182, 191, 234, 290, 330, 310], |
||||
|
areaStyle: { |
||||
|
normal:{ |
||||
|
color:"rgb(153, 204, 255)", //设置折线图颜色 |
||||
|
} |
||||
|
}, |
||||
|
lineStyle:{ |
||||
|
normal:{ |
||||
|
color:'#6699CC' |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
|
||||
|
// 绘制图表 |
||||
|
myChart2.setOption(option); |
||||
|
}, |
||||
|
drawLine3() { |
||||
|
let myChart3 = this.$echarts.init(document.getElementById("myChart3")); |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
orient: 'vertical', |
||||
|
left: 'left', |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: '50%', |
||||
|
data: [ |
||||
|
{value: this.selProject.totalClosedBugCnt, |
||||
|
itemStyle: { |
||||
|
normal:{ |
||||
|
color: '#99CC33' |
||||
|
} |
||||
|
}, |
||||
|
name: '已关闭'}, |
||||
|
{value: this.selProject.totalResolvedBugCnt, |
||||
|
itemStyle: { |
||||
|
normal:{ |
||||
|
color: '#FF9900' |
||||
|
} |
||||
|
}, |
||||
|
name: '已解决'}, |
||||
|
{value: this.selProject.totalActiveBugCnt, |
||||
|
itemStyle: { |
||||
|
normal:{ |
||||
|
color: '#66CCCC' |
||||
|
} |
||||
|
}, |
||||
|
name: '已激活'}, |
||||
|
{value: this.selProject.totalConfirmedBugCnt, |
||||
|
itemStyle: { |
||||
|
normal:{ |
||||
|
color: '#FF6666' |
||||
|
} |
||||
|
}, |
||||
|
name: '已确认'}, |
||||
|
], |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
// 绘制图表 |
||||
|
myChart3.setOption(option); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.getXmProjectState(); |
||||
|
}); |
||||
|
this.drawLine1(); |
||||
|
this.drawLine2(); |
||||
|
this.drawLine3(); |
||||
|
console.log("getXmProjectState():"+this.xmProjectState); |
||||
|
console.dir(this.xmProjectState, {depth:null}); |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.container { |
||||
|
margin: 10px; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
padding: 10px; |
||||
|
|
||||
|
span { |
||||
|
padding-right: 15px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.col { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
color: #fff; |
||||
|
height: 30px; |
||||
|
width: 30px; |
||||
|
border-radius: 15px; |
||||
|
text-align: center; |
||||
|
line-height: 30px; |
||||
|
font-size: 20px; |
||||
|
display: inline-block; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
|
||||
|
.icon2 { |
||||
|
color: #000000; |
||||
|
height: 30px; |
||||
|
width: 30px; |
||||
|
border-radius: 15px; |
||||
|
text-align: center; |
||||
|
line-height: 30px; |
||||
|
font-size: 20px; |
||||
|
display: inline-block; |
||||
|
margin-right: 5px; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.card-font { |
||||
|
color: #000000; |
||||
|
font-size: 12px; |
||||
|
|
||||
|
.el-col { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.calendar-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.cal-header-boxs { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
.cal-header-box { |
||||
|
padding: 5px; |
||||
|
height: 45px; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.box-icon { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.box-info { |
||||
|
text-align: center; |
||||
|
font-size: 12px; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-tag:hover { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.el-progress { |
||||
|
width: 220px; |
||||
|
} |
||||
|
|
||||
|
.value { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.reference { |
||||
|
margin-top: 10px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.click { |
||||
|
background: #e9f7ff; |
||||
|
} |
||||
|
|
||||
|
.calendar-box { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<style> |
||||
|
.app-container{ |
||||
|
padding: 20px; |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue