样式调整

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.11.5",
+    "@antv/g2": "^4.0.15",
     "@didi/omega-tracker": "^2.2.8",
     "@fullcalendar/bootstrap": "^4.4.0",
     "@fullcalendar/core": "^4.4.0",

src/views/quality/components/bugList.vue

@@ -2,29 +2,35 @@
   <section>
     <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 }}<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>
+        <div :class="{'item-detail': index === 0}">
+          <span>{{ item.label }}</span>
+          <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>
+        </div>
       </div>
     </div>
     <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 }}<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>
+        <div :class="{'item-detail': index === 0}">
+          <span>{{ item.label }}</span>
+          <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>
+        </div>
       </div>
     </div>
     <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 }}<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>
+        <div :class="{'item-detail': index === 0}">
+          <span>{{ item.label }}</span>
+          <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>
+        </div>
       </div>
     </div>
   </section>
@@ -78,6 +84,9 @@ export default {
       }
     }
   }
+  .item-detail{
+    border-right:1px solid rgba(112,112,112,0.12);
+  }
   .repair-up i , .repair-up span{
     color:#F32850
   }

src/views/quality/components/tendencyChart.vue

@@ -19,6 +19,11 @@ export default {
       type: Object,
       default: () => null,
       required: false
+    },
+    typeTitle: {
+      type: String,
+      default: '需求数量',
+      required: false
     }
   },
   data() {
@@ -48,7 +53,7 @@ export default {
         yAxis: [{ type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}}],
         series: [
           {
-            name: '缺陷数量', type: 'line', barWidth: '20px', smooth: true, data: this.chartData.yaxis[0] && this.chartData.yaxis[0].data || [],
+            name: this.typeTitle, type: 'line', barWidth: '20px', smooth: true, data: this.chartData.yaxis[0] && this.chartData.yaxis[0].data || [],
             itemStyle: { normal: { label: { show: true, formatter: '{c}', position: 'top' }}}
           }
         ]

src/views/quality/requireStatistics.vue

@@ -597,5 +597,6 @@ export default {
 }
 .strong-font {
   color: #F01A1A !important;
+  font-size: 18px !important;
 }
 </style>

src/views/quality/taskStatistics.vue

@@ -108,7 +108,7 @@
       <div class="chart-item">
         <h3 v-show="activeTab === '1'">新增趋势图</h3>
         <h3 v-show="activeTab === '2'">上线趋势图</h3>
-        <tendency-chart :chart-data="tendencyData" />
+        <tendency-chart :chart-data="tendencyData" type-title="任务数量" />
       </div>
       <div class="chart-item">
         <h3>所属需求方向分布图</h3>
@@ -621,5 +621,6 @@ export default {
 }
 .strong-font {
   color: #F01A1A !important;
+  font-size: 18px !important;
 }
 </style>