2024-1-12-3 设备管理-汇总报表样式修改

src/views/device/summaryReport/index.vue

@@ -64,8 +64,22 @@
       </el-form-item>
     </el-form>
 
-    <el-table :data="checkList" border :span-method="objectSpanMethod">
+    <!-- :span-method="objectSpanMethod" -->
-      <el-table-column prop="itemTypeName" label="维护类型" width="100" fixed>
+    <el-table
+      :data="checkList"
+      border
+      height="520"
+    >
+      <!-- 序号 -->
+      <el-table-column
+        type="index"
+        width="90"
+        align="center"
+        :index="indexMethod"
+        label="序号"
+        fixed
+      />
+      <el-table-column prop="itemTypeName" label="维护类型" width="100">
       </el-table-column>
       <el-table-column prop="itemName" label="检查项名称" width="150">
       </el-table-column>
@@ -131,107 +145,209 @@
       </el-table-column>
       <el-table-column prop="eleven" label="11" width="40">
         <template slot-scope="scope">
-          {{ scope.row.eleven == "1" ? "√" : scope.row.eleven == "0" ? "X" : ""}}
+          {{
+            scope.row.eleven == "1" ? "√" : scope.row.eleven == "0" ? "X" : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twelve" label="12" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twelve == "1" ? "√" : scope.row.twelve == "0" ? "X" : ""}}
+          {{
+            scope.row.twelve == "1" ? "√" : scope.row.twelve == "0" ? "X" : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="thirteen" label="13" width="40">
         <template slot-scope="scope">
-          {{ scope.row.thirteen == "1" ? "√" : scope.row.thirteen == "0" ? "X" : ""}}
+          {{
+            scope.row.thirteen == "1"
+              ? "√"
+              : scope.row.thirteen == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="fourteen" label="14" width="40">
         <template slot-scope="scope">
-          {{ scope.row.fourteen == "1" ? "√" : scope.row.fourteen == "0" ? "X" : ""}}
+          {{
+            scope.row.fourteen == "1"
+              ? "√"
+              : scope.row.fourteen == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="fifteen" label="15" width="40">
         <template slot-scope="scope">
-          {{ scope.row.fifteen == "1" ? "√" : scope.row.fifteen == "0" ? "X" : ""}}
+          {{
+            scope.row.fifteen == "1" ? "√" : scope.row.fifteen == "0" ? "X" : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="sixteen" label="16" width="40">
         <template slot-scope="scope">
-          {{ scope.row.sixteen == "1" ? "√" : scope.row.sixteen == "0" ? "X" : ""}}
+          {{
+            scope.row.sixteen == "1" ? "√" : scope.row.sixteen == "0" ? "X" : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="seventeen" label="17" width="40">
         <template slot-scope="scope">
-          {{ scope.row.seventeen == "1" ? "√" : scope.row.seventeen == "0" ? "X" : ""}}
+          {{
+            scope.row.seventeen == "1"
+              ? "√"
+              : scope.row.seventeen == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="eighteen" label="18" width="40">
         <template slot-scope="scope">
-          {{ scope.row.eighteen == "1" ? "√" : scope.row.eighteen == "0" ? "X" : ""}}
+          {{
+            scope.row.eighteen == "1"
+              ? "√"
+              : scope.row.eighteen == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="nineteen" label="19" width="40">
         <template slot-scope="scope">
-          {{ scope.row.nineteen == "1" ? "√" : scope.row.nineteen == "0" ? "X" : ""}}
+          {{
+            scope.row.nineteen == "1"
+              ? "√"
+              : scope.row.nineteen == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twenty" label="20" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twenty == "1" ? "√" : scope.row.twenty == "0" ? "X" : ""}}
+          {{
+            scope.row.twenty == "1" ? "√" : scope.row.twenty == "0" ? "X" : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentyOne" label="21" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentyOne == "1" ? "√" : scope.row.twentyOne == "0" ? "X" : ""}}
+          {{
+            scope.row.twentyOne == "1"
+              ? "√"
+              : scope.row.twentyOne == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentyTwo" label="22" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentyTwo == "1" ? "√" : scope.row.twentyTwo == "0" ? "X" : ""}}
+          {{
+            scope.row.twentyTwo == "1"
+              ? "√"
+              : scope.row.twentyTwo == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentyThree" label="23" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentyThree == "1" ? "√" : scope.row.twentyThree == "0" ? "X" : ""}}
+          {{
+            scope.row.twentyThree == "1"
+              ? "√"
+              : scope.row.twentyThree == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentyFour" label="24" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentyFour == "1" ? "√" : scope.row.twentyFour == "0" ? "X" : ""}}
+          {{
+            scope.row.twentyFour == "1"
+              ? "√"
+              : scope.row.twentyFour == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentyFive" label="30" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentyFive == "1" ? "√" : scope.row.twentyFive == "0" ? "X" : ""}}
+          {{
+            scope.row.twentyFive == "1"
+              ? "√"
+              : scope.row.twentyFive == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentySix" label="26" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentySix == "1" ? "√" : scope.row.twentySix == "0" ? "X" : ""}}
+          {{
+            scope.row.twentySix == "1"
+              ? "√"
+              : scope.row.twentySix == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentySeven" label="27" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentySeven == "1" ? "√" : scope.row.twentySeven == "0" ? "X" : ""}}
+          {{
+            scope.row.twentySeven == "1"
+              ? "√"
+              : scope.row.twentySeven == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentyEight" label="28" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentyEight == "1" ? "√" : scope.row.twentyEight == "0" ? "X" : ""}}
+          {{
+            scope.row.twentyEight == "1"
+              ? "√"
+              : scope.row.twentyEight == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="twentyNine" label="29" width="40">
         <template slot-scope="scope">
-          {{ scope.row.twentyNine == "1" ? "√" : scope.row.twentyNine == "0" ? "X" : ""}}
+          {{
+            scope.row.twentyNine == "1"
+              ? "√"
+              : scope.row.twentyNine == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="thirty" label="30" width="40">
         <template slot-scope="scope">
-          {{ scope.row.thirty == "1" ? "√" : scope.row.thirty == "0" ? "X" : ""}}
+          {{
+            scope.row.thirty == "1" ? "√" : scope.row.thirty == "0" ? "X" : ""
+          }}
         </template>
       </el-table-column>
       <el-table-column prop="thirtyOne" label="31" width="40">
         <template slot-scope="scope">
-          {{ scope.row.thirtyOne == "1" ? "√" : scope.row.thirtyOne == "0" ? "X" : ""}}
+          {{
+            scope.row.thirtyOne == "1"
+              ? "√"
+              : scope.row.thirtyOne == "0"
+              ? "X"
+              : ""
+          }}
         </template>
       </el-table-column>
     </el-table>
@@ -483,21 +599,27 @@ export default {
                   }
                 } else if (str == "23") {
                   if (this.matchList[j].repairReach == 1) {
-                    this.checkList[i].twentyThree = this.matchList[j].repairReach;
+                    this.checkList[i].twentyThree =
+                      this.matchList[j].repairReach;
                   } else {
-                    this.checkList[i].twentyThree = this.matchList[j].detailReach;
+                    this.checkList[i].twentyThree =
+                      this.matchList[j].detailReach;
                   }
                 } else if (str == "24") {
                   if (this.matchList[j].repairReach == 1) {
-                    this.checkList[i].twentyFour = this.matchList[j].repairReach;
+                    this.checkList[i].twentyFour =
+                      this.matchList[j].repairReach;
                   } else {
-                    this.checkList[i].twentyFour = this.matchList[j].detailReach;
+                    this.checkList[i].twentyFour =
+                      this.matchList[j].detailReach;
                   }
                 } else if (str == "25") {
                   if (this.matchList[j].repairReach == 1) {
-                    this.checkList[i].twentyFive = this.matchList[j].repairReach;
+                    this.checkList[i].twentyFive =
+                      this.matchList[j].repairReach;
                   } else {
-                    this.checkList[i].twentyFive = this.matchList[j].detailReach;
+                    this.checkList[i].twentyFive =
+                      this.matchList[j].detailReach;
                   }
                 } else if (str == "26") {
                   if (this.matchList[j].repairReach == 1) {
@@ -507,21 +629,27 @@ export default {
                   }
                 } else if (str == "27") {
                   if (this.matchList[j].repairReach == 1) {
-                    this.checkList[i].twentySeven = this.matchList[j].repairReach;
+                    this.checkList[i].twentySeven =
+                      this.matchList[j].repairReach;
                   } else {
-                    this.checkList[i].twentySeven = this.matchList[j].detailReach;
+                    this.checkList[i].twentySeven =
+                      this.matchList[j].detailReach;
                   }
                 } else if (str == "28") {
                   if (this.matchList[j].repairReach == 1) {
-                    this.checkList[i].twentyEight = this.matchList[j].repairReach;
+                    this.checkList[i].twentyEight =
+                      this.matchList[j].repairReach;
                   } else {
-                    this.checkList[i].twentyEight = this.matchList[j].detailReach;
+                    this.checkList[i].twentyEight =
+                      this.matchList[j].detailReach;
                   }
                 } else if (str == "29") {
                   if (this.matchList[j].repairReach == 1) {
-                    this.checkList[i].twentyNine = this.matchList[j].repairReach;
+                    this.checkList[i].twentyNine =
+                      this.matchList[j].repairReach;
                   } else {
-                    this.checkList[i].twentyNine = this.matchList[j].detailReach;
+                    this.checkList[i].twentyNine =
+                      this.matchList[j].detailReach;
                   }
                 } else if (str == "30") {
                   if (this.matchList[j].repairReach == 1) {
@@ -601,57 +729,57 @@ export default {
       this.$refs.itemSelect.showFlag = true;
     },
 
-    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      if (columnIndex === 0) {
+    //   if (columnIndex === 0) {
-        // 获取当前单元格的值
+    //     // 获取当前单元格的值
-        const currentValue = row[column.property];
+    //     const currentValue = row[column.property];
-        // 获取上一行相同列的值
+    //     // 获取上一行相同列的值
-        const preRow = this.checkList[rowIndex - 1];
+    //     const preRow = this.checkList[rowIndex - 1];
-        const preValue = preRow ? preRow[column.property] : null;
+    //     const preValue = preRow ? preRow[column.property] : null;
-        // 如果当前值和上一行的值相同，则将当前单元格隐藏
+    //     // 如果当前值和上一行的值相同，则将当前单元格隐藏
-        if (currentValue === preValue) {
+    //     if (currentValue === preValue) {
-          return { rowspan: 0, colspan: 0 };
+    //       return { rowspan: 0, colspan: 0 };
-        } else {
+    //     } else {
-          // 否则计算当前单元格应该跨越多少行
+    //       // 否则计算当前单元格应该跨越多少行
-          let rowspan = 1;
+    //       let rowspan = 1;
-          for (let i = rowIndex + 1; i < this.checkList.length; i++) {
+    //       for (let i = rowIndex + 1; i < this.checkList.length; i++) {
-            const nextRow = this.checkList[i];
+    //         const nextRow = this.checkList[i];
-            const nextValue = nextRow[column.property];
+    //         const nextValue = nextRow[column.property];
-            if (nextValue === currentValue) {
+    //         if (nextValue === currentValue) {
-              rowspan++;
+    //           rowspan++;
-            } else {
+    //         } else {
-              break;
+    //           break;
-            }
+    //         }
-          }
+    //       }
-          return { rowspan, colspan: 1 };
+    //       return { rowspan, colspan: 1 };
-        }
+    //     }
-      }
+    //   }
 
-      if (columnIndex === 1) {
+    //   if (columnIndex === 1) {
-        // 获取当前单元格的值
+    //     // 获取当前单元格的值
-        const currentValue = row[column.property];
+    //     const currentValue = row[column.property];
-        // 获取上一行相同列的值
+    //     // 获取上一行相同列的值
-        const preRow = this.checkList[rowIndex - 1];
+    //     const preRow = this.checkList[rowIndex - 1];
-        const preValue = preRow ? preRow[column.property] : null;
+    //     const preValue = preRow ? preRow[column.property] : null;
-        // 如果当前值和上一行的值相同，则将当前单元格隐藏
+    //     // 如果当前值和上一行的值相同，则将当前单元格隐藏
-        if (currentValue === preValue) {
+    //     if (currentValue === preValue) {
-          return { rowspan: 0, colspan: 0 };
+    //       return { rowspan: 0, colspan: 0 };
-        } else {
+    //     } else {
-          // 否则计算当前单元格应该跨越多少行
+    //       // 否则计算当前单元格应该跨越多少行
-          let rowspan = 1;
+    //       let rowspan = 1;
-          for (let i = rowIndex + 1; i < this.checkList.length; i++) {
+    //       for (let i = rowIndex + 1; i < this.checkList.length; i++) {
-            const nextRow = this.checkList[i];
+    //         const nextRow = this.checkList[i];
-            const nextValue = nextRow[column.property];
+    //         const nextValue = nextRow[column.property];
-            if (nextValue === currentValue) {
+    //         if (nextValue === currentValue) {
-              rowspan++;
+    //           rowspan++;
-            } else {
+    //         } else {
-              break;
+    //           break;
-            }
+    //         }
-          }
+    //       }
-          return { rowspan, colspan: 1 };
+    //       return { rowspan, colspan: 1 };
-        }
+    //     }
-      }
+    //   }
-    },
+    // },
   },
 };
 </script>
@@ -663,3 +791,4 @@ export default {
 }
 </style>
 
+