作业执行详情界面

src/views/mes/job/jobplay/jobPlayDetail.vue

@@ -6,10 +6,11 @@
           <span style="font-weight: bolder">作业状态</span>
         </div>
         <el-table :data="jobTicket" :header-cell-style="{'text-align':'center'}"
-                  :cell-style="{'text-align':'center'}">
-          <el-table-column label="作业编号" prop="ticketCode" >
+                  :cell-style="{'text-align':'center'}"
+        >
+          <el-table-column label="作业编号" prop="ticketCode">
           </el-table-column>
-          <el-table-column label="作业名称" prop="ticketCode" >
+          <el-table-column label="作业名称" prop="ticketCode">
           </el-table-column>
           <el-table-column label="状态" align="center" prop="ticketStatus">
             <template slot-scope="scope">
@@ -19,68 +20,131 @@
               />
             </template>
           </el-table-column>
-          <el-table-column label="上锁钥匙" prop="lockKeyName" >
+          <el-table-column label="上锁钥匙" prop="lockKeyName">
           </el-table-column>
-          <el-table-column label="解锁钥匙" prop="colockKeyName" >
+          <el-table-column label="解锁钥匙" prop="colockKeyName">
           </el-table-column>
         </el-table>
       </el-card>
     </el-row>
-    <el-row style="margin-top:10px;">
-      <el-col :span="12">
-        <el-card class="box-card1">
+    <el-row style="margin-top:10px;height:620px;overflow-y:auto">
+      <el-col :span="6" style="height:1000px">
+        <el-card class="box-card1" >
           <div slot="header" class="clearfix">
             <span style="font-weight: bolder">人员状态</span>
           </div>
           <el-table :data="lockUserList">
-            <el-table-column label="上锁人" prop="userName" width="100">
+            <el-table-column label="上锁人" prop="userName">
             </el-table-column>
             <el-table-column label="状态" align="center" prop="jobStatus">
               <template slot-scope="scope">
-                <dict-tag
-                  :options="dict.type.ticket_status"
-                  :value="scope.row.ticketStatus"
-                />
+                <div
+                  class="box"
+                  style="
+                width: 30px;
+                height: 30px;
+                border: 1px solid black;
+                background-color: white;
+                margin: 0 auto;
+              "
+                >
+                  <span
+                    v-if="scope.row.jobStatus==0||scope.row.jobStatus==1||scope.row.jobStatus==2||scope.row.jobStatus==3"
+                  ></span>
+                  <!-- 显示错号 -->
+                  <span
+                    v-else-if="scope.row.jobStatus==4"
+                    style="font-size: 20px; line-height: 30px"
+                  >🔒</span
+                  >
+                  <!-- 显示对号 -->
+                  <span
+                    v-else-if="scope.row.jobStatus==5"
+                    style="font-size: 20px; line-height: 30px"
+                  >✓</span
+                  >
+                </div>
               </template>
             </el-table-column>
           </el-table>
-
         </el-card>
-        <el-card class="box-card1">
-            <el-table :data="colockUserList">
-              <el-table-column label="共锁人" prop="userName" >
-              </el-table-column>
-              <el-table-column label="状态" align="center" prop="jobStatus">
-                <template slot-scope="scope">
-                  <dict-tag
-                    :options="dict.type.ticket_status"
-                    :value="scope.row.ticketStatus"
-                  />
-                </template>
-              </el-table-column>
-            </el-table>
+        <el-card>
+          <el-table :data="colockUserList"  >
+            <el-table-column label="共锁人" prop="userName">
+            </el-table-column>
+            <el-table-column label="状态" align="center" prop="jobStatus">
+              <template slot-scope="scope">
+                <div
+                  class="box"
+                  style="
+                width: 30px;
+                height: 30px;
+                border: 1px solid black;
+                background-color: white;
+                margin: 0 auto;
+              "
+                >
+                  <span
+                    v-if="scope.row.jobStatus==0||scope.row.jobStatus==1||scope.row.jobStatus==2||scope.row.jobStatus==3"
+                  ></span>
+                  <!-- 显示错号 -->
+                  <span
+                    v-else-if="scope.row.jobStatus==4"
+                    style="font-size: 20px; line-height: 30px"
+                  >🔒</span
+                  >
+                  <!-- 显示对号 -->
+                  <span
+                    v-else-if="scope.row.jobStatus==5"
+                    style="font-size: 20px; line-height: 30px"
+                  >✓</span
+                  >
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
         </el-card>
       </el-col>
-      <el-col :span="12">
-        <el-card class="box-card2">
+      <el-col :span="6">
+        <el-card class="box-card2" >
           <div slot="header" class="clearfix">
             <span style="font-weight: bolder">隔离点状态</span>
           </div>
           <el-table :data="ticketPointsList">
-            <el-table-column label="隔离点" prop="pointName" >
+            <el-table-column label="隔离点" prop="pointName" width="80">
             </el-table-column>
 
             <el-table-column label="状态" align="center" prop="pointStatus">
               <template slot-scope="scope">
-                <dict-tag
-                  :options="dict.type.ticket_status"
-                  :value="scope.row.ticketStatus"
-                />
+                <div
+                  class="box"
+                  style="
+                width: 30px;
+                height: 30px;
+                border: 1px solid black;
+                background-color: white;
+                margin: 0 auto;
+              "
+                >
+                  <span v-if="scope.row.pointStatus==0" style=""></span>
+                  <!-- 显示错号 -->
+                  <span
+                    v-else-if="scope.row.pointStatus==1"
+                    style="font-size: 20px; line-height: 30px;"
+                  >🔒</span
+                  >
+                  <!-- 显示对号 -->
+                  <span
+                    v-else-if="scope.row.pointStatus==2"
+                    style="font-size: 20px; line-height: 30px;"
+                  >✓</span
+                  >
+                </div>
               </template>
             </el-table-column>
-            <el-table-column label="挂锁名称" prop="lockName" >
+            <el-table-column label="挂锁名称" prop="lockName">
             </el-table-column>
-            <el-table-column label="锁具" prop="locksetName" >
+            <el-table-column label="锁具" prop="locksetName">
             </el-table-column>
           </el-table>
         </el-card>
@@ -94,13 +158,13 @@ import { getJobPlayTicketInfo } from '@/api/mes/jobplay/jobplay'
 
 export default {
   name: 'jobPlayDetail',
-  dicts: ["ticket_type", "ticket_status"],
+  dicts: ['ticket_type', 'ticket_status'],
   data() {
     return {
-      jobTicket:[],
-      lockUserList:[],
-      colockUserList:[],
-      ticketPointsList:[]
+      jobTicket: [],
+      lockUserList: [],
+      colockUserList: [],
+      ticketPointsList: []
 
     }
   },
@@ -111,15 +175,15 @@ export default {
     getJobPlayInfo() {
       const ticketId = this.$route.query.ticketId
       getJobPlayTicketInfo(ticketId).then(res => {
-        console.log(res,'作业执行详细信息')
+        console.log(res, '作业执行详细信息')
         this.jobTicket = [res.data.jobTicket].map(item => ({
           ...item,
           lockKeyName: res.data.lockKeyName,
-          colockKeyName: res.data.colockKeyName,
-        }));
-        this.lockUserList=res.data.lockUserList
-        this.colockUserList=res.data.colockUserList
-        this.ticketPointsList=res.data.ticketPointsList
+          colockKeyName: res.data.colockKeyName
+        }))
+        this.lockUserList = res.data.lockUserList
+        this.colockUserList = res.data.colockUserList
+        this.ticketPointsList = res.data.ticketPointsList
       })
     }
   }
@@ -142,20 +206,61 @@ export default {
   display: table;
   content: "";
 }
+
 .clearfix:after {
   clear: both
 }
 
 .box-card {
-  width: 980px;
+  width: 1210px;
   margin: 15px;
 }
+
 .box-card1 {
-  width: 780px;
+  width: 400px;
   margin: 15px;
 }
+
 .box-card2 {
   width: 780px;
   margin: 15px;
 }
+
+.status-container {
+  width: 100%;
+  height: 100%;
+  background: pink;
+  display: flex;
+}
+
+.box {
+  width: 30px;
+  height: 30px;
+  border: 1px solid #e7e5e5;
+  background-color: rgb(209, 77, 77);
+}
+
+.error-icon {
+  color: red;
+  font-weight: bold;
+}
+
+.success-icon {
+  color: green;
+  font-weight: bold;
+}
+
+//滚动条的宽度
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: #e4e4e4;
+  border-radius: 6px;
+}
+
+//滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #a1a3a9;
+  border-radius: 6px;
+}
 </style>