解决作业执行页面冲突

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

@@ -74,77 +74,157 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button v-no-more-click
-                   type="primary"
-                   icon="el-icon-search"
-                   size="mini"
-                   @click="handleQuery"
-        >搜索</el-button
+        <el-button
+          v-no-more-click
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
         >
-        <el-button v-no-more-click icon="el-icon-refresh" size="mini" @click="resetQuery"
-        >重置</el-button
+        <el-button
+          v-no-more-click
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+          >重置</el-button
         >
       </el-form-item>
     </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button v-no-more-click
-                   type="danger"
-                   plain
-                   icon="el-icon-delete"
-                   size="mini"
-                   :disabled="multiple"
-                   @click="handleDelete"
-                   v-hasPermi="['mes:job:jobplay:remove']"
-        >批量删除
-        </el-button>
-      </el-col>
-
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
-    </el-row>
-
     <el-table
       v-loading="loading"
       :data="jobList"
       @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" align="center" />
-       <el-table-column
-        label="作业票Id"
-        prop="ticketId"
-        width="75"
-      ></el-table-column>
-      <el-table-column label="作业票编号" align="center" prop="ticketCode">
+      <el-table-column
+        label="作业编号"
+        align="center"
+        prop="ticketCode"
+        width="180"
+      >
       </el-table-column>
-      <el-table-column label="作业票名称" align="center" prop="ticketName" />
-      <el-table-column label="作业类型 " align="center" prop="ticketType">
+      <el-table-column
+        label="作业名称"
+        align="center"
+        prop="ticketName"
+        width="230"
+      />
+      <!-- 上锁状态 -->
+      <el-table-column label="上锁状态" align="center" width="200">
         <template slot-scope="scope">
-          <dict-tag
-            :options="dict.type.ticket_type"
-            :value="scope.row.ticketType"
-          />
+          <div
+            class="status-container"
+            style="width: 100%; height: 100%; display: flex; tetx-align: center"
+          >
+            <!-- 渲染 lockNum 框子 -->
+            <div
+              v-for="(item, index) in scope.row.lockNum"
+              :key="'lock-' + index"
+              class="box"
+              style="
+                width: 30px;
+                height: 30px;
+                border: 1px solid #e7e5e5;
+                background-color: #fff;
+              "
+            >
+              <span v-if="index < scope.row.lockNum"></span>
+              <!-- 显示错号 -->
+              <span
+                v-else-if="index < scope.row.lockedNum"
+                style="font-size: 20px; line-height: 30px"
+                >🔒</span
+              >
+              <!-- 显示对号 -->
+              <span
+                v-else-if="index < scope.row.removeLockNum"
+                style="font-size: 20px; line-height: 30px"
+                >✓</span
+              >
+            </div>
+          </div>
         </template>
       </el-table-column>
-      <el-table-column label="上锁状态 " align="center" prop="ticketName" />
-      <el-table-column label="创建时间" align="center" prop="createTime">
+
+      <!-- 共锁状态 -->
+      <el-table-column label="共锁状态" align="center">
+        <template slot-scope="scope">
+          <div
+            class="status-container"
+            style="
+              width: 100%;
+              height: 100%;
+              display: flex;
+              tetx-align: center;
+            "
+          >
+            <!-- 渲染 removeColockNum -->
+            <div
+              v-for="(item, index) in scope.row.removeColockNum"
+              :key="'remove-colock-' + index"
+              class="box"
+              style="
+                width: 30px;
+                height: 30px;
+                border: 1px solid #e7e5e5;
+                background-color: #fff;
+                margin: 0 2px;
+                box-sizing: border-box;
+              "
+            >
+              <span style="font-size: 20px">✓</span>
+            </div>
+            <!-- 渲染 colockedNum -->
+            <div
+              v-for="(item, index) in scope.row.colockedNum"
+              :key="'colocked-' + index"
+              class="box"
+              style="
+                width: 30px;
+                height: 30px;
+                margin: 0 2px;
+                border: 1px solid #e7e5e5;
+                background-color: #fff;
+                box-sizing: border-box;
+              "
+            >
+              <span style="font-size: 20px">🔒</span>
+            </div>
+            <!-- 渲染 colockNum -->
+            <div
+              v-for="(item, index) in scope.row.colockNum"
+              :key="'colock-' + index"
+              class="box"
+              style="
+                width: 30px;
+                height: 30px;
+                border: 1px solid #e7e5e5;
+                background-color: #fff;
+                margin: 0 2px;
+                box-sizing: border-box;
+              "
+            >
+              <!-- 空框子，如果没有对号或错号，则为空 -->
+            </div>
+          </div>
+        </template>
       </el-table-column>
+
       <el-table-column
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button v-no-more-click
-                     size="mini"
-                     type="text"
-                     icon="el-icon-view"
-                     @click="handleLook(scope.row)"
-                     v-hasPermi="['mes:job:jobplay:view']"
-          >查看
+          <el-button
+            v-no-more-click
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleLook(scope.row)"
+            v-hasPermi="['mes:job:jobplay:view']"
+            >详情
           </el-button>
         </template>
       </el-table-column>
@@ -161,7 +241,12 @@
 </template>
 
 <script>
-import {listJobPlayTicket} from "@/api/mes/jobplay/jobplay"
+import {
+  listJobPlayTicket,
+  getJobPlayTicketInfo,
+} from "@/api/mes/jobplay/jobplay";
+
+import { genCode } from "@/api/system/autocode/rule";
 
 export default {
   name: "Team",
@@ -247,11 +332,9 @@ export default {
   },
   created() {
     this.getList();
-
   },
 
   methods: {
-
     // 格式化日期查询数据
     formatDate(date) {
       if (date && date instanceof Date && !isNaN(date)) {
@@ -320,7 +403,6 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd(val) {
-
       this.reset();
       this.open = true;
       this.selectSopPoints(null);
@@ -328,13 +410,14 @@ export default {
       this.$router.push(`/mes/job/jobm/NewOperations?ticketId=null`);
       this.title = "添加隔离点";
       this.optType = "add";
-
     },
     // 查看
     handleLook(row) {
       // 设置为true表示作业票里查看不可以点击隔离点
 
-      this.$router.push(`/mes/job/jobplay/jobPlayDetail?ticketId=${row.ticketId}`);
+      this.$router.push(
+        `/mes/job/jobplay/jobPlayDetail?ticketId=${row.ticketId}`
+      );
     },
 
     /** 修改按钮操作 */
@@ -346,7 +429,6 @@ export default {
       this.$router.push(
         `/mes/job/jobm/NewOperationsEdit?ticketId=${row.ticketId}`
       );
-
     },
     /** 提交按钮 */
     submitForm() {
@@ -383,8 +465,6 @@ export default {
         })
         .catch(() => {});
     },
-
-
   },
 };
 </script>
@@ -392,4 +472,31 @@ export default {
 .el-input-width {
   width: 380px !important;
 }
+.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);
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
+  // position: relative;
+}
+
+.error-icon {
+  color: red;
+  font-weight: bold;
+}
+
+.success-icon {
+  color: green;
+  font-weight: bold;
+}
 </style>