diff --git a/src/views/xm/core/xmIteration/XmIterationOverview.vue b/src/views/xm/core/xmIteration/XmIterationOverview.vue
index dfd111c8..bcec467a 100644
--- a/src/views/xm/core/xmIteration/XmIterationOverview.vue
+++ b/src/views/xm/core/xmIteration/XmIterationOverview.vue
@@ -5,7 +5,7 @@
         <el-card class="box-card" style="padding:0px ;height:100px">
           <div>
             <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>
@@ -119,7 +119,7 @@
           <el-col :span="8" >
             <el-card class="box-card" style="height:425px">
               <div slot="header" class="clearfix">
-                <span>所有工作项及其完成情况</span>
+                <span>所有工作项数量分布</span>
               </div>
               <div>
                 <div id="allChart" :style="{width: '100%', height: '350px'}"></div>
@@ -254,7 +254,7 @@ export default {
       return this.xmIteration.taskCnt-this.xmIteration.finishTaskCnt;
     },
     taskProgress: function (){
-      return Math.round(this.xmIteration.finishTaskCnt/this.xmIteration.taskCnt*100);
+      return this.xmIteration.finishRate;
     },
     iterationStartTime: function (){
       return this.xmIteration.startTime.substring(0,10);
diff --git a/src/views/xm/core/xmMenu/XmMenuEdit.vue b/src/views/xm/core/xmMenu/XmMenuEdit.vue
index 9458b579..846e8e8c 100644
--- a/src/views/xm/core/xmMenu/XmMenuEdit.vue
+++ b/src/views/xm/core/xmMenu/XmMenuEdit.vue
@@ -1,56 +1,62 @@
 <template>
-	<section class="page-container page-full-height border padding">
+	<section class="page-container border padding">
 		<el-row class="page-main page-height-90">
-			<!--新增界面 XmMenu 项目故事表--> 
-			<el-form :model="editForm"  label-width="120px" :rules="editFormRules" ref="editForm">
-				<el-form-item label="序号" prop="seqNo">
-					<el-input v-model="editForm.seqNo" placeholder="如1.0 ， 1.1 ， 1.1.1等" ></el-input>
-				</el-form-item> 
-				<el-form-item label="故事名称" prop="menuName">
-					<el-input v-model="editForm.menuName" placeholder="故事名称" ></el-input>
-				</el-form-item>  
-				<el-form-item label="负责人" prop="mmUserid">
-					 <el-tag v-if="editForm.mmUserid" closable @close="clearPmUser">{{editForm.mmUsername}}</el-tag>
-					 <el-tag v-else>未配置</el-tag> 
-					 <el-button @click="selectUser">选负责人</el-button>
-				</el-form-item>   
-				<el-form-item label="需求链接" prop="demandUrl"> 
-					<el-input v-model="editForm.demandUrl" placeholder="需求链接" ></el-input> 
-				</el-form-item>  
-				<el-form-item label="代码链接" prop="codeUrl">
-					<el-input v-model="editForm.codeUrl" placeholder="代码链接" ></el-input>  
-				</el-form-item>  
-				<el-form-item label="设计链接" prop="designUrl">
-					<el-input v-model="editForm.designUrl" placeholder="设计链接" ></el-input>  
-				</el-form-item>   
-				<el-form-item label="操作手册链接" prop="operDocUrl">
-					<el-input v-model="editForm.operDocUrl" placeholder="操作手册链接" ></el-input>  
-				</el-form-item>  
-				<el-form-item label="概述" prop="remark">
-					<el-input type="textarea" v-model="editForm.remark" :autosize="{ minRows: 4, maxRows: 20}"  placeholder="什么人？做什么事？，为什么？如： 作为招聘专员，我需要统计员工半年在职/离职人数，以便我能够制定招聘计划" ></el-input>
-				</el-form-item>  
-			</el-form>
-			
+			<el-tabs>
+				<el-tab-pane  label="故事详情">
+					<el-form :model="editForm"  label-width="120px" :rules="editFormRules" ref="editForm">
+						<el-form-item label="序号" prop="seqNo">
+							<el-input v-model="editForm.seqNo" placeholder="如1.0 ， 1.1 ， 1.1.1等" ></el-input>
+						</el-form-item>
+						<el-form-item label="故事名称" prop="menuName">
+							<el-input v-model="editForm.menuName" placeholder="故事名称" ></el-input>
+						</el-form-item>
+						<el-form-item label="负责人" prop="mmUserid">
+							<el-tag v-if="editForm.mmUserid" closable @close="clearPmUser">{{editForm.mmUsername}}</el-tag>
+							<el-tag v-else>未配置</el-tag>
+							<el-button @click="selectUser">选负责人</el-button>
+						</el-form-item>
+						<el-form-item label="需求链接" prop="demandUrl">
+							<el-input v-model="editForm.demandUrl" placeholder="需求链接" ></el-input>
+						</el-form-item>
+						<el-form-item label="代码链接" prop="codeUrl">
+							<el-input v-model="editForm.codeUrl" placeholder="代码链接" ></el-input>
+						</el-form-item>
+						<el-form-item label="设计链接" prop="designUrl">
+							<el-input v-model="editForm.designUrl" placeholder="设计链接" ></el-input>
+						</el-form-item>
+						<el-form-item label="操作手册链接" prop="operDocUrl">
+							<el-input v-model="editForm.operDocUrl" placeholder="操作手册链接" ></el-input>
+						</el-form-item>
+						<el-form-item label="概述" prop="remark">
+							<el-input type="textarea" v-model="editForm.remark" :autosize="{ minRows: 4, maxRows: 20}"  placeholder="什么人？做什么事？，为什么？如： 作为招聘专员，我需要统计员工半年在职/离职人数，以便我能够制定招聘计划" ></el-input>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane  label="概览" lazy>
+					<xm-menu-overview :xm-menu="xmMenu"></xm-menu-overview>
+				</el-tab-pane>
+			</el-tabs>
 			<el-drawer title="选择员工" :visible.sync="userSelectVisible" size="60%" append-to-body>
 				<users-select  @confirm="onUserSelected" ref="usersSelect"></users-select>
-			</el-drawer>	
+			</el-drawer>
 		</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-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-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 { editXmMenu } from '@/api/xm/core/xmMenu';
-	import { mapGetters } from 'vuex'	
-	import UsersSelect from "@/views/mdp/sys/user/UsersSelect"; 
+	import { mapGetters } from 'vuex'
+	import UsersSelect from "@/views/mdp/sys/user/UsersSelect";
+import XmMenuOverview from './XmMenuOverview.vue';
 
-	
-	export default { 
+
+	export default {
 		computed: {
 		    ...mapGetters([
 		      'userInfo','roles'
@@ -61,20 +67,20 @@
 	      'xmMenu':function( xmMenu ) {
 	        this.editForm = xmMenu;
 	      },
-	      'visible':function(visible) { 
+	      'visible':function(visible) {
 	      	if(visible==true){
 	      		//从新打开页面时某些数据需要重新加载，可以在这里添加
 	      	}
-	      } 
+	      }
 	    },
 		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'}]} 
+				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: {
 					menuId: [
 						//{ required: true, message: '故事编号不能为空', trigger: 'blur' }
-					],					
+					],
 					menuName: [
 						{ required: true, message: '故事名称不能为空', trigger: 'blur' }
 					],
@@ -91,7 +97,7 @@
 				},
 				userSelectVisible:false,
 				/**begin 在下面加自定义属性,记得补上面的一个逗号**/
-				
+
 				/**end 在上面加自定义属性**/
 			}//end return
 		},//end data
@@ -102,24 +108,24 @@
 			},
 			//新增提交XmMenu 项目故事表 父组件监听@submit="afterAddSubmit"
 			editSubmit: function () {
-				
+
 				if(!this.roles.some(i=>i.roleid=='productAdmin') && !this.roles.some(i=>i.roleid=='productTeamAdmin')){
-					this.$message({showClose: true, message: "只有产品经理、产品组长能够修改故事", type: 'error'}); 
+					this.$message({showClose: true, message: "只有产品经理、产品组长能够修改故事", type: 'error'});
 					return false;
 				}
 				this.$refs.editForm.validate((valid) => {
 					if (valid) {
 
-						this.$confirm('确认提交吗？', '提示', {}).then(() => { 
+						this.$confirm('确认提交吗？', '提示', {}).then(() => {
 							this.load.edit=true
-							let params = Object.assign({}, this.editForm); 
+							let params = Object.assign({}, this.editForm);
 							editXmMenu(params).then((res) => {
 								this.load.edit=false
 								var tips=res.data.tips;
 								if(tips.isOk){
  									this.$emit('submit');//  @submit="afterAddSubmit"
 								}
-								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);
 						});
 					}
@@ -140,18 +146,19 @@
 				this.editForm.mmUsername=''
 			}
 			/**begin 在下面加自定义方法,记得补上面的一个逗号**/
-				
+
 			/**end 在上面加自定义方法**/
-			
+
 		},//end method
-		components: {  
+		components: {
 			//在下面添加其它组件 'xm-menu-edit':XmMenuEdit
-			UsersSelect
+			UsersSelect,
+			XmMenuOverview,
 		},
 		mounted() {
-			this.editForm=Object.assign(this.editForm, this.xmMenu);   
+			this.editForm=Object.assign(this.editForm, this.xmMenu);
 			/**在下面写其它函数***/
-			
+
 		}//end mounted
 	}
 
@@ -159,4 +166,4 @@
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/xm/core/xmMenu/XmMenuOverview.vue b/src/views/xm/core/xmMenu/XmMenuOverview.vue
new file mode 100644
index 00000000..1bf702a5
--- /dev/null
+++ b/src/views/xm/core/xmMenu/XmMenuOverview.vue
@@ -0,0 +1,663 @@
+<template>
+	<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="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.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>
+</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']),
+      notStart: function() {
+        return this.xmMenu.taskCnt-this.xmMenu.finishTaskCnt;
+      },
+      taskProgress: function (){
+        return this.xmMenu.finishRate;
+      },
+      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'],
+    watch:{
+      xmMenuCpd:function(){
+        this.drawAllBar();
+        this.drawPieBug();
+        this.drawCasePie();
+      }
+    },
+    data() {
+      return {
+        isActive:true,
+      };
+    },
+
+    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);
+
+      },
+      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() {
+      this.$nextTick(() => {
+      });
+      this.drawAllBar();
+      this.drawPieBug();
+      this.drawCasePie();
+    },
+
+  };
+</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;
+  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>
diff --git a/src/views/xm/core/xmProduct/XmProductOverview.vue b/src/views/xm/core/xmProduct/XmProductOverview.vue
index 9c805063..d8126d9d 100644
--- a/src/views/xm/core/xmProduct/XmProductOverview.vue
+++ b/src/views/xm/core/xmProduct/XmProductOverview.vue
@@ -5,7 +5,7 @@
         <el-card class="box-card" style="padding:0px ;height:100px">
           <div>
             <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>
@@ -73,7 +73,7 @@
                   <div class="info">
                     <div v-text="productStartTime+'~'+productEndTime">
                     </div>
-                    <div class="title">项目计划周期</div>
+                    <div class="title">产品计划周期</div>
                   </div>
                 </div>
               </el-row>
@@ -115,7 +115,7 @@
           <el-col :span="8" >
             <el-card class="box-card" style="height:425px">
               <div slot="header" class="clearfix">
-                <span>所有工作项及其完成情况</span>
+                <span>所有工作项数量分布</span>
               </div>
               <div>
                 <div id="allChart" :style="{width: '100%', height: '350px'}"></div>
@@ -250,7 +250,7 @@ export default {
       return this.xmProduct.taskCnt-this.xmProduct.finishTaskCnt;
     },
     taskProgress: function (){
-      return Math.round(this.xmProduct.finishTaskCnt/this.xmProduct.taskCnt*100);
+      return this.xmProduct.finishRate;
     },
     productStartTime: function (){
       if(this.xmProduct.planStartTime){
diff --git a/src/views/xm/core/xmProject/XmProjectOverview.vue b/src/views/xm/core/xmProject/XmProjectOverview.vue
index 56171a0c..6537b2b9 100644
--- a/src/views/xm/core/xmProject/XmProjectOverview.vue
+++ b/src/views/xm/core/xmProject/XmProjectOverview.vue
@@ -117,7 +117,7 @@
           <el-col :span="8" >
             <el-card class="box-card" style="height:425px">
               <div slot="header" class="clearfix">
-                <span>所有工作项及其完成情况</span>
+                <span>所有工作项数量分布</span>
               </div>
               <div>
                 <div id="allChart" :style="{width: '100%', height: '350px'}"></div>
@@ -260,7 +260,6 @@
         </el-col>
       </el-row>
     </el-row>
-
   </section>
 </template>
 
@@ -282,7 +281,7 @@ export default {
       return this.selProject.totalTaskCnt;
     },
     taskProgress: function (){
-      return Math.round(this.selProject.totalCompleteTaskCnt/this.selProject.totalTaskCnt*100);
+      return this.selProject.totalProgress;
     },
     taskStartTime: function (){
       return this.selProject.startTime.substring(0,10);
diff --git a/src/views/xm/core/xmProjectGroupState/XmProjectGroupStateMng.vue b/src/views/xm/core/xmProjectGroupState/XmProjectGroupStateMng.vue
index eff159f6..4d350937 100644
--- a/src/views/xm/core/xmProjectGroupState/XmProjectGroupStateMng.vue
+++ b/src/views/xm/core/xmProjectGroupState/XmProjectGroupStateMng.vue
@@ -1,16 +1,20 @@
 <template>
 	<section class="page-container page-full-height padding border">
 		<el-row>
-			<el-input v-model="filters.key" style="width: 20%;" placeholder="模糊查询"></el-input> 
+			<el-input v-model="filters.key" style="width: 20%;" placeholder="模糊查询"></el-input>
 			<el-button type="primary" v-loading="load.list" :disabled="load.list==true" v-on:click="searchXmProjectGroupStates">查询</el-button>
 			<el-button type="warning" v-loading="load.edit"  @click="loadTasksToXmProjectGroupState">刷新数据</el-button>
  		</el-row>
-		<el-row class="page-main page-height-90"> 
+		<el-row class="page-main page-height-90">
 			<!--列表 XmProjectGroupState 功能状态表,无需前端维护，所有数据由汇总统计得出-->
 			<el-table ref="table" :height="tableHeight" :data="xmProjectGroupStates" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
- 				<el-table-column sortable type="index" width="45"></el-table-column> 
-  				<el-table-column prop="groupName" label="团队名称" min-width="80" ></el-table-column>   
-				<el-table-column prop="finishRate" label="总体进度" min-width="80" ></el-table-column>    
+ 				<el-table-column sortable type="index" width="45"></el-table-column>
+  				<el-table-column prop="groupName" label="团队名称" min-width="80" >
+					  <template slot-scope="scope">
+						  <el-link type="primary" @click="overviewVisible=true">{{scope.row.groupName}}</el-link>
+					  </template>
+				</el-table-column>
+				<el-table-column prop="finishRate" label="总体进度" min-width="80" ></el-table-column>
 				<el-table-column prop="planWorkload" label="计划工作量" min-width="80" ></el-table-column>
 				<el-table-column prop="actWorkload" label="实际工作量" min-width="80" ></el-table-column>
 				<el-table-column prop="planCostAmount" label="计划成本" min-width="80" ></el-table-column>
@@ -19,7 +23,7 @@
 				<el-table-column prop="taskCnt" label="任务数" min-width="80" ></el-table-column>
 				<el-table-column prop="finishTaskCnt" label="完成的任务数" min-width="80" ></el-table-column>
  				<el-table-column prop="planWorkerCnt" label="总人数" min-width="80" ></el-table-column>
-				<el-table-column prop="bugCnt" label="bug总数" min-width="80" ></el-table-column> 
+				<el-table-column prop="bugCnt" label="bug总数" min-width="80" ></el-table-column>
 				<el-table-column prop="closedBugs" label="总关闭bugs" min-width="80" ></el-table-column>
 				<el-table-column prop="activeBugs" label="激活bugs" min-width="80" ></el-table-column>
 				<el-table-column prop="confirmedBugs" label="已确认bugs总数" min-width="80" ></el-table-column>
@@ -27,24 +31,34 @@
 				<el-table-column prop="testCases" label="测试用例总数" min-width="80" ></el-table-column>
 				<el-table-column prop="execCases" label="测试中用例总数" min-width="80" ></el-table-column>
 				<el-table-column prop="designCases" label="设计中用例总数" min-width="80" ></el-table-column>
-				<el-table-column prop="finishCases" label="完成用例总数" min-width="80" ></el-table-column> 
+				<el-table-column prop="finishCases" label="完成用例总数" min-width="80" ></el-table-column>
 				<el-table-column prop="calcTime" label="汇总时间" min-width="80" ></el-table-column>
 			</el-table>
-			<el-pagination  layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination> 
-		
-			 
+			<el-pagination  layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination>
+
+
 		</el-row>
+			<el-drawer
+				append-to-body
+				title="小组概览"
+				:visible.sync="overviewVisible"
+				size="60%"
+				 >
+					<xm-project-group-state-overview :xm-project-group-state="editForm"></xm-project-group-state-overview>
+			</el-drawer>
+
 	</section>
 </template>
 
 <script>
 	import util from '@/common/js/util';//全局公共库
-	import config from '@/common/config';//全局公共库 
+	import config from '@/common/config';//全局公共库
 	import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询
-	import { listXmProjectGroupState, delXmProjectGroupState, batchDelXmProjectGroupState,loadTasksToXmProjectGroupState } from '@/api/xm/core/xmProjectGroupState'; 
+	import { listXmProjectGroupState, delXmProjectGroupState, batchDelXmProjectGroupState,loadTasksToXmProjectGroupState } from '@/api/xm/core/xmProjectGroupState';
 	import { mapGetters } from 'vuex'
-	
-	export default { 
+import XmProjectGroupStateOverview from './XmProjectGroupStateOverview.vue';
+
+	export default {
 		computed: {
 		    ...mapGetters([
 		      'userInfo','roles'
@@ -76,28 +90,29 @@
 				sels: [],//列表选中数据
 				options:{
 					//sex:[],
-				},//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} 
-				
+				},//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]}
+
 				addFormVisible: false,//新增xmProjectGroupState界面是否显示
 				//新增xmProjectGroupState界面初始化数据
 				addForm: {
 					id:'',planStartTime:'',planEndTime:'',actStartTime:'',actEndTime:'',planWorkload:'',actWorkload:'',planCostAmount:'',actCostAmount:'',finishRate:'',demandRate:'',designRate:'',devRate:'',uatRate:'',sitRate:'',ctime:'',calcTime:'',planWorkhours:'',planWorkerCnt:'',closedBugs:'',activeBugs:'',confirmedBugs:'',resolvedBugs:'',testCases:'',execCases:'',designCases:'',finishCases:'',iterationCnt:'',taskCnt:'',finishTaskCnt:'',bizDate:'',bugCnt:'',groupId:'',projectId:'',projectName:'',groupName:''
 				},
-				
+
 				editFormVisible: false,//编辑界面是否显示
 				//编辑xmProjectGroupState界面初始化数据
 				editForm: {
 					id:'',planStartTime:'',planEndTime:'',actStartTime:'',actEndTime:'',planWorkload:'',actWorkload:'',planCostAmount:'',actCostAmount:'',finishRate:'',demandRate:'',designRate:'',devRate:'',uatRate:'',sitRate:'',ctime:'',calcTime:'',planWorkhours:'',planWorkerCnt:'',closedBugs:'',activeBugs:'',confirmedBugs:'',resolvedBugs:'',testCases:'',execCases:'',designCases:'',finishCases:'',iterationCnt:'',taskCnt:'',finishTaskCnt:'',bizDate:'',bugCnt:'',groupId:'',projectId:'',projectName:'',groupName:''
 				},
 				/**begin 自定义属性请在下面加 请加备注**/
-				
-				tableHeight:300,	
+
+				tableHeight:300,
+				overviewVisible:false,
 				/**end 自定义属性请在上面加 请加备注**/
 			}
 		},//end data
-		methods: { 
-			handleSizeChange(pageSize) { 
-				this.pageInfo.pageSize=pageSize; 
+		methods: {
+			handleSizeChange(pageSize) {
+				this.pageInfo.pageSize=pageSize;
 				this.getXmProjectGroupStates();
 			},
 			handleCurrentChange(pageNum) {
@@ -119,7 +134,7 @@
 				this.getXmProjectGroupStates();
 			},
 			searchXmProjectGroupStates(){
-				 this.pageInfo.count=true; 
+				 this.pageInfo.count=true;
 				 this.getXmProjectGroupStates();
 			},
 			//获取列表 XmProjectGroupState 功能状态表,无需前端维护，所有数据由汇总统计得出
@@ -132,9 +147,9 @@
 				};
 				if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
 					let orderBys=[];
-					for(var i=0;i<this.pageInfo.orderFields.length;i++){ 
+					for(var i=0;i<this.pageInfo.orderFields.length;i++){
 						orderBys.push(this.pageInfo.orderFields[i]+" "+this.pageInfo.orderDirs[i])
-					}  
+					}
 					params.orderBy= orderBys.join(",")
 				}
 				if(this.filters.key!==""){
@@ -148,13 +163,13 @@
 				this.load.list = true;
 				listXmProjectGroupState(params).then((res) => {
 					var tips=res.data.tips;
-					if(tips.isOk){ 
+					if(tips.isOk){
 						this.pageInfo.total = res.data.total;
 						this.pageInfo.count=false;
 						this.xmProjectGroupStates = res.data.data;
 					}else{
 						this.$message({showClose: true, message: tips.msg, type: 'error' });
-					} 
+					}
 					this.load.list = false;
 				}).catch( err => this.load.list = false );
 			},
@@ -180,44 +195,45 @@
 			//选择行xmProjectGroupState
 			selsChange: function (sels) {
 				this.sels = sels;
-			}, 
+			},
 			//删除xmProjectGroupState
-			handleDel: function (row,index) { 
+			handleDel: function (row,index) {
 				this.$confirm('确认删除该记录吗?', '提示', {
 					type: 'warning'
-				}).then(() => { 
+				}).then(() => {
 					this.load.del=true;
 					let params = { id: row.id };
 					delXmProjectGroupState(params).then((res) => {
 						this.load.del=false;
 						var tips=res.data.tips;
-						if(tips.isOk){ 
+						if(tips.isOk){
 							this.pageInfo.count=true;
 							this.getXmProjectGroupStates();
 						}
-						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.del=false );
 				});
 			},
 			//批量删除xmProjectGroupState
 			batchDel: function () {
-				
+
 				this.$confirm('确认删除选中记录吗？', '提示', {
 					type: 'warning'
-				}).then(() => { 
+				}).then(() => {
 					this.load.del=true;
 					batchDelXmProjectGroupState(this.sels).then((res) => {
 						this.load.del=false;
 						var tips=res.data.tips;
-						if( tips.isOk ){ 
+						if( tips.isOk ){
 							this.pageInfo.count=true;
-							this.getXmProjectGroupStates(); 
+							this.getXmProjectGroupStates();
 						}
 						this.$message({showClose: true, message: tips.msg, type: tips.isOk?'success':'error'});
 					}).catch( err  => this.load.del=false );
 				});
 			},
 			rowClick: function(row, event, column){
+			  this.editForm=row
 				this.$emit('row-click',row, event, column);//  @row-click="rowClick"
 			},
 			loadTasksToXmProjectGroupState(){
@@ -232,25 +248,26 @@
 				})
 			}
 			/**begin 自定义函数请在下面加**/
-			
-				
+
+
 			/**end 自定义函数请在上面加**/
-			
+
 		},//end methods
-		components: {  
+		components: {
+XmProjectGroupStateOverview
 		    //在下面添加其它组件
 		},
-		mounted() { 
+		mounted() {
 			this.$nextTick(() => {
-				
+
 				var clientRect=this.$refs.table.$el.getBoundingClientRect();
-				var subHeight=70/1000 * window.innerHeight; 
-				this.tableHeight =  window.innerHeight -clientRect.y - this.$refs.table.$el.offsetTop-subHeight; 
+				var subHeight=70/1000 * window.innerHeight;
+				this.tableHeight =  window.innerHeight -clientRect.y - this.$refs.table.$el.offsetTop-subHeight;
 				this.getXmProjectGroupStates();
-        	}); 
+        	});
         	/** 举例，
     		listOption([{categoryId:'all',itemCode:'sex'},{categoryId:'all',itemCode:'grade'}] ).then(res=>{
-				if(res.data.tips.isOk){ 
+				if(res.data.tips.isOk){
  					this.options=res.data.data
 				}
 			});
@@ -262,4 +279,4 @@
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/xm/core/xmProjectGroupState/XmProjectGroupStateOverview.vue b/src/views/xm/core/xmProjectGroupState/XmProjectGroupStateOverview.vue
new file mode 100644
index 00000000..0d5e96f4
--- /dev/null
+++ b/src/views/xm/core/xmProjectGroupState/XmProjectGroupStateOverview.vue
@@ -0,0 +1,608 @@
+<template>
+  <section>
+    <el-row class="page-main page-height-75" style="overflow-x: hidden;">
+      <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>团队名称:</span>
+                <span v-text="this.xmProjectGroupState.groupName"></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.xmProjectGroupState.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.xmProjectGroupState.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="planStartTime+'~'+planEndTime">
+                  </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.calcTime}}</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.xmProjectGroupState.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 v-if="!isNaN(finishRate)" :percentage="finishRate"></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 :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.xmProjectGroupState.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.xmProjectGroupState.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-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-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']),
+    finishRate:function (){
+      return parseFloat(this.xmProjectGroupState.finishRate);
+    },
+    notStart: function() {
+      return this.xmProjectGroupState.taskCnt-this.xmProjectGroupState.finishTaskCnt;
+    },
+    planStartTime: function (){
+      if(this.xmProjectGroupState.planStartTime){
+        return this.xmProjectGroupState.planStartTime.substring(0,10);
+      } else{
+        return '暂无';
+      }
+    },
+    planEndTime: function (){
+      if(this.xmProjectGroupState.planEndTime){
+        return this.xmProjectGroupState.planEndTime.substring(0,10);
+      } else{
+        return '暂无';
+      }
+    },
+    calcTime:function (){
+      if(this.xmProjectGroupState.calcTime){
+        return this.xmProjectGroupState.calcTime.substring(0,10);
+      }else{
+        return '暂无';
+      }
+    },
+    workloadProgress:function (){
+      if(this.xmProjectGroupState && this.xmProjectGroupState.actWorkload){
+        return Math.round(this.xmProjectGroupState.actWorkload/this.xmProjectGroupState.planWorkload*100);
+      }else{
+        return 0;
+      }
+    },
+    deviation:function (){
+      let now = new Date();
+      let startTime = new Date(this.xmProjectGroupState.planStartTime);
+      let endTime = new Date(this.xmProjectGroupState.planEndTime);
+      let allDays=endTime-startTime;
+      if(now<=endTime && allDays){
+        return this.xmProjectGroupState.planWorkload - Math.round((now-startTime)/allDays*this.xmProjectGroupState.planWorkload)
+      }else{
+        return this.xmProjectGroupState.actWorkload - this.xmProjectGroupState.planWorkload;
+      }
+    },
+    deviationRate:function (){
+      if(this.xmProjectGroupState.planWorkload){
+        return Math.round(this.deviation/this.xmProjectGroupState.planWorkload*100);
+      }else{
+        return '暂无';
+      }
+    },
+    remainWorkload:function (){
+      return this.xmProjectGroupState.planWorkload - this.xmProjectGroupState.actWorkload;
+    },
+    planProgress:function (){
+      let now = new Date();
+      let startTime = new Date(this.xmProjectGroupState.planStartTime);
+      let endTime = new Date(this.xmProjectGroupState.planEndTime);
+      let allDays=endTime-startTime;
+      if(now<=endTime && allDays){
+        return Math.round((now-startTime)/allDays*100);
+      }else{
+        return 100;
+      }
+    },
+    realProgress:function (){
+      if(this.xmProjectGroupState.actWorkload < this.xmProjectGroupState.planWorkload && this.xmProjectGroupState.planWorkload){
+        return Math.round(this.xmProjectGroupState.actWorkload/this.xmProjectGroupState.planWorkload*100);
+      }else{
+        return 100;
+      }
+    },
+    xmProjectGroupStateCpd(){
+      return this.xmProjectGroupState
+    },
+
+  },
+
+  props:['xmProjectGroupState'],
+  watch:{
+    xmProjectGroupStateCpd:function(){
+      this.drawAllBar();
+      this.drawPieBug();
+    }
+  },
+  data() {
+    return {
+      isActive:true,
+    };
+  },
+
+  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.xmProjectGroupState.testCases,
+                itemStyle: {
+                  normal:{
+                    color: '#99CCFF'
+                  }
+                }
+              },
+              {
+                value: this.xmProjectGroupState.taskCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#99CCFF'
+                  }
+                }
+              },
+              {
+                value: this.xmProjectGroupState.bugCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#99CCFF'
+                  }
+                }
+              },
+            ],
+            type: 'bar'
+          }
+        ]
+      };
+
+      // 绘制图表
+      allChart.setOption(option);
+
+    },
+    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.xmProjectGroupState.closedBugs,
+                itemStyle: {
+                  normal:{
+                    color: '#5470C6'
+                  }
+                },
+                name: '已关闭'},
+              {value: this.xmProjectGroupState.resolvedBugs,
+                itemStyle: {
+                  normal:{
+                    color: '#91CC75'
+                  }
+                },
+                name: '已解决'},
+              {value: this.xmProjectGroupState.activeBugs,
+                itemStyle: {
+                  normal:{
+                    color: '#FAC858'
+                  }
+                },
+                name: '已激活'},
+              {value: this.xmProjectGroupState.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.xmProjectGroupState.execCases,
+                itemStyle: {
+                  normal:{
+                    color: '#73C0DE'
+                  }
+                },
+                name: '测试中案例'},
+              {value: this.xmProjectGroupState.designCases,
+                itemStyle: {
+                  normal:{
+                    color: '#FAC858'
+                  }
+                },
+                name: '设计中案例'},
+              {value: this.xmProjectGroupState.finishCases,
+                itemStyle: {
+                  normal:{
+                    color: '#91CC75'
+                  }
+                },
+                name: '完成案例'},
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+
+      // 绘制图表
+      casePie.setOption(option);
+    },
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+    });
+    this.drawAllBar();
+    this.drawPieBug();
+  },
+
+};
+</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;
+  position: relative;
+  .progress-item{
+    position:absolute; width:80%;
+  }
+}
+
+.card-font {
+  color: #000000;
+  font-size: 12px;
+
+  .el-col {
+    margin-bottom: 20px;
+  }
+}
+
+
+.value {
+  cursor: pointer;
+}
+
+
+.click {
+  background: #e9f7ff;
+}
+
+</style>
+
+<style>
+.app-container{
+  padding: 20px;
+  padding-bottom: 0;
+}
+</style>
diff --git a/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue b/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue
index e2de4143..f206cbae 100644
--- a/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue
+++ b/src/views/xm/core/xmProjectPhase/XmProjectPhaseEdit.vue
@@ -1,126 +1,136 @@
 <template>
 	<section class="page-container border padding">
+
+
 		<el-row class="page-main page-height-90">
-			<!--新增界面 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-checkbox true-label="1" false-label="0" v-model="editForm.milestone">标记为里程碑</el-checkbox>
-					</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-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-row>
-				<el-tabs v-model="activeName" class="border padding">
-					<el-tab-pane label="工作量及人力成本" name="phaseBudgetWorkload">
-						 <el-row>
-							<el-row class="padding-20 border">
-								<el-row class="padding">工作量计算方式：<font style="color:red">总工时 = 工作日天数 * 每日工时数 * 人数 </font> </el-row>
-								<el-row class="padding">金额计算方式：  <font style="color:red">总金额 = 总工时 * 工时单价 </font></el-row>
-							</el-row>
-							<el-row class="padding-20 border">
-								预计时间：<el-date-picker
-									v-model="dateRanger" 
-									type="daterange"
-									align="right"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="计划开始日期"
-									end-placeholder="计划完成日期"
-									value-format="yyyy-MM-dd"
-									:default-time="['00:00:00','23:59:59']"
-									:picker-options="pickerOptions"
-								></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 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 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>
-								<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 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>
-								<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 class="padding-20  border">
-								<el-col :span="4">合计</el-col>
-								<el-col :span="4"> {{autoParams.phaseBudgetOutUserCnt+autoParams.phaseBudgetInnerUserCnt}}
-								</el-col>
-								<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 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-tabs>
+				<el-tab-pane label="阶段计划详情">
+					<!--新增界面 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-checkbox true-label="1" false-label="0" v-model="editForm.milestone">标记为里程碑</el-checkbox>
+							</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-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-row>
-					</el-tab-pane>  
-					<el-tab-pane v-if="activeName=='phaseBudgetWorkload'" label="收起" name="">
-					</el-tab-pane>
-				</el-tabs> 
-			</el-form>
+						<el-tabs v-model="activeName" class="border padding">
+							<el-tab-pane label="工作量及人力成本" name="phaseBudgetWorkload">
+								<el-row>
+									<el-row class="padding-20 border">
+										<el-row class="padding">工作量计算方式：<font style="color:red">总工时 = 工作日天数 * 每日工时数 * 人数 </font> </el-row>
+										<el-row class="padding">金额计算方式：  <font style="color:red">总金额 = 总工时 * 工时单价 </font></el-row>
+									</el-row>
+									<el-row class="padding-20 border">
+										预计时间：<el-date-picker
+											v-model="dateRanger"
+											type="daterange"
+											align="right"
+											unlink-panels
+											range-separator="至"
+											start-placeholder="计划开始日期"
+											end-placeholder="计划完成日期"
+											value-format="yyyy-MM-dd"
+											:default-time="['00:00:00','23:59:59']"
+											:picker-options="pickerOptions"
+										></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 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 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>
+										<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 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>
+										<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 class="padding-20  border">
+										<el-col :span="4">合计</el-col>
+										<el-col :span="4"> {{autoParams.phaseBudgetOutUserCnt+autoParams.phaseBudgetInnerUserCnt}}
+										</el-col>
+										<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 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 v-if="activeName=='phaseBudgetWorkload'" label="收起" name="">
+							</el-tab-pane>
+						</el-tabs>
+					</el-form>
+				</el-tab-pane>
+				<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'
-	
-	export default { 
+	import  XmProjectPhaseOverview from './XmProjectPhaseOverview';//新增界面
+
+	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
 				}
@@ -133,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
@@ -169,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){
 	      		//从新打开页面时某些数据需要重新加载，可以在这里添加
 	      	}
@@ -187,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' }
 					],
@@ -210,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:'',
@@ -228,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";
@@ -247,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;
@@ -291,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()
 
@@ -312,7 +322,7 @@
 					}
 				}
 				return count;
-			},  
+			},
 			toFixed(floatValue,num){
 				if(floatValue ==null || floatValue=='' || floatValue == undefined){
 					return 0;
@@ -336,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 )
@@ -345,13 +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=>{
@@ -362,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
new file mode 100644
index 00000000..e4a635d9
--- /dev/null
+++ b/src/views/xm/core/xmProjectPhase/XmProjectPhaseOverview.vue
@@ -0,0 +1,576 @@
+<template>
+  <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']),
+    notStart: function() {
+      return this.xmProjectPhase.taskCnt-this.xmProjectPhase.finishTaskCnt;
+    },
+    taskProgress: function (){
+      if(this.xmProjectPhase.actRate){
+        return this.xmProjectPhase.actRate;
+      }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 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>
+.app-container{
+  padding: 20px;
+  padding-bottom: 0;
+}
+</style>