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

故事概览，其他概览微调

master
chentaiyu 5 years ago
parent
d0ed9c7faf
commit
048876a841
5 changed files with 697 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/views/xm/core/xmIteration/XmIterationOverview.vue
  2. 2
      src/views/xm/core/xmMenu/XmMenuEdit.vue
  3. 648
      src/views/xm/core/xmMenu/XmMenuOverview.vue
  4. 6
      src/views/xm/core/xmProduct/XmProductOverview.vue
  5. 3
      src/views/xm/core/xmProject/XmProjectOverview.vue

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

@ -5,7 +5,7 @@
<el-card class="box-card" style="padding:0px ;height:100px"> <el-card class="box-card" style="padding:0px ;height:100px">
<div> <div>
<el-row style="padding:10px"> <el-row style="padding:10px">
<el-steps :active="this.xmIteration.iphase+1" align-center>
<el-steps :active="this.xmIteration.iphase+1" align-center finish-status="success">
<el-step title="未开始"></el-step> <el-step title="未开始"></el-step>
<el-step title="需求评审"></el-step> <el-step title="需求评审"></el-step>
<el-step title="计划会"></el-step> <el-step title="计划会"></el-step>
@ -119,7 +119,7 @@
<el-col :span="8" > <el-col :span="8" >
<el-card class="box-card" style="height:425px"> <el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>所有工作项及其完成情况</span>
<span>所有工作项数量分布</span>
</div> </div>
<div> <div>
<div id="allChart" :style="{width: '100%', height: '350px'}"></div> <div id="allChart" :style="{width: '100%', height: '350px'}"></div>

2
src/views/xm/core/xmMenu/XmMenuEdit.vue
View File

@ -32,7 +32,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="概览">
<el-tab-pane label="概览" lazy>
<xm-menu-overview :xm-menu="xmMenu"></xm-menu-overview> <xm-menu-overview :xm-menu="xmMenu"></xm-menu-overview>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>

648
src/views/xm/core/xmMenu/XmMenuOverview.vue
View File

@ -1,6 +1,237 @@
<template> <template>
<section> <section>
<el-row class="page-main page-height-75" style="overflow-x: hidden;">
<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="this.xmMenu.menuStatus" finish-status="success" align-center>
<el-step title="初始"></el-step>
<el-step title="设计中"></el-step>
<el-step title="开发中"></el-step>
<el-step title="测试中"></el-step>
<el-step title="uat测试"></el-step>
<el-step title="已上线"></el-step>
<el-step title="已下线"></el-step>
<el-step title="已删除"></el-step>
</el-steps>
</el-row>
</div>
</el-card>
</el-row>
<el-row :gutter="10" style="margin-bottom:10px">
<el-col :span="12" >
<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="this.xmMenu.mmUsername"></span>
</el-row>
<el-row>
<span>故事管理员</span>
</el-row>
</el-row>
<el-row style="margin-bottom:18px">
<el-col :span="12" @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 v-text="this.xmMenu.taskCnt"></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 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 v-text="this.xmMenu.finishTaskCnt" >
</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 v-text="menuStartTime+'~'+menuEndTime">
</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="title"> 关联项目数： {{this.xmMenu.projectCnt}}</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.xmMenu.iterationCnt)}} </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>
<div class="progress-item">
<el-progress :percentage="taskProgress"></el-progress>
<div class="title">任务进度</div>
</div>
</div>
</div>
</el-row>
</el-card>
</el-col>
<el-col :span="12" >
<el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix">
<span>所有工作项数量分布</span>
</div>
<div>
<div id="allChart" :style="{width: '100%', height: '350px'}"></div>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-bottom:10px">
<el-col>
<el-card class="box-card" style="padding:0px ;height:425px">
<div slot="header" class="clearfix">
<span>项目工时</span>
</div>
<div>
<el-row style="padding:25px;">
<div class="item">
<el-col :span="8">
<div>
<div style="text-align:center;">
<span style="font-size:24px;" v-text="this.xmMenu.planWorkload"></span>
<span style="font-size:5px;">h</span>
</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.xmMenu.actWorkload"></span>
<span style="font-size:5px;">h</span>
</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>
<div style="text-align:center;font-size:5px;">工时进度</div>
</div>
</el-col>
</div>
</el-row>
<el-row style="padding:25px;">
<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>
</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>
</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>
</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;" :text-inside="true" :stroke-width="24" :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;" :text-inside="true" :stroke-width="24" :percentage="realProgress"></el-progress>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-bottom:10px">
<el-col :span="12" >
<el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix">
<span>缺陷情况</span>
</div>
<div style="'100%'">
<div id="bugPieChart" :style="{width: '100%', height: '300px'}"></div>
</div>
</el-card>
</el-col>
<el-col :span="12" >
<el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix">
<span>案例情况</span>
</div>
<div>
<div id="casePie" :style="{width: '100%', height: '410px'}"></div>
</div>
</el-card>
</el-col>
</el-row>
</el-row>
</section> </section>
</template> </template>
@ -12,40 +243,421 @@
export default { export default {
computed: { computed: {
...mapGetters([
'userInfo','roles'
])
...mapGetters(['userInfo','roles']),
notStart: function() {
return this.xmMenu.taskCnt-this.xmMenu.finishTaskCnt;
},
taskProgress: function (){
return Math.round(this.xmMenu.finishTaskCnt/this.xmMenu.taskCnt*100);
},
menuStartTime: function (){
if(this.xmMenu.planStartTime){
return this.xmMenu.planStartTime.substring(0,10);
} else{
return '暂无';
}
},
menuEndTime: function (){
if(this.xmMenu.planEndTime){
return this.xmMenu.planEndTime.substring(0,10);
} else{
return '暂无';
}
},
workloadProgress:function (){
return Math.round(this.xmMenu.actWorkload/this.xmMenu.planWorkload*100);
},
deviation:function (){
let now = new Date();
let startTime = new Date(this.xmMenu.planStartTime);
let endTime = new Date(this.xmMenu.planEndTime);
if(now<=endTime){
let allDays=endTime-startTime;
return this.xmMenu.planWorkload - Math.round((now-startTime)/allDays*this.xmMenu.planWorkload)
}else{
return this.xmMenu.actWorkload - this.xmMenu.planWorkload;
}
},
deviationRate:function (){
return Math.round(this.deviation/this.xmMenu.planWorkload*100);
},
remainWorkload:function (){
return this.xmMenu.planWorkload - this.xmMenu.actWorkload;
},
planProgress:function (){
let now = new Date();
let startTime = new Date(this.xmMenu.planStartTime);
let endTime = new Date(this.xmMenu.planEndTime);
if(now<=endTime){
let allDays=endTime-startTime;
return Math.round((now-startTime)/allDays*100)
}else{
return 100;
}
},
realProgress:function (){
if(this.xmMenu.actWorkload < this.xmMenu.planWorkload){
return Math.round(this.xmMenu.actWorkload/this.xmMenu.planWorkload*100)
}else{
return 100;
}
}, },
xmMenuCpd(){
return this.xmMenu
},
},
props:['xmMenu'], props:['xmMenu'],
watch:{ watch:{
xmMenuCpd:function(){
this.drawAllBar();
this.drawPieBug();
this.drawCasePie();
}
}, },
data() { data() {
return { return {
options:{},//下拉选择框的所有静态数据 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 },//查询中...
/**begin 在下面加自定义属性,记得补上面的一个逗号**/
isActive:true,
};
},
/**end 在上面加自定义属性**/
}//end return
},//end data
methods:{ methods:{
drawAllBar() {
// 基于准备好的dom，初始化echarts实例
let allChart = this.$echarts.init(document.getElementById("allChart"));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '10%',
containLabel: true
},
yAxis: {
type: 'value'
},
xAxis: {
type: 'category',
data: ['测试案例', '任务', '缺陷']
},
series: [
{
label: {
normal:{
show: true,
position: 'top',
color:'#000000',
}
},
data: [
{
value: this.xmMenu.testCases,
itemStyle: {
normal:{
color: '#99CCFF'
}
}
},
{
value: this.xmMenu.taskCnt,
itemStyle: {
normal:{
color: '#99CCFF'
}
}
},
{
value: this.xmMenu.bugCnt,
itemStyle: {
normal:{
color: '#99CCFF'
}
}
},
],
type: 'bar'
}
]
};
// 绘制图表
allChart.setOption(option);
},//end method
components: {
},
drawPieBug() {
let bugPieChart = this.$echarts.init(document.getElementById("bugPieChart"));
let option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
center:['55%','40%'],//饼图位置
type: 'pie',
radius: '50%',//饼图半径大小
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'outer', //标签的位置:内部
textStyle : {
fontWeight : 100 ,
fontSize: document.body.clientWidth / 120, //标签字体大小
color: "#000000"
},
formatter:'{b}\n{c}({d}%)',//b：name,c:value,d:占比
alignTo:'edge',
margin:10
}
},
data: [
{value: this.xmMenu.closedBugs,
itemStyle: {
normal:{
color: '#5470C6'
}
},
name: '已关闭'},
{value: this.xmMenu.resolvedBugs,
itemStyle: {
normal:{
color: '#91CC75'
}
},
name: '已解决'},
{value: this.xmMenu.activeBugs,
itemStyle: {
normal:{
color: '#FAC858'
}
},
name: '已激活'},
{value: this.xmMenu.confirmedBugs,
itemStyle: {
normal:{
color: '#EE6666'
}
},
name: '已确认'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 绘制图表
bugPieChart.setOption(option);
},
drawCasePie() {
let casePie = this.$echarts.init(document.getElementById("casePie"));
let option = {
tooltip: {
trigger: 'item',
formatter: '{b} :<br/> {c} ({d}%)'
},
legend: {
bottom: 10,
left: 'center',
},
series: [
{
center:['55%','40%'],//饼图位置
type: 'pie',
radius: '50%',//饼图半径大小
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'outer', //标签的位置:外部
textStyle : {
fontWeight : 100 ,
fontSize: document.body.clientWidth / 120, //标签字体大小
color: "#000000"
},
formatter:'{b}\n{c}({d}%)',//b：name,c:value,d:占比
alignTo:'edge',
margin:10
}
},
data: [
{value: this.xmMenu.execCases,
itemStyle: {
normal:{
color: '#73C0DE'
}
},
name: '测试中案例'},
{value: this.xmMenu.designCases,
itemStyle: {
normal:{
color: '#FAC858'
}
},
name: '设计中案例'},
{value: this.xmMenu.finishCases,
itemStyle: {
normal:{
color: '#91CC75'
}
},
name: '完成案例'},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 绘制图表
casePie.setOption(option);
}, },
},
mounted() { mounted() {
this.$nextTick(() => {
});
this.drawAllBar();
this.drawPieBug();
this.drawCasePie();
},
};
</script>
}//end mounted
<style scoped lang="scss">
.container {
margin: 10px;
} }
</script>
.header {
display: flex;
justify-content: flex-start;
padding: 10px;
span {
padding-right: 15px;
}
}
.col {
margin-bottom: 20px;
}
<style scoped>
.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;
position: relative;
.progress-item{
position:absolute; width:80%;
}
}
.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;
}
.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> </style>

6
src/views/xm/core/xmProduct/XmProductOverview.vue
View File

@ -5,7 +5,7 @@
<el-card class="box-card" style="padding:0px ;height:100px"> <el-card class="box-card" style="padding:0px ;height:100px">
<div> <div>
<el-row style="padding:10px"> <el-row style="padding:10px">
<el-steps :active="this.xmProduct.pstatus+1" align-center>
<el-steps :active="this.xmProduct.pstatus+1" align-center finish-status="success">
<el-step title="未开始"></el-step> <el-step title="未开始"></el-step>
<el-step title="研发中"></el-step> <el-step title="研发中"></el-step>
<el-step title="已完成"></el-step> <el-step title="已完成"></el-step>
@ -73,7 +73,7 @@
<div class="info"> <div class="info">
<div v-text="productStartTime+'~'+productEndTime"> <div v-text="productStartTime+'~'+productEndTime">
</div> </div>
<div class="title">项目计划周期</div>
<div class="title">产品计划周期</div>
</div> </div>
</div> </div>
</el-row> </el-row>
@ -115,7 +115,7 @@
<el-col :span="8" > <el-col :span="8" >
<el-card class="box-card" style="height:425px"> <el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>所有工作项及其完成情况</span>
<span>所有工作项数量分布</span>
</div> </div>
<div> <div>
<div id="allChart" :style="{width: '100%', height: '350px'}"></div> <div id="allChart" :style="{width: '100%', height: '350px'}"></div>

3
src/views/xm/core/xmProject/XmProjectOverview.vue
View File

@ -117,7 +117,7 @@
<el-col :span="8" > <el-col :span="8" >
<el-card class="box-card" style="height:425px"> <el-card class="box-card" style="height:425px">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>所有工作项及其完成情况</span>
<span>所有工作项数量分布</span>
</div> </div>
<div> <div>
<div id="allChart" :style="{width: '100%', height: '350px'}"></div> <div id="allChart" :style="{width: '100%', height: '350px'}"></div>
@ -260,7 +260,6 @@
</el-col> </el-col>
</el-row> </el-row>
</el-row> </el-row>
</section> </section>
</template> </template>

Write Preview
Loading…
Cancel
Save