缺陷统计修改

src/views/quality/components/childCharts.vue

@@ -1,9 +1,12 @@
 <template>
   <click-hidden id="pie-bar-child-chart" :show.sync="visible">
-    <div class="child-chart" />
+    <div class="child-chart">
+      <normal-echart v-if="childOption" :chart-id="'child-chart'" :option="childOption" />
+    </div>
   </click-hidden>
 </template>
 <script>
+import { getDistributeData } from '@/api/defectStatistics'
 import normalEchart from '@/components/chart/normalEchart'
 import clickHidden from '@/components/dialog/clickHidden'
 export default {
@@ -18,16 +21,25 @@ export default {
       type: Boolean,
       default: false,
       required: true
+    },
+    params: {
+      type: Object,
+      default: () => null,
+      required: false
     }
   },
   data() {
     return {
-      visible: this.show
+      visible: this.show,
+      childOption: null, // 图表设置项
+      childChartData: null // 图表显示数据
     }
   },
   watch: {
     chartType: {
-
+      handler(newV) {
+        this.changeBarOrPie(newV)
+      }
     },
     show: {
       handler(newV) {
@@ -40,10 +52,60 @@ export default {
         this.$emit('update:show', newV)
       },
       immediate: true
+    },
+    params: {
+      handler(newV) {
+        if (!newV) return
+        this.params = newV
+        this.getChartData()
+      },
+      immediate: true,
+      deep: true
     }
   },
-  mounted() {
-
+  methods: {
+    async getChartData() {
+      const res = await getDistributeData(this.params)
+      this.childChartData = res.data || []
+      this.changeBarOrPie(this.chartType)
+    },
+    changeBarOrPie(type) { // 饼图柱状图切换
+      if (!this.childChartData) return
+      if (type === 'bar') {
+        this.childOption = {
+          color: ['#3AA1FF'],
+          tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
+          grid: { left: '5%', right: '5%', top: '10%', bottom: '0%', containLabel: true },
+          xAxis: [{ type: 'category', data: this.childChartData.xaxis, axisLabel: { interval: 0, rotate: 40 }, axisTick: { alignWithLabel: true }}],
+          yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
+          series: [
+            {
+              name: '缺陷数量', type: 'bar', barWidth: '20px', data: this.childChartData.yaxis[0] && this.childChartData.yaxis[0].data || [],
+              itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
+            }
+          ]
+        }
+      } else {
+        const newArr = this.childChartData.xaxis.map((item, index) => {
+          return {
+            value: this.childChartData.yaxis[0] && this.childChartData.yaxis[0].data[index] || null,
+            name: item
+          }
+        })
+        this.childOption = {
+          color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'],
+          grid: { left: '0', right: '0', top: '3%', bottom: '0' },
+          tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
+          legend: { orient: 'vertical', left: 'right', top: 'center', data: this.childChartData.xaxis },
+          series: [
+            {
+              name: '缺陷数量', type: 'pie', radius: ['45%', '60%'], right: '30%', label: { position: 'outer', alignTo: 'edge', margin: 20 }, data: newArr,
+              itemStyle: { normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: { show: true }}}
+            }
+          ]
+        }
+      }
+    }
   }
 }
 </script>
@@ -55,5 +117,7 @@ export default {
   width: 45%;
   right: 0;
   top: 0;
+  border: 1px solid #333333;
+  background-color: #ffffff;
 }
 </style>

src/views/quality/defectStatistics.vue

@@ -126,13 +126,13 @@
           </el-col>
           <el-col :span="4" :offset="16" class="col-flex-end">
             <div class="bar-pie" :class="[barOrPie==='bar'?'active':'']" @click="changeBarOrPie('bar')">柱状图</div>
-            <div class="bar-pie" :class="[barOrPie==='pie'?'active':'']" @click="changeBarOrPie('pie')">环状图</div>
+            <div class="bar-pie" :class="[barOrPie==='pie'?'active':'']" @click="changeBarOrPie('pie')">饼图</div>
           </el-col>
         </el-row>
         <el-row type="flex" align="middle">
           <el-col :span="24">
             <div class="chart-contain">
-              <child-chart :show.sync="showChild" />
+              <child-chart :show.sync="showChild" :chart-type="barOrPie" :params="childParams" />
               <normal-echart v-if="echartsOption1" :chart-id="'chartFirst'" :option="echartsOption1" @onClick="echartClick" />
             </div>
           </el-col>
@@ -199,28 +199,42 @@
           <el-table-column prop="name" label="模块" />
           <el-table-column v-if="activeTab=== 1" prop="repair" label="新增" sortable="custom" show-overflow-tooltip>
             <template slot-scope="scope">
-              <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>/
+              <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>
               <span class="repair-span">{{ scope.row.newData.detail[0].label }}:{{ scope.row.newData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.newData.detail[1].label }}:{{ scope.row.newData.detail[1].total }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="isRepair" label="累计修复" sortable="custom">
+          <!-- <el-table-column prop="isRepair" label="待修复/Reopen" sortable="custom">
             <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>/
+              <span class="table-repair-item2 repair-span2">{{ scope.row.newAndReopenData.total }}</span>
+              <span class="repair-span">{{ scope.row.newAndReopenData.detail[0].label }}:{{ scope.row.newAndReopenData.detail[0].total }}</span>
+              <span class="repair-span">{{ scope.row.newAndReopenData.detail[1].label }}:{{ scope.row.newAndReopenData.detail[1].total }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="isRepair" label="待测试" sortable="custom">
+            <template slot-scope="scope">
+              <span class="table-repair-item2 repair-span2">{{ scope.row.waitTestData.total }}</span>
+              <span class="repair-span">{{ scope.row.waitTestData.detail[0].label }}:{{ scope.row.waitTestData.detail[0].total }}</span>
+              <span class="repair-span">{{ scope.row.waitTestData.detail[1].label }}:{{ scope.row.waitTestData.detail[1].total }}</span>
+            </template>
+          </el-table-column> -->
+          <el-table-column prop="isRepair" label="已完成" sortable="custom">
+            <template slot-scope="scope">
+              <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>
               <span class="repair-span">{{ scope.row.repairData.detail[0].label }}:{{ scope.row.repairData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.repairData.detail[1].label }}:{{ scope.row.repairData.detail[1].total }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="time" label="平均修复时长">
             <template slot-scope="scope">
-              <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>/
+              <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="time" label="平均修复时长(去除节假日)">
             <template slot-scope="scope">
-              <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>/
+              <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
             </template>
@@ -243,28 +257,42 @@
           <el-table-column prop="name" label="姓名" />
           <el-table-column v-if="activeTab=== 1" prop="repair" label="新增" sortable="custom" show-overflow-tooltip>
             <template slot-scope="scope">
-              <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>/
+              <span class="table-repair-item1 repair-span">{{ scope.row.newData.total }}</span>
               <span class="repair-span">{{ scope.row.newData.detail[0].label }}:{{ scope.row.newData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.newData.detail[1].label }}:{{ scope.row.newData.detail[1].total }}</span>
             </template>
           </el-table-column>
-          <el-table-column prop="isRepair" label="累计修复" sortable="custom">
+          <el-table-column prop="isRepair" label="待修复/Reopen" sortable="custom">
+            <template slot-scope="scope">
+              <span class="table-repair-item2 repair-span2">{{ scope.row.newAndReopenData.total }}</span>
+              <span class="repair-span">{{ scope.row.newAndReopenData.detail[0].label }}:{{ scope.row.newAndReopenData.detail[0].total }}</span>
+              <span class="repair-span">{{ scope.row.newAndReopenData.detail[1].label }}:{{ scope.row.newAndReopenData.detail[1].total }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="isRepair" label="待测试" sortable="custom">
+            <template slot-scope="scope">
+              <span class="table-repair-item2 repair-span2">{{ scope.row.waitTestData.total }}</span>
+              <span class="repair-span">{{ scope.row.waitTestData.detail[0].label }}:{{ scope.row.waitTestData.detail[0].total }}</span>
+              <span class="repair-span">{{ scope.row.waitTestData.detail[1].label }}:{{ scope.row.waitTestData.detail[1].total }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="isRepair" label="已完成" sortable="custom">
             <template slot-scope="scope">
-              <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>/
+              <span class="table-repair-item2 repair-span2">{{ scope.row.repairData.total }}</span>
               <span class="repair-span">{{ scope.row.repairData.detail[0].label }}:{{ scope.row.repairData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.repairData.detail[1].label }}:{{ scope.row.repairData.detail[1].total }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="time" label="平均修复时长">
             <template slot-scope="scope">
-              <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>/
+              <span class="table-repair-item3 repair-span">{{ scope.row.repairTimeAvgData.total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="time" label="平均修复时长(去除节假日)">
             <template slot-scope="scope">
-              <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>/
+              <span class="table-repair-item4 repair-span">{{ scope.row.repairTimeAvgPurgeNhData.total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[0].label }}:{{ scope.row.repairTimeAvgData.detail[0].total }}</span>
               <span class="repair-span">{{ scope.row.repairTimeAvgPurgeNhData.detail[1].label }}:{{ scope.row.repairTimeAvgData.detail[1].total }}</span>
             </template>
@@ -333,13 +361,15 @@ export default {
       onHoliday: [], // 有假期数据
       offHoliday: [], // 无假期数据
       chart1Data: null, // 图表1数据
+      chartChildData: null, // 图表1二级子分类数据
       chart2Data: null, // 图表2数据
       chart3Data: null, // 缺陷趋势图数据
       moduleSort: 2, // 模块数据排序
       moduleData: [], // 模块数据
       memberSort: 2, // 责任人数据排序
       memberData: [], // 责任人数据
-      showChild: false // 显示二级子图表
+      showChild: false, // 显示二级子图表
+      childParams: null // 二级子图表的筛选项
     }
   },
   created() {
@@ -470,7 +500,12 @@ export default {
         moduleIds: moduleIds && moduleIds.length > 0 ? moduleIds : null
       }
       const res = await getDistributeData(params)
-      this.chart1Data = res.data || []
+      this.chart1Data = res.data || []// 一级主数据
+      if (this.defectStatus === 7) {
+        params.distributeType = 9
+        const resChild = await getDistributeData(params)
+        this.chartChildData = resChild.data || []// 二级子分类数据
+      }
       this.changeBarOrPie(this.barOrPie)
     },
     changeBarOrPie(type) { // 饼图柱状图切换
@@ -482,12 +517,10 @@ export default {
           grid: { left: '0', right: '0', top: '5%', bottom: '0', containLabel: true },
           xAxis: [{ type: 'category', data: this.chart1Data.xaxis, axisLabel: { interval: 0, rotate: 40 }, axisTick: { alignWithLabel: true }}],
           yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
-          series: [
-            {
-              name: '缺陷数量', type: 'bar', barWidth: '20px', data: this.chart1Data.yaxis[0] && this.chart1Data.yaxis[0].data || [],
-              itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
-            }
-          ]
+          series: [{
+            name: '缺陷数量', type: 'bar', barWidth: '20px', data: this.chart1Data.yaxis[0] && this.chart1Data.yaxis[0].data || [],
+            itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
+          }]
         }
       } else {
         const newArr = this.chart1Data.xaxis.map((item, index) => {
@@ -501,20 +534,36 @@ export default {
           grid: { left: '0', right: '0', top: '3%', bottom: '0' },
           tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
           legend: { orient: 'vertical', left: 'right', top: 'center', data: this.chart1Data.xaxis },
-          series: [
-            {
-              name: '缺陷数量', type: 'pie', radius: ['45%', '60%'], right: '30%', label: { position: 'outer', alignTo: 'edge', margin: 20 }, data: newArr,
-              itemStyle: { normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: { show: true }}}
+          series: [{
+            name: '缺陷数量', type: 'pie', radius: ['45%', '60%'], right: '30%', label: { position: 'outer', alignTo: 'edge', margin: 20 }, data: newArr,
+            itemStyle: { normal: { label: { show: true, formatter: '{b} : {c} ({d}%)' }, labelLine: { show: true }}}
+          }]
+        }
+        if (this.defectStatus === 7) { // 如果是缺陷类型，则增加二级饼图
+          const childArr = this.chart1Data.xaxis.map((item, index) => {
+            return {
+              value: this.chartChildData.yaxis[0] && this.chartChildData.yaxis[0].data[index] || null,
+              name: item
             }
-            // { name: '缺陷数量', type: 'pie', radius: ['0', '44%'], right: '30%', label: { position: 'inner' }, data: newArr, animation: false }
-          ]
+          })
+          this.echartsOption1.series.push({ name: '缺陷数量', type: 'pie', radius: ['0', '44%'], right: '30%', label: { position: 'inner' }, data: childArr, animation: false })
         }
       }
     },
     echartClick(params) { // 图表1点击事件
+      if (this.defectStatus !== 7 || this.barOrPie === 'pie') return // 只有状态是缺陷类型的时候才显示二级
       this.showChild = true
-      // console.log(this.defectStatus)
-      // console.log(params)
+      const moduleIds = this.defectForm.moduleIds
+      this.childParams = {
+        startTime: this.stratAndEnd[0] || null,
+        endTime: this.stratAndEnd[1] || null,
+        bizId: Number(localStorage.getItem('bizId')),
+        teamIds: this.defectForm.team || null,
+        type: this.activeTab,
+        distributeType: 8,
+        moduleIds: moduleIds && moduleIds.length > 0 ? moduleIds : null,
+        bugTypeName: params.name
+      }
     },
     async getSumData() { // 头部数据
       const moduleIds = this.defectForm.moduleIds
@@ -572,6 +621,7 @@ export default {
     },
     changeBarOrLine(type) { // 柱状图折线图切换
       this.barOrLine = type
+      if (!this.chart2Data.yaxis) return
       const newArr = this.chart2Data.yaxis.filter(item => { return item.name !== '全部' })
       const colorArr = ['#3AA1FF', '#4ECB73', '#975FE5', '#FBD437', '#13C2C2']
       if (type === 'line') {
@@ -587,9 +637,7 @@ export default {
                 total = total + item.value
                 backString = backString + `<span style="color: ${colorArr[index] || ''}">${item.seriesName}</span>：${item.value}%</br>`
               })
-              total = total.toFixed(2)
-              backString = backString + `<span style="color: #F04864">总和</span>：${total}%`
-              return backString
+              return backString + `<span style="color: #F04864">总和</span>：${total.toFixed(2)}%`
             }
           },
           legend: { data: newArr.map(item => { return item.name }), left: 10, top: 0 },
@@ -611,9 +659,7 @@ export default {
                 total = total + item.value
                 backString = backString + `<span style="color: ${colorArr[index] || ''}">${item.seriesName}</span>：${item.value}%</br>`
               })
-              total = total.toFixed(2)
-              backString = backString + `<span style="color: #F04864">总和</span>：${total}%`
-              return backString
+              return backString + `<span style="color: #F04864">总和</span>：${total.toFixed(2)}%`
             }
           },
           legend: { data: newArr.map(item => { return item.name }), left: 0, top: 0 },
@@ -912,12 +958,15 @@ export default {
       }
       .table-repair-item1,.table-repair-item4 {
         color:#4089FF;
+        margin-right: 5px;
       }
       .table-repair-item2 {
-        color:#47D4D5
+        color:#47D4D5;
+        margin-right: 5px;
       }
       .table-repair-item3 {
-        color:#FD978A
+        color:#FD978A;
+        margin-right: 5px;
       }
     }
     .chart-contain {