添加任务趋势图

src/components/chart/antvChart.vue

@@ -66,10 +66,11 @@ export default {
       })
       this.chart.data(
         dv.getAllNodes().map((node) => {
+          console.log(node, 'cdiub')
           if (node) {
             return {
               name: node.data.name,
-              value: node.value,
+              value: node.data.name === '需求方向分布' ? node.value : node.data.value,
               depth: node.depth,
               x: node.x,
               y: node.y
@@ -114,6 +115,14 @@ export default {
         )
       this.chart.interaction('element-active')
       this.chart.render()
+      this.chart.off('click')// 在渲染点击事件之前先清除点击事件
+      this.chart.on('click', params => { // 点击事件
+        console.log(params, '吹牛第三次u但是那次的奶茶参差u那点事从你说的出口多少次回家看丢吧词素催')
+        this.$emit('onClick', params)
+      })
+      // this.chart.getZr().on('click', params => { // （统计页面）柱子外关闭抽屉
+      //   this.$emit('clone')
+      // })
     }
   }
 }

src/views/quality/components/belongChart.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
-    <div class="chart-contain">
-      <antv-chart v-if="chartData" :data="chartData" />
+    <div class="chart-contain" @click.stop>
+      <antv-chart v-if="chartData" :data="chartData" @onClick="getEchartsOption" @clone="$emit('clone')" />
     </div>
   </section>
 </template>
@@ -35,7 +35,11 @@ export default {
       immediate: true
     }
   },
-  methods: {}
+  methods: {
+    getEchartsOption(val) {
+      this.$emit('code', val, this.chartData)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>

src/views/quality/components/cycleStatistic.vue

@@ -41,9 +41,11 @@
               </el-tooltip>
             </template>
           </span>
-          <div v-if="item.countStr" class="repair-time">{{ item.countStr }}<span> 天</span></div>
+          <div @click.stop>
+            <div v-if="item.countStr" class="repair-time repaircur" @click="$emit('clickCount', item, chartData)">{{ item.countStr }}<span> 天</span></div>
+          </div>
           <div v-if="item.total || item.total === 0" class="repair-time" @click.stop>
-            <span class="repaircur" style="    color: #303133; font-size: 18px; margin: 25px 0;" @click="$emit('clickCount', item, chartData)">{{ item.total }}</span><span class="unit"> 个</span>
+            <span class="repaircur" style="color: #303133; font-size: 18px; margin: 25px 0;" @click="$emit('clickCount', item, chartData)">{{ item.total }}</span><span class="unit"> 个</span>
             <span v-if="item.count > 0">
               /<span class="reject">打回{{ item.count }}个</span>
             </span>
@@ -182,7 +184,7 @@ export default {
     color:#9FFF39
   }
 }
-.repaircur {
+.repaircur:hover {
   cursor: pointer;
   color: #1890FF;
 }

src/views/quality/components/drawerAll.vue

@@ -3,7 +3,7 @@
     <div v-if="Statistics.title === '任务分布图数据'" class="qz-drawer-grade">按任务等级分布</div>
     <div v-if="Statistics.title === '分布图数据'" class="qz-drawer-grade-tow">按缺陷等级分布</div>
     <div>
-      <div v-if="Statistics.title !== '模块分布数据'" :class="[Statistics.towTimeLine ? 'qz-drawer-padding' : 'qz-drawer-padding-s', 'qz-drawer-header']">
+      <div v-if="Statistics.title !== '模块分布数据' && Statistics.title !== '需求方向分布图数据'" :class="[Statistics.towTimeLine ? 'qz-drawer-padding' : 'qz-drawer-padding-s', 'qz-drawer-header']">
         <div class="qz-drawer-scll">
           <timeline :data="list" :num="defaultKey" :bgmargin="bgMargin" @update="getvalue" />
         </div>
@@ -11,23 +11,20 @@
           <timeline :data="Statistics.towTimeLine" :num="defaultKey2" :bgmargin="bgMargin" @update="getvalueTow" />
         </div>
       </div>
-      <div v-if="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据'" class="qz-drawer-H">
-        <span>{{ status }}</span>为<span>{{ type }}</span>的{{ Statistics.toType }}
-      </div>
-      <div v-if="Statistics.title === '状态停留分布图数据'" class="qz-drawer-H">
-        在<span>{{ type }}</span>状态停留时长为<span>{{ typeTow }}</span>的{{ Statistics.toType }}
-      </div>
-      <div v-if="Statistics.title === '模块分布数据'" class="qz-drawer-H" style="margin: 20px 30px 10px;">
-        模块<span>{{ Statistics.name }}</span>的缺陷
-      </div>
-      <div v-if="Statistics.title === `${Statistics.qz_holiday}的修复时长区间数据`" class="qz-drawer-H" style="margin: 20px 30px 10px;">
-        {{ Statistics.qz_holiday }}修复时间区间为<span>{{ type }}</span>的<span>{{ typeTow }}</span>级缺陷
-      </div>
+      <div v-if="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据'" class="qz-drawer-H"><span>{{ status }}</span>为<span>{{ type }}</span>的{{ Statistics.toType }}</div>
+      <div v-if="Statistics.title === '状态停留分布图数据'" class="qz-drawer-H">在<span>{{ type }}</span>状态停留时长为<span>{{ typeTow }}</span>的{{ Statistics.toType }}</div>
+      <div v-if="Statistics.title === '模块分布数据'" class="qz-drawer-H qz-margin-H"> 模块<span>{{ Statistics.name }}</span>的缺陷</div>
+      <div v-if="Statistics.title === `${Statistics.qz_holiday}的修复时长区间数据`" class="qz-drawer-H qz-margin-H">{{ Statistics.qz_holiday }}修复时间区间为<span>{{ type }}</span>的<span>{{ typeTow }}</span>级缺陷</div>
+      <div v-if="Statistics.title === `状态累积流量图数据`" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>流入到<span>{{ typeTow }}</span>的{{ Statistics.toType }}</div>
+      <div v-if="Statistics.title === `需求方向分布图数据`" class="qz-drawer-H qz-margin-H">需求方向为<span>{{ type }}</span>的需求</div>
+      <div v-if="Statistics.title === '新增趋势图数据' && Statistics.toType === '任务' || Statistics.title === '上线趋势图数据' && Statistics.toType === '任务'" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>{{ Statistics.title.substring(0, Statistics.title.length - 5 ) }}的任务</div>
+      <div v-if="Statistics.toType === '需求' && Statistics.title === '新增趋势图数据' || Statistics.title === '上线趋势图数据' || Statistics.title === 'PRD评审趋势图数据' || Statistics.title === '技术准入趋势图数据'" class="qz-drawer-H qz-margin-H"><span>{{ type }}</span>{{ Statistics.title.substring(0, Statistics.title.length - 5 ) }}的需求</div>
       <qzTable
         :data="tableData"
         :title="Statistics.title"
         :type="Statistics.title === '需求分布图数据' || Statistics.title === '任务分布图数据' || Statistics.title === '分布图数据' ? status : Statistics.toType"
         :oftype="type"
+        :mintitle="Statistics.title === '周期统计数据' || Statistics.title === '人力统计数据' ? min_title : ''"
       />
     </div>
     <el-pagination
@@ -59,6 +56,7 @@ export default {
   data() {
     return {
       list: [],
+      min_title: '', // 周期统计表头标题
       bgMargin: false,
       dataList: [],
       Statistics: {}, // title
@@ -115,11 +113,20 @@ export default {
         this.defaultKey = this.Statistics.dataIndex
         this.dataList = this.Statistics.yaxis[0].idList[this.defaultKey]
         this.getTableData(this.dataList)
-      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '去除节假日的修复时长数据') {
-        const key = this.Statistics.xaxis.indexOf(this.Statistics.label)
+      } else if (this.Statistics.title === '缺陷统计数据' || this.Statistics.title === '去除节假日的修复时长数据' || this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据') {
+        const key = this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' ? this.Statistics.xaxis.indexOf(this.Statistics.label.substr(2)) : this.Statistics.xaxis.indexOf(this.Statistics.label)
+        this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' ? this.min_title = this.Statistics.label.substr(2) : ''
         this.defaultKey = key === -1 ? 0 : key
         this.dataList = this.Statistics.idList
         this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '状态累积流量图数据') {
+        this.bgMargin = true
+        this.typeTow = this.Statistics.seriesName
+        this.defaultKey = this.Statistics.dataIndex
+        this.defaultKey2 = Number(this.Statistics.seriesIndex)
+        const statusArr = this.Statistics.statusList[this.Statistics.seriesName]
+        this.dataList = statusArr[this.defaultKey].idList
+        this.getTableData(this.dataList)
       } else if (this.Statistics.title === '状态停留分布图数据') {
         this.bgMargin = true
         this.typeTow = this.Statistics.seriesName // 停留时长
@@ -136,6 +143,18 @@ export default {
         key === 3 ? this.getIdList({ releaseReportIdList: this.Statistics.subCountList[0].idList }) : '' // 准出
       } else if (this.Statistics.title === '模块分布数据') {
         this.getTableData(this.Statistics.newData.idList)
+      } else if (this.Statistics.title === '需求方向分布图数据') {
+        this.Statistics.children.map(item => {
+          if (item.name === this.Statistics.name) {
+            this.getTableData(item.idList)
+          } else {
+            if (item.children) {
+              item.children.map(i => {
+                i.name === this.Statistics.name ? this.getTableData(i.idList) : ''
+              })
+            }
+          }
+        })
       } else if (this.Statistics.title === `${this.Statistics.qz_holiday}的修复时长区间数据`) {
         this.bgMargin = true
         this.typeTow = this.Statistics.seriesName
@@ -143,6 +162,11 @@ export default {
         this.defaultKey2 = Number(this.Statistics.seriesIndex)
         this.dataList = this.Statistics.series[this.defaultKey2].idList[this.defaultKey]
         this.getTableData(this.dataList)
+      } else if (this.Statistics.title === '新增趋势图数据' || this.Statistics.title === '上线趋势图数据' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据') {
+        this.defaultKey = this.Statistics.dataIndex
+        this.defaultKey2 = this.Statistics.seriesIndex
+        this.dataList = this.Statistics.yaxis[0].idList[this.defaultKey]
+        this.getTableData(this.dataList)
       }
     },
     getvalue(e) { // 时间轴one
@@ -161,10 +185,16 @@ export default {
       this.dataList = []
       this.currentPage = 1
       this.paging = { curIndex: 1, pageSize: 10 }
-      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || this.Statistics.title === '分布图数据') {
+      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '任务分布图数据' || this.Statistics.title === '分布图数据' || this.Statistics.title === '新增趋势图数据' || this.Statistics.title === '上线趋势图数据' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据') {
         this.dataList = this.Statistics.yaxis[0].idList[this.oneVal.value]
       } else if (this.Statistics.title === '缺陷统计数据') {
         this.dataList = this.Statistics.yaxis[this.oneVal.value].idList
+      } else if (this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据') {
+        this.min_title = this.type
+        this.dataList = this.Statistics.yaxis[this.defaultKey].idList
+      } else if (this.Statistics.title === '状态累积流量图数据') {
+        const statusArr = this.Statistics.statusList[this.typeTow]
+        this.dataList = statusArr[this.defaultKey].idList
       } else if (this.Statistics.title === '状态停留分布图数据') {
         this.dataList = this.Statistics.statusList.yaxis[this.defaultKey2].idList[this.defaultKey]
       } else if (this.Statistics.title === '报告统计数据') {
@@ -186,19 +216,20 @@ export default {
       }
     },
     async getTableData(taskIdList) { // 获取需求、任务、缺陷表格数据
+      console.log(taskIdList, 'legnth')
       if (taskIdList.length <= 0) {
         this.tableData = []
         this.total = 0
         return
       }
       const data = { ids: taskIdList, ...this.paging }
-      if (this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '需求') {
+      if (this.Statistics.title === '需求方向分布图数据' || this.Statistics.title === '需求分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '周期统计数据' || this.Statistics.title === '人力统计数据' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '需求' || this.Statistics.title === 'PRD评审趋势图数据' || this.Statistics.title === '技术准入趋势图数据') {
         const res = await getRequirement(data)
         if (res.code === 200) {
           this.tableData = res.data.list
           this.total = res.data.total
         }
-      } else if (this.Statistics.title === '任务分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '任务') {
+      } else if (this.Statistics.title === '任务分布图数据' || this.Statistics.title === '状态停留分布图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '状态累积流量图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '新增趋势图数据' && this.Statistics.toType === '任务' || this.Statistics.title === '上线趋势图数据' && this.Statistics.toType === '任务') {
         const res = await taskList(data)
         if (res.code === 200) {
           this.tableData = res.data
@@ -313,4 +344,7 @@ export default {
 >>>.el-table td, .el-table th {
     padding: 5px 0;
 }
+.qz-margin-H {
+  margin: 20px 30px 10px;
+}
 </style>

src/views/quality/components/statusChart.vue

@@ -4,8 +4,8 @@
       <div class="pile-line" :class="[pileOrLine==='pile'?'active':'']" @click="changePileOrLine('pile')">堆叠面积图</div>
       <div class="pile-line" :class="[pileOrLine==='line'?'active':'']" @click="changePileOrLine('line')">折线图</div>
     </div>
-    <div class="chart-contain">
-      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" />
+    <div class="chart-contain" @click.stop>
+      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" @onClick="getEchartsOption" @clone="$emit('clone')" />
     </div>
   </section>
 </template>
@@ -84,6 +84,9 @@ export default {
         this.setLine()
       }
     },
+    getEchartsOption(val) {
+      this.$emit('code', val, this.echartsOption, this.seriesData)
+    },
     handlerXdata(arr) {
       if (!this.seriesData[0]) return []
       return this.seriesData[0].dayTime

src/views/quality/components/tables/index.vue

@@ -1,23 +1,57 @@
 <template>
   <div style="margin: 0 30px;">
-    <el-table v-if="title === '状态停留分布图数据' || title === '需求分布图数据' || title === '任务分布图数据'" :data="data" style="width: 100%;" :height="title === '状态停留分布图数据' ? 'calc(100vh - 363px)': 'calc(100vh - 318px)'" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
+    <el-table v-if="title === '状态停留分布图数据' || title === '需求分布图数据' || title === '需求方向分布图数据' || title === '任务分布图数据' || title === '状态累积流量图数据' || title === '周期统计数据' || title === '人力统计数据' || title === '新增趋势图数据' || title === '上线趋势图数据' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据'" :data="data" style="width: 100%;" :height="title === '状态停留分布图数据' || title === '状态累积流量图数据' ? 'calc(100vh - 363px)': 'calc(100vh - 318px)'" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
       <el-table-column label="优先级" min-width="80" align="left">
         <template slot-scope="scope" style="text-align: center;">
           <span class="div_priority" :style="{background: priorityColors[scope.row.priority % priorityColors.length]}">{{ 'P'+scope.row.priority }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级' || type === '需求类型' || title === '需求分布图数据' && type === '跟版客户端' || type === 'pm'" label="需求名称" min-width="360" align="left" show-overflow-tooltip>
+      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级' || type === '需求类型' || title === '需求分布图数据' && type === '跟版客户端' || type === 'pm' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' || title === '人力统计数据' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据'" label="需求名称" :min-width="title === '周期统计数据' || title === '人力统计数据' ? '120' : '360'" align="left" show-overflow-tooltip>
         <template slot-scope="scope">
           <div class="drawer-id">{{ scope.row.requirementDisplayId }}</div>
           <div class="drawer-name" @click="jumper(scope.row, '需求')">{{ scope.row.name }}</div>
         </template>
       </el-table-column>
-      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级' || type === '开发负责人' || type === '测试负责人' || title === '任务分布图数据' && type === '跟版客户端' || type === '直接归属'" label="任务名称" min-width="360" align="left" show-overflow-tooltip>
+      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级' || type === '开发负责人' || type === '测试负责人' || title === '任务分布图数据' && type === '跟版客户端' || type === '直接归属' || title === '状态累积流量图数据' && type === '任务' || title === '新增趋势图数据' && type === '任务' || title === '上线趋势图数据' && type === '任务'" label="任务名称" min-width="360" align="left" show-overflow-tooltip>
         <template slot-scope="scope">
           <div class="drawer-id">{{ scope.row.taskIdSting }}</div>
           <div class="drawer-name" @click="jumper(scope.row, '任务')">{{ scope.row.name }}</div>
         </template>
       </el-table-column>
+      <el-table-column v-if="title === '周期统计数据' && mintitle !== ''" :label="mintitle" min-width="150" align="center">
+        <template slot="header">
+          <span>{{ mintitle }}</span>
+          <el-tooltip placement="top" popper-class="cycleStatistic-tips">
+            <i class="el-icon-info" style="cursor: pointer;color:rgba(121,132,150,0.8);margin-left:5px;" />
+            <div slot="content" class="tooltip-content">
+              <div v-if="mintitle === '产品技术侧总周期'">'产品技术侧总周期定义：需求从BRD评审通过到交付的总周期。计算条件：仅计算需求计划里 BRD评审通过时间不为空，且需求状态已变更为“已排期”且排期不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算）'</div>
+              <div v-if="mintitle === '产品侧总周期'">'产品侧总周期定义：需求从BRD评审通过到技术准入的总周期。计算条件：仅计算需求计划里BRD评审通过时间和技术准入时间均不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算、没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
+              <div v-if="mintitle === '技术侧总周期'">'技术侧总周期定义：需求从技术准入到交付的总周期。计算条件：仅计算需求计划里技术准入时间不为空，且需求状态已变更为“已排期”且需求排期不为空的需求。（没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
+              <div v-if="mintitle === '研发交付周期'">'研发交付周期定义：需求排期里开发、联调、上线类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'</div>
+              <div v-if="mintitle === '研发周期'">'研发周期定义：需求排期里开发、联调类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。计算规则：'</div>
+              <div v-if="mintitle === '测试周期'">'测试周期定义：需求排期里测试类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'</div>
+            </div>
+          </el-tooltip>
+        </template>
+        <template slot-scope="scope">{{ scope.row.pm }}</template>
+      </el-table-column>
+      <el-table-column v-if="title === '人力统计数据' && mintitle !== ''" :label="mintitle" min-width="150" align="center">
+        <template slot="header">
+          <span>{{ mintitle }}</span>
+          <el-tooltip placement="top" popper-class="cycleStatistic-tips">
+            <i class="el-icon-info" style="cursor: pointer;color:rgba(121,132,150,0.8);margin-left:5px;" />
+            <div slot="content" class="tooltip-content">
+              <div v-if="mintitle === '产品技术侧总周期'">'产品技术侧总周期定义：需求从BRD评审通过到交付的总周期。计算条件：仅计算需求计划里 BRD评审通过时间不为空，且需求状态已变更为“已排期”且排期不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算）'</div>
+              <div v-if="mintitle === '产品侧总周期'">'产品侧总周期定义：需求从BRD评审通过到技术准入的总周期。计算条件：仅计算需求计划里BRD评审通过时间和技术准入时间均不为空的需求。（没有BRD评审通过状态的业务线按需求创建时间计算、没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
+              <div v-if="mintitle === '技术侧总周期'">'技术侧总周期定义：需求从技术准入到交付的总周期。计算条件：仅计算需求计划里技术准入时间不为空，且需求状态已变更为“已排期”且需求排期不为空的需求。（没有技术准入状态的业务线按PRD评审通过时间计算）'</div>
+              <div v-if="mintitle === '研发交付周期'">'研发交付周期定义：需求排期里开发、联调、上线类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'</div>
+              <div v-if="mintitle === '研发周期'">'研发周期定义：需求排期里开发、联调类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。计算规则：'</div>
+              <div v-if="mintitle === '测试周期'">'测试周期定义：需求排期里测试类型排期的总周期。计算条件：仅计算需求状态已变更为“已排期”且需求排期不为空的需求。'</div>
+            </div>
+          </el-tooltip>
+        </template>
+        <template slot-scope="scope">{{ scope.row.pm }}</template>
+      </el-table-column>
       <el-table-column v-if="type === '开发负责人'" label="开发负责人" min-width="100" align="center">
         <template slot-scope="scope">{{ scope.row.rdObject !== null? scope.row.rdObject.name: '' }}</template>
       </el-table-column>
@@ -43,8 +77,8 @@
           <span>{{ scope.row.typeName }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级'" label="状态" prop="statusName" min-width="100" align="center" />
-      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级'" label="状态" prop="statusString" min-width="100" align="center" />
+      <el-table-column v-if="type === '需求' || type === '需求状态' || type === '需求等级' || title === '状态累积流量图数据' && type === '需求' || title === '周期统计数据' || title === '人力统计数据' || title === '新增趋势图数据' && type === '需求' || title === '上线趋势图数据' && type === '需求' || title === 'PRD评审趋势图数据' || title === '技术准入趋势图数据' || title === '需求方向分布图数据'" label="状态" prop="statusName" min-width="100" align="center" />
+      <el-table-column v-if="type === '任务' || type === '任务状态' || type === '任务等级' || title === '状态累积流量图数据' && type === '任务' || title === '新增趋势图数据' && type === '任务' || title === '上线趋势图数据' && type === '任务'" label="状态" prop="statusString" min-width="100" align="center" />
     </el-table>
 
     <el-table v-if="title === '去除节假日的修复时长区间数据' || title === '不去除节假日的修复时长区间数据'" :data="data" style="width: auto;" height="calc(100vh - 355px)" :header-cell-style="{ 'color':'rgba(74,74,74,1)','font-size':'14px','font-weight':'500' }">
@@ -152,11 +186,18 @@ export default {
     data: { type: Array, default: null },
     title: { type: String, required: true },
     type: { type: String, default: null },
-    oftype: { type: String, default: null }
+    oftype: { type: String, default: null },
+    mintitle: { type: String, default: '' }
   },
   data() {
     return {
-      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD']
+      priorityColors: ['#F56C6C', '#FF8952', '#F5E300', '#7ED321', '#61D3B8', '#69B3FF', '#BDBDBD'],
+      taskTips: [
+        '研发交付周期定义：任务排期里开发、联调、上线类型排期的总周期。计算条件：仅计算任务状态已变更为“已排期”且任务排期不为空的任务。',
+        '研发周期定义：任务排期里开发、联调类型排期的总周期。计算条件：仅计算状态已变更为“已排期”且排期不为空的任务。',
+        '测试周期定义：任务排期里测试类型排期的总周期。计算条件：仅计算状态已变更为“已排期”且排期不为空的任务。',
+        '提测等待测试时长定义：任务排期里提测排期结束日期距离测试排期开始日期的天数。计算条件：仅计算任务状态已变更为“已排期”且排期不为空，且提测、测试类型排期不为空的任务。'
+      ]
     }
   },
   methods: {
@@ -187,3 +228,10 @@ export default {
   font-size: 10px;
 }
 </style>
+<style>
+.cycleStatistic-tips {
+  width: 500px !important;
+  background:rgba(121,132,150,0.8) !important;
+  color: #FFF !important;
+}
+</style>

src/views/quality/components/tendencyChart.vue

@@ -1,7 +1,7 @@
 <template>
   <section>
-    <div class="chart-contain">
-      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" />
+    <div class="chart-contain" @click.stop>
+      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" @onClick="getEchartsOption" @clone="$emit('clone')" />
     </div>
   </section>
 </template>
@@ -43,6 +43,9 @@ export default {
     this.setChart()
   },
   methods: {
+    getEchartsOption(val) {
+      this.$emit('code', val, this.echartsOption, this.chartData)
+    },
     setChart() {
       if (!this.chartData) return
       this.echartsOption = {

src/views/quality/requireStatistics.vue

@@ -102,7 +102,7 @@
         </div>
         <div class="chart-item bottom-padding">
           <h3>状态累积流量图</h3>
-          <status-chart :chart-data="cumulativeData" />
+          <status-chart :chart-data="cumulativeData" @code="statusAccumulate" @clone="openDrawer = false" />
         </div>
       </el-header>
       <el-main class="charts-main">
@@ -116,7 +116,7 @@
           <h3 v-show="activeTab === '2'">上线趋势图</h3>
           <h3 v-show="activeTab === '3'">PRD评审趋势图</h3>
           <h3 v-show="activeTab === '5'">技术准入趋势图</h3>
-          <tendency-chart :chart-data="tendencyData" />
+          <tendency-chart :chart-data="tendencyData" @code="getTrendChart" @clone="openDrawer = false" />
         </div>
         <div class="chart-item">
           <h3>周期统计<span>（根据排期计算）</span></h3>
@@ -124,7 +124,7 @@
             <i class="el-icon-warning-outline" />
             <span>仅统计状态已变更“已排期”且排期不为空的需求</span>
           </div> -->
-          <cycle-statistic :chart-data="cycleData" />
+          <cycle-statistic :chart-data="cycleData" @clickCount="getClickItem" />
         </div>
         <div class="chart-item">
           <h3>周期分布图<span>（根据排期计算）</span></h3>
@@ -142,7 +142,7 @@
         </div>
         <div class="chart-item">
           <h3>人力统计<span>（根据排期计算）</span></h3>
-          <cycle-statistic :chart-data="peopleData" />
+          <cycle-statistic :chart-data="peopleData" @clickCount="getPeopleList" />
         </div>
         <div class="chart-item">
           <h3>人力分布图<span>（根据排期计算）</span></h3>
@@ -174,7 +174,7 @@
         </div>
         <div class="chart-item">
           <h3>需求方向分布图</h3>
-          <belong-chart :chart-data="orntDistributeData" />
+          <belong-chart :chart-data="orntDistributeData" @code="statusOrntDistributeData" @clone="openDrawer = false" />
         </div>
         <div class="chart-item">
           <h3>排期发生变更的需求（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
@@ -552,11 +552,55 @@ export default {
       const res = await getBugStatisticData(params)
       if (res.code === 200) this.bugListData = res.data
     },
+    mapData(data) {
+      const arr = []
+      data.map(item => {
+        arr.push(item.label.substr(2))
+      })
+      return arr
+    },
     getRequiredNum(value) {
       this.drawer = true
       value.typeStr = '需求'
       this.requireList = value
     },
+    getPeopleList(value, data) {
+      console.log(value, data, '点击')
+      value.title = '人力统计数据'
+      value.xaxis = this.mapData(data)
+      value.yaxis = data
+      this.requireList = value
+      this.openDrawer = true
+    },
+    statusOrntDistributeData(value, data) {
+      // console.log(value, data, '点击')
+      value.title = '需求方向分布图数据'
+      value.xaxis = ['全部']
+      this.requireList = { ...value, ...data, name: value.data.data ? value.data.data.name : value.data._origin.name }
+      this.openDrawer = true
+    },
+    getTrendChart(value, option, data) {
+      const titArr = ['新增趋势图', '上线趋势图', 'PRD评审趋势图', '占位', '技术准入趋势图']
+      value.title = titArr[Number(this.activeTab) - 1] + '数据'
+      value.toType = '需求'
+      this.requireList = { ...value, ...data }
+      this.openDrawer = true
+    },
+    getClickItem(value, data) {
+      value.title = '周期统计数据'
+      value.xaxis = this.mapData(data)
+      value.yaxis = data
+      this.requireList = value
+      this.openDrawer = true
+    },
+    statusAccumulate(value, option, data) { // 状态累积流量图
+      value.title = '状态累积流量图数据'
+      value.toType = '需求'
+      value.towTimeLine = option.legend.data
+      value.statusList = this.cumulativeData
+      this.requireList = { ...value, xaxis: data[0].dayTime }
+      this.openDrawer = true
+    },
     queryData(value) { // 需求bug 浮层数据
       value.title = '缺陷统计数据'
       value.xaxis = ['全部', 'P0', 'P1', 'P2', 'P3']

src/views/quality/taskStatistics.vue

@@ -94,7 +94,7 @@
         </div>
         <div class="chart-item bottom-padding">
           <h3>状态累积流量图</h3>
-          <status-chart :chart-data="cumulativeData" />
+          <status-chart :chart-data="cumulativeData" @code="statusCumulativeData" @clone="openDrawer = false" />
         </div>
       </el-header>
       <el-main class="charts-main">
@@ -109,7 +109,7 @@
         <div class="chart-item">
           <h3 v-show="activeTab === '1'">新增趋势图</h3>
           <h3 v-show="activeTab === '2'">上线趋势图</h3>
-          <tendency-chart :chart-data="tendencyData" type-title="任务数量" />
+          <tendency-chart :chart-data="tendencyData" type-title="任务数量" @code="getTrendChart" @clone="openDrawer = false" />
         </div>
         <div class="chart-item">
           <h3>所属需求方向分布图</h3>
@@ -569,6 +569,21 @@ export default {
       value.typeStr = '任务'
       this.requireList = value
     },
+    statusCumulativeData(value, option, data) {
+      value.title = '状态累积流量图数据'
+      value.toType = '任务'
+      value.towTimeLine = option.legend.data
+      value.statusList = this.cumulativeData
+      this.requireList = { ...value, xaxis: data[0].dayTime }
+      this.openDrawer = true
+    },
+    getTrendChart(value, option, data) {
+      const titArr = ['占位', '新增趋势图', '上线趋势图']
+      value.title = titArr[Number(this.activeTab)] + '数据'
+      value.toType = '任务'
+      this.requireList = { ...value, ...data }
+      this.openDrawer = true
+    },
     clickCountStr(value) { // 需求bug 浮层数据
       value.title = '缺陷统计数据'
       value.xaxis = ['全部', 'P0', 'P1', 'P2', 'P3']