车间组件完成情况

src/views/ManufacturingCenter/CompletionOfWorkshopComponents/index.vue

@@ -20,9 +20,9 @@
       </el-select>
     </el-card>
     <el-row>
-      <el-col style="width: 450px">
+      <el-col :span="8">
         <el-card>
-          <el-table :data="tableData1" style="height: 670px" highlight-current-row border>
+          <el-table :data="tableData1" :row-class-name="tableRowClassName" style="height: 670px" highlight-current-row border>
             <el-table-column align="center" label="工序名" width="110">
               <template slot-scope="scope">
                 {{ scope.row.工艺名称 }}
@@ -46,9 +46,9 @@
           </el-table>
         </el-card>
       </el-col>
-      <el-col style="width:1000px">
+      <el-col :span="16">
         <el-card>
-          <span>机床图号：{{ 机床图号 }} 机床名称：{{ 机床名称 }}</span>
+          <span style="background-color: rgb(126,172,237);font-size: 20px">{{ 机床图号 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ 机床名称 }}</span>
           <div style="margin: 10px 0 0 20px;height: 650px;overflow: auto">
             <el-tree
               :data="departmentData"
@@ -221,11 +221,21 @@ export default {
       selectProcedure(row.工艺计划流水号).then(response => {
         this.tableData1 = response.data
       })
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (row.工序状态 === 4) {
+        return 'cjzuwcqk_complet'
+      }
     }
   }
 }
 </script>
 
+<style>
+  .el-table .cjzuwcqk_complet {
+    background: #67C23A;
+  }
+</style>
 <style lang="scss">
   .selectTree{
     .el-tree-node__content>.el-tree-node__expand-icon{