样式修改

src/views/quality/defectStatistics.vue

@@ -71,12 +71,21 @@
                 <img v-show="index === 1" src="../../../src/assets/defect_images/repair.png">
                 <img v-show="index === 2" src="../../../src/assets/defect_images/reopen.png">
               </div>
-              <span>{{ item.label }}</span><i class="el-icon-info" />
+              <span>{{ item.label }}</span>
+              <el-tooltip v-if="index === 0" class="item" effect="dark" content="统计时间区间内，新增的缺陷的数量" placement="top-start">
+                <i class="el-icon-info" />
+              </el-tooltip>
+              <el-tooltip v-if="index === 1" class="item" effect="dark" content="统计时间区间内，缺陷执行过更新状态为“已完成”的操作并且当前缺陷状态是“已完成”的缺陷数量" placement="top-start">
+                <i class="el-icon-info" />
+              </el-tooltip>
+              <el-tooltip v-if="index === 2" class="item" effect="dark" content="统计时间区间内，缺陷执行过更新状态为“Reopen”的操作并且当前缺陷状态为任意状态的缺陷数量" placement="top-start">
+                <i class="el-icon-info" />
+              </el-tooltip>
             </div>
             <div class="item-title">{{ item.total }}</div>
             <div class="item-line" />
             <div v-show="Number(item.relativeRatio)>=0" class="item-up">环比：<i class="el-icon-caret-top" />{{ item.relativeRatio }}%</div>
-            <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ item.relativeRatio }}%</div>
+            <div v-show="Number(item.relativeRatio)<0" class="item-down">环比：<i class="el-icon-caret-bottom" />{{ 0-item.relativeRatio }}%</div>
             <div v-show="item.relativeRatio === '--'" class="item-down">环比：{{ item.relativeRatio }}%</div>
           </article>
         </div>
@@ -107,7 +116,7 @@
           </el-col>
           <el-col :span="4" :offset="16" class="col-flex">
             <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">
@@ -127,7 +136,7 @@
               <span>{{ item.label }}</span>
               <div class="repair-time">{{ item.total }}</div>
               <div v-show="Number(item.relativeRatio)>=0" class="repair-up">环比：<i class="el-icon-caret-top" /><span>{{ item.relativeRatio }}%</span></div>
-              <div v-show="Number(item.relativeRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ item.relativeRatio }}%</span></div>
+              <div v-show="Number(item.relativeRatio)<0" class="repair-down">环比：<i class="el-icon-caret-bottom" /><span>{{ 0-item.relativeRatio }}%</span></div>
               <div v-show="item.relativeRatio === '--'" class="repair-up">环比：<span>{{ item.relativeRatio }}%</span></div>
             </div>
           </div>
@@ -238,7 +247,7 @@ export default {
       teamOptions: [],
       defectForm: {}, // 筛选表单
       stratAndEnd: [], // 开始结束日期
-      dateType: 'year', // 时间选择类型
+      dateType: 'week', // 时间选择类型
       teamsOptions: [{ code: 1, label: '团队' }],
       modulesOptions: [{ code: 1, label: '模块' }],
       moduleList: [], // 模块列表
@@ -325,6 +334,7 @@ export default {
           break
       }
       this.stratAndEnd = [startDate, endDate]
+      this.onSubmit()
     },
     tabChange() { // tab变动
       if (this.defectStatus === 1) { // 累计修复中，没有缺陷状态
@@ -370,7 +380,7 @@ export default {
         this.echartsOption1 = {
           color: ['#3AA1FF'],
           tooltip: { trigger: 'axis', axisPointer: { type: 'line' }}, // 默认为直线，可选为：'line' | 'shadow'
-          grid: { left: '0', right: '0', top: '3%', bottom: '3%', containLabel: true },
+          grid: { left: '0', right: '0', top: '3%', bottom: '0', containLabel: true },
           xAxis: [{ type: 'category', data: this.chart1Data.xaxis, 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 || [] }]
@@ -384,7 +394,7 @@ export default {
         })
         this.echartsOption1 = {
           color: ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0'],
-          grid: { left: '0', right: '0', top: '3%', bottom: '3%' },
+          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 }
@@ -441,7 +451,7 @@ export default {
             }
           },
           legend: { data: newArr.map(item => { return item.name }), left: 10, top: 0 },
-          grid: { left: '0', right: '0', top: '8%', bottom: '3%', containLabel: true },
+          grid: { left: '0', right: '0', top: '8%', bottom: '0', containLabel: true },
           xAxis: { type: 'category', data: this.chart2Data.xaxis },
           yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}, axisLabel: { formatter: '{value} %' }},
           series: newArr.map(item => ({ ...item, type: 'line', smooth: true }))
@@ -464,7 +474,7 @@ export default {
             }
           },
           legend: { data: newArr.map(item => { return item.name }), left: 0, top: 0 },
-          grid: { left: '0', right: '0', top: '8%', bottom: '3%', containLabel: true },
+          grid: { left: '0', right: '0', top: '8%', bottom: '0', containLabel: true },
           xAxis: { type: 'category', data: this.chart2Data.xaxis, axisTick: { alignWithLabel: true }},
           yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { type: 'dashed' }}, axisLabel: { formatter: '{value} %' }},
           series: newArr.map(item => ({ ...item, type: 'bar', stack: '总和', barWidth: '20px' }))
@@ -527,6 +537,8 @@ export default {
   color: #666666;
   h3 {
     font-size: 18px;
+    margin: 40px 0;
+    padding: 0;
   }
   .defect-main {
     padding: 20px 20px 0 20px;
@@ -639,6 +651,9 @@ export default {
     background:#ffffff;
     margin: 10px;
     border-radius: 4px;
+    /deep/.el-tabs__header {
+      margin: 0;
+    }
     .chart-item {
       padding: 0 20px;
       .col-flex {