修改测试人员任务统计页面

src/pages/Tester/components/BugLevelChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="chart-title">bug严重程度分布直方图</div>
+    <div class="chart-title">bug严重程度分布饼状图</div>
     <div id="bugLevelChart" :class="className" :style="{height:height,width:width}" />
   </div>
 </template>
@@ -10,8 +10,6 @@ import echarts from 'echarts' // echarts theme
 import resize from './mixins/resize'
 require('echarts/theme/macarons')
 
-const animationDuration = 6000
-
 export default {
   mixins: [resize],
   props: {
@@ -28,27 +26,27 @@ export default {
       default: '300px'
     },
     counts: {
-      type: Array,
+      type: Object,
       default: function () {
-        return [0, 0, 0, 0, 0]
+        return {}
       }
     }
   },
   watch: {
     counts: {
       handler (nv, ov) {
-        this.YValue = nv
+        this.datas = []
+        const names = Object.keys(nv)
+        names.forEach(name => this.datas.push({'name': name, 'value': nv[name]}))
         this.initChart()
       },
-      deep: true,
-      immediate: true
+      deep: true
     }
   },
   data () {
     return {
       chart: null,
-      XData: ['致命', '严重', '一般', '轻微', '建议'],
-      YValue: [0, 0, 0, 0, 0]
+      datas: []
     }
   },
   mounted () {
@@ -63,52 +61,39 @@ export default {
     this.chart.dispose()
     this.chart = null
   },
-  methods:{
+  methods: {
     initChart () {
       this.chart = echarts.init(document.getElementById('bugLevelChart'), 'macarons')
       this.chart.setOption({
-        // title:{
-        //   text:'众测成绩分布直方图',
-        //   padding:20
-        // },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+        legend: {
+          orient: 'vertical',
+          left: 'left'
         },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: [{
-          name: '严重程度',
-          type: 'category',
-          data: Array.from(this.XData),
-          axisTick: {
-            alignWithLabel: true
-          },
-          axisLabel: {interval: 0}
-        }],
-        yAxis: [{
-          name: '数量',
-          type: 'value',
-          axisTick: {
-            show: false
+        series: [
+          {
+            // name: '访问来源',
+            type: 'pie',    // 设置图表类型为饼图
+            radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+            // roseType: 'angle',
+            data: this.datas,
+            label: {
+              normal: {
+                position: 'inner',
+                show: true,
+                formatter: '{d}%'
+              }
+            }
           }
-        }],
-        series: [{
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: Array.from(this.YValue),
-          animationDuration
-        }]
+        ]
       })
     }
   }
 }
 </script>
+<style>
+.chart-title{
+  padding: 5px 8px 15px 8px;
+  font-weight: bold;
+  font-size: 18px;
+}
+</style>

src/pages/Tester/components/InfoCard.vue

@@ -33,7 +33,7 @@ export default {
   components: { Mallki },
   props:['info'],
   filters: {
-    statusFilter(status) {c
+    statusFilter (status) {
       const statusMap = {
         success: 'success',
         pending: 'danger'

src/pages/Tester/components/TestCaseCountChart.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <div class="chart-title">用例-缺陷数量直方图</div>
+    <div id="testCaseCountChart" :class="className" :style="{height:height,width:width}" />
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '380px'
+    },
+    counts: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    }
+  },
+  watch: {
+    counts: {
+      handler (nv, ov) {
+        if (nv) {
+          this.YValue[0] = nv['testCaseCount']
+          this.YValue[1] = nv['validTestCaseCount']
+          this.YValue[2] = nv['invalidTestCaseCount']
+          this.YValue[3] = nv['noExamedTestCaseCount']
+          this.YValue[4] = nv['defectCount']
+        }
+        this.initChart()
+      },
+      deep: true
+    }
+  },
+  data () {
+    return {
+      chart: null,
+      XData: ['用例总数', '有效用例数', '无效用例数', '待审用例数', '缺陷总数'],
+      YValue: [0, 0, 0, 0, 0]
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods:{
+    initChart() {
+      this.chart = echarts.init(document.getElementById('testCaseCountChart'), 'macarons')
+      this.chart.setOption({
+        // title:{
+        //   text:'众测成绩分布直方图',
+        //   padding:20
+        // },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          top: 10,
+          left: '2%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [{
+          name: '严重程度',
+          type: 'category',
+          data: Array.from(this.XData),
+          axisTick: {
+            alignWithLabel: true
+          },
+          axisLabel: {interval: 0}
+        }],
+        yAxis: [{
+          name: '数量',
+          type: 'value',
+          axisTick: {
+            show: false
+          }
+        }],
+        series: [{
+          type: 'bar',
+          stack: 'vistors',
+          barWidth: '60%',
+          data: Array.from(this.YValue),
+          animationDuration
+        }]
+      })
+    }
+  }
+}
+</script>

src/pages/Tester/testertask.vue

@@ -4,11 +4,13 @@
     <el-row :gutter="20" class="people-main">
       <el-col :xs="24" :sm="24" :lg="16" style="min-height: 100%">
         <el-row :gutter="20" style="background:transparent;">
-          <el-col :xs="24" :sm="24" :lg="10" style="display: flex;flex-direction: column">
+          <el-col :xs="24" :sm="24" :lg="9" style="display: flex;flex-direction: column">
             <info-card style="margin-bottom: 20px" :info="testerTaskInfo.tester" class="info-card"/>
           </el-col>
-          <el-col :xs="24" :sm="24" :lg="14">
-            <word-cloud :info="labels" v-if="labels&&labels.length" class="word-cloud"/>
+          <el-col :xs="24" :sm="24" :lg="15">
+            <div class="chart-wrapper card-shadow" style="height: 100%; ">
+              <test-case-count-chart :counts="testerTaskInfo.testCaseCountInfo"/>
+            </div>
           </el-col>
         </el-row>
 
@@ -20,9 +22,7 @@
           </el-col>
           <el-col :xs="24" :sm="24" :lg="15" style="height: 100%">
             <div class="chart-wrapper card-shadow scroll-bar-component" style="height: 98%">
-              <bug-level-chart
-                :counts="testerTaskInfo.defectSeriCounts"
-                />
+              <bug-level-chart :counts="testerTaskInfo.defectSeriCounts"/>
             </div>
           </el-col>
         </el-row>
@@ -40,6 +40,7 @@
 <script>
   import RaddarChart from './components/RaddarChart'
   import BugLevelChart from './components/BugLevelChart'
+  import TestCaseCountChart from './components/TestCaseCountChart'
   import TodoList from './components/TodoList'
   import BoxCard from './components/BoxCard'
   import InfoCard from './components/InfoCard'
@@ -59,15 +60,18 @@
       BoxCard,
       TimeLine,
       InfoCard,
-      WordCloud
+      WordCloud,
+      TestCaseCountChart
     },
-    data() {
+    data () {
       return {
-        testerTaskInfo: {},
+        testerTaskInfo: {
+          tester: {}
+        },
         bugList: [],
         userRadar: {},
-        timeLineList:[],
-        labels:[]
+        timeLineList: [],
+        labels: []
       }
     },
     methods: {
@@ -79,7 +83,7 @@
           notify('error', '获取测试人员数据失败：系统异常')
         })
       },
-      handlePeopleData() {
+      handlePeopleData () {
         // const data = this.getPeopleData;
         const data = {}
         this.topData = {
@@ -111,8 +115,8 @@
         this.labels = labelArr || [];
       }
     },
-    mounted() {
-      this.getData()
+    mounted () {
+      this.$nextTick(() => this.getData())
     }
   }
 </script>