质量报表

src/views/qualityManagement/FQC/qualityStatistics.vue

@@ -22,8 +22,9 @@
         </el-form-item>
         <el-form-item label="班组">
           <el-select v-model="search.team" placeholder="输入班组">
-            <el-option label="A班" value="A班"> </el-option>
+            <el-option label="A班" value="A"> </el-option>
-            <el-option label="B班" value="B班"> </el-option>
+            <el-option label="B班" value="B"> </el-option>
+            <el-option label="" value=""> </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="报表类型">
@@ -43,11 +44,11 @@
       border
       resizable
       show-overflow
+      :header-cell-style="headerCellStyle"
       ref="xTable"
       :column-config="{ resizable: true }"
       :row-config="{ isHover: true }"
       v-loading="loading"
-      height="800"
       :data="QualityStatisticsTable"
       :merge-cells="mergeCells"
     >
@@ -58,7 +59,9 @@
         <vxe-column field="requireNumber" title="生产投入数"></vxe-column>
         <vxe-column field="team" title="班次"></vxe-column>
         <vxe-column field="qualifiedNumber" title="合格数"></vxe-column>
-        <vxe-column field="qualifiedRate" title="合格率"></vxe-column>
+        <vxe-column title="合格率">
+          <template #default="{ row }"> {{ row.qualifiedRate }}% </template>
+        </vxe-column>
         <vxe-column field="paoguangTotal" title="抛光总数"></vxe-column>
         <vxe-column field="damoTotal" title="打磨总数"></vxe-column>
         <vxe-column field="baofeiTotal" title="报废总数"></vxe-column>
@@ -197,23 +200,22 @@ export default {
   created() {},
   methods: {
     //todo  设置表合并行
-    mergeTable(num){
+    mergeTable(num) {
-      for(let i=0;i<this.QualityStatisticsTable.length;i=i+num){  
+      this.mergeCells = []
-          this.mergeCells.push({row:i,col:0,rowspan:num,colspan:0})
+      for (let i = 0; i < this.QualityStatisticsTable.length; i = i + num) {
-          this.mergeCells.push({row:i,col:1,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 0, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:2,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 1, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:3,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 2, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:4,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 3, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:5,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 4, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:6,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 5, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:7,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 6, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:8,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 7, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:9,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 8, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:10,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 9, rowspan: num, colspan: 0 })
-          this.mergeCells.push({row:i,col:11,rowspan:num,colspan:0})
+        this.mergeCells.push({ row: i, col: 10, rowspan: num, colspan: 0 })
-        
+        this.mergeCells.push({ row: i, col: 11, rowspan: num, colspan: 0 })
       }
-
     },
 
     //todo 获取统计数据
@@ -259,12 +261,25 @@ export default {
               this.loading = false
               this.QualityStatisticsTable = res.data.item1
               this.pagination.total = res.data.item2
-              this.mergeTable()
+              this.mergeTable(2)
             }
           })
           break
       }
     },
+
+    //todo 设置表头颜色
+    headerCellStyle() {
+      return {
+        backgroundColor: '#2D3D51',
+        color: '#ffffff',
+      }
+    },
+
+    //todo 导出excel
+    exportDataEvent() {
+      this.$refs.xTable1.exportData({ type: 'csv' })
+    },
   },
 }
 </script>