修改作业详细顶部查询条件屏幕缩小时显示重叠的问题；新增作业执行监控页面

src/views/jobTicket/job/JobMonitor.vue

@@ -0,0 +1,274 @@
+<template>
+<!--基本信息-->
+  <ContentWrap>
+    <div class="basicInformation">
+      <div class="tab-header">
+        <img src="@/assets/images/information.png" alt="" class="titleimg"/><span class="tab-title"> 基本信息</span>
+      </div>
+      <div class="basicContent">
+        <p>SOP： <span>CCO-老液体 2cco#粉料系统-维修</span> </p>
+        <p>作业区域: <span>CCO-BD</span> </p>
+        <p>工艺设备: <span>搅拌机-03</span> </p>
+        <p>作业类型: <span>维修</span> </p>
+        <p>作业状态: <span>进行中</span> </p>
+        <p>开始时间: <span>2025-07-04 14:10:01</span> </p>
+        <p>结束时间: <span>-</span> </p>
+        <p>当前步骤: <span class="specialText">确认隔离方式</span> </p>
+        <p>最新日志: <span>2025-07-04 14:10:01 张天乐 已确认执行识别工作内容</span> </p>
+      </div>
+    </div>
+  </ContentWrap>
+<!--作业流程-->
+  <ContentWrap>
+    <div class="jobProcess">
+      <div class="tab-header">
+        <img src="@/assets/images/jobProcess.png" alt="" class="titleimg"/><span class="tab-title">作业流程</span>
+      </div>
+      <div class="processDetail">
+        <!-- VueFlow 主画布 -->
+        <VueFlow style="width: 100%; height: 300px" :min-zoom="1" :max-zoom="1" :default-zoom="1">
+          <template #node-default="{ id, data }">
+            <div class="custom-node">
+              <div class="node-content">
+                <!-- 图标显示 -->
+                <div style="font-size: 30px">
+                  <img
+                    v-if="data.stepIcon && data.stepIcon.startsWith('http')"
+                    :src="data.stepIcon"
+                    :alt="data.stepTitleShort"
+                    style="width: 40px; height: 40px; object-fit: contain"
+                  />
+                  <span v-else>{{ data.stepIcon || '📋' }}</span>
+                </div>
+                <div style="font-weight: bold; font-size: 14px">
+                  {{ data.stepTitleShort || '无标题' }}
+                </div>
+                <div style="font-size: 25px">
+                  {{ String.fromCharCode(9311 + (data.stepIndex || 1)) }}
+                </div>
+              </div>
+              <!-- 四个连接点 -->
+              <Handle type="target" position="top" :id="`${id}-top`" class="handle handle-top" />
+              <Handle
+                type="source"
+                position="bottom"
+                :id="`${id}-bottom`"
+                class="handle handle-bottom"
+              />
+              <Handle
+                type="target"
+                position="left"
+                :id="`${id}-left`"
+                class="handle handle-left"
+              />
+              <Handle
+                type="source"
+                position="right"
+                :id="`${id}-right`"
+                class="handle handle-right"
+              />
+            </div>
+          </template>
+        </VueFlow>
+      </div>
+    </div>
+  </ContentWrap>
+
+  <!--作业执行-->
+  <ContentWrap>
+    <div class="jobExecution">
+        <el-tabs
+          v-model="activeName"
+          type="card"
+          class="demo-tabs"
+          @tab-click="handleClick"
+        >
+          <el-tab-pane name="first">
+            <template #label>
+              <div class="tab-label">
+                <img src="@/assets/images/icon_job_members.png" alt="" class="titleimg" />
+                <span class="tab-text ">作业人员</span>
+              </div>
+            </template>
+            <div class="jobMemberBox">
+<!--              锁定人-->
+              <div class="lockmember"></div>
+<!--              共锁人-->
+              <div class="co-lockmember"></div>
+
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane name="second">
+            <template #label>
+              <div class="tab-label">
+                <img src="@/assets/images/icon_red_lock.png" alt="" class="titleimg" />
+                <span class="tab-text ">点位锁定</span>
+              </div>
+            </template>
+            Config
+          </el-tab-pane>
+
+          <el-tab-pane name="third">
+            <template #label>
+              <div class="tab-label">
+                <img src="@/assets/images/icon_co-lock.png" alt="" class="titleimg" />
+                <span class="tab-text ">人员共锁</span>
+              </div>
+            </template>
+            Role
+          </el-tab-pane>
+
+          <el-tab-pane name="fourth">
+            <template #label>
+              <div class="tab-label">
+                <img src="@/assets/images/icon_job_log.png" alt="" class="titleimg" />
+                <span class="tab-text ">作业日志</span>
+              </div>
+            </template>
+            Task
+          </el-tab-pane>
+        </el-tabs>
+
+
+    </div>
+
+  </ContentWrap>
+
+</template>
+
+
+<script setup lang="ts">
+import {Handle, VueFlow} from "@vue-flow/core";
+import { ref } from 'vue'
+
+const route = useRoute()
+console.log(route.query.id,'是否传递成功')
+const activeName = ref('first')
+
+const handleClick = (tab: TabsPaneContext, event: Event) => {
+  console.log(tab, event)
+}
+</script>
+
+
+<style scoped lang="scss">
+.basicInformation {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  margin-top: 20px;
+
+  .basicContent{
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px 20px;
+    box-sizing: border-box;
+    //background: pink;
+    p{
+      display: block;
+      min-width: 32%;
+      min-height: 25px;
+      margin: 8px 5px;
+      //background: green;
+      .specialText{
+        color: #42bafa;
+      }
+    }
+  }
+}
+
+.tab-header {
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #dcdfe6;
+  padding: 12px 20px;
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  .titleimg{
+    width: 25px;
+    height: 25px;
+    margin-right: 8px;
+  }
+  .tab-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #303133;
+  }
+}
+.processDetail{
+  width: 100%;
+  height: 300px;
+  overflow-y: auto;
+  //background: green;
+}
+.custom-node {
+  position: relative;
+  width: 125px;
+  height: 180px;
+  background-color: #fff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.node-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+.jobExecution{
+  width: 100%;
+  height: 600px;
+  //background: blue;
+  .tab-label{
+    padding: 12px 20px;
+    border-radius: 4px 4px 0 0;
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    .titleimg{
+      width: 25px;
+      height: 25px;
+      margin-right: 8px;
+    }
+    .tab-text  {
+      font-size: 14px;
+      font-weight: 500;
+      color: #303133;
+    }
+  }
+  /* 小屏幕下隐藏文字，只显示图标 */
+  @media (max-width: 768px) {
+    .tab-label {
+      padding: 12px 2px;
+      border-radius: 4px 4px 0 0;
+      display: flex;
+      align-items: center; /* 垂直居中 */
+      .titleimg {
+        width: 25px;
+        height: 25px;
+        margin-right: 0;
+      }
+
+      .tab-text {
+        font-size: 14px;
+        font-weight: 500;
+        color: #303133;
+        display: none;
+      }
+    }
+  }
+}
+
+
+
+</style>

src/views/jobTicket/job/UpdateJob.vue

@@ -15,9 +15,9 @@
             :inline="true"
             label-width="68px"
           >
-            <el-row>
-              <el-col :span="5"  v-if="JobForm.sopId">
-                <el-form-item label="SOP" prop="sopId" >
+<!--            <el-row>-->
+<!--              <el-col :span="5" >-->
+                <el-form-item label="SOP" prop="sopId" v-if="JobForm.sopId">
                   <el-select
                     v-model="JobForm.sopId"
                     placeholder="请选择SOP"
@@ -34,8 +34,8 @@
                     />
                   </el-select>
                 </el-form-item>
-              </el-col>
-              <el-col :span="5">
+<!--              </el-col>-->
+<!--              <el-col :span="5">-->
                 <el-form-item label="作业名称" prop="ticketName">
                   <el-input
                     v-model="JobForm.ticketName"
@@ -44,13 +44,13 @@
                     class="!w-240px"
                   />
                 </el-form-item>
-              </el-col>
-              <el-col :span="2">
-                <el-checkbox v-model="JobAutoName">自动生成</el-checkbox>
-              </el-col>
-            </el-row>
-            <el-row>
-              <el-col :span="5">
+<!--              </el-col>-->
+<!--              <el-col :span="2">-->
+                <el-checkbox v-model="JobAutoName" style="margin: 0 20px 0;position: relative;top:-5px">自动生成</el-checkbox>
+<!--              </el-col>-->
+<!--            </el-row>-->
+<!--            <el-row>-->
+<!--              <el-col :span="5">-->
                 <el-form-item label="作业区域" prop="workstationId">
                   <el-tree-select
                     v-model="JobForm.workstationId"
@@ -62,8 +62,8 @@
                     @change="JobWorkstationChange"
                   />
                 </el-form-item>
-              </el-col>
-              <el-col :span="5">
+<!--              </el-col>-->
+<!--              <el-col :span="5">-->
                 <el-form-item label="工艺设备" prop="machineryId">
                   <el-tree-select
                     v-model="JobForm.machineryId"
@@ -74,8 +74,8 @@
                     @change="machineryChangeFunction"
                   />
                 </el-form-item>
-              </el-col>
-              <el-col :span="5">
+<!--              </el-col>-->
+<!--              <el-col :span="5">-->
                 <el-form-item label="作业类型" prop="ticketType">
                   <el-select
                     v-model="JobForm.ticketType"
@@ -92,9 +92,9 @@
                     />
                   </el-select>
                 </el-form-item>
-              </el-col>
-            </el-row>
-            <el-row>
+<!--              </el-col>-->
+<!--            </el-row>-->
+<!--            <el-row>-->
               <el-form-item label="流程模式" prop="modeId">
                 <el-select
                   v-model="JobForm.modeId"
@@ -111,7 +111,7 @@
                   />
                 </el-select>
               </el-form-item>
-            </el-row>
+<!--            </el-row>-->
           </el-form>
         </div>
       </div>

src/views/jobTicket/job/index.vue

@@ -106,6 +106,18 @@
       </el-table-column>
       <el-table-column label="所属区域" prop="workstationName" :show-overflow-tooltip="true" />
       <el-table-column label="设备/工艺" prop="machineryName" align="center" />
+      <el-table-column label="作业执行监控" align="center">
+        <template #default="{ row }">
+          <el-button
+            link
+            type="primary"
+            @click="lookMonitor(row.id)"
+            v-hasPermi="['iscs:job:update']"
+          >
+            查看
+          </el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="{ row }">
           <el-button
@@ -235,5 +247,13 @@ const handleDelete = async (id: number) => {
 onMounted(async () => {
   await getList()
 })
+
+// 查看作业执行监控
+const lookMonitor = (id:number) => {
+router.push({
+  name:'JobMonitor',
+  query: { id: id },
+})
+}
 </script>
 <style scoped></style>