From d10b9e4150869c34d70de28f40900485807dd2f5 Mon Sep 17 00:00:00 2001
From: chentaiyu <chentaiyu>
Date: Thu, 22 Jul 2021 19:03:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=B6=E6=AE=B5=E6=A6=82=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/xm/core/xmMenu/XmMenuOverview.vue   |   2 +-
 .../xmProjectPhase/XmProjectPhaseEdit.vue     | 160 ++---
 .../xmProjectPhase/XmProjectPhaseOverview.vue | 611 ++++++++++++++++--
 3 files changed, 649 insertions(+), 124 deletions(-)

diff --git a/src/views/xm/core/xmMenu/XmMenuOverview.vue b/src/views/xm/core/xmMenu/XmMenuOverview.vue
index 3439c896..e28fbcab 100644
--- a/src/views/xm/core/xmMenu/XmMenuOverview.vue
+++ b/src/views/xm/core/xmMenu/XmMenuOverview.vue
@@ -34,7 +34,7 @@
               </el-row>
             </el-row>
             <el-row style="margin-bottom:18px">
-              <el-col :span="12" @click="">
+              <el-col :span="8" @click="">
                 <div class="item">
                   <div class="icon" style="background-color:  rgb(79, 140, 255);">
                     <i class="el-icon-right"></i>
diff --git a/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue b/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue
index 7933a36b..f206cbae 100644
--- a/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue
+++ b/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue
@@ -1,34 +1,34 @@
 <template>
 	<section class="page-container border padding">
-		
-		
+
+
 		<el-row class="page-main page-height-90">
 			<el-tabs>
 				<el-tab-pane label="阶段计划详情">
-					<!--新增界面 XmProjectPhase xm_project_phase--> 
+					<!--新增界面 XmProjectPhase xm_project_phase-->
 					<el-form :model="editForm"  label-width="120px" :rules="editFormRules" ref="editForm">
 						<el-row class="border padding">
 							<el-form-item label="阶段名称" prop="phaseName">
 								<el-input v-model="editForm.phaseName" placeholder="阶段名称" ></el-input>
-							</el-form-item>  
-							<el-form-item label="序号" prop="seqNo"> 
-								<el-input v-model="editForm.seqNo" style="width:50%;"  placeholder="排序序号，值越小越靠前，如1.0,2.0等"></el-input> 
+							</el-form-item>
+							<el-form-item label="序号" prop="seqNo">
+								<el-input v-model="editForm.seqNo" style="width:50%;"  placeholder="排序序号，值越小越靠前，如1.0,2.0等"></el-input>
 								<el-checkbox true-label="1" false-label="0" v-model="editForm.milestone">标记为里程碑</el-checkbox>
-							</el-form-item> 
-							<el-form-item  label="任务类型" prop="taskType"> 
+							</el-form-item>
+							<el-form-item  label="任务类型" prop="taskType">
 								<el-select v-model="editForm.taskType">
 									<el-option v-for="i in this.options.taskType" :label="i.optionName" :key="i.optionValue" :value="i.optionValue"></el-option>
 								</el-select>
-							</el-form-item>  
-							<el-form-item  label="计划类型" prop="planType"> 
+							</el-form-item>
+							<el-form-item  label="计划类型" prop="planType">
 								<el-select v-model="editForm.planType">
 									<el-option v-for="i in this.options.planType" :label="i.optionName" :key="i.optionValue" :value="i.optionValue"></el-option>
 								</el-select>
 							</el-form-item>
 							<el-form-item label="备注" prop="remark">
 								<el-input type="textarea" rows="4" v-model="editForm.remark" placeholder="备注" ></el-input>
-							</el-form-item> 
-							
+							</el-form-item>
+
 						</el-row>
 						<el-tabs v-model="activeName" class="border padding">
 							<el-tab-pane label="工作量及人力成本" name="phaseBudgetWorkload">
@@ -39,7 +39,7 @@
 									</el-row>
 									<el-row class="padding-20 border">
 										预计时间：<el-date-picker
-											v-model="dateRanger" 
+											v-model="dateRanger"
 											type="daterange"
 											align="right"
 											unlink-panels
@@ -49,35 +49,35 @@
 											value-format="yyyy-MM-dd"
 											:default-time="['00:00:00','23:59:59']"
 											:picker-options="pickerOptions"
-										></el-date-picker>    
+										></el-date-picker>
 										预估工期：<el-input  style="width:100px;" type="number" v-model="editForm.phaseBudgetHours" :precision="2" :step="8" :min="0" placeholder="预计工时"></el-input>小时
 										<div class="tips"><font>工时{{autoParams.phaseBudgetHours}}小时,工作日{{autoParams.weekday}}天</font></div>
-									</el-row> 
+									</el-row>
 									<el-row class="padding-20 border">
 										<el-col :span="4">人员类型</el-col>
 										<el-col :span="4">人数</el-col>
 										<el-col :span="4">工作量(人时)</el-col>
 										<el-col :span="4">单价(元/人时)</el-col>
 										<el-col :span="8">总价(元)</el-col>
-										
-									</el-row> 
+
+									</el-row>
 									<el-row class="padding-20 border">
 										<el-col :span="4">内购</el-col>
-										<el-col :span="4"><el-input style="width:100px;"  type="number" v-model="editForm.phaseBudgetInnerUserCnt" :precision="0" :step="1" :min="0" placeholder="内购人数"></el-input>  
+										<el-col :span="4"><el-input style="width:100px;"  type="number" v-model="editForm.phaseBudgetInnerUserCnt" :precision="0" :step="1" :min="0" placeholder="内购人数"></el-input>
 										</el-col>
 										<el-col :span="4">{{autoParams.phaseBudgetInnerUserWorkload}}人时</el-col>
 										<el-col :span="4"><el-input  style="width:100px;" type="number" v-model="editForm.phaseBudgetInnerUserPrice" :precision="0" :step="1" :min="0" placeholder="预计内部人时单价"></el-input> </el-col>
 										<el-col :span="8">{{this.toFixed(autoParams.phaseBudgetInnerUserAt)}}元,{{this.toFixed(autoParams.phaseBudgetInnerUserAt/10000)}} 万元</el-col>
-									</el-row> 
+									</el-row>
 									<el-row class="padding-20 border">
 										<el-col :span="4">外购</el-col>
-										<el-col :span="4"><el-input  style="width:100px;" type="number" v-model="editForm.phaseBudgetOutUserCnt" :precision="0" :step="1" :min="0" placeholder="外购人数"></el-input>  
+										<el-col :span="4"><el-input  style="width:100px;" type="number" v-model="editForm.phaseBudgetOutUserCnt" :precision="0" :step="1" :min="0" placeholder="外购人数"></el-input>
 										</el-col>
 										<el-col :span="4">{{autoParams.phaseBudgetOutUserWorkload}}人时</el-col>
 										<el-col :span="4"><el-input  style="width:100px;" type="number" v-model="editForm.phaseBudgetOutUserPrice" :precision="0" :step="1" :min="0" placeholder="预计外购人时单价"></el-input> </el-col>
 										<el-col :span="4">{{autoParams.phaseBudgetOutUserAt }} 元 {{autoParams.phaseBudgetOutUserAt/10000 }}万元</el-col>
-									
-									</el-row > 
+
+									</el-row >
 									<el-row class="padding-20  border">
 										<el-col :span="4">合计</el-col>
 										<el-col :span="4"> {{autoParams.phaseBudgetOutUserCnt+autoParams.phaseBudgetInnerUserCnt}}
@@ -85,52 +85,52 @@
 										<el-col :span="4">{{autoParams.phaseBudgetOutUserWorkload+autoParams.phaseBudgetInnerUserWorkload  }}人时,{{ (autoParams.phaseBudgetOutUserWorkload+autoParams.phaseBudgetInnerUserWorkload)/8/20  }}人月 </el-col>
 										<el-col :span="4">{{ (parseFloat2(autoParams.phaseBudgetOutUserPrice) + parseFloat2(autoParams.phaseBudgetInnerUserPrice))/2}}元/人时</el-col>
 										<el-col :span="8">{{autoParams.phaseBudgetTotalCost}} 元，{{(autoParams.phaseBudgetTotalCost)/10000}} 万元</el-col>
-									</el-row>  
+									</el-row>
 									<el-row class="padding-20  border">
 										总计： {{parseFloat2(editForm.phaseBudgetInnerUserAt)+parseFloat2(editForm.phaseBudgetOutUserAt)+parseFloat2(editForm.phaseBudgetNouserAt)}}元 <el-tag>{{this.toFixed(autoParams.phaseBudgetTotalCost/10000)}}万元</el-tag>
-										
+
 									</el-row>
 								</el-row>
-							</el-tab-pane>  
+							</el-tab-pane>
 							<el-tab-pane v-if="activeName=='phaseBudgetWorkload'" label="收起" name="">
 							</el-tab-pane>
-						</el-tabs> 
+						</el-tabs>
 					</el-form>
 				</el-tab-pane>
-				<el-tab-pane label="阶段计划概览">
+				<el-tab-pane label="阶段计划概览" lazy>
 					<xm-project-phase-overview :xm-project-phase="xmProjectPhase"></xm-project-phase-overview>
 				</el-tab-pane>
 			</el-tabs>
 		</el-row>
 		<el-row class="page-bottom">
-			<el-button @click.native="handleCancel">取消</el-button>  
-			<el-button v-loading="load.edit" type="primary" @click.native="editSubmit" :disabled="load.edit==true">提交</el-button>  
+			<el-button @click.native="handleCancel">取消</el-button>
+			<el-button v-loading="load.edit" type="primary" @click.native="editSubmit" :disabled="load.edit==true">提交</el-button>
 		</el-row>
 	</section>
 </template>
 
 <script>
 	import util from '@/common/js/util';//全局公共库
-	import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询 
+	import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询
 	import { editXmProjectPhase } from '@/api/xm/core/xmProjectPhase';
 	import { mapGetters } from 'vuex'
 	import  XmProjectPhaseOverview from './XmProjectPhaseOverview';//新增界面
 
-	export default { 
+	export default {
 		computed: {
 		    ...mapGetters([
 		      'userInfo','roles'
 			]),
-			
+
 			autoParams:function(){
-				
-				 
+
+
 				var phaseBudgetOutUserPrice=this.toFixed(this.editForm.phaseBudgetOutUserPrice)
 				var phaseBudgetInnerUserPrice=this.toFixed(this.editForm.phaseBudgetInnerUserPrice)
 				var phaseBudgetOutUserCnt=this.toFixed(this.editForm.phaseBudgetOutUserCnt)
 				var phaseBudgetInnerUserCnt=this.toFixed(this.editForm.phaseBudgetInnerUserCnt)
 				var phaseBudgetHours=this.toFixed(this.editForm.phaseBudgetHours )
-				var phaseBudgetNouserAt=this.toFixed(this.editForm.phaseBudgetNouserAt ) 
+				var phaseBudgetNouserAt=this.toFixed(this.editForm.phaseBudgetNouserAt )
   				if(phaseBudgetOutUserPrice==null || phaseBudgetOutUserPrice==''){
 					phaseBudgetOutUserPrice=100
 				}
@@ -143,29 +143,29 @@
 				if(phaseBudgetInnerUserCnt==null || phaseBudgetInnerUserCnt==''){
 					phaseBudgetInnerUserCnt=0.0
 				}
-				
+
 				if(phaseBudgetNouserAt==null || phaseBudgetNouserAt==''){
 					phaseBudgetNouserAt=0.0
-				} 
-				
+				}
+
 				if(phaseBudgetHours==null || phaseBudgetHours==''){
 					phaseBudgetHours=0.0
-				} 
-				var autoParams={   
+				}
+				var autoParams={
 
-				} 
+				}
 				 var weekday=1;
 				if(this.dateRanger!=null && this.dateRanger.length>=2 ){
-					weekday=this.getWeekday(new Date(this.dateRanger[0]),new Date(this.dateRanger[1])); 
-					phaseBudgetHours=weekday * 8 
-					
-			 	} 
+					weekday=this.getWeekday(new Date(this.dateRanger[0]),new Date(this.dateRanger[1]));
+					phaseBudgetHours=weekday * 8
+
+			 	}
 				autoParams.weekday=weekday
 				autoParams.phaseBudgetHours=phaseBudgetHours
 				autoParams.phaseBudgetOutUserPrice=phaseBudgetOutUserPrice
 				autoParams.phaseBudgetInnerUserPrice=phaseBudgetInnerUserPrice
 				autoParams.phaseBudgetOutUserCnt=phaseBudgetOutUserCnt
-				autoParams.phaseBudgetInnerUserCnt=phaseBudgetInnerUserCnt 
+				autoParams.phaseBudgetInnerUserCnt=phaseBudgetInnerUserCnt
  				autoParams.phaseBudgetInnerUserWorkload= phaseBudgetInnerUserCnt*phaseBudgetHours
 				autoParams.phaseBudgetOutUserWorkload= phaseBudgetOutUserCnt*phaseBudgetHours
 				autoParams.phaseBudgetWorkload=  phaseBudgetInnerUserCnt*phaseBudgetHours + phaseBudgetOutUserCnt*phaseBudgetHours
@@ -179,10 +179,10 @@
 		props:['xmProjectPhase','visible','parentProjectPhase'],
 		watch: {
 	      'xmProjectPhase':function( xmProjectPhase ) {
-			this.editForm = xmProjectPhase; 
+			this.editForm = xmProjectPhase;
 			this.dateRanger=[this.editForm.beginDate,this.editForm.endDate]
 	      },
-	      'visible':function(visible) { 
+	      'visible':function(visible) {
 	      	if(visible==true){
 	      		//从新打开页面时某些数据需要重新加载，可以在这里添加
 	      	}
@@ -197,12 +197,12 @@
 				const endDate = new Date();
 				endDate.setTime(beginDate.getTime() + 3600 * 1000 * 24 * 7 * 4);
 			return {
-				options:{},//下拉选择框的所有静态数据  params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} 
+				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, add: false, del: false, edit: false },//查询中...
 				editFormRules: {
 					id: [
 						//{ required: true, message: '阶段主键不能为空', trigger: 'blur' }
-					], 			
+					],
 					phaseName: [
 						{ required: true, message: '阶段名称不能为空', trigger: 'blur' }
 					],
@@ -220,9 +220,9 @@
 				//新增界面数据 xm_project_phase
 				editForm: {
 					id:'',phaseName:'',remark:'',parentPhaseId:'',branchId:'',taskType:'kf',planType:'m1',projectId:'',beginDate:'',endDate:'',phaseBudgetHours:'',phaseBudgetStaffNu:'',ctime:'',phaseBudgetNouserAt:'',phaseBudgetInnerUserAt:'',phaseBudgetOutUserAt:'',projectBaselineId:'',bizProcInstId:'',bizFlowState:'',phaseBudgetWorkload:'',totalActWorkload:'',totalActNouserAt:'',totalActInerUserAt:'',totalActOutUserAt:'',planType:'',taskType:'',seqNo:'1',phaseBudgetInnerUserCnt:'',phaseBudgetOutUserCnt:'',phaseBudgetInnerUserPrice:80,phaseBudgetOutUserPrice:100,phaseBudgetInnerUserWorkload:0,phaseBudgetOutUserWorkload:0
-				}, 
-				dateRanger: [ 
-				],  
+				},
+				dateRanger: [
+				],
 				/**begin 在下面加自定义属性,记得补上面的一个逗号**/
 				pickerOptions:  util.pickerOptions('datarange'),
 				activeName:'',
@@ -238,11 +238,11 @@
 			},
 			//新增提交XmProjectPhase xm_project_phase 父组件监听@submit="aftereditSubmit"
 			editSubmit: function () {
-				
+
 				if (
 					this.dateRanger != null &&
 					this.dateRanger.length == 2
-				) {   
+				) {
 					if(this.dateRanger[0]){
 						if(this.dateRanger[0].length<=10){
 							this.editForm.beginDate = this.dateRanger[0] + " 00:00:00";
@@ -257,43 +257,43 @@
 							this.editForm.endDate = this.dateRanger[1]
 						}
 					}
-					
+
 				}else{
-					this.$message({showClose: true, message: "请输入开始日期和结束日期", type: 'error' }); 
+					this.$message({showClose: true, message: "请输入开始日期和结束日期", type: 'error' });
 					return;
 				}
 				if(!this.editForm.phaseBudgetInnerUserCnt){
-					this.$message({showClose: true, message: "内购人员数不能为空", type: 'error' }); 
+					this.$message({showClose: true, message: "内购人员数不能为空", type: 'error' });
 					return;
 				}
-				
+
 				if(!this.editForm.phaseBudgetHours){
-					this.$message({showClose: true, message: "工期不能为空", type: 'error' }); 
+					this.$message({showClose: true, message: "工期不能为空", type: 'error' });
 					return;
 				}
 				if(!this.editForm.phaseBudgetInnerUserPrice){
-					this.$message({showClose: true, message: "内购单价不能为空", type: 'error' }); 
+					this.$message({showClose: true, message: "内购单价不能为空", type: 'error' });
 					return;
 				}
 				this.$refs.editForm.validate((valid) => {
-					if (valid) { 
-						this.$confirm('确认提交吗？', '提示', {}).then(() => { 
+					if (valid) {
+						this.$confirm('确认提交吗？', '提示', {}).then(() => {
 							this.load.edit=true
-							let params = Object.assign({}, this.editForm); 
+							let params = Object.assign({}, this.editForm);
 							if(!params.phaseBudgetInnerUserAt){
 								params.phaseBudgetInnerUserAt= this.parseFloat2(params.phaseBudgetInnerUserCnt) * this.parseFloat2(params.phaseBudgetInnerUserPrice) * this.parseFloat2(params.phaseBudgetHours)
 							}
 							if( !params.phaseBudgetOutUserAt ){
 								params.phaseBudgetOutUserAt= this.parseFloat2(params.phaseBudgetOutUserCnt) * this.parseFloat2(params.phaseBudgetOutUserPrice) * this.parseFloat2(params.phaseBudgetHours)
-							}  
-							params.phaseBudgetInnerUserWorkload= this.parseFloat2(params.phaseBudgetInnerUserCnt) * this.parseFloat2(params.phaseBudgetHours) 
-							params.phaseBudgetOutUserWorkload= this.parseFloat2(params.phaseBudgetOutUserCnt) * this.parseFloat2(params.phaseBudgetHours) 
- 								 
-							params.phaseBudgetWorkload= this.parseFloat2(params.phaseBudgetInnerUserWorkload) + this.parseFloat2(params.phaseBudgetOutUserWorkload) 
+							}
+							params.phaseBudgetInnerUserWorkload= this.parseFloat2(params.phaseBudgetInnerUserCnt) * this.parseFloat2(params.phaseBudgetHours)
+							params.phaseBudgetOutUserWorkload= this.parseFloat2(params.phaseBudgetOutUserCnt) * this.parseFloat2(params.phaseBudgetHours)
+
+							params.phaseBudgetWorkload= this.parseFloat2(params.phaseBudgetInnerUserWorkload) + this.parseFloat2(params.phaseBudgetOutUserWorkload)
 							if( !params.phaseBudgetStaffNu ){
-								 
+
 								params.phaseBudgetStaffNu= this.parseFloat2(params.phaseBudgetOutUserCnt) + this.parseFloat2(params.phaseBudgetInnerUserCnt)
-							}    
+							}
 							editXmProjectPhase(params).then((res) => {
 								this.load.edit=false
 								var tips=res.data.tips;
@@ -301,12 +301,12 @@
 									//this.$refs['editForm'].resetFields();
 									this.$emit('submit');//  @submit="aftereditSubmit"
 								}
-								this.$message({showClose: true, message: tips.msg, type: tips.isOk?'success':'error' }); 
+								this.$message({showClose: true, message: tips.msg, type: tips.isOk?'success':'error' });
 							}).catch( err  => this.load.edit=false);
 						});
 					}
 				});
-			}, 
+			},
 			getWeekday(first, last) {
 				//计算工作日方法：遍历这两个日期区间的每一个日期，获取他的getDay()
 
@@ -322,7 +322,7 @@
 					}
 				}
 				return count;
-			},  
+			},
 			toFixed(floatValue,num){
 				if(floatValue ==null || floatValue=='' || floatValue == undefined){
 					return 0;
@@ -346,7 +346,7 @@
 			fillphaseBudgetHoursToField:function(){
 				this.editForm.phaseBudgetHours=this.toFixed(this.autoParams.phaseBudgetHours)
 			},
-			
+
 			fillphaseBudgetCostAtToField:function(){
 				this.editForm.phaseBudgetNouserAt=this.toFixed(this.autoParams.phaseBudgetNouserAt)
 				this.editForm.phaseBudgetOutUserAt=this.toFixed(this.autoParams.phaseBudgetOutUserAt )
@@ -355,14 +355,14 @@
 
 			},
 			/**end 在上面加自定义方法**/
-			
+
 		},//end method
-		components: {  
+		components: {
 			XmProjectPhaseOverview,
 		    //在下面添加其它组件 'xm-project-phase-edit':XmProjectPhaseEdit
 		},
 		mounted() {
-			this.editForm=Object.assign(this.editForm, this.xmProjectPhase);  
+			this.editForm=Object.assign(this.editForm, this.xmProjectPhase);
 			/**在下面写其它函数***/
 			this.dateRanger=[this.editForm.beginDate,this.editForm.endDate]
 			listOption([{categoryId:'all',itemCode:'planType'},{categoryId:'all',itemCode:'taskType'}]).then(res=>{
@@ -373,11 +373,11 @@
 
 </script>
 
-<style scoped> 
+<style scoped>
 .padding-20{
 	padding-left: 10px;
 	padding-right: 10px;
 	padding-top: 20px;
 	padding-bottom: 20px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/xm/core/xmProjectPhase/XmProjectPhaseOverview.vue b/src/views/xm/core/xmProjectPhase/XmProjectPhaseOverview.vue
index 19c1feb4..1f77d3a6 100644
--- a/src/views/xm/core/xmProjectPhase/XmProjectPhaseOverview.vue
+++ b/src/views/xm/core/xmProjectPhase/XmProjectPhaseOverview.vue
@@ -1,51 +1,576 @@
 <template>
-	<section>
-		 
-	</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.xmProjectPhase.phaseStatus" 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="删除中"></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.xmProjectPhase.mngUsername"></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 v-text="this.xmProjectPhase.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.xmProjectPhase.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="phaseBeginDate+'~'+phaseEndDate">
+                  </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.phaseCreateDate}}</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.xmProjectPhase.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="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.xmProjectPhase.phaseBudgetWorkload"></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.xmProjectPhase.phaseActWorkload"></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="costPieChart" :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="workloadPie" :style="{width: '100%', height: '300px'}"></div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-row>
+  </section>
 </template>
 
 <script>
-	import util from '@/common/js/util';//全局公共库
-	//import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询  
-	import { mapGetters } from 'vuex'	
- 
-	
-	export default { 
-		computed: {
-		    ...mapGetters([
-		      'userInfo','roles'
-		    ])
-		},
-		props:['xmProjectPhase'],
-		watch: { 
-	       
-	    },
-		data() {
-			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 在下面加自定义属性,记得补上面的一个逗号**/
-				
-				/**end 在上面加自定义属性**/
-			}//end return
-		},//end data
-		methods: {
-			  
-			
-		},//end method
-		components: {  
-			 
-		},
-		mounted() {
-			 
-			
-		}//end mounted
-	}
+import util from '@/common/js/util';//全局公共库
+//import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询
+import { mapGetters } from 'vuex'
 
+
+export default {
+  computed: {
+    ...mapGetters(['userInfo','roles']),
+    notStart: function() {
+      return this.xmProjectPhase.taskCnt-this.xmProjectPhase.finishTaskCnt;
+    },
+    taskProgress: function (){
+      if(this.xmProjectPhase.taskCnt){
+        return Math.round(this.xmProjectPhase.finishTaskCnt/this.xmProjectPhase.taskCnt*100);
+      }else{
+        return 0;
+      };
+    },
+    phaseBeginDate: function (){
+      if(this.xmProjectPhase.beginDate){
+        return this.xmProjectPhase.beginDate.substring(0,10);
+      } else{
+        return '暂无';
+      }
+    },
+    phaseEndDate: function (){
+      if(this.xmProjectPhase.endDate){
+        return this.xmProjectPhase.endDate.substring(0,10);
+      } else{
+        return '暂无';
+      }
+    },
+    phaseCreateDate: function (){
+      if(this.xmProjectPhase.ctime){
+        return this.xmProjectPhase.ctime.substring(0,10);
+      } else{
+        return '暂无';
+      }
+    },
+    workloadProgress:function (){
+      return Math.round(this.xmProjectPhase.phaseActWorkload/this.xmProjectPhase.phaseBudgetWorkload*100);
+    },
+    deviation:function (){
+      let now = new Date();
+      let startTime = new Date(this.xmProjectPhase.beginDate);
+      let endTime = new Date(this.xmProjectPhase.endDate);
+      if(now<=endTime){
+        let allDays=endTime-startTime;
+        return this.xmProjectPhase.phaseBudgetWorkload - Math.round((now-startTime)/allDays*this.xmProjectPhase.phaseBudgetWorkload)
+      }else{
+        return this.xmProjectPhase.phaseActWorkload - this.xmProjectPhase.phaseBudgetWorkload;
+      }
+    },
+    deviationRate:function (){
+      return Math.round(this.deviation/this.xmProjectPhase.phaseBudgetWorkload*100);
+    },
+    remainWorkload:function (){
+      return this.xmProjectPhase.phaseBudgetWorkload - this.xmProjectPhase.phaseActWorkload;
+    },
+    planProgress:function (){
+      let now = new Date();
+      let startTime = new Date(this.xmProjectPhase.beginDate);
+      let endTime = new Date(this.xmProjectPhase.endDate);
+      if(now<=endTime){
+        let allDays=endTime-startTime;
+        return Math.round((now-startTime)/allDays*100)
+      }else{
+        return 100;
+      }
+    },
+    realProgress:function (){
+      if(this.xmProjectPhase.phaseActWorkload < this.xmProjectPhase.phaseBudgetWorkload){
+        return Math.round(this.xmProjectPhase.phaseActWorkload/this.xmProjectPhase.phaseBudgetWorkload*100)
+      }else{
+        return 100;
+      }
+    },
+    xmProjectPhaseCpd(){
+      return this.xmProjectPhase
+    },
+
+  },
+
+  props:['xmProjectPhase'],
+  watch:{
+    xmProjectPhaseCpd:function(){
+      this.drawCostPie();
+      this.drawWorkloadPie();
+    }
+  },
+  data() {
+    return {
+    };
+  },
+
+  methods:{
+    drawCostPie() {
+      let costPieChart = this.$echarts.init(document.getElementById("costPieChart"));
+      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.xmProjectPhase.phaseBudgetNouserAt,
+                itemStyle: {
+                  normal:{
+                    color: '#5470C6'
+                  }
+                },
+                name: '非人力'},
+              {value: this.xmProjectPhase.phaseBudgetInnerUserAt,
+                itemStyle: {
+                  normal:{
+                    color: '#73C0DE'
+                  }
+                },
+                name: '内部人力'},
+              {value: this.xmProjectPhase.phaseBudgetOutUserAt,
+                itemStyle: {
+                  normal:{
+                    color: '#99CCFF'
+                  }
+                },
+                name: '外购人力'},
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      // 绘制图表
+      costPieChart.setOption(option);
+    },
+    drawWorkloadPie() {
+      let workloadPie = this.$echarts.init(document.getElementById("workloadPie"));
+      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.xmProjectPhase.phaseBudgetInnerUserWorkload,
+                itemStyle: {
+                  normal:{
+                    color: '#5470C6'
+                  }
+                },
+                name: '内部人力'},
+              {value: this.xmProjectPhase.phaseBudgetOutUserWorkload,
+                itemStyle: {
+                  normal:{
+                    color: '#73C0DE'
+                  }
+                },
+                name: '外购人力'},
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      // 绘制图表
+      workloadPie.setOption(option);
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+    });
+    this.drawCostPie();
+    this.drawWorkloadPie();
+  },
+
+};
 </script>
 
-<style scoped>
+<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;
+  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>
\ No newline at end of file
+<style>
+.app-container{
+  padding: 20px;
+  padding-bottom: 0;
+}
+</style>