修改任务监督排版问题

src/views/servicePackageMonitoring/riskEventAudit/taskMonitor.vue

@@ -77,7 +77,7 @@
       </template>
       <div class="cards" style="width: 100%" v-else>
         <template v-for="(item, index) in list">
-          <div class="card" :key="index" v-if="item.show">
+          <div class="card" :key="index" v-if="item.show" :style="{ left: item.left, top: item.top }" :class="'cls' + item.id">
             <div class="task-info">
               <div class="task-type-info">
                 <el-checkbox
@@ -270,7 +270,8 @@ export default {
         supervision: [{ required: true, message: '请选择审批意见', trigger: 'change' }]
       },
       getPageLoading: false,
-      noData: false
+      noData: false,
+      cardContainerheight: ''
     };
   },
   computed: {
@@ -360,6 +361,8 @@ export default {
                     item.show = false;
                   }
                 });
+                this.$forceUpdate();
+                this.waterfallFlowCalculation();
               }
             })
             .catch(() => {
@@ -479,8 +482,37 @@ export default {
         this.list.push(...list);
         this.$forceUpdate();
         this.getPageLoading = false;
+        this.$nextTick(() => {
+          this.waterfallFlowCalculation();
+        });
       }
     },
+    waterfallFlowCalculation() {
+      let column1Height = 20;
+      let column2Height = 20;
+      let top = 0;
+      let left = 0;
+      this.list.forEach((item) => {
+        if (item.show) {
+          const currEle = document.querySelector('.cls' + item.id);
+          if (!currEle) return;
+          let eleHeight = currEle.clientHeight;
+          if (column1Height <= column2Height) {
+            top = column1Height;
+            column1Height += eleHeight + 20;
+            left = '1%';
+          } else {
+            top = column2Height;
+            column2Height += eleHeight + 20;
+            left = '51%';
+          }
+          item.top = top + 'px';
+          item.left = left;
+        }
+      });
+      this.cardContainerheight = column1Height > column2Height ? column1Height + 'px' : column2Height + 'px';
+      this.$forceUpdate();
+    },
     getDesc(item, curr) {
       // 拜访类任务
       const arr = ['51', '52', '53'];
@@ -565,6 +597,7 @@ export default {
         this.list[index].show = false;
         this.list[index].checked = false;
         this.$forceUpdate();
+        this.waterfallFlowCalculation();
       } catch (error) {
         console.error('Error:', error);
       }
@@ -603,9 +636,12 @@ export default {
     box-sizing: border-box;
     width: 100%;
     padding: 10px;
+    position: relative;
+    min-height: 600px;
   }
 
   .card {
+    position: absolute;
     box-sizing: border-box;
     border-radius: 4px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);