Merge pull request 'zjl' (#15) from zjl into master

Reviewed-on: #15

dist/css/2003.fe704bbd.css

@@ -1 +0,0 @@
-.finalDataTable .el-table thead.is-group tr:first-of-type th:first-of-type{border-bottom:none}.finalDataTable .el-table thead.is-group tr:first-of-type th:first-of-type div.cell{text-align:right}.finalDataTable .el-table th.el-table__cell{height:28px}.finalDataTable .el-table thead.is-group tr:first-of-type th:first-of-type:before{content:"";position:absolute;height:35px;top:0;left:48px;background-color:#ebeef5;transform:rotate(-35deg);transform-origin:top;width:1px}.finalDataTable .el-table thead.is-group tr:last-of-type th:first-of-type:before{content:"";position:absolute;height:35px;top:0;left:68px;background-color:#ebeef5;transform:rotate(-35deg);transform-origin:top;width:1px}.finalInspectionData[data-v-980016d4]{width:100%}.finalInspectionData .box-top[data-v-980016d4]{width:100%;padding:8px 16px 0}.finalInspectionData .box-top .search-box[data-v-980016d4]{height:62px;padding:10px 16px;box-sizing:border-box;border-radius:8px;background-color:#fff}.finalInspectionData .box[data-v-980016d4]{width:100%;padding:8px 8px 0 16px}.finalInspectionData .box .left-box[data-v-980016d4],.finalInspectionData .box .right-box[data-v-980016d4]{height:calc(100vh - 220px);padding:16px;border-radius:8px;background-color:#fff}.finalInspectionData .box .left-box .table-box[data-v-980016d4],.finalInspectionData .box .right-box .table-box[data-v-980016d4]{height:calc(100vh - 352px);overflow:auto}.finalInspectionData .box .left-box .table-button[data-v-980016d4]{display:inline-block;height:30px;width:100%;text-align:center;padding-top:4px;margin-bottom:16px;font-size:14px;color:#0b58ff;border-radius:4px;border:1px dotted #0b58ff;cursor:pointer}.finalInspectionData .box .right-box .title[data-v-980016d4]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;margin-right:8px;vertical-align:middle}.finalInspectionData .box .right-box .tip[data-v-980016d4]{display:flex;flex-flow:row wrap;height:40px;margin:16px 0 20px}.finalInspectionData .box .right-box .tip li[data-v-980016d4]{width:25%;font-size:14px;font-weight:500;text-align:center;padding-top:10px;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;border-left:1px solid #e8e8e8}.finalInspectionData .box .right-box .tip[data-v-980016d4] :last-child{border-right:1px solid #e8e8e8}

dist/css/3813.c8c00575.css

@@ -1 +1 @@
-.particleLine-chart[data-v-b61f9baa]{height:calc(100vh - 205px);margin:0 16px;border-radius:8px;padding:8px 16px;background-color:#fff}
+.particleLine-chart[data-v-ecee4654]{height:calc(100vh - 205px);margin:0 16px;border-radius:8px;padding:8px 16px;background-color:#fff}

dist/css/4112.61ebb694.css

@@ -0,0 +1 @@
+.bottom-box[data-v-5624e103]{overflow-x:auto;display:flex}.bottom-box .bottom-left[data-v-5624e103],.bottom-box .bottom-right[data-v-5624e103]{display:inline-block}.bottom-box .bottom-left[data-v-5624e103]{width:290px;margin-right:8px}.bottom-box .bottom-left .dataTab li[data-v-5624e103]{width:65px}.bottom-box .bottom-right[data-v-5624e103]{width:calc(100% - 300px)}.bottom-box .bottom-right .dataTab li[data-v-5624e103]{width:7.7%;min-width:60px}.title[data-v-5624e103]{display:inline-block;height:66px;width:30px;font-size:14px;line-height:14px;font-weight:500;padding:5px 8px 0;color:rgba(0,0,0,.85);background-color:#fafafa;border-top-left-radius:5px;border-bottom-left-radius:5px}.dataTab[data-v-5624e103]{display:flex;flex-flow:row nowrap}.dataTab li[data-v-5624e103]{font-size:14px;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8}.dataTab li p[data-v-5624e103]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dataTab li .tabHead[data-v-5624e103]{height:31px;background:#e9ebf0}.dataTab li .tabHead[data-v-5624e103],.dataTab li .tabValue[data-v-5624e103]{padding:8px}.dataTab li .tabValue[data-v-5624e103]{height:35px}.box[data-v-51a1dc14]{position:relative}.box .text1[data-v-51a1dc14],.box .text2[data-v-51a1dc14],.box .text3[data-v-51a1dc14],.box .text4[data-v-51a1dc14]{position:absolute}.box .text1[data-v-51a1dc14]{top:30px;left:0}.box .text2[data-v-51a1dc14]{top:30px;right:0}.box .text3[data-v-51a1dc14]{bottom:10px;left:0}.box .text4[data-v-51a1dc14]{bottom:10px;right:0}.defectScatterPlot[data-v-50980432]{height:calc(100vh - 206px);overflow:auto}.defectScatterPlot .split-pane[data-v-50980432]{height:100%;border-radius:8px}.defectScatterPlot .left-box[data-v-50980432]{margin-left:16px;padding:16px 16px 0;background-color:#fff}.defectScatterPlot .right-box[data-v-50980432]{margin-right:16px}.defectScatterPlot .right-box .inner-box[data-v-50980432]{height:100%;margin-left:16px;padding:16px 16px 0;border-radius:8px;overflow:auto;background-color:#fff;font-size:14px}.defectScatterPlot .right-box .inner-box .line1[data-v-50980432]{margin-bottom:18px}.defectScatterPlot .right-box .inner-box .line2[data-v-50980432]{margin-bottom:12px}.defectScatterPlot .right-box .inner-box .line2 .el-checkbox[data-v-50980432]{margin-right:8px}.defectScatterPlot .title[data-v-50980432]{font-size:14px;color:rgba(0,0,0,.85)}.defectScatterPlot .title[data-v-50980432]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;vertical-align:middle;margin-right:8px}

dist/css/551.aacf299b.css

@@ -1 +1 @@
-.root-box[data-v-d1dd7a80]{height:calc(29.2vh - 45.552px);width:calc(100vw - 280px);position:relative}.root-box .canvas[data-v-d1dd7a80]{position:absolute}.bottom-box[data-v-13a579c4],.top-box[data-v-13a579c4]{background-color:#fff;margin:8px 16px 0!important;border-radius:4px}.top-box[data-v-13a579c4]{height:calc(29.2vh - 45.552px)}.bottom-box[data-v-13a579c4]{height:calc(70.8vh - 110.448px);padding:0 16px 16px}.bottom-box .area .title[data-v-13a579c4]{display:inline-block;font-size:14px;color:#000;margin:14px 0}.bottom-box .area .title[data-v-13a579c4]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;margin-right:8px;vertical-align:middle}
+.root-box[data-v-690601c2]{height:calc(29.2vh - 45.552px);width:calc(100vw - 280px);position:relative}.root-box .canvas[data-v-690601c2]{position:absolute}.bottom-box[data-v-13a579c4],.top-box[data-v-13a579c4]{background-color:#fff;margin:8px 16px 0!important;border-radius:4px}.top-box[data-v-13a579c4]{height:calc(29.2vh - 45.552px)}.bottom-box[data-v-13a579c4]{height:calc(70.8vh - 110.448px);padding:0 16px 16px}.bottom-box .area .title[data-v-13a579c4]{display:inline-block;font-size:14px;color:#000;margin:14px 0}.bottom-box .area .title[data-v-13a579c4]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;margin-right:8px;vertical-align:middle}

dist/css/6082.c905f8b4.css

@@ -1 +0,0 @@
-.bottom-box[data-v-4eab165e]{overflow-x:auto;display:flex}.bottom-box .bottom-left[data-v-4eab165e],.bottom-box .bottom-right[data-v-4eab165e]{display:inline-block}.bottom-box .bottom-left[data-v-4eab165e]{width:290px;margin-right:8px}.bottom-box .bottom-left .dataTab li[data-v-4eab165e]{width:65px}.bottom-box .bottom-right[data-v-4eab165e]{width:calc(100% - 300px)}.bottom-box .bottom-right .dataTab li[data-v-4eab165e]{width:7.7%;min-width:60px}.title[data-v-4eab165e]{display:inline-block;height:66px;width:30px;font-size:14px;line-height:14px;font-weight:500;padding:5px 8px 0;color:rgba(0,0,0,.85);background-color:#fafafa;border-top-left-radius:5px;border-bottom-left-radius:5px}.dataTab[data-v-4eab165e]{display:flex;flex-flow:row nowrap}.dataTab li[data-v-4eab165e]{font-size:14px;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8}.dataTab li p[data-v-4eab165e]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dataTab li .tabHead[data-v-4eab165e]{height:31px;background:#e9ebf0}.dataTab li .tabHead[data-v-4eab165e],.dataTab li .tabValue[data-v-4eab165e]{padding:8px}.dataTab li .tabValue[data-v-4eab165e]{height:35px}.full-inspection-detail[data-v-444ed842]{margin:0 16px;padding:16px;border-radius:8px;height:calc(100vh - 205px);background-color:#fff}.full-inspection-detail .plot-total[data-v-444ed842]{position:relative;height:115px}.full-inspection-detail .plot-total .plot-total-box[data-v-444ed842]{position:absolute;width:100%;top:25px;left:0}

dist/css/6082.db5d51a6.css

@@ -0,0 +1 @@
+.bottom-box[data-v-5624e103]{overflow-x:auto;display:flex}.bottom-box .bottom-left[data-v-5624e103],.bottom-box .bottom-right[data-v-5624e103]{display:inline-block}.bottom-box .bottom-left[data-v-5624e103]{width:290px;margin-right:8px}.bottom-box .bottom-left .dataTab li[data-v-5624e103]{width:65px}.bottom-box .bottom-right[data-v-5624e103]{width:calc(100% - 300px)}.bottom-box .bottom-right .dataTab li[data-v-5624e103]{width:7.7%;min-width:60px}.title[data-v-5624e103]{display:inline-block;height:66px;width:30px;font-size:14px;line-height:14px;font-weight:500;padding:5px 8px 0;color:rgba(0,0,0,.85);background-color:#fafafa;border-top-left-radius:5px;border-bottom-left-radius:5px}.dataTab[data-v-5624e103]{display:flex;flex-flow:row nowrap}.dataTab li[data-v-5624e103]{font-size:14px;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8}.dataTab li p[data-v-5624e103]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dataTab li .tabHead[data-v-5624e103]{height:31px;background:#e9ebf0}.dataTab li .tabHead[data-v-5624e103],.dataTab li .tabValue[data-v-5624e103]{padding:8px}.dataTab li .tabValue[data-v-5624e103]{height:35px}.full-inspection-detail[data-v-444ed842]{margin:0 16px;padding:16px;border-radius:8px;height:calc(100vh - 205px);background-color:#fff}.full-inspection-detail .plot-total[data-v-444ed842]{position:relative;height:115px}.full-inspection-detail .plot-total .plot-total-box[data-v-444ed842]{position:absolute;width:100%;top:25px;left:0}

dist/css/6858.e546d2f2.css

@@ -0,0 +1 @@
+.finalInspectionData[data-v-22462100]{width:100%}.finalInspectionData .box-top[data-v-22462100]{width:100%;padding:8px 16px 0}.finalInspectionData .box-top .search-box[data-v-22462100]{height:62px;padding:10px 16px;box-sizing:border-box;border-radius:8px;background-color:#fff}.finalInspectionData .box[data-v-22462100]{width:100%;padding:8px 8px 0 16px}.finalInspectionData .box .left-box[data-v-22462100],.finalInspectionData .box .right-box[data-v-22462100]{height:calc(100vh - 220px);padding:16px;border-radius:8px;background-color:#fff}.finalInspectionData .box .left-box .table-box[data-v-22462100],.finalInspectionData .box .right-box .table-box[data-v-22462100]{margin-top:16px;height:calc(100vh - 290px);overflow:auto}.finalInspectionData .box .left-box .table-button[data-v-22462100]{display:inline-block;height:30px;width:100%;text-align:center;padding-top:4px;margin-bottom:16px;font-size:14px;color:#0b58ff;border-radius:4px;border:1px dotted #0b58ff;cursor:pointer}.finalInspectionData .box .right-box .title[data-v-22462100]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;margin-right:8px;vertical-align:middle}

dist/css/8685.2eefc824.css

@@ -1 +0,0 @@
-.bottom-box[data-v-4eab165e]{overflow-x:auto;display:flex}.bottom-box .bottom-left[data-v-4eab165e],.bottom-box .bottom-right[data-v-4eab165e]{display:inline-block}.bottom-box .bottom-left[data-v-4eab165e]{width:290px;margin-right:8px}.bottom-box .bottom-left .dataTab li[data-v-4eab165e]{width:65px}.bottom-box .bottom-right[data-v-4eab165e]{width:calc(100% - 300px)}.bottom-box .bottom-right .dataTab li[data-v-4eab165e]{width:7.7%;min-width:60px}.title[data-v-4eab165e]{display:inline-block;height:66px;width:30px;font-size:14px;line-height:14px;font-weight:500;padding:5px 8px 0;color:rgba(0,0,0,.85);background-color:#fafafa;border-top-left-radius:5px;border-bottom-left-radius:5px}.dataTab[data-v-4eab165e]{display:flex;flex-flow:row nowrap}.dataTab li[data-v-4eab165e]{font-size:14px;border-right:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8}.dataTab li p[data-v-4eab165e]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.dataTab li .tabHead[data-v-4eab165e]{height:31px;background:#e9ebf0}.dataTab li .tabHead[data-v-4eab165e],.dataTab li .tabValue[data-v-4eab165e]{padding:8px}.dataTab li .tabValue[data-v-4eab165e]{height:35px}.box[data-v-51a1dc14]{position:relative}.box .text1[data-v-51a1dc14],.box .text2[data-v-51a1dc14],.box .text3[data-v-51a1dc14],.box .text4[data-v-51a1dc14]{position:absolute}.box .text1[data-v-51a1dc14]{top:30px;left:0}.box .text2[data-v-51a1dc14]{top:30px;right:0}.box .text3[data-v-51a1dc14]{bottom:10px;left:0}.box .text4[data-v-51a1dc14]{bottom:10px;right:0}.defectScatterPlot[data-v-ab923e7c]{height:calc(100vh - 206px);overflow:auto}.defectScatterPlot .split-pane[data-v-ab923e7c]{height:100%;border-radius:8px}.defectScatterPlot .left-box[data-v-ab923e7c]{margin-left:16px;padding:16px 16px 0;background-color:#fff}.defectScatterPlot .right-box[data-v-ab923e7c]{margin-right:16px}.defectScatterPlot .right-box .inner-box[data-v-ab923e7c]{height:100%;margin-left:16px;padding:16px 16px 0;border-radius:8px;overflow:auto;background-color:#fff;font-size:14px}.defectScatterPlot .right-box .inner-box .line1[data-v-ab923e7c]{margin-bottom:18px}.defectScatterPlot .right-box .inner-box .line2[data-v-ab923e7c]{margin-bottom:12px}.defectScatterPlot .right-box .inner-box .line2 .el-checkbox[data-v-ab923e7c]{margin-right:8px}.defectScatterPlot .title[data-v-ab923e7c]{font-size:14px;color:rgba(0,0,0,.85)}.defectScatterPlot .title[data-v-ab923e7c]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;vertical-align:middle;margin-right:8px}

dist/css/889.20426fed.css

@@ -1 +1 @@
-.thicknessDistributionChart .top-table[data-v-39282f9b]{font-size:14px;font-weight:500;margin-bottom:16px}.thicknessDistributionChart .top-table ul[data-v-39282f9b]{display:flex;flex-flow:row nowrap}.thicknessDistributionChart .top-table ul li[data-v-39282f9b]{color:rgba(0,0,0,.85);width:20%;padding:10px;border:1px solid #e8e8e8}.thicknessDistributionChart .top-table ul .red-tip[data-v-39282f9b]{color:rgba(255,78,78,.85)}.thicknessDistributionChart .top-table ul .blue-tip[data-v-39282f9b]{color:#507dd7}.thicknessDistributionChart .top-table ul .purple-tip[data-v-39282f9b]{color:rgba(152,83,255,.85)}.thicknessDistributionChart .top-table ul .green-tip[data-v-39282f9b]{color:#50bb90}.thicknessDistributionChart .top-table ul .yellow-tip[data-v-39282f9b]{color:#ecb441}.thicknessDistributionChart .title[data-v-39282f9b]{font-size:14px;color:rgba(0,0,0,.85)}.thicknessDistributionChart .title[data-v-39282f9b]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;margin-right:8px;vertical-align:middle}.thicknessDistributionMap[data-v-577f5adc]{width:100%;padding:0 8px 0 16px}.thicknessDistributionMap .left-box[data-v-577f5adc],.thicknessDistributionMap .right-box[data-v-577f5adc]{height:calc(100vh - 205px);padding:16px;border-radius:8px;background-color:#fff}
+.thicknessDistributionChart .top-table[data-v-39282f9b]{font-size:14px;font-weight:500;margin-bottom:16px}.thicknessDistributionChart .top-table ul[data-v-39282f9b]{display:flex;flex-flow:row nowrap}.thicknessDistributionChart .top-table ul li[data-v-39282f9b]{color:rgba(0,0,0,.85);width:20%;padding:10px;border:1px solid #e8e8e8}.thicknessDistributionChart .top-table ul .red-tip[data-v-39282f9b]{color:rgba(255,78,78,.85)}.thicknessDistributionChart .top-table ul .blue-tip[data-v-39282f9b]{color:#507dd7}.thicknessDistributionChart .top-table ul .purple-tip[data-v-39282f9b]{color:rgba(152,83,255,.85)}.thicknessDistributionChart .top-table ul .green-tip[data-v-39282f9b]{color:#50bb90}.thicknessDistributionChart .top-table ul .yellow-tip[data-v-39282f9b]{color:#ecb441}.thicknessDistributionChart .title[data-v-39282f9b]{font-size:14px;color:rgba(0,0,0,.85)}.thicknessDistributionChart .title[data-v-39282f9b]:before{content:"";display:inline-block;width:4px;height:16px;background:#0b58ff;border-radius:1px;margin-right:8px;vertical-align:middle}.thicknessDistributionMap[data-v-f61202a6]{width:100%;padding:0 8px 0 16px}.thicknessDistributionMap .left-box[data-v-f61202a6],.thicknessDistributionMap .right-box[data-v-f61202a6]{height:calc(100vh - 205px);padding:16px;border-radius:8px;background-color:#fff}

dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>tft-mes</title><script defer="defer" src="/js/chunk-vendors.a42f8636.js"></script><script defer="defer" src="/js/app.0be6047f.js"></script><link href="/css/app.68cbc19b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but tft-mes doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>tft-mes</title><script defer="defer" src="/js/chunk-vendors.a42f8636.js"></script><script defer="defer" src="/js/app.5a7cbcdc.js"></script><link href="/css/app.68cbc19b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but tft-mes doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

src/api/qualityManagement.js

@@ -137,3 +137,46 @@ export function drawThickness(val) {
     data: val
   })
 }
+
+// 终检数据-获取玻璃列表数据
+export function listGlass(data) {
+  return request({
+    url: '/report/GlassReport/listGlass',
+    method: 'post',
+    data
+  })
+}
+// 终检数据-基板品质报表查询
+export function qualityReport(data) {
+  return request({
+    url: '/report/GlassReport/qualityReport',
+    method: 'post',
+    data
+  })
+}
+// 终检数据-基板品质报表导出
+export function qualityReportexport(data) {
+  return request({
+    url: '/report/GlassReport/qualityReportexport',
+    method: 'post',
+    responseType: 'blob',
+    data
+  })
+}
+// 终检数据-厚度汇总报表查询
+export function thickReport(data) {
+  return request({
+    url: '/report/GlassReport/thickReport',
+    method: 'post',
+    data
+  })
+}
+// 终检数据-厚度汇总报表导出
+export function thickReportexport(data) {
+  return request({
+    url: '/report/GlassReport/thickReportexport',
+    method: 'post',
+    responseType: 'blob',
+    data
+  })
+}

src/views/qualityManagement/components/defectScatterPlotTotal.vue

@@ -23,11 +23,6 @@
 <script>
 export default {
   name: 'DefectScatterPlot',
-  props: {
-    detailObj: {
-      type: Object
-    }
-  },
   data() {
     return {
       leftList: [
@@ -54,16 +49,16 @@ export default {
     }
   },
   methods: {
-    init() {
+    init(detailObj) {
-      console.log(this.detailObj)
+      console.log(detailObj)
       for (let i = 0; i < this.leftList.length; i++) {
-        this.leftList[i].value = this.detailObj[this.leftList[i].key]
+        this.leftList[i].value = detailObj[this.leftList[i].key]
-          ? this.detailObj[this.leftList[i].key]
+          ? detailObj[this.leftList[i].key]
           : null
       }
       for (let i = 0; i < this.rightList.length; i++) {
-        this.rightList[i].value = this.detailObj[this.rightList[i].key]
+        this.rightList[i].value = detailObj[this.rightList[i].key]
-          ? this.detailObj[this.rightList[i].key]
+          ? detailObj[this.rightList[i].key]
           : null
       }
     }

src/views/qualityManagement/finalInspectionData.vue

@@ -3,35 +3,37 @@
     <el-row class="box-top">
       <el-col>
         <div class="search-box">
-          <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
+          <search-bar
+            :formConfigs="formConfig"
+            @headBtnClick="buttonClick"
+            @select-changed="selectChanged"
+          />
         </div>
       </el-col>
     </el-row>
     <el-row :gutter="8" class="box">
       <el-col :span="9">
         <div class="left-box">
-          <span class="table-button">生成表格</span>
+          <span class="table-button" @click="generateReport">生成表格</span>
           <base-table
             :selectWidth="40"
             :table-props="tablePropsL"
             :table-data="tableDataL"
             :max-height="tableHL"
+            @selection-change="selectChange"
           />
         </div>
       </el-col>
       <el-col :span="15">
         <div class="right-box">
-          <div>
+          <div v-if="reportTitle">
-            <span class="title">成品玻璃基本缺陷统计</span>
+            <span class="title">{{ reportTitle }}</span>
           </div>
-          <ul class="tip">
+          <div class="table-box" v-if="reportTitle === '单片玻璃基板缺陷统计'">
-            <li>单位：um</li>
+            <glass-quality-report :tableData="glassQualityArr" />
-            <li>玻璃ID：26522322323</li>
+          </div>
-            <li>生产日期：2022.12.24 15:56:24</li>
+          <div class="table-box" v-if="reportTitle === '厚度汇总报表'">
-            <li>等级：G1</li>
+            <glass-thick-report :tableData="thickReportArr" />
-          </ul>
-          <div class="table-box">
-            <final-data-table />
           </div>
         </div>
       </el-col>
@@ -40,64 +42,74 @@
 </template>
 <script>
 import { tableHeight } from '@/utils/index'
-import finalDataTable from './components/finalDataTable'
+import {
+  listGlass,
+  qualityReport,
+  thickReport,
+  qualityReportexport,
+  thickReportexport
+} from '@/api/qualityManagement'
+import glassQualityReport from './finalInspectionDataReport/glassQualityReport.vue'
+import glassThickReport from './finalInspectionDataReport/glassThickReport.vue'
+import moment from 'moment'
+import { timeFormatter } from '@/utils'
 const tablePropsL = [
   {
-    prop: 'id',
+    prop: 'glassId',
     label: 'ID',
     minWidth: 100
   },
   {
-    prop: 'time',
+    prop: 'unloadTime',
     label: '检测时间',
-    minWidth: 100
+    minWidth: 120,
+    filter: timeFormatter
   },
   {
-    prop: 'type',
+    prop: 'grindtype',
     label: '研磨类型',
-    minWidth: 100
+    minWidth: 80
   }
 ]
 export default {
   name: 'FinalInspectionData',
-  components: { finalDataTable },
+  components: { glassQualityReport, glassThickReport },
   data() {
     return {
       formConfig: [
         {
           type: 'datePicker',
           label: '检验时间',
-          dateType: 'datetime',
+          dateType: 'datetimerange',
           format: 'yyyy-MM-dd HH:mm:ss',
-          valueFormat: 'yyyy-MM-dd HH:mm:ss',
+          valueFormat: 'yyyy-MM-ddTHH:mm:ss',
-          placeholder: '检验时间',
+          rangeSeparator: '-',
-          param: 'testTime',
+          startPlaceholder: '开始时间',
-          width: 200
+          endPlaceholder: '结束时间',
+          param: 'timeVal',
+          defaultSelect: [],
+          width: 350
         },
         {
           type: 'select',
           label: '玻璃架',
-          selectOptions: [
+          selectOptions: [],
-            { id: '1', name: '521321545' },
+          param: 'glassFrame',
-            { id: '2', name: '932234561' },
+          defaultSelect: '全部',
-            { id: '3', name: '542121212' },
+          width: 150,
-            { id: '4', name: '354855321' }
+          clearable: false
-          ],
-          param: 'fullInspectionType',
-          defaultSelect: '',
-          width: 150
         },
         {
           type: 'select',
           label: '报表类型',
           selectOptions: [
-            { id: '1', name: '单片玻璃基板缺陷统计' },
+            { id: '单片玻璃基板缺陷统计', name: '单片玻璃基板缺陷统计' },
-            { id: '2', name: '932234561' },
+            { id: '终检下片包装', name: '终检下片包装' },
-            { id: '3', name: '542121212' },
+            { id: '厚度汇总报表', name: '厚度汇总报表' }
-            { id: '4', name: '354855321' }
           ],
           param: 'fullInspectionType1',
           defaultSelect: '',
+          onchange: true,
           width: 150
         },
         {
@@ -119,33 +131,207 @@ export default {
       ],
       tablePropsL,
       tableDataL: [],
-      tableHL: tableHeight(300)
+      tableHL: tableHeight(300),
+      reportTitle: '',
+      listQuery: {
+        startTime: '2020-07-06T16:59:23',
+        endTime: '2023-07-06T16:59:23',
+        glassFrame: '',
+        current: 1,
+        size: 500
+      },
+      selectArr: [], // 表格选中的数据
+      glassQualityArr: [], //基板玻璃品质
+      thickReportArr: [] // 厚度汇总
     }
   },
   mounted() {
+    this.getOption()
     window.addEventListener('resize', () => {
       this.tableHL = tableHeight(300)
     })
+    this.formConfig[0].defaultSelect = [
+      moment().format('yyyy-MM-DD') + 'T00:00:00',
+      moment().format('yyyy-MM-DD') + 'T23:59:59'
+    ]
+    this.listQuery.startTime = moment().format('yyyy-MM-DD') + 'T00:00:00'
+    this.listQuery.endTime = moment().format('yyyy-MM-DD') + 'T23:59:59'
+    this.listQuery.glassFrame = '全部'
     this.getList()
   },
   methods: {
+    getList() {
+      listGlass({ ...this.listQuery }).then((res) => {
+        if (res.code === 0) {
+          this.tableDataL = res.data
+        } else {
+          this.tableDataL = []
+        }
+      })
+    },
+    getOption() {
+      let arr = JSON.parse(
+        localStorage.getItem('publicList')
+      ).glassRackStationVoList
+      let newArr = arr.map((item) => ({
+        id: item.dataName,
+        name: item.dataName
+      }))
+      newArr.push({ id: '全部', name: '全部' }, { id: '废片', name: '废片' })
+      this.formConfig[1].selectOptions = newArr
+      console.log(newArr)
+    },
     buttonClick(val) {
+      let arr = []
       switch (val.btnName) {
         case 'search':
+          this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
+          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
+          this.listQuery.glassFrame = val.glassFrame
           this.getList()
           break
         default:
-          alert('导出')
+          if (this.selectArr.length === 0) {
+            this.$message({
+              message: '请勾选左侧表格数据',
+              type: 'warning'
+            })
+            return false
+          }
+          if (this.reportTitle === '') {
+            this.$message({
+              message: '请选择报表类型',
+              type: 'warning'
+            })
+            return false
+          }
+          console.log(this.selectArr)
+          for (let i of this.selectArr) {
+            arr.push(i.glassId)
+          }
+          if (this.reportTitle === '单片玻璃基板缺陷统计') {
+            this.exportGlassReport(arr)
+          } else if (this.reportTitle === '厚度汇总报表') {
+            this.exportThickReport(arr)
+          }
       }
     },
-    getList() {
+    selectChanged(val) {
-      let arr = []
+      this.reportTitle = val.value
-      for (let i = 0; i < 30; i++) {
+      this.glassQualityArr = []
-        let obj = {}
+      this.thickReportArr = []
-        obj.type = i
+    },
-        arr.push(obj)
+    selectChange(val) {
+      this.selectArr = val
+    },
+    // 生成报表
+    generateReport() {
+      if (this.selectArr.length === 0) {
+        this.$message({
+          message: '请勾选左侧表格数据',
+          type: 'warning'
+        })
+        return false
       }
-      this.tableDataL = arr
+      if (this.reportTitle === '') {
+        this.$message({
+          message: '请选择报表类型',
+          type: 'warning'
+        })
+        return false
+      }
+      let arr = []
+      for (let i of this.selectArr) {
+        arr.push(i.glassId)
+      }
+      switch (this.reportTitle) {
+        case '单片玻璃基板缺陷统计':
+          this.getGlassReport(arr)
+          break
+        case '厚度汇总报表':
+          this.getThickReport(arr)
+          break
+        default:
+      }
+    },
+    getGlassReport(arr) {
+      qualityReport({
+        // glassId: [122206240688, 122206240692],
+        glassId: arr,
+        size: 1000,
+        current: 1
+      }).then((res) => {
+        console.log(res)
+        this.glassQualityArr = res.data
+      })
+    },
+    exportGlassReport(arr) {
+      qualityReportexport({
+        glassId: arr,
+        size: 1000,
+        current: 1
+      }).then((response) => {
+        console.log(response)
+        let fileName = ''
+        const contentDisposition = response.headers['content-disposition']
+        if (contentDisposition) {
+          fileName = decodeURIComponent(
+            contentDisposition.slice(
+              contentDisposition.indexOf('filename=') + 9
+            )
+          )
+        }
+        const blob = new Blob([response.data])
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+          const a = document.createElement('a')
+          a.download = fileName
+          a.href = e.target.result
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }
+      })
+    },
+    getThickReport(arr) {
+      thickReport({
+        glassId: arr,
+        size: 1000,
+        current: 1
+      }).then((res) => {
+        console.log(res)
+        this.thickReportArr = res.data
+      })
+    },
+    exportThickReport(arr) {
+      thickReportexport({
+        glassId: arr,
+        size: 1000,
+        current: 1
+      }).then((response) => {
+        console.log(response)
+        let fileName = ''
+        const contentDisposition = response.headers['content-disposition']
+        if (contentDisposition) {
+          fileName = decodeURIComponent(
+            contentDisposition.slice(
+              contentDisposition.indexOf('filename=') + 9
+            )
+          )
+        }
+        const blob = new Blob([response.data])
+        const reader = new FileReader()
+        reader.readAsDataURL(blob)
+        reader.onload = (e) => {
+          const a = document.createElement('a')
+          a.download = fileName
+          a.href = e.target.result
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+        }
+      })
     }
   }
 }
@@ -174,7 +360,8 @@ export default {
       border-radius: 8px;
       background-color: #fff;
       .table-box {
-        height: calc(100vh - 352px);
+        margin-top: 16px;
+        height: calc(100vh - 290px);
         overflow: auto;
       }
     }
@@ -204,25 +391,6 @@ export default {
         margin-right: 8px;
         vertical-align: middle;
       }
-      .tip {
-        display: flex;
-        flex-flow: row wrap;
-        height: 40px;
-        margin: 16px 0 20px;
-        li {
-          width: 25%;
-          font-size: 14px;
-          font-weight: 500;
-          text-align: center;
-          padding-top: 10px;
-          border-top: 1px solid #e8e8e8;
-          border-bottom: 1px solid #e8e8e8;
-          border-left: 1px solid #e8e8e8;
-        }
-        :last-child {
-          border-right: 1px solid #e8e8e8;
-        }
-      }
     }
   }
 }

src/views/qualityManagement/finalInspectionDataReport/finalInspectionData.vue

@@ -0,0 +1,229 @@
+<template>
+  <div class="finalInspectionData">
+    <el-row class="box-top">
+      <el-col>
+        <div class="search-box">
+          <search-bar :formConfigs="formConfig" @headBtnClick="buttonClick" />
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="8" class="box">
+      <el-col :span="9">
+        <div class="left-box">
+          <span class="table-button">生成表格</span>
+          <base-table
+            :selectWidth="40"
+            :table-props="tablePropsL"
+            :table-data="tableDataL"
+            :max-height="tableHL"
+          />
+        </div>
+      </el-col>
+      <el-col :span="15">
+        <div class="right-box">
+          <div>
+            <span class="title">成品玻璃基本缺陷统计</span>
+          </div>
+          <ul class="tip">
+            <li>单位：um</li>
+            <li>玻璃ID：26522322323</li>
+            <li>生产日期：2022.12.24 15:56:24</li>
+            <li>等级：G1</li>
+          </ul>
+          <div class="table-box">
+            <final-data-table />
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import { tableHeight } from '@/utils/index'
+import finalDataTable from './components/finalDataTable'
+const tablePropsL = [
+  {
+    prop: 'id',
+    label: 'ID',
+    minWidth: 100
+  },
+  {
+    prop: 'time',
+    label: '检测时间',
+    minWidth: 100
+  },
+  {
+    prop: 'type',
+    label: '研磨类型',
+    minWidth: 100
+  }
+]
+export default {
+  name: 'FinalInspectionData',
+  components: { finalDataTable },
+  data() {
+    return {
+      formConfig: [
+        {
+          type: 'datePicker',
+          label: '检验时间',
+          dateType: 'datetime',
+          format: 'yyyy-MM-dd HH:mm:ss',
+          valueFormat: 'yyyy-MM-dd HH:mm:ss',
+          placeholder: '检验时间',
+          param: 'testTime',
+          width: 200
+        },
+        {
+          type: 'select',
+          label: '玻璃架',
+          selectOptions: [
+            { id: '1', name: '521321545' },
+            { id: '2', name: '932234561' },
+            { id: '3', name: '542121212' },
+            { id: '4', name: '354855321' }
+          ],
+          param: 'fullInspectionType',
+          defaultSelect: '',
+          width: 150
+        },
+        {
+          type: 'select',
+          label: '报表类型',
+          selectOptions: [
+            { id: '1', name: '单片玻璃基板缺陷统计' },
+            { id: '2', name: '终检下片包装' },
+            { id: '3', name: '厚度检查机报表' },
+            { id: '4', name: '厚度汇总报表' }
+          ],
+          param: 'fullInspectionType1',
+          defaultSelect: '',
+          width: 150
+        },
+        {
+          type: 'button',
+          btnName: '查询',
+          name: 'search',
+          color: 'primary'
+        },
+        {
+          type: 'separate'
+        },
+        {
+          type: 'button',
+          btnName: '导出',
+          name: 'export',
+          color: 'primary',
+          plain: true
+        }
+      ],
+      tablePropsL,
+      tableDataL: [],
+      tableHL: tableHeight(300)
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableHL = tableHeight(300)
+    })
+    this.getList()
+  },
+  methods: {
+    buttonClick(val) {
+      switch (val.btnName) {
+        case 'search':
+          this.getList()
+          break
+        default:
+          alert('导出')
+      }
+    },
+    getList() {
+      let arr = []
+      for (let i = 0; i < 30; i++) {
+        let obj = {}
+        obj.type = i
+        arr.push(obj)
+      }
+      this.tableDataL = arr
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.finalInspectionData {
+  width: 100%;
+  .box-top {
+    width: 100%;
+    padding: 8px 16px 0;
+    .search-box {
+      height: 62px;
+      padding: 10px 16px;
+      box-sizing: border-box;
+      border-radius: 8px;
+      background-color: #fff;
+    }
+  }
+  .box {
+    width: 100%;
+    padding: 8px 8px 0 16px;
+    .left-box,
+    .right-box {
+      height: calc(100vh - 220px);
+      padding: 16px;
+      border-radius: 8px;
+      background-color: #fff;
+      .table-box {
+        height: calc(100vh - 352px);
+        overflow: auto;
+      }
+    }
+    .left-box {
+      .table-button {
+        display: inline-block;
+        height: 30px;
+        width: 100%;
+        text-align: center;
+        padding-top: 4px;
+        margin-bottom: 16px;
+        font-size: 14px;
+        color: #0b58ff;
+        border-radius: 4px;
+        border: 1px dotted #0b58ff;
+        cursor: pointer;
+      }
+    }
+    .right-box {
+      .title::before {
+        content: '';
+        display: inline-block;
+        width: 4px;
+        height: 16px;
+        background: #0b58ff;
+        border-radius: 1px;
+        margin-right: 8px;
+        vertical-align: middle;
+      }
+      .tip {
+        display: flex;
+        flex-flow: row wrap;
+        height: 40px;
+        margin: 16px 0 20px;
+        li {
+          width: 25%;
+          font-size: 14px;
+          font-weight: 500;
+          text-align: center;
+          padding-top: 10px;
+          border-top: 1px solid #e8e8e8;
+          border-bottom: 1px solid #e8e8e8;
+          border-left: 1px solid #e8e8e8;
+        }
+        :last-child {
+          border-right: 1px solid #e8e8e8;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/qualityManagement/finalInspectionDataReport/glassQualityReport.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <base-table
+      :table-props="tableProps"
+      :table-data="tableData"
+      :max-height="tableH"
+    />
+  </div>
+</template>
+<script>
+import { timeFormatter, tableHeight } from '@/utils'
+const tableProps = [
+  {
+    prop: 'time',
+    label: '检测时间',
+    filter: timeFormatter,
+    minWidth: 160
+  },
+  {
+    prop: 'virtualcode',
+    label: '玻璃ID',
+    minWidth: 120
+  },
+  {
+    prop: 'lineA',
+    label: '加工条件',
+    children: [
+      {
+        prop: 'palletId',
+        label: '托盘ID'
+      },
+      {
+        prop: 'grindtype',
+        label: '研磨类型'
+      }
+    ]
+  },
+  {
+    prop: 'lineB',
+    label: '检测数据',
+    children: [
+      {
+        prop: 'sums',
+        label: '颗粒总数'
+      },
+      {
+        prop: 'distortion',
+        label: '变形'
+      },
+      {
+        prop: 'tail',
+        label: '拖尾'
+      },
+      {
+        prop: 'bl',
+        label: '气泡'
+      },
+      {
+        prop: 'stone',
+        label: '结石'
+      },
+      {
+        prop: 'scratch',
+        label: '划伤'
+      },
+      {
+        prop: 'surfaceSum',
+        label: '面检总数'
+      }
+    ]
+  },
+  {
+    prop: 'lineC',
+    label: '研磨电流(A)',
+    children: [
+      {
+        prop: 'ae',
+        label: 'A机台'
+      },
+      {
+        prop: 'be',
+        label: 'B机台'
+      },
+      {
+        prop: 'ce',
+        label: 'C机台'
+      },
+      {
+        prop: 'alle',
+        label: '总电流'
+      }
+    ]
+  },
+  {
+    prop: 'eletricityConform',
+    label: '工艺符合性',
+    minWidth: 100
+  },
+  {
+    prop: 'lineD',
+    label: '研磨时间(S)',
+    children: [
+      {
+        prop: 'ae',
+        label: 'A机台'
+      },
+      {
+        prop: 'be',
+        label: 'B机台'
+      },
+      {
+        prop: 'ce',
+        label: 'C机台'
+      },
+      {
+        prop: 'allt',
+        label: '总研磨时间',
+        minWidth: 100
+      }
+    ]
+  }
+]
+export default {
+  name: 'glassQualityReport',
+  data() {
+    return {
+      tableProps,
+      tableH: tableHeight(292)
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(292)
+    })
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  }
+}
+</script>

src/views/qualityManagement/finalInspectionDataReport/glassThickReport.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <base-table
+      :table-props="tableProps"
+      :table-data="tableData"
+      :max-height="tableH"
+    />
+  </div>
+</template>
+<script>
+import { timeFormatter, tableHeight } from '@/utils'
+const tableProps = [
+  {
+    prop: 'glassId',
+    label: '玻璃ID',
+    minWidth: 120
+  },
+  {
+    prop: 'testTime',
+    label: '检测时间',
+    filter: timeFormatter,
+    minWidth: 160
+  },
+  {
+    prop: 'palletId',
+    label: '托盘ID',
+    minWidth: 120
+  },
+  {
+    prop: 'grindType',
+    label: '研磨类型',
+    minWidth: 120
+  },
+  {
+    prop: 'maxValue',
+    label: '最大值',
+    minWidth: 120
+  },
+  {
+    prop: 'minValue',
+    label: '最小值',
+    minWidth: 120
+  },
+  {
+    prop: 'avgValue',
+    label: '平均值',
+    minWidth: 120
+  },
+  {
+    prop: 'ttvValue',
+    label: '厚薄差',
+    minWidth: 120
+  }
+]
+export default {
+  name: 'glassThickReport',
+  data() {
+    return {
+      tableProps,
+      tableH: tableHeight(292)
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', () => {
+      this.tableH = tableHeight(292)
+    })
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+    }
+  }
+}
+</script>

src/views/qualityManagement/processFullInspection/defectScatterPlot.vue

@@ -56,7 +56,7 @@
             <div class="bottom">
               <div style="margin-bottom: 10px">
                 <span class="title">合计</span>
-                <defect-scatter-plot-total />
+                <defect-scatter-plot-total ref="plotTotal" />
               </div>
             </div>
           </div>
@@ -168,27 +168,7 @@ export default {
         { label: '无法识别', value: 'iisrest' }
       ],
       selectedGlassId: [],
-      leftList: [
+      detailMsg: {}
-        { name: 'S', value: null, key: 's' },
-        { name: 'M', value: null, key: 'm' },
-        { name: 'L', value: null, key: 'l' },
-        { name: 'XL', value: null, key: 'xl' }
-      ],
-      rightList: [
-        { name: '气泡', value: null, key: 'bl' },
-        { name: '变形', value: null, key: 'distortion' },
-        { name: '纤维', value: null, key: 'fiber' },
-        { name: '划伤', value: null, key: 'scratch' },
-        { name: '点状缺陷', value: null, key: 'tin' },
-        { name: '结石', value: null, key: 'stone' },
-        { name: '铂金', value: null, key: 'pt' },
-        { name: '结节', value: null, key: 'knot' },
-        { name: '拖尾', value: null, key: 'tail' },
-        { name: 'ADG', value: null, key: 'adg' },
-        { name: '锡缺陷(顶部)', value: null, key: 'top' },
-        { name: '锡缺陷(底部)', value: null, key: 'bottom' },
-        { name: '无法识别', value: null, key: 'iisrest' }
-      ]
     }
   },
   mounted() {
@@ -212,26 +192,44 @@ export default {
     },
     drawPic() {
       // 绘图
+      if (this.selectedGlassId.length === 0) {
+        this.$message({
+          message: '请先勾选左侧的玻璃',
+          type: 'error',
+          duration: 1500,
+          onClose: () => {}
+        })
+        return false
+      }
       this.getDetail()
-      drawPoint().then((res) => {
+      drawPoint({
+        startTime: this.listQuery.startTime,
+        endTime: this.listQuery.endTime,
+        glassId: this.selectedGlassId
+      }).then((res) => {
         console.log(res)
       })
     },
     getDetail() {
       // 明细
       queryPointClear({
+        startTime: this.listQuery.startTime,
+        endTime: this.listQuery.endTime,
         glassId: this.selectedGlassId
       }).then((res) => {
-        console.log(res)
+        if (res.code === 0) {
+          this.detailMsg = res.data[0] || {}
+          this.$refs.plotTotal.init(this.detailMsg)
+        }
       })
     },
     buttonClick(val) {
       //查询
-      console.log(val)
       this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
       this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
       this.getList()
     },
+    // 左侧列表选择
     selectChange(val) {
       console.log(val)
       let arr = []
@@ -244,8 +242,8 @@ export default {
         this.selectedGlassId = []
       }
     },
+    // 缺陷选择
     selectType(val) {
-      console.log(val)
       if (val === 'pellet') {
         this.checkList = ['s', 'm', 'l', 'xl']
       } else {

src/views/qualityManagement/processFullInspection/particleLineChart.vue

@@ -71,7 +71,6 @@ export default {
     ]
     this.listQuery.startTime = moment().format('yyyy-MM-DD') + 'T00:00:00'
     this.listQuery.endTime = moment().format('yyyy-MM-DD') + 'T23:59:59'
-    this.getList()
     this.getMsg()
   },
   methods: {

src/views/qualityManagement/processFullInspection/thicknessDistributionMap.vue

@@ -130,7 +130,6 @@ export default {
           this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
           this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
           this.listQuery.glassId = val.glassId
-          this.listQuery.current = 1
           this.getList()
           break
         default:

src/views/siteMonitoring/components/ProductionLineDiagram.vue

@@ -65,7 +65,7 @@ export default {
     this.resetSize()
     this.resetSize2()
     this.getGlass()
-    this.getAlarm()
+    // this.getAlarm() //报警红框
     // this.timer = setInterval(this.getGlassAndAlarm, 1000)
   },
   methods: {
@@ -100,8 +100,8 @@ export default {
       this.getArea3()
       this.getText()
     },
-    getArea1() {
     // 部分1
+    getArea1() {
       this.drawRect(22, 43, 28, 22, '#B2FFC8', true)
       this.drawRect(66, 43, 28, 22, '#B2FFC8', true)
       this.drawRect(22, 161, 28, 22, '#B2FFC8', true)