状态累计图

src/api/statisticsApi/requireStatistics.js

@@ -1,6 +1,22 @@
 import request from '@/utils/request'
 import { TeamManagement } from '@/apiConfig/api'
 
+// 需求累计数据
+export function getSummary(data) {
+  return request({
+    url: TeamManagement + '/requirement/getSummary',
+    method: 'post',
+    data
+  })
+}
+// 需求状态累计流图
+export function CumulativeFlowDiagram(data) {
+  return request({
+    url: TeamManagement + '/requirement/CumulativeFlowDiagram',
+    method: 'post',
+    data
+  })
+}
 // 需求方向分布图
 export function getOrntDistributeData(data) {
   return request({
@@ -25,3 +41,11 @@ export function getStatusStayData(data) {
     data
   })
 }
+// 排期发生变更的需求
+export function getReqUnlockData(data) {
+  return request({
+    url: TeamManagement + '/requirement/getReqUnlockData',
+    method: 'post',
+    data
+  })
+}

src/views/quality/components/statusChart.vue

@@ -16,7 +16,12 @@ export default {
   props: {
     id: {
       type: String,
-      default: 'statusChart',
+      default: 'status-chart',
+      required: false
+    },
+    chartData: {
+      type: Object,
+      default: () => null,
       required: false
     }
   },
@@ -26,6 +31,15 @@ export default {
       pileOrLine: 'pile' // 图的类型，pile：堆叠面积图，line：折线图
     }
   },
+  watch: {
+    chartData: {
+      handler(newV) {
+        this.changePileOrLine(this.pileOrLine)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   mounted() {
     this.changePileOrLine(this.pileOrLine)
   },

src/views/quality/components/updateTable.vue

@@ -0,0 +1,8 @@
+<template>
+  <section />
+</template>
+<script>
+export default {
+
+}
+</script>

src/views/quality/requireStatistics.vue

@@ -75,6 +75,7 @@
                 <img v-show="index === 0" src="../../../src/assets/defect_images/add.png">
                 <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
                 <img v-show="index === 2" src="../../../src/assets/defect_images/reopen.png">
+                <img v-show="index === 3" src="../../../src/assets/defect_images/reopen.png">
               </div>
               <span>{{ item.label }}</span>
               <el-tooltip v-if="index === 0" class="item" effect="dark" content="统计时间区间内，新增的缺陷的数量" placement="top-start">
@@ -99,7 +100,7 @@
     <el-main class="charts-main">
       <div class="chart-item">
         <h3>状态累积流量图</h3>
-        <status-chart />
+        <status-chart :chart-data="cumulativeData" />
       </div>
       <el-tabs v-model="activeTab" class="tab-change">
         <el-tab-pane name="1">
@@ -154,11 +155,12 @@ moment.locale('zh-cn')
 import { settingQueryBizRqmtOrntList } from '@/api/requirement'
 import { teamQueryTeamInfoList } from '@/api/configure'
 import {
-  getSummary,
   getBugCountTrend,
   getRepairTimeSumData
 } from '@/api/defectStatistics'
 import {
+  getSummary,
+  CumulativeFlowDiagram,
   getDistributeData,
   getStatusStayData,
   getOrntDistributeData
@@ -193,6 +195,7 @@ export default {
       moduleList: [], // 需求方向列表
       Summary: [], // 顶部数据
       activeTab: '1', // tab标签
+      cumulativeData: null, // 需求状态累计流数据
       tendencyData: null, // 趋势图数据
       cycleData: [], // 周期统计数据
       distributeStatus: 1, // 需求分布图需求状态
@@ -236,6 +239,7 @@ export default {
   methods: {
     onSubmit() {
       this.getSummary()
+      this.getCumulativeFlowDiagram()
       this.defectTrendTimeChange()
       this.getCycleData()
       this.getOrntDistributeData()
@@ -288,6 +292,7 @@ export default {
     async getSummary() { // 获取顶部数据
       const res = await getSummary(this.globalParams)
       if (res.code === 200) this.Summary = res.data || []
+      console.log(res.data)
     },
     async defectTrendTimeChange() { // 趋势图日期变动
       const rqmtOrntIds = this.chartForm.rqmtOrntIds
@@ -302,6 +307,26 @@ export default {
       const res = await getBugCountTrend(params)
       if (res.code === 200) this.tendencyData = res.data
     },
+    async getCumulativeFlowDiagram() { // 需求状态累计流图
+      let timeType = 0
+      switch (this.dateType) {
+        case 'week':
+          timeType = 1
+          break
+        case 'month':
+          timeType = 2
+          break
+        case 'year':
+          timeType = 3
+          break
+      }
+      const params = {
+        ...this.globalParams,
+        timeType: timeType
+      }
+      const res = await CumulativeFlowDiagram(params)
+      if (res.code === 200) this.cumulativeData = res.data
+    },
     async getCycleData() { // 周期统计数据
       const params = {
         ...this.globalParams,
@@ -383,17 +408,18 @@ export default {
   }
 }
 .data-total {
-  display: flex;
-  width: 94%;
+  display: grid;
+  width: 100%;
   margin: auto;
-  justify-content: space-between;
+  grid-template-columns: repeat(4,22%);
+  grid-gap: 4%;
   padding-bottom: 40px;
   ul,li{
     padding:0;margin:0;list-style:none
   }
   .data-item {
     position: relative;
-    width: 27%;
+    width: 100%;
     border-radius: 8px;
     article {
       display: flex;
@@ -463,6 +489,12 @@ export default {
     background-position: 50% 50%;
     box-shadow:0px 50px 24px -25px rgba(255,136,134,0.30);
   }
+  .item4 {
+    background-image: url('../../../src/assets/defect_images/数据4.png');
+    background-size: 100% 100%;
+    background-position: 50% 50%;
+    box-shadow:0px 50px 24px -25px rgba(83,97,255,0.30);
+  }
 }
 .charts-main {
   padding-bottom: 20px;