修改接口

src/views/report/repairRateReport/index.vue

@@ -37,6 +37,9 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
+    <div class="chart1">
+      <Chart ref="chart1"></Chart>
+    </div>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
@@ -66,7 +69,11 @@
       <el-table-column label="日期" align="center" prop="INSPECTOR_TIME" v-if="columns[1].visible"/>
       <el-table-column label="异常数" align="center" prop="QUALITY_SUM" v-if="columns[2].visible"/>
       <el-table-column label="下线数" align="center" prop="OFF_LINE_NUM" v-if="columns[3].visible"/>
-      <el-table-column label="返修率" align="center" prop="REPAIR_RATE" v-if="columns[4].visible"/>
+      <el-table-column label="返修率" align="center" prop="REPAIR_RATE" v-if="columns[4].visible">
+        <template  slot-scope="scope">
+          {{parseFloat(scope.row.REPAIR_RATE)}}%
+        </template>
+      </el-table-column>
     </el-table>
 <!--    <pagination-->
 <!--      v-show="total>0"-->
@@ -87,10 +94,15 @@ import {
 } from '@/api/report/reportAPI'
 import { findProductLineList } from '@//api/base/productLine'
 import { parseTime } from '@//utils/ruoyi'
+import Chart from "@/components/board/Chart";
 
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
 export default {
   name: 'RepairRateReport',
   dicts: ['is_flag'],
+  components: {
+    Chart
+  },
   data() {
     return {
       // 遮罩层
@@ -191,6 +203,135 @@ export default {
         })
         this.total = response.total
         this.loading = false
+
+        let e= response.data
+        this.$refs.chart1.setData({
+          grid: {
+            top: "15%",
+            left: "1%",
+            right: "1%",
+            bottom: "2%",
+            containLabel: true,
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              crossStyle: {
+                color: '#000',
+              },
+            },
+          },
+          legend: {
+            itemWidth: 3 * vw,
+            data: ['不良数', '一次不合格率', '目标'],
+            textStyle: {
+              color: "#000",
+              margin: 15,
+              fontSize: 0.75 * vw
+            },
+          },
+          xAxis: [
+            {
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: "#000",
+                  margin: 15,
+                  fontSize: 0.75 * vw
+                },
+              },
+              type: 'category',
+              data: e.map(val => val.INSPECTOR_TIME),
+              axisPointer: {
+                type: 'shadow'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              splitLine: {
+                lineStyle: {
+                  color: "rgba(255,255,255,0.1)",
+                },
+              },
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: "#000",
+                  margin: 15,
+                  fontSize: 0.75 * vw
+                },
+                formatter: '{value}'
+              }
+            },
+            {
+              type: 'value',
+              splitLine: {
+                show: false,
+              },
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: "#000",
+                  margin: 15,
+                  fontSize: 0.75 * vw
+                },
+                formatter: '{value}% '
+              }
+            }
+          ],
+          series: [
+            {
+              name: '不良数',
+              type: 'bar',
+              itemStyle: {
+                normal: {
+                  color: function (val) {
+                    if (parseFloat(e[val.dataIndex].REPAIR_RATE) < 10) {
+                      return '#30e391'
+                    } else {
+                      return '#FE70A6'
+                    }
+                    // return "#0D81ED"
+                  },
+                },
+              },
+              data: e.map(val => val.QUALITY_SUM),
+              label: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: "rgba(255,255,255,0.5)",
+                  fontSize: 0.75 * vw
+                },
+              },
+            },
+            {
+              name: '返修率',
+              type: 'line',
+              yAxisIndex: 1,
+              data: e.map(val => parseFloat(val.REPAIR_RATE)),
+              itemStyle: {
+                normal: {
+                  color: '#F9A25B',
+                },
+              },
+            },
+            {
+              name: '目标',
+              type: 'line',
+              yAxisIndex: 1,
+              data: e.map(val => 10),
+              itemStyle: {
+                normal: {
+                  color: '#0DB99D',
+                },
+              },
+            }
+          ]
+        })
       })
     },
     // 取消按钮
@@ -244,3 +385,9 @@ export default {
   }
 }
 </script>
+<style>
+.chart1{
+  width: 100%;
+  height: 20vw;
+}
+</style>