作业执行详情页面接口调用数据渲染

src/router/index.js

@@ -175,7 +175,7 @@ export const dynamicRoutes = [
         path: 'jobPlayDetail',
         component: () => import('@/views/mes/job/jobplay/jobPlayDetail'),
         name: 'jobPlayDetail',
-        meta: { title: '作业管理-新建作业票', activeMenu: '/mes/job/jobplay/jobPlayDetail' }
+        meta: { title: '作业执行-作业状态', activeMenu: '/mes/job/jobplay/jobPlayDetail' }
       }
     ]
   },

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

@@ -146,14 +146,6 @@
                      v-hasPermi="['mes:job:jobplay:view']"
           >查看
           </el-button>
-          <el-button v-no-more-click
-                     size="mini"
-                     type="text"
-                     icon="el-icon-delete"
-                     @click="handleDelete(scope.row)"
-                     v-hasPermi="['mes:job:jobplay:remove']"
-          >删除
-          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -169,9 +161,7 @@
 </template>
 
 <script>
-import {listJobPlayTicket,getJobPlayTicketInfo} from "@/api/mes/jobplay/jobplay"
-
-import { genCode } from "@/api/system/autocode/rule";
+import {listJobPlayTicket} from "@/api/mes/jobplay/jobplay"
 
 export default {
   name: "Team",

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

@@ -1,13 +1,161 @@
+<template>
+  <div>
+    <el-row style="box-shadow: 2px 2px 15px rgba(213, 224, 227, 0.6)">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <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" >
+          </el-table-column>
+          <el-table-column label="作业名称" prop="ticketCode" >
+          </el-table-column>
+          <el-table-column label="状态" align="center" prop="ticketStatus">
+            <template slot-scope="scope">
+              <dict-tag
+                :options="dict.type.ticket_status"
+                :value="scope.row.ticketStatus"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="上锁钥匙" prop="lockKeyName" >
+          </el-table-column>
+          <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">
+          <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>
+            <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-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-col>
+      <el-col :span="12">
+        <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>
+
+            <el-table-column label="状态" align="center" prop="pointStatus">
+              <template slot-scope="scope">
+                <dict-tag
+                  :options="dict.type.ticket_status"
+                  :value="scope.row.ticketStatus"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="挂锁名称" prop="lockName" >
+            </el-table-column>
+            <el-table-column label="锁具" prop="locksetName" >
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
 <script>
+import { getJobPlayTicketInfo } from '@/api/mes/jobplay/jobplay'
+
 export default {
-  name: 'jobPlayDetail '
+  name: 'jobPlayDetail',
+  dicts: ["ticket_type", "ticket_status"],
+  data() {
+    return {
+      jobTicket:[],
+      lockUserList:[],
+      colockUserList:[],
+      ticketPointsList:[]
+
+    }
+  },
+  mounted() {
+    this.getJobPlayInfo()
+  },
+  methods: {
+    getJobPlayInfo() {
+      const ticketId = this.$route.query.ticketId
+      getJobPlayTicketInfo(ticketId).then(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
+      })
+    }
+  }
 }
 </script>
 
-<template>
-
-</template>
 
 <style scoped lang="scss">
 
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+.clearfix:after {
+  clear: both
+}
+
+.box-card {
+  width: 980px;
+  margin: 15px;
+}
+.box-card1 {
+  width: 780px;
+  margin: 15px;
+}
+.box-card2 {
+  width: 780px;
+  margin: 15px;
+}
 </style>