统计fix bug

src/views/quality/components/belongRequirementChart.vue

@@ -2,7 +2,10 @@
   <section>
     <div class="control">
       <el-row type="flex" align="middle">
-        <el-col :span="4" :offset="20" class="col-flex-end">
+        <el-col :span="6">
+          <div class="total">需求总数 <span>{{ total }}</span> 个</div>
+        </el-col>
+        <el-col :span="10" :offset="8" 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>
         </el-col>
@@ -37,12 +40,16 @@ export default {
   data() {
     return {
       echartsOption: null,
-      barOrPie: 'bar' // 柱状图or饼图
+      barOrPie: 'bar', // 柱状图or饼图
+      total: 0
     }
   },
   watch: {
     chartData: {
       handler(newV) {
+        if (newV) {
+          this.total = this.chartData.yaxis[0].data.reduce((prev, curr) => prev + curr)
+        }
         this.changeBarOrPie(this.barOrPie)
       },
       deep: true,
@@ -64,7 +71,7 @@ export default {
           color: ['#3AA1FF'],
           tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
           grid: { left: '0', right: '0', top: '10%', bottom: '0', containLabel: true },
-          xAxis: [{ type: 'category', data: this.chartData.xaxis, axisLabel: { interval: 0, rotate: 0 }, axisTick: { alignWithLabel: true }}],
+          xAxis: [{ type: 'category', data: this.chartData.xaxis, axisLabel: { interval: 0, rotate: 15 }, axisTick: { alignWithLabel: true }}],
           yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
           series: [{
             name: '数量', type: 'bar', barWidth: '20px', data: this.chartData.yaxis[0] && this.chartData.yaxis[0].data || [],
@@ -105,9 +112,14 @@ export default {
   margin: auto;
   margin-top: 20px;
 }
+.col-flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
 .bar-pie {
   font-size: 14px;
   width: 40%;
+  max-width: 100px;
   display: inline-block;
   padding: 6px 10px;
   margin-left: 5%;
@@ -121,4 +133,10 @@ export default {
   color: #ffffff;
   background: #50A6FF;
 }
+.total {
+  color: #333333;
+  span {
+    color: #61AFFF;
+  }
+}
 </style>

src/views/quality/components/bugList.vue

@@ -3,7 +3,7 @@
     <div class="repair-list">
       <div v-for="(item, index) in chartData.bugCount" :key="'time'+index" class="repair-item">
         <span>{{ item.label }}</span>
-        <div class="repair-time">{{ item.countStr }}个</div>
+        <div class="repair-time">{{ item.countStr }}<span> 个</span></div>
         <div v-show="Number(item.chainRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.chainRatio }}%</span></div>
         <div v-show="Number(item.chainRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.chainRatio.substring(1,item.chainRatio.length) }}%</span></div>
         <div v-show="item.chainRatio === '--'" class="repair-up">环比：<span>{{ item.chainRatio }}%</span></div>
@@ -12,7 +12,7 @@
     <div class="repair-list">
       <div v-for="(item, index) in chartData.averageBugCount" :key="'time'+index" class="repair-item">
         <span>{{ item.label }}</span>
-        <div class="repair-time">{{ item.countStr }}个</div>
+        <div class="repair-time">{{ item.countStr }}<span> 个</span></div>
         <div v-show="Number(item.chainRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.chainRatio }}%</span></div>
         <div v-show="Number(item.chainRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.chainRatio.substring(1,item.chainRatio.length) }}%</span></div>
         <div v-show="item.chainRatio === '--'" class="repair-up">环比：<span>{{ item.chainRatio }}%</span></div>
@@ -21,7 +21,7 @@
     <div class="repair-list">
       <div v-for="(item, index) in chartData.averageBugRepairTime" :key="'time'+index" class="repair-item">
         <span>{{ item.label }}</span>
-        <div class="repair-time">{{ item.countStr }}个</div>
+        <div class="repair-time">{{ item.countStr }}<span> h</span></div>
         <div v-show="Number(item.chainRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.chainRatio }}%</span></div>
         <div v-show="Number(item.chainRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.chainRatio.substring(1,item.chainRatio.length) }}%</span></div>
         <div v-show="item.chainRatio === '--'" class="repair-up">环比：<span>{{ item.chainRatio }}%</span></div>
@@ -72,6 +72,9 @@ export default {
       color: #303133;
       font-size: 18px;
       margin:25px 0;
+      span {
+        font-size: 12px;
+      }
     }
   }
   .repair-up i , .repair-up span{

src/views/quality/components/cycleStatistic.vue

@@ -35,8 +35,13 @@
               </el-tooltip>
             </template>
           </span>
-          <div v-if="item.countStr" class="repair-time">{{ item.countStr }}天</div>
-          <div v-if="item.total || item.total === 0" class="repair-time">{{ item.total }}个</div>
+          <div v-if="item.countStr" class="repair-time">{{ item.countStr }}<span> 天</span></div>
+          <div v-if="item.total || item.total === 0" class="repair-time">
+            {{ item.total }}<span class="unit"> 个</span>
+            <span v-if="item.count > 0">
+              /<span class="reject">打回{{ item.count }}个</span>
+            </span>
+          </div>
           <div v-show="Number(item[childData])>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item[childData] }}%</span></div>
           <div v-show="Number(item[childData])<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item[childData].substring(1,item[childData].length) }}%</span></div>
           <div v-show="item[childData] === '--'" class="repair-up">环比：<span>{{ item[childData] }}%</span></div>
@@ -97,6 +102,12 @@ export default {
       color: #303133;
       font-size: 18px;
       margin:25px 0;
+      span {
+        font-size: 12px;
+      }
+      .reject {
+        color:#F01A1A;
+      }
     }
     .repair-item-point {
       position: absolute;

src/views/quality/components/distributionChart.vue

@@ -13,7 +13,7 @@
             />
           </el-select>
         </el-col>
-        <el-col :span="4" :offset="16" class="col-flex-end">
+        <el-col :span="10" :offset="10" 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>
         </el-col>
@@ -140,9 +140,14 @@ export default {
   margin: auto;
   margin-top: 20px;
 }
+.col-flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
 .bar-pie {
   font-size: 14px;
   width: 40%;
+  max-width: 100px;
   display: inline-block;
   padding: 6px 10px;
   margin-left: 5%;

src/views/quality/components/statusChart.vue

@@ -87,7 +87,7 @@ export default {
     handlerXdata(arr) {
       if (!this.seriesData[0]) return []
       let newArr = []
-      if (this.seriesData[0].dayTime <= 12) {
+      if (this.seriesData[0].dayTime.length <= 12) {
         newArr = this.seriesData[0].dayTime
       } else {
         const gap = Math.floor(this.seriesData[0].dayTime.length / 12)
@@ -112,7 +112,7 @@ export default {
           data: this.seriesData.map(item => item.name),
           left: '0%'
         },
-        grid: { left: '0%', right: '0%', bottom: '0%', top: '10%', containLabel: true },
+        grid: { left: '0%', right: '5%', bottom: '5%', top: '10%', containLabel: true },
         xAxis: [
           {
             type: 'category',
@@ -139,7 +139,7 @@ export default {
           data: this.seriesData.map(item => item.name),
           left: '0%'
         },
-        grid: { left: '0%', right: '0%', bottom: '0%', top: '10%', containLabel: true },
+        grid: { left: '0%', right: '5%', bottom: '5%', top: '10%', containLabel: true },
         xAxis: [
           {
             type: 'category',

src/views/quality/components/statusStayChart.vue

@@ -50,15 +50,15 @@ export default {
             let backString = ``
             params.map((item, index) => {
               total = total + item.value
-              backString = backString + `<span style="color: ${colorArr[index] || ''}">${item.seriesName}</span>：${item.value}%</br>`
+              backString = backString + `<span style="color: ${colorArr[index] || ''}">${item.seriesName}</span>：${item.value}</br>个`
             })
-            return backString + `<span style="color: #F04864">总和</span>：${total.toFixed(2)}%`
+            return backString + `<span style="color: #F04864">总和</span>：${total.toFixed(2)}个`
           }
         },
         legend: { data: newArr.map(item => { return item.name }), left: 0, top: 0 },
         grid: { left: '0', right: '0', top: '8%', bottom: '0', containLabel: true },
         xAxis: { type: 'category', data: this.chartData.xaxis, axisTick: { alignWithLabel: true }},
-        yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}, axisLabel: { formatter: '{value} %' }},
+        yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}, axisLabel: { formatter: '{value}个' }},
         series: newArr.map(item => ({ ...item, type: 'bar', stack: '总和', barWidth: '20px' }))
       }
     }

src/views/quality/requireStatistics.vue

@@ -22,6 +22,8 @@
             @change="dateType = ''"
           />
         </el-form-item>
+      </el-form>
+      <el-form :model="chartForm" class="demo-form-inline" :inline="true">
         <el-form-item label="责任团队：">
           <el-select
             v-model="chartForm.team"
@@ -97,12 +99,12 @@
           </article>
         </div>
       </div>
-    </el-header>
-    <el-main class="charts-main">
-      <div class="chart-item">
+      <div class="chart-item bottom-padding">
         <h3>状态累积流量图</h3>
         <status-chart :chart-data="cumulativeData" />
       </div>
+    </el-header>
+    <el-main class="charts-main">
       <el-tabs v-model="activeTab" class="tab-change" @tab-click="onSubmit">
         <el-tab-pane name="1">
           <span slot="label" class="tab-item">累计新增</span>
@@ -570,6 +572,9 @@ export default {
     box-shadow:0px 50px 24px -25px rgba(83,97,255,0.30);
   }
 }
+.bottom-padding {
+  padding-bottom: 30px;
+}
 .charts-main {
   padding-bottom: 20px;
   width:calc(100%-60px);

src/views/quality/taskStatistics.vue

@@ -22,6 +22,9 @@
             @change="dateType = ''"
           />
         </el-form-item>
+
+      </el-form>
+      <el-form :model="chartForm" class="demo-form-inline" :inline="true">
         <el-form-item label="责任团队：">
           <el-select
             v-model="chartForm.team"
@@ -88,12 +91,12 @@
           </article>
         </div>
       </div>
-    </el-header>
-    <el-main class="charts-main">
-      <div class="chart-item">
+      <div class="chart-item bottom-padding">
         <h3>状态累积流量图</h3>
         <status-chart :chart-data="cumulativeData" />
       </div>
+    </el-header>
+    <el-main class="charts-main">
       <el-tabs v-model="activeTab" class="tab-change" @tab-click="onSubmit">
         <el-tab-pane name="1">
           <span slot="label" class="tab-item">累计新增</span>
@@ -594,6 +597,9 @@ export default {
     box-shadow:0px 50px 24px -25px rgba(83,97,255,0.30);
   }
 }
+.bottom-padding {
+  padding-bottom: 30px;
+}
 .charts-main {
   padding-bottom: 20px;
   width:calc(100%-60px);