From 048876a84194190059bd5d31a5b23712bbbff3d6 Mon Sep 17 00:00:00 2001
From: chentaiyu <chentaiyu>
Date: Thu, 22 Jul 2021 17:20:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=85=E4=BA=8B=E6=A6=82=E8=A7=88=EF=BC=8C?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96=E6=A6=82=E8=A7=88=E5=BE=AE=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../core/xmIteration/XmIterationOverview.vue  |   4 +-
 src/views/xm/core/xmMenu/XmMenuEdit.vue       |  80 +-
 src/views/xm/core/xmMenu/XmMenuOverview.vue   | 690 +++++++++++++++++-
 .../xm/core/xmProduct/XmProductOverview.vue   |   6 +-
 .../xm/core/xmProject/XmProjectOverview.vue   |   3 +-
 5 files changed, 697 insertions(+), 86 deletions(-)

diff --git a/src/views/xm/core/xmIteration/XmIterationOverview.vue b/src/views/xm/core/xmIteration/XmIterationOverview.vue
index dfd111c8..bb204943 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>
diff --git a/src/views/xm/core/xmMenu/XmMenuEdit.vue b/src/views/xm/core/xmMenu/XmMenuEdit.vue
index c36e4886..846e8e8c 100644
--- a/src/views/xm/core/xmMenu/XmMenuEdit.vue
+++ b/src/views/xm/core/xmMenu/XmMenuEdit.vue
@@ -6,57 +6,57 @@
 					<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>
 						<el-form-item label="故事名称" prop="menuName">
 							<el-input v-model="editForm.menuName" placeholder="故事名称" ></el-input>
-						</el-form-item>  
+						</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-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>
+						<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-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-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-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-item>
 					</el-form>
 				</el-tab-pane>
-				<el-tab-pane  label="概览">
+				<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'
@@ -67,20 +67,20 @@ import XmMenuOverview from './XmMenuOverview.vue';
 	      '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' }
 					],
@@ -97,7 +97,7 @@ import XmMenuOverview from './XmMenuOverview.vue';
 				},
 				userSelectVisible:false,
 				/**begin 在下面加自定义属性,记得补上面的一个逗号**/
-				
+
 				/**end 在上面加自定义属性**/
 			}//end return
 		},//end data
@@ -108,24 +108,24 @@ import XmMenuOverview from './XmMenuOverview.vue';
 			},
 			//新增提交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);
 						});
 					}
@@ -146,19 +146,19 @@ import XmMenuOverview from './XmMenuOverview.vue';
 				this.editForm.mmUsername=''
 			}
 			/**begin 在下面加自定义方法,记得补上面的一个逗号**/
-				
+
 			/**end 在上面加自定义方法**/
-			
+
 		},//end method
-		components: {  
+		components: {
 			//在下面添加其它组件 'xm-menu-edit':XmMenuEdit
 			UsersSelect,
 			XmMenuOverview,
 		},
 		mounted() {
-			this.editForm=Object.assign(this.editForm, this.xmMenu);   
+			this.editForm=Object.assign(this.editForm, this.xmMenu);
 			/**在下面写其它函数***/
-			
+
 		}//end mounted
 	}
 
@@ -166,4 +166,4 @@ import XmMenuOverview from './XmMenuOverview.vue';
 
 <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
index 83ac1e41..3439c896 100644
--- a/src/views/xm/core/xmMenu/XmMenuOverview.vue
+++ b/src/views/xm/core/xmMenu/XmMenuOverview.vue
@@ -1,51 +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="12" @click="">
+                <div class="item">
+                  <div class="icon" style="background-color:  rgb(79, 140, 255);">
+                    <i class="el-icon-right"></i>
+                  </div>
+                  <div class="info">
+                    <div v-text="this.xmMenu.taskCnt"></div>
+                    <div class="title">总任务量</div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="item">
+                  <div class="icon" style="background-color:  rgb(255, 153, 51);">
+                    <i class="el-icon-loading"></i>
+                  </div>
+                  <div class="info">
+                    <div v-text="notStart">
+                    </div>
+                    <div class="title">待完成</div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="item">
+                  <div class="icon" style="background-color:  rgb(0, 153, 51);">
+                    <i class="el-icon-check"></i>
+                  </div>
+                  <div class="info">
+                    <div v-text="this.xmMenu.finishTaskCnt" >
+                    </div>
+                    <div class="title">已完成</div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row style="margin-bottom:18px">
+              <div class="item">
+                <div class="icon2" style="background-color:  rgb(204, 204, 204);">
+                  <i class="el-icon-date"></i>
+                </div>
+                <div class="info">
+                  <div v-text="menuStartTime+'~'+menuEndTime">
+                  </div>
+                  <div class="title">故事计划周期</div>
+                </div>
+              </div>
+            </el-row>
+            <el-row style="margin-bottom:18px">
+              <div class="item">
+                <div class="icon2" style="background-color:  rgb(204, 204, 204);">
+                  <i class="el-icon-star-off"></i>
+                </div>
+                <div class="info">
+                  <div class="title"> 关联项目数： {{this.xmMenu.projectCnt}}</div>
+                </div>
+              </div>
+            </el-row>
+            <el-row style="margin-bottom:18px">
+              <div class="item">
+                <div class="icon2" style="background-color:  rgb(204, 204, 204);">
+                  <i class="el-icon-refresh"></i>
+                </div>
+                <div class="info">
+                  <div class="title"> 关联迭代数： {{(this.xmMenu.iterationCnt)}} </div>
+                </div>
+              </div>
+            </el-row>
+            <el-row style="margin-bottom:18px">
+              <div class="item">
+                <div class="icon2" style="background-color:  rgb(204, 204, 204);">
+                  <i class="el-icon-alarm-clock"></i>
+                </div>
+                <div>
+                  <div class="progress-item">
+                    <el-progress :percentage="taskProgress"></el-progress>
+                    <div class="title">任务进度</div>
+                  </div>
+                </div>
+              </div>
+            </el-row>
+          </el-card>
+        </el-col>
+        <el-col :span="12" >
+          <el-card class="box-card" style="height:425px">
+            <div slot="header" class="clearfix">
+              <span>所有工作项数量分布</span>
+            </div>
+            <div>
+              <div id="allChart" :style="{width: '100%', height: '350px'}"></div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10" style="margin-bottom:10px">
+        <el-col>
+          <el-card class="box-card" style="padding:0px ;height:425px">
+            <div slot="header" class="clearfix">
+              <span>项目工时</span>
+            </div>
+            <div>
+              <el-row style="padding:25px;">
+                <div class="item">
+                  <el-col :span="8">
+                    <div>
+                      <div style="text-align:center;">
+                        <span style="font-size:24px;" v-text="this.xmMenu.planWorkload"></span>
+                        <span style="font-size:5px;">h</span>
+                      </div>
+                      <div style="text-align:center;font-size:5px;">预估工时</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <div style="text-align:center;">
+                        <span style="font-size:24px;" v-text="this.xmMenu.actWorkload"></span>
+                        <span style="font-size:5px;">h</span>
+                      </div>
+                      <div style="text-align:center;font-size:5px;">登记工时</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <div style="text-align:center;">
+                        <span style="font-size:24px;" v-text="workloadProgress"></span>
+                        <span style="font-size:5px;">%</span>
+                      </div>
+                      <div style="text-align:center;font-size:5px;">工时进度</div>
+                    </div>
+                  </el-col>
+                </div>
+              </el-row>
+              <el-row style="padding:25px;">
+                <div class="item">
+                  <el-col :span="8">
+                    <div>
+                      <div style="text-align:center;">
+                        <span style="font-size:24px;" v-text="remainWorkload"></span>
+                        <span style="font-size:5px;">h</span>
+                      </div>
+                      <div style="text-align:center;font-size:5px;">剩余工时</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <div style="text-align:center;">
+                        <span style="font-size:24px;" v-text="deviation"></span>
+                        <span style="font-size:5px;">h</span>
+                      </div>
+                      <div style="text-align:center;font-size:5px;">预估偏差</div>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <div style="text-align:center;">
+                        <span style="font-size:24px;" v-text="deviationRate"></span>
+                        <span style="font-size:5px;">%</span>
+                      </div>
+                      <div style="text-align:center;font-size:5px;">预估偏差率</div>
+                    </div>
+                  </el-col>
+                </div>
+              </el-row>
+              <el-row>
+                <span style="margin-left:20px;">项目预计进度</span>
+                <el-progress style="width: 90%;margin-left:20px;margin-top: 10px;margin-bottom: 20px;" :text-inside="true" :stroke-width="24" :percentage="planProgress"></el-progress>
+              </el-row>
+              <el-row>
+                <span style="margin-left:20px;">项目实际进度</span>
+                <el-progress style="width: 90%;margin-left:20px;margin-top: 10px;" :text-inside="true" :stroke-width="24" :percentage="realProgress"></el-progress>
+              </el-row>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10" style="margin-bottom:10px">
+        <el-col :span="12" >
+          <el-card class="box-card" style="height:425px">
+            <div slot="header" class="clearfix">
+              <span>缺陷情况</span>
+            </div>
+            <div style="'100%'">
+              <div id="bugPieChart" :style="{width: '100%', height: '300px'}"></div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12" >
+          <el-card class="box-card" style="height:425px">
+            <div slot="header" class="clearfix">
+              <span>案例情况</span>
+            </div>
+            <div>
+              <div id="casePie" :style="{width: '100%', height: '410px'}"></div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-row>
 	</section>
 </template>
 
 <script>
 	import util from '@/common/js/util';//全局公共库
-	//import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询  
-	import { mapGetters } from 'vuex'	
- 
-	
-	export default { 
+	//import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询
+	import { mapGetters } from 'vuex'
+
+
+	export default {
 		computed: {
-		    ...mapGetters([
-		      'userInfo','roles'
-		    ])
-		},
-		props:['xmMenu'],
-		watch: { 
-	       
-	    },
-		data() {
-			return {
-				options:{},//下拉选择框的所有静态数据  params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]} 
-				load:{ list: false, edit: false, del: false, add: false },//查询中...
-				 
-				 
-				/**begin 在下面加自定义属性,记得补上面的一个逗号**/
-				
-				/**end 在上面加自定义属性**/
-			}//end return
-		},//end data
-		methods: {
-			  
-			
-		},//end method
-		components: {  
-			 
-		},
-		mounted() {
-			 
-			
-		}//end mounted
-	}
+      ...mapGetters(['userInfo','roles']),
+      notStart: function() {
+        return this.xmMenu.taskCnt-this.xmMenu.finishTaskCnt;
+      },
+      taskProgress: function (){
+        return Math.round(this.xmMenu.finishTaskCnt/this.xmMenu.taskCnt*100);
+      },
+      menuStartTime: function (){
+        if(this.xmMenu.planStartTime){
+          return this.xmMenu.planStartTime.substring(0,10);
+        } else{
+          return '暂无';
+        }
+      },
+      menuEndTime: function (){
+        if(this.xmMenu.planEndTime){
+          return this.xmMenu.planEndTime.substring(0,10);
+        } else{
+          return '暂无';
+        }
+      },
+      workloadProgress:function (){
+        return Math.round(this.xmMenu.actWorkload/this.xmMenu.planWorkload*100);
+      },
+      deviation:function (){
+        let now = new Date();
+        let startTime = new Date(this.xmMenu.planStartTime);
+        let endTime = new Date(this.xmMenu.planEndTime);
+        if(now<=endTime){
+          let allDays=endTime-startTime;
+          return this.xmMenu.planWorkload - Math.round((now-startTime)/allDays*this.xmMenu.planWorkload)
+        }else{
+          return this.xmMenu.actWorkload - this.xmMenu.planWorkload;
+        }
+      },
+      deviationRate:function (){
+        return Math.round(this.deviation/this.xmMenu.planWorkload*100);
+      },
+      remainWorkload:function (){
+        return this.xmMenu.planWorkload - this.xmMenu.actWorkload;
+      },
+      planProgress:function (){
+        let now = new Date();
+        let startTime = new Date(this.xmMenu.planStartTime);
+        let endTime = new Date(this.xmMenu.planEndTime);
+        if(now<=endTime){
+          let allDays=endTime-startTime;
+          return Math.round((now-startTime)/allDays*100)
+        }else{
+          return 100;
+        }
+      },
+      realProgress:function (){
+        if(this.xmMenu.actWorkload < this.xmMenu.planWorkload){
+          return Math.round(this.xmMenu.actWorkload/this.xmMenu.planWorkload*100)
+        }else{
+          return 100;
+        }
+      },
+      xmMenuCpd(){
+        return this.xmMenu
+      },
+
+    },
+
+    props:['xmMenu'],
+    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>
+<style scoped lang="scss">
+.container {
+  margin: 10px;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-start;
+  padding: 10px;
+
+  span {
+    padding-right: 15px;
+  }
+}
+
+.col {
+  margin-bottom: 20px;
+}
+
+.icon {
+  color: #fff;
+  height: 30px;
+  width: 30px;
+  border-radius: 15px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 20px;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.icon2 {
+  color: #000000;
+  height: 30px;
+  width: 30px;
+  border-radius: 15px;
+  text-align: center;
+  line-height: 30px;
+  font-size: 20px;
+  display: inline-block;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.item {
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+  .progress-item{
+    position:absolute; width:80%;
+  }
+}
+
+.card-font {
+  color: #000000;
+  font-size: 12px;
+
+  .el-col {
+    margin-bottom: 20px;
+  }
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+
+  .cal-header-boxs {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    .cal-header-box {
+      padding: 5px;
+      height: 45px;
+      margin-left: 10px;
+    }
+
+    .box-icon {
+      text-align: center;
+    }
+
+    .box-info {
+      text-align: center;
+      font-size: 12px;
+      color: #000000;
+    }
+  }
+}
+
+.el-tag:hover {
+  cursor: pointer;
+}
+
+.value {
+  cursor: pointer;
+}
+
+.reference {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.click {
+  background: #e9f7ff;
+}
+
+.calendar-box {
+  display: flex;
+  justify-content: flex-start;
+}
+</style>
 
-</style>
\ No newline at end of file
+<style>
+.app-container{
+  padding: 20px;
+  padding-bottom: 0;
+}
+</style>
diff --git a/src/views/xm/core/xmProduct/XmProductOverview.vue b/src/views/xm/core/xmProduct/XmProductOverview.vue
index 9c805063..f51a8510 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>
diff --git a/src/views/xm/core/xmProject/XmProjectOverview.vue b/src/views/xm/core/xmProject/XmProjectOverview.vue
index 56171a0c..0e15c294 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>