sop查看右侧标题固定，作业作业区域加展开，收起；添加加载功能

src/views/mes/sop/sopm/sopmLook.vue

@@ -24,7 +24,7 @@
     </div>
     <!-- 作业区域  -->
     <div class="lefttree">
-      <el-card class="lefttree-card">
+      <el-card class="lefttree-card" v-show="this.showWorkEare == true">
         <b class="title">作业区域</b>
         <div class="head-container">
           <el-input
@@ -51,25 +51,53 @@
           />
         </div>
       </el-card>
+      <!-- 收起 -->
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="收起作业区域内容"
+        placement="top-start"
+      >
+        <el-button
+          type="primary"
+          icon="el-icon-s-fold"
+          class="btnwork"
+          v-show="this.showWorkEare == true"
+          @click="openWorkEare"
+        ></el-button>
+      </el-tooltip>
+
+      <!-- 打开 -->
+      <el-tooltip
+        class="item"
+        effect="dark"
+        content="展开作业区域内容"
+        placement="top-start"
+      >
+        <el-button
+          type="primary"
+          icon="el-icon-s-unfold"
+          class="btnwork"
+          v-show="this.showWorkEare == false"
+          @click="closeWorkEare"
+        ></el-button>
+      </el-tooltip>
     </div>
     <div class="right">
       <div class="right_top">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-
-              <span style="font-size: 18px">{{ this.getSopTitle }}</span>
-              <span
-                style="
-                float: right;
-                padding: 1px 15px;
+            <span style="font-size: 18px">{{ this.getSopTitle }}</span>
+            <span
+              style="
+                padding: 1px 10px 1px 16%;
                 font-size: 22px;
                 cursor: pointer;
               "
-                type="text"
-                @click="goBack"
+              type="text"
+              @click="goBack"
               >×</span
-              >
-
+            >
 
             <el-tooltip
               content="开启人员配置"
@@ -403,6 +431,11 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 加载 -->
+    <div class="loadbox" v-if="isVisible">
+      <h5>加载中</h5>
+      <i class="el-icon-loading"></i>
+    </div>
   </div>
 </template>
 
@@ -528,12 +561,18 @@ export default {
       listCoLockerOption: null, //共锁人下拉数据
       OutSideUserTableData: [], //添加外部人员多个表格
       nextUserId: 0, //新增外部人员表格序号自定义
+      showWorkEare: true, //工作区域是否展示
+      isVisible: true, // 控制盒子显示状态
     };
   },
 
   mounted() {
-    this.getTreeselect(); //获取工作区域下拉
+    // // 5秒后隐藏盒子
+    setTimeout(() => {
+      this.isVisible = false;
+    }, 10000);
 
+    this.getTreeselect(); //获取工作区域下拉
     this.handleOpenStaffing();
     if (this.$route.query.sopId !== "null") {
       // console.log(this.$route.query.sopId, "接受路由参数");
@@ -572,19 +611,12 @@ export default {
       "setSopEdit",
       "setSopTitle",
     ]),
-    // handleClick(tab, event) {
-    //   // console.log(tab, event);
-    // },
-    // preStep(val) {
-    //   this.activeName = val;
-
-    //   console.log(this.form, "sopform");
-    // },
-
-    // nextStep(val) {
-    //   this.activeName = val;
-    //   // console.log("我点击了下一步");
-    // },
+    openWorkEare() {
+      this.showWorkEare = false;
+    },
+    closeWorkEare() {
+      this.showWorkEare = true;
+    },
     /** 查询工作区域下拉树结构 */
     getTreeselect() {
       const data = {
@@ -706,8 +738,8 @@ export default {
           const value = response.data.ticketUserDTOList //找到上锁人  这里一定要先筛选locker再去给表格筛选 否则表格筛选之后直接不会有上锁人数据了
             .filter((item) => item.userType == "0")
             .map((item) => item.userName);
-          console.log(value,'上锁人')
-          this.form.locker = value[0], //map返回的是数字 所以这样写
+          console.log(value, "上锁人");
+          (this.form.locker = value[0]), //map返回的是数字 所以这样写
             console.log(value, response.data.ticketUserDTOList, "form.locker");
           this.form.ticketUserDTOList = response.data.ticketUserDTOList.filter(
             (item) => {
@@ -1286,18 +1318,36 @@ export default {
     position: absolute;
     left: 0;
     top: 2%;
+    display: flex;
     // background: pink;
     .lefttree-card {
       height: 98%;
+      .title {
+        display: block;
+        width: 30%;
+        height: 30px;
+        text-align: center;
+        margin: 0 0 5%;
+        border-bottom: 2px solid #1684fc;
+        color: rgb(22, 132, 252);
+      }
     }
-    .title {
-      display: block;
-      width: 30%;
+    .item {
+      width: 30px;
       height: 30px;
-      text-align: center;
-      margin: 0 0 5%;
-      border-bottom: 2px solid #1684fc;
-      color: rgb(22, 132, 252);
+      font-size: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      // .btnwork {
+      //   width: 100%;
+      //   height: 100%;
+      //   display: flex; /* 使用 flex 布局 */
+      //   justify-content: center; /* 水平居中 */
+      //   align-items: center; /* 垂直居中 */
+      //   font-size: 20px;
+      //   box-sizing: border-box;
+      // }
     }
   }
   .right {
@@ -1310,6 +1360,16 @@ export default {
       .box-card {
         height: 100%;
         overflow-y: auto;
+        .clearfix {
+          width: 100%;
+          position: absolute;
+          top: 0;
+          // line-height: 40px;
+          padding: 12px 0 0;
+          box-sizing: border-box;
+          background: #fff;
+          z-index: 10;
+        }
       }
     }
     .title {
@@ -1338,13 +1398,18 @@ export default {
     font-family: SourceHanSansSC-bold;
   }
 }
+// ::v-deep .el-card__header {
+//   position: fixed;
+//   top: 60px;
+//   z-index: 10000000;
+//   background: pink;
+// }
 
 .clearfix:before,
 .clearfix:after {
   display: table;
   content: "";
   width: 320px;
-
 }
 
 .clearfix:after {
@@ -1368,8 +1433,24 @@ export default {
 ::v-deep .el-tabs .el-tabs__item {
   padding: 0 30px !important;
 }
-
+.loadbox {
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #fff, $alpha: 0.9);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 200;
+  padding: 18% 45%;
+  box-sizing: border-box;
+  h5 {
+    font-size: 30px;
+  }
+  .el-icon-loading {
+    font-size: 50px;
+    margin-left: 12%;
+  }
+}
 //右侧卡片样式结束
 </style>
-<style>
-</style>
+