From e0250ed9be39b422019432e521e692ddae8d75ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Wed, 8 Feb 2023 18:44:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../xm/core/xmProduct/XmProductOverview.vue   | 971 ++++++++++++------
 1 file changed, 672 insertions(+), 299 deletions(-)

diff --git a/src/views/xm/core/xmProduct/XmProductOverview.vue b/src/views/xm/core/xmProduct/XmProductOverview.vue
index 7f6d98d1..3d358631 100644
--- a/src/views/xm/core/xmProduct/XmProductOverview.vue
+++ b/src/views/xm/core/xmProduct/XmProductOverview.vue
@@ -1,26 +1,47 @@
 <template>
-  <section >
-    <el-row class="page-main" ref="pageMainRef" :style="{overflowX:'hidden',height:maxTableHeight+'px'}" > 
-      <el-row :gutter="10" style="margin-bottom:10px">
+  <section>
+    <el-row :style="{overflowX: 'hidden',height:maxTableHeight+'px'}" ref="table"> 
+      <el-row :gutter="10">
           <el-col :span="8" >
             <el-card class="box-card" style="padding:0px ;height:425px">
               <div slot="header" class="clearfix">
                 <span>产品信息</span>
+
+                <el-popover
+                  placement="bottom"
+                  title="标题"
+                  width="200"
+                  trigger="click" > 
+
+                  <el-row>
+                    <el-button type="primary" @click="loadTasksToXmProductState" v-loading="load.calcProduct">计算产品汇总数据</el-button>
+                    <br>
+                      <font color="blue" style="font-size:10px;">将从项目任务及产品任务中汇总进度、预算工作量、实际工作量、预算金额、实际金额、缺陷数、需求数等数据到产品统计表</font>
+                  </el-row>
+                  <el-row>
+                    <el-button  type="primary" @click="loadTasksToXmMenuState"  v-loading="load.calcMenu">计算所有需求数据</el-button>
+                    <br>
+                      <font color="blue"  style="font-size:10px;">将从项目任务汇总进度、预算工作量、实际工作量、预算金额、实际金额等数据到需求统计表</font>
+                  </el-row>
+
+                  <el-button slot="reference" style="float:right;" icon="el-icon-video-play" type="text">统计</el-button>
+                </el-popover>
+               
               </div>
-              <el-row style="margin-bottom:18px">
+              <el-row style="margin-bottom:10px">
                 <el-row>
-                  <span>产品负责人:</span><span><b>{{xmProduct.pmUsername}}</b></span>
-                </el-row> 
+                  <span>产品负责人</span>&nbsp;<span><b>{{pmUsername}}</b></span> 
+                 </el-row> 
               </el-row>
-              <el-row style="margin-bottom:18px">
+              <el-row style="margin-bottom:10px">
                 <el-col :span="8">
                   <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.xmProduct.taskCnt"></div>
-                      <div class="title">任务总数</div>
+                      <div v-text="totalTask"></div>
+                      <div class="title">总任务量</div>
                     </div>
                   </div>
                 </el-col>
@@ -42,54 +63,50 @@
                       <i class="el-icon-check"></i>
                     </div>
                     <div class="info">
-                      <div v-text="this.xmProduct.taskCnt-this.notStart" >
+                      <div v-text="competeTasks" >
                       </div>
                       <div class="title">已完成</div>
                     </div>
                   </div>
                 </el-col>
               </el-row>
-              <el-row style="margin-bottom:18px">
+              <el-row style="margin-bottom:10px">
                 <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="productStartTime+'~'+productEndTime">
+                    <div v-text="taskStartTime+'~'+taskEndTime">
                     </div>
                     <div class="title">产品计划周期</div>
                   </div>
                 </div>
               </el-row>
-              <el-row style="margin-bottom:18px">
+              <el-row style="margin-bottom:10px">
                 <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.xmProduct.menuCnt}}</div>
+                    <div class="title"> 需求数： {{this.xmProduct.menuCnt||0}}</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.xmProduct.iterationCnt}} </div>
-                  </div>
-                </div>
-              </el-row>
-              <el-row style="margin-bottom:18px">
+              </el-row> 
+              <el-row style="margin-bottom:10px">
                 <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" style="width: 100%">任务进度</div>
+                      <el-progress :percentage="realProgress">
+                      </el-progress>
+                      
+                      <el-tag v-if="planProgress>realProgress" type="danger" effect="dark">整体进度 落后{{ planProgress-realProgress }}%</el-tag>
+                          <el-tag v-else-if="planProgress<realProgress" type="warning" effect="dark">整体进度 超前{{ realProgress-planProgress }}%</el-tag>
+                          <el-tag v-else effect="dark" type="success">整体进度 理想</el-tag>
+                      <div class="title">
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -99,125 +116,174 @@
           <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>
+                <div id="planTotalCostPie" :style="{width: '100%', height: '320px'}"></div>
               </div>
             </el-card>
-          </el-col>
+          </el-col>  
+
           <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="bugPieChart" :style="{width: '100%', height: '410px'}"></div>
+                <div id="iterationAndProduct" :style="{width: '100%', height: '350px'}"></div>
               </div>
             </el-card>
           </el-col>
         </el-row>
-      <el-row :gutter="10" style="margin-bottom:10px">
-        <el-col :span="8" >
-          <el-card class="box-card" style="height:425px">
-            <div slot="header" class="clearfix">
-              <span>产品工时</span>
-            </div>
-            <div>
-              <el-row >
-                <div class="item">
-                  <el-col :span="8">
-                    <div>
-                      <div style="text-align:center;">
-                        <span style="font-size:24px;" v-text="this.xmProductCpd.estimateWorkload"></span>
-                        <span style="font-size:5px;">h</span>
+        <el-row :gutter="10" style="margin-bottom:10px">
+          <el-col :span="16" >
+            <el-card class="box-card" style="padding:0px ;height:425px">
+              <div slot="header" class="clearfix">
+                <span>产品工时</span>
+              </div>
+              <div>
+                <el-row  >
+                  <div class="item">
+                    <el-col :span="8">
+                      <div>
+                        <div style="text-align:center;">
+                          <span style="font-size:24px;" v-text="this.xmProduct.budgetWorkload"></span>
+                          <span style="font-size:5px;">h</span>
+                        </div>
+                        <div style="text-align:center;font-size:5px;">总估工时</div>
                       </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.xmProduct.actWorkload"></span>
-                        <span style="font-size:5px;">h</span>
+                    </el-col>
+                    <el-col :span="8">
+                      <div>
+                        <div style="text-align:center;">
+                          <span style="font-size:24px;" v-text="this.xmProduct.estimateWorkload"></span>
+                          <span style="font-size:5px;">h</span>
+                        </div>
+                        <div style="text-align:center;font-size:5px;">应完成工时</div>
                       </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>
+                    </el-col>
+                    <el-col :span="8">
+                      <div>
+                        <div style="text-align:center;">
+                          <span style="font-size:24px;" v-text="this.xmProduct.actWorkload"></span>
+                          <span style="font-size:5px;">h</span>
+                        </div>
+                        <div style="text-align:center;font-size:5px;" title="已登记的工时">已完成工时</div>
                       </div>
-                      <div style="text-align:center;font-size:5px;">工时进度</div>
-                    </div>
-                  </el-col>
-                </div>
-              </el-row>
-              <el-row >
-                <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>
+                    </el-col> 
+                  </div>
+                </el-row>
+                <el-row  >
+                  <div class="item">
+                    <el-col :span="8">
+                      <div title="总估工时-已完成工时">
+                        <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>
-                      <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>
+                    </el-col>
+                    <el-col :span="8">
+                      <div title="已完成工时-当前应完成工时">
+                        <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>
-                      <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>
+                    </el-col>
+                    <el-col :span="8">
+                      <div title="（已完成工时-当前应完成工时）/ 当前应完成工时">
+                        <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>
-                      <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;"   :stroke-width="14" :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;" color="#47CBF6" :stroke-width="14" :percentage="realProgress"></el-progress>
-              </el-row>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="8" >
-          <el-card class="box-card" style="height:425px">
-            <div slot="header" class="clearfix">
-              <span>产品相关联项目与迭代数</span>
-            </div>
-            <div>
-              <div id="projectAndIteration" :style="{width: '100%', height: '350px'}"></div>
-            </div>
-          </el-card>
-        </el-col>
-        <el-col :span="8" >
-          <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-col>
+                  </div>
+                </el-row>
+                <el-row>
+                  <span style="margin-left:20px;" title="应完成工时/总预估工时">预计进度</span>
+                  <el-progress style="width: 90%;margin-left:20px;margin-top: 10px;margin-bottom: 20px;"   :stroke-width="14" :percentage="planProgress"></el-progress>
+                </el-row>
+                <el-row>
+                  <span style="margin-left:20px;" title="实际工时/总预估工时">实际进度</span>
+                  <el-progress style="width: 90%;margin-left:20px;margin-top: 10px;"  color="#47CBF6" :stroke-width="14" :percentage="realProgress"></el-progress>
+                </el-row>
+
+              </div>
+            </el-card>
+          </el-col>
+          <el-col :span="8" >
+            <el-card class="box-card" style="height:425px">
+              <div slot="header" class="clearfix">
+                <span>合作开发工作量分布</span>
+              </div>
+              <div>
+                <div id="workloadDistribution" :style="{width: '100%', height: '320px'}"></div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row> 
+        <el-row :gutter="10" style="margin-bottom:10px">
+          <el-col :span="8" >
+            <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-col :span="8" >
+            <el-card class="box-card" style="height:425px">
+              <div slot="header" class="clearfix">
+                <span>需求情况</span>
+              </div>
+              <div>
+                <div id="menuChart" :style="{width: '100%', height: '320px'}"></div>
+              </div>
+            </el-card>
+          </el-col>
+          
+          <el-col :span="8" >
+            <el-card class="box-card" style="padding:0px ;height:425px">
+              <div slot="header" class="clearfix">
+                <span>任务状态分布</span>
+              </div>
+              <div>
+                <div id="taskChart" :style="{width: '100%', height: '350px'}"></div>
+              </div>
+            </el-card>
+          </el-col>
+          
+        </el-row>
+        <el-row :gutter="10" style="margin-bottom:10px">
+          <el-col :span="8" >
+            <el-card class="box-card" style="height:425px">
+              <div slot="header" class="clearfix">
+                <span>测试用例情况</span>
+              </div>
+              <div>
+                <div id="testCasePieChart" :style="{width: '100%', height: '320px'}"></div>
+              </div>
+            </el-card>
+          </el-col>
+          
+          <el-col :span="8" >
+            <el-card class="box-card" style="height:425px">
+              <div slot="header" class="clearfix">
+                <span>缺陷情况</span>
+              </div>
+              <div>
+                <div id="bugPieChart" :style="{width: '100%', height: '320px'}"></div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
     </el-row>
   </section>
 </template>
@@ -225,106 +291,91 @@
 <script>
 import util from "@/common/js/util"; // 全局公共库
 import { mapGetters } from "vuex";
-
-	import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询
-
+import { initSimpleDicts } from '@/api/mdp/meta/item';//下拉框数据查询 
+	import { listXmProductWithState} from '@/api/xm/core/xmProduct'; 
+import { loadTasksToXmMenuState} from '@/api/xm/core/xmMenuState'; 
+  import {  loadTasksToXmProductState} from '@/api/xm/core/xmProductState';
+  import store from '@/store'
 export default {
   computed: {
     ...mapGetters(["userInfo"]),
+    competeTasks: function (){
+      return this.xmProduct.taskCnt-this.xmProduct.taskUnstartCnt-this.xmProduct.taskExecCnt;
+    },
     notStart: function() {
-      return this.xmProduct.taskUnstartCnt+this.xmProduct.taskExecCnt;
+      return  this.xmProduct.taskUnstartCnt+this.xmProduct.taskExecCnt;
     },
-    taskProgress: function (){
-      return this.xmProduct.finishRate?parseInt(this.xmProduct.finishRate):0;
+    totalTask: function() {
+      return this.xmProduct.taskCnt;
+    }, 
+    taskStartTime: function (){
+      return this.xmProduct.startTime?this.xmProduct.startTime.substring(0,10):'';
     },
-    productStartTime: function (){
-      if(this.xmProduct.planStartTime){
-        return this.xmProduct.planStartTime.substring(0,10);
-      } else{
-        return '暂无';
-      }
+    taskEndTime: function (){
+      return this.xmProduct.endTime?this.xmProduct.endTime.substring(0,10):'';
     },
-    productEndTime: function (){
-      if(this.xmProduct.planEndTime){
-        return this.xmProduct.planEndTime.substring(0,10);
-      } else{
-        return '暂无';
-      }
+    pmUsername: function (){
+      return this.xmProduct.pmUsername;
     },
     workloadProgress:function (){
+      if(!this.xmProduct.actWorkload||!this.xmProduct.budgetWorkload){
+        return 0;
+      }
       return Math.round(this.xmProduct.actWorkload/this.xmProduct.budgetWorkload*100);
     },
-    remainWorkload:function (){
-      return this.xmProduct.budgetWorkload - this.xmProduct.actWorkload;
-    },
     deviation:function (){
-      let now = new Date();
-      let productStartTime = new Date(this.xmProduct.planStartTime);
-      let productEndTime = new Date(this.xmProduct.planEndTime);
-      if(now<=productEndTime){
-        let allDays=productEndTime-productStartTime;
-        return this.xmProduct.budgetWorkload - Math.round((now-productStartTime)/allDays*this.xmProduct.budgetWorkload);
-      }else{
-        return this.xmProduct.actWorkload - this.xmProduct.budgetWorkload;
-      }
+      
+        return  this.xmProduct.actWorkload-this.xmProduct.estimateWorkload
+       
     },
     deviationRate:function (){
-      return Math.round(this.deviation/this.xmProduct.budgetWorkload*100);
+      return Math.round(this.deviation/this.xmProduct.estimateWorkload*100);
+    },
+    remainWorkload:function (){
+      return this.xmProduct.budgetWorkload - this.xmProduct.actWorkload;
     },
     planProgress:function (){
-      let now = new Date();
-      let productStartTime = new Date(this.xmProduct.planStartTime);
-      let productEndTime = new Date(this.xmProduct.planEndTime);
-      if(now<=productEndTime){
-        let allDays=productEndTime-productStartTime;
-        return Math.round((now-productStartTime)/allDays*100)
-      }else{
-        return 100;
+      if(!this.xmProduct.estimateWorkload||!this.xmProduct.budgetWorkload){
+        return 0;
       }
+        return Math.round(this.xmProduct.estimateWorkload/this.xmProduct.budgetWorkload*100);
     },
     realProgress:function (){
+      if(!this.xmProduct.actWorkload||!this.xmProduct.budgetWorkload){
+        return 0;
+      }
       if(this.xmProduct.actWorkload < this.xmProduct.budgetWorkload){
         return Math.round(this.xmProduct.actWorkload/this.xmProduct.budgetWorkload*100)
       }else{
         return 100;
       }
     },
-    xmProductCpd(){
-      return this.xmProduct;
-    },
-    calcXmProductPstatusStep(){
-				if(this.dicts['xmProductPstatus']){
-					var index=this.dicts['xmProductPstatus'].findIndex(i=>{
-						if(i.id==this.xmProductCpd.pstatus){
-							return true;
-						}else{
-							return false;
-						}
-					})
-					return index+1;
-				}else{
-					return 0;
-				}
+    xmProductStateCpd(){
+      return this.xmProduct
+    }, 
 
-    }
   },
 
   props:['xmProduct'],
   watch:{
-    xmProductCpd:function(){
+    xmProductStateCpd:function(){
       this.drawAllBar();
+      this.drawTask();
+      this.drawTestCasePie();
       this.drawPieBug();
-      this.drawProjectAndIteration();
-      this.drawCasePie();
-    },
+      this.drawCostPie();
+      this.drawWorkload();
+      this.drawIterationProduct();
+    }
   },
   data() {
     return {
+      load:{list:false,add:false,calcProject:false,calcSettle:false},
       isActive: true,
+      maxTableHeight:300,
       dicts:{
         xmProductPstatus:[]
-      },
-      maxTableHeight:300,
+      },//下拉选择框的所有静态数据 params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]}
     };
   },
 
@@ -350,7 +401,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['需求', '任务', '缺陷']
+          data: ['需求', '任务','用例', '缺陷']
         },
         series: [
           {
@@ -366,12 +417,20 @@ export default {
                 value: this.xmProduct.menuCnt,
                 itemStyle: {
                   normal:{
-                    color: '#99CCFF'
+                    color: '#91CC75'
                   }
                 }
               },
               {
                 value: this.xmProduct.taskCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#FAC858'
+                  }
+                }
+              },
+              {
+                value: this.xmProduct.testCases,
                 itemStyle: {
                   normal:{
                     color: '#99CCFF'
@@ -382,7 +441,7 @@ export default {
                 value: this.xmProduct.bugCnt,
                 itemStyle: {
                   normal:{
-                    color: '#99CCFF'
+                    color: '#EE6666'
                   }
                 }
               },
@@ -395,24 +454,300 @@ export default {
       // 绘制图表
       allChart.setOption(option);
     },
+    
+    drawMenuPie() {
+      let taskChart = this.$echarts.init(document.getElementById("menuChart"));
+      let option = {  
+						title: { 
+							left: 'center'
+						}, 
+						tooltip: {
+							trigger: 'item',
+							
+						}, 
+						calculable: true,
+						
+						legend:{
+              show:true,
+							bottom: 'bottom',
+							data:['打开','执行中','已完成','已关闭'],
+						},
+						graphic: {
+							type: 'text',
+							left: 'center',
+              top: '40%',
+							style: {
+							// text: '总数',
+							text:
+								'需求数'+this.xmProduct.menuCnt,
+
+							textAlign: 'center',
+							fill: '#333',
+							width: 30,
+							height: 30,
+							fontSize: 14
+							}
+						}, 
+
+						series: [
+							{
+							type: 'pie',
+              center:['50%','40%'],
+							radius: ['35%','60%'],
+							data:[{name:'打开',value:this.xmProduct.menuUnstartCnt},{name:'执行中',value:this.xmProduct.menuExecCnt},{name:'已完成',value:this.xmProduct.menuFinishCnt},{name:'已关闭',value:this.xmProduct.menuCloseCnt}],
+							emphasis: {
+								itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								shadowColor: 'rgba(0, 0, 0, 0.5)'
+								}
+							},
+
+							label: {
+								show: true, 
+								formatter:'{b}: {c}  ({d}%)'
+							},
+							}
+						] 
+      };
+
+      // 绘制图表
+      taskChart.setOption(option);
+    },
+    
+    drawTestCasePie() {
+      let taskChart = this.$echarts.init(document.getElementById("testCasePieChart"));
+      let option = {  
+						title: { 
+							left: 'center'
+						}, 
+						tooltip: {
+							trigger: 'item',
+							
+						}, 
+						calculable: true,
+						
+						legend:{
+              show:true,
+							bottom: 'bottom',
+							data:['设计中','执行中','已完成'],
+						},
+						graphic: {
+							type: 'text',
+							left: 'center',
+              top: '40%',
+							style: {
+							// text: '总数',
+							text:
+								'用例数'+this.xmProduct.testCases,
+
+							textAlign: 'center',
+							fill: '#333',
+							width: 30,
+							height: 30,
+							fontSize: 14
+							}
+						}, 
+
+						series: [
+							{
+							type: 'pie',
+              center:['50%','40%'],
+							radius: ['35%','60%'],
+							data:[{name:'设计中',value:this.xmProduct.designCases},{name:'执行中',value:this.xmProduct.execCases},{name:'已完成',value:this.xmProduct.finishCases}],
+							emphasis: {
+								itemStyle: {
+								shadowBlur: 10,
+								shadowOffsetX: 0,
+								shadowColor: 'rgba(0, 0, 0, 0.5)'
+								}
+							},
+
+							label: {
+								show: true, 
+								formatter:'{b}: {c}  ({d}%)'
+							},
+							}
+						] 
+      };
+
+      // 绘制图表
+      taskChart.setOption(option);
+    },
+    drawTask() {
+      let taskChart = this.$echarts.init(document.getElementById("taskChart"));
+      let option = {  
+						title: { 
+							left: 'center'
+						}, 
+						tooltip: {
+							trigger: 'item',
+							
+						}, 
+						calculable: true, 
+
+            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',
+                }
+              },
+							type: 'bar',
+              center:['50%','40%'],  
+
+							data:[
+                {name:'未开始',value:this.xmProduct.taskUnStartCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#FAC858'
+                  }
+                }
+                },
+                {name:'执行中',value:this.xmProduct.taskExecCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#91CC75'
+                  }
+                }},
+                {name:'已完工',value:this.xmProduct.taskFinishCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#FAC858'
+                  }
+                }},
+                {name:'已结算',value:this.xmProduct.taskSetCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#99CCFF'
+                  }
+                }},
+                {name:'已关闭',value:this.xmProduct.taskCloseCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#EE6666'
+                  }
+                }}],  
+							}
+						] 
+      };
+
+      // 绘制图表
+      taskChart.setOption(option);
+    },
     drawPieBug() {
       let bugPieChart = this.$echarts.init(document.getElementById("bugPieChart"));
       let option = {
+        title: { 
+							left: 'center'
+						}, 
         tooltip: {
           trigger: 'item',
           formatter: '{b} : {c} ({d}%)'
         },
-        legend: { 
+        legend: {   
+          show:true,
+					bottom: 'bottom',
+          data:['已激活','已确认','已解决','已关闭']
         },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+          // text: '总数',
+          text:
+            '缺陷数'+this.xmProduct.bugCnt,
+
+          textAlign: 'center',
+          fill: '#333',
+          width: 30,
+          height: 30,
+          fontSize: 14
+          }
+        }, 
         series: [
           {
-            center:['55%','40%'],
+
             type: 'pie',
-            radius: '50%',
+            center:['50%','40%'],
+            radius: ['35%','60%'],
+            label:{ 
+								show: true, 
+								formatter:'{b}: {c}  ({d}%)'
+            },
+            data: [
+              {value: this.xmProduct.activeBugs,
+                itemStyle: {
+                  normal:{
+                    color: '#FAC858'
+                  }
+                },
+                name: '已激活'},
+              {value: this.xmProduct.confirmedBugs,
+                itemStyle: {
+                  normal:{
+                    color: '#EE6666'
+                  }
+                },
+                name: '已确认'},
+              {value: this.xmProduct.resolvedBugs,
+                itemStyle: {
+                  normal:{
+                    color: '#91CC75'
+                  }
+                },
+                name: '已解决'},
+              {value: this.xmProduct.closedBugs,
+                itemStyle: {
+                  normal:{
+                    color: '#5470C6'
+                  }
+                },
+                name: '已关闭'},
+            ], 
+          }
+        ]
+      };
+
+      // 绘制图表
+      bugPieChart.setOption(option);
+    },
+    drawCostPie() {
+      let planTotalCostPie = this.$echarts.init(document.getElementById("planTotalCostPie"));
+      let option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c} ({d}%)'
+        },
+        legend: {
+          bottom: 10,
+          left: 'center',
+        },
+        series: [
+          {
+            center:['55%','40%'],//饼图位置
+            type: 'pie',
+            radius: '50%',//饼图半径大小
             label:{            //饼图图形上的文本标签
               normal:{
                 show:true,
-                position:'outer', //标签的位置:内部
+                position:'outer', //标签的位置:外部
                 textStyle : {
                   fontWeight : 100 ,
                   fontSize: document.body.clientWidth / 120, //标签字体大小
@@ -424,34 +759,27 @@ export default {
               }
             },
             data: [
-              {value: this.xmProduct.closedBugs,
+              {value: this.xmProduct.budgetNouserAt,
                 itemStyle: {
                   normal:{
-                    color: '#5470C6'
-                  }
-                },
-                name: '已关闭'},
-              {value: this.xmProduct.resolvedBugs,
-                itemStyle: {
-                  normal:{
-                    color: '#91CC75'
+                    color: '#FAC858'
                   }
                 },
-                name: '已解决'},
-              {value: this.xmProduct.activeBugs,
+                name: '非人力'},
+              {value: this.xmProduct.budgetIuserAt,
                 itemStyle: {
                   normal:{
-                    color: '#FAC858'
+                    color: '#73C0DE'
                   }
                 },
-                name: '已激活'},
-              {value: this.xmProduct.confirmedBugs,
+                name: '内部人力'},
+              {value: this.xmProduct.budgetOuserAt,
                 itemStyle: {
                   normal:{
-                    color: '#EE6666'
+                    color: '#5470C6'
                   }
                 },
-                name: '已确认'},
+                name: '外购人力'},
             ],
             emphasis: {
               itemStyle: {
@@ -465,52 +793,10 @@ export default {
       };
 
       // 绘制图表
-      bugPieChart.setOption(option);
+      planTotalCostPie.setOption(option);
     },
-    drawProjectAndIteration() {
-      let projectAndIteration = this.$echarts.init(document.getElementById("projectAndIteration"));
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          formatter: '{b} : {c}',
-          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-          },
-        },
-        xAxis: {
-          type: 'category',
-          data: ['项目数', '迭代数']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [{
-          label: {
-            normal:{
-              show: true,
-              position: 'top',
-              color:'#000000',
-            }
-          },
-          data: [this.xmProduct.projectCnt, this.xmProduct.iterationCnt],
-          type: 'bar',
-          showBackground: true,
-          itemStyle: {
-            normal:{
-              color: '#99CCFF'
-            }
-          },
-          backgroundStyle: {
-            color: '#FFFFFF'
-          }
-        }]
-      };
-
-      // 绘制图表
-      projectAndIteration.setOption(option);
-    },
-    drawCasePie() {
-      let casePie = this.$echarts.init(document.getElementById("casePie"));
+    drawWorkload() {
+      let workloadDistribution = this.$echarts.init(document.getElementById("workloadDistribution"));
       let option = {
         tooltip: {
           trigger: 'item',
@@ -520,11 +806,27 @@ export default {
           bottom: 10,
           left: 'center',
         },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+          // text: '总数',
+          text:
+            '总工作量h:'+this.xmProduct.budgetWorkload,
+
+          textAlign: 'center',
+          fill: '#333',
+          width: 30,
+          height: 30,
+          fontSize: 14
+          }
+        }, 
         series: [
           {
-            center:['55%','40%'],//饼图位置
             type: 'pie',
-            radius: '50%',//饼图半径大小
+            center:['50%','40%'],
+            radius: ['35%','60%'],
             label:{            //饼图图形上的文本标签
               normal:{
                 show:true,
@@ -539,28 +841,22 @@ export default {
                 margin:10
               }
             },
+            
             data: [
-              {value: this.xmProduct.execCases,
+              {value: this.xmProduct.budgetIuserWorkload,
                 itemStyle: {
                   normal:{
-                    color: '#73C0DE'
+                    color: '#91CC75'
                   }
                 },
-                name: '测试中用例'},
-              {value: this.xmProduct.designCases,
+                name: '内部人力'},
+              {value: this.xmProduct.budgetOuserWorkload,
                 itemStyle: {
                   normal:{
-                    color: '#FAC858'
+                    color: '#3BA272'
                   }
                 },
-                name: '设计中用例'},
-              {value: this.xmProduct.finishCases,
-                itemStyle: {
-                  normal:{
-                    color: '#91CC75'
-                  }
-                },
-                name: '完成用例'},
+                name: '外购人力'},
             ],
             emphasis: {
               itemStyle: {
@@ -574,25 +870,113 @@ export default {
       };
 
       // 绘制图表
-      casePie.setOption(option);
+      workloadDistribution.setOption(option);
+    },
+    drawIterationProduct() {
+      let iterationAndProduct = this.$echarts.init(document.getElementById("iterationAndProduct"));
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          formatter: '{b} : {c}',
+          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        xAxis: {
+          type: 'category',
+          data: ['项目数', '迭代数']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{  
+            label: {
+              normal:{
+                show: true,
+                position: 'top',
+                color:'#000000',
+              }
+            },
+          
+          data: [
+            {
+                value: this.xmProduct.projectCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#91CC75'
+                  }
+                }
+              },
+              {
+                value: this.xmProduct.iterationCnt,
+                itemStyle: {
+                  normal:{
+                    color: '#FAC858'
+                  }
+                }
+              },  
+        
+        ],
+          type: 'bar', 
+        }]
+      };
+
+      // 绘制图表
+      iterationAndProduct.setOption(option);
+    },
+
+    
+    loadTasksToXmProductState(){
+        var row=this.xmProduct;
+        var params={productId:row.id}
+        this.load.calcProject=true;
+      loadTasksToXmProductState(params).then((res1) => {
+          this.load.calcProject=false; 
+          this.load.list=true;
+          listXmProductWithState({id:row.id}).then(res=>{
+            this.load.list=false;
+            var tips = res.data.tips;
+            if(tips.isOk){
+              var xmProduct=res.data.data[0]  
+              if(this.xmProduct && this.xmProduct.id){
+                store.dispatch('setXmProduct',xmProduct)
+              } 
+              Object.assign(this.xmProduct,xmProduct)
+              this.$emit("edit-fields",xmProduct);
+            }
+            this.$notify({position:'bottom-left',showClose:true,message: tips.msg, type: tips.isOk?'success':'error'});
+          })
+          
+        }).catch( err  => this.load.calcProject=false ); 
+    },
+    loadTasksToXmMenuState(){
+        var row=this.xmProduct;
+        var params={productId:row.id}
+      loadTasksToXmMenuState(params).then((res) => {
+          this.load.calcProject=false;
+          var tips=res.data.tips; 
+          this.$notify({position:'bottom-left',showClose:true,message: tips.msg, type: tips.isOk?'success':'error'});
+        }).catch( err  => this.load.calcProject=false ); 
     },
   },
 
   mounted() {
-			
     this.$nextTick(() => {
-      
-      this.maxTableHeight=util.calcTableMaxHeight(this.$refs.pageMainRef.$el)
+      this.maxTableHeight=util.calcTableMaxHeight(this.$refs.table.$el)
     });
-			initSimpleDicts('all',['xmProductPstatus'] ).then(res=>{
-				if(res.data.tips.isOk){ 
-					this.dicts['xmProductPstatus']=res.data.data.xmProductPstatus   
-				}
-			});
+			
+			initSimpleDicts('all',['xmProductPstatus']).then(res=>{
+				this.dicts=res.data.data;
+			})
     this.drawAllBar();
+    this.drawMenuPie();
+    this.drawTask();
+    this.drawTestCasePie();
     this.drawPieBug();
-    this.drawProjectAndIteration();
-    this.drawCasePie();
+    this.drawCostPie();
+    this.drawWorkload();
+    this.drawIterationProduct();
+
   },
 
 };
@@ -619,23 +1003,19 @@ export default {
 
 .icon {
   color: #fff;
-  height: 30px;
-  width: 30px;
+  height: 30px; 
   border-radius: 15px;
-  text-align: center;
-  line-height: 30px;
+  text-align: center; 
   font-size: 20px;
   display: inline-block;
   margin-right: 5px;
 }
 
 .icon2 {
-  color: #000000;
-  height: 30px;
+  color: #000000; 
   width: 30px;
   border-radius: 15px;
-  text-align: center;
-  line-height: 30px;
+  text-align: center; 
   font-size: 20px;
   display: inline-block;
   margin-right: 5px;
@@ -709,11 +1089,4 @@ export default {
   justify-content: flex-start;
 }
 </style>
-
-<style>
-.app-container{
-  padding: 20px;
-  padding-bottom: 0;
-}
-</style>