From 16bb3ddf03fda830eef7482adfd69ba832fa9b59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 29 Mar 2024 17:56:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/repairRateReport/index.vue | 414 ++++++++++++++++++--
 1 file changed, 389 insertions(+), 25 deletions(-)

diff --git a/src/views/report/repairRateReport/index.vue b/src/views/report/repairRateReport/index.vue
index 2a1455f..afadaff 100644
--- a/src/views/report/repairRateReport/index.vue
+++ b/src/views/report/repairRateReport/index.vue
@@ -37,9 +37,24 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
-    <div class="chart1">
+    <div class="chart1" v-if="!isChart">
       <Chart ref="chart1"></Chart>
     </div>
+    <div v-if="isChart">
+
+      <div class="chart11">
+        <Chart ref="chart11"></Chart>
+      </div>
+      <div class="chart12">
+        <Chart ref="chart12"></Chart>
+      </div>
+      <div class="chart13">
+        <Chart ref="chart13"></Chart>
+      </div>
+      <div class="chart14">
+        <Chart ref="chart14"></Chart>
+      </div>
+    </div>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
@@ -70,19 +85,18 @@
       <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">
-        <template  slot-scope="scope">
-          {{parseFloat(scope.row.REPAIR_RATE)}}%
+        <template slot-scope="scope">
+          {{ parseFloat(scope.row.REPAIR_RATE) }}%
         </template>
       </el-table-column>
     </el-table>
-<!--    <pagination-->
-<!--      v-show="total>0"-->
-<!--      :total="total"-->
-<!--      :page.sync="queryParams.pageNum"-->
-<!--      :limit.sync="queryParams.pageSize"-->
-<!--      @pagination="getList"-->
-<!--    />-->
-
+    <!--    <pagination-->
+    <!--      v-show="total>0"-->
+    <!--      :total="total"-->
+    <!--      :page.sync="queryParams.pageNum"-->
+    <!--      :limit.sync="queryParams.pageSize"-->
+    <!--      @pagination="getList"-->
+    <!--    />-->
 
 
   </div>
@@ -92,8 +106,8 @@
 import {
   repairRateReportList
 } from '@/api/report/reportAPI'
-import { findProductLineList } from '@//api/base/productLine'
-import { parseTime } from '@//utils/ruoyi'
+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
@@ -105,6 +119,7 @@ export default {
   },
   data() {
     return {
+      isChart: true,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -148,11 +163,11 @@ export default {
       // 表单校验
       rules: {},
       columns: [
-        { key: 0, label: `主键标识`, visible: false },
-        { key: 1, label: `日期`, visible: true },
-        { key: 2, label: `异常数`, visible: true },
-        { key: 3, label: `下线数`, visible: true },
-        { key: 4, label: `返修率`, visible: true }
+        {key: 0, label: `主键标识`, visible: false},
+        {key: 1, label: `日期`, visible: true},
+        {key: 2, label: `异常数`, visible: true},
+        {key: 3, label: `下线数`, visible: true},
+        {key: 4, label: `返修率`, visible: true}
       ],
       // 产线选项
       productLineList: [],
@@ -161,9 +176,9 @@ export default {
     }
   },
   created() {
-    findProductLineList({ productLineType: 1 }).then(response => {
+    findProductLineList({productLineType: 1}).then(response => {
       this.productLineList = response.data
-      findProductLineList({ parentId: this.queryParams.PRODUCT_LINE_CODE, stationType: 2 }).then(response => {
+      findProductLineList({parentId: this.queryParams.PRODUCT_LINE_CODE, stationType: 2}).then(response => {
         this.findStationList = response.data
       })
     })
@@ -171,19 +186,348 @@ export default {
     const nowDate = parseTime(new Date(), '{y}-{m}-{d}')
     this.daterangeBeginTime[0] = weekDate
     this.daterangeBeginTime[1] = nowDate
-    this.getList()
+    // this.getList()
+    this.getChart()
+
   },
   watch: {
-    'queryParams.PRODUCT_LINE_CODE': function(newVal, oldVal) {
+    'queryParams.PRODUCT_LINE_CODE': function (newVal, oldVal) {
       // 执行方法，可以在这里调用你的方法
-      findProductLineList({ parentId: this.queryParams.PRODUCT_LINE_CODE, stationType: 2 }).then(response => {
+      findProductLineList({parentId: this.queryParams.PRODUCT_LINE_CODE, stationType: 2}).then(response => {
         this.findStationList = response.data
       })
     },
   },
   methods: {
+    getChart() {
+
+      repairRateReportList({
+        ...this.queryParams,
+        STATION_CODE: [2001,2006,2007],
+        stationCodeList: '2001,2006,2007',
+      }).then(response => {
+        let e = response.data
+        this.$refs.chart11.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: {
+                show: false,
+              },
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: "#000",
+                  margin: 15,
+                  fontSize: 0.75 * vw
+                },
+                formatter: '{value}% '
+              }
+            }
+          ],
+          series: [
+            {
+              name: '检漏返修率(%)',
+              type: 'line',
+              data: e.map(val => parseFloat(val.REPAIR_RATE)),
+              itemStyle: {
+                normal: {
+                  color: '#F9A25B',
+                },
+              },
+            }
+          ]
+        })
+      })
+
+      repairRateReportList({
+        ...this.queryParams,
+        STATION_CODE: [2002,2003],
+        stationCodeList: '2002,2003',
+      }).then(response => {
+        let e = response.data
+        this.$refs.chart12.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: {
+                show: false,
+              },
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: "#000",
+                  margin: 15,
+                  fontSize: 0.75 * vw
+                },
+                formatter: '{value}% '
+              }
+            }
+          ],
+          series: [
+            {
+              name: '发泡返修率(%)',
+              type: 'line',
+              data: e.map(val => parseFloat(val.REPAIR_RATE)),
+              itemStyle: {
+                normal: {
+                  color: '#F9A25B',
+                },
+              },
+            }
+          ]
+        })
+      })
+
+      repairRateReportList({
+        ...this.queryParams,
+        STATION_CODE: [2005],
+        stationCodeList: '2005',
+      }).then(response => {
+        let e = response.data
+        this.$refs.chart13.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: {
+                show: false,
+              },
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: "#000",
+                  margin: 15,
+                  fontSize: 0.75 * vw
+                },
+                formatter: '{value}% '
+              }
+            }
+          ],
+          series: [
+            {
+              name: '电检返修率(%)',
+              type: 'line',
+              data: e.map(val => parseFloat(val.REPAIR_RATE)),
+              itemStyle: {
+                normal: {
+                  color: '#F9A25B',
+                },
+              },
+            }
+          ]
+        })
+      })
+
+      repairRateReportList({
+        ...this.queryParams,
+        STATION_CODE: [2008,2009,2010,2011],
+        stationCodeList: '2008,2009,2010,2011',
+      }).then(response => {
+        let e = response.data
+        this.$refs.chart14.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: {
+                show: false,
+              },
+              axisLabel: {
+                //坐标轴刻度标签的相关设置
+                textStyle: {
+                  color: "#000",
+                  margin: 15,
+                  fontSize: 0.75 * vw
+                },
+                formatter: '{value}% '
+              }
+            }
+          ],
+          series: [
+            {
+              name: '总装返修率(%)',
+              type: 'line',
+              data: e.map(val => parseFloat(val.REPAIR_RATE)),
+              itemStyle: {
+                normal: {
+                  color: '#F9A25B',
+                },
+              },
+            }
+          ]
+        })
+      })
+    },
     /** 查询工单信息列表 */
     getList() {
+      this.isChart = false
       this.loading = true
       if (null != this.daterangeBeginTime && '' != this.daterangeBeginTime) {
         this.queryParams.beginBeginTime = this.daterangeBeginTime[0]
@@ -204,7 +548,7 @@ export default {
         this.total = response.total
         this.loading = false
 
-        let e= response.data
+        let e = response.data
         this.$refs.chart1.setData({
           grid: {
             top: "15%",
@@ -386,7 +730,27 @@ export default {
 }
 </script>
 <style>
-.chart1{
+.chart1 {
+  width: 100%;
+  height: 20vw;
+}
+
+.chart11 {
+  width: 100%;
+  height: 20vw;
+}
+
+.chart12 {
+  width: 100%;
+  height: 20vw;
+}
+
+.chart13 {
+  width: 100%;
+  height: 20vw;
+}
+
+.chart14 {
   width: 100%;
   height: 20vw;
 }