fix: 修复积分包瀑布流实现

package.json

@@ -52,7 +52,6 @@
     "vue-enum": "^1.0.5",
     "vue-json-editor": "^1.4.3",
     "vue-json-tree-view": "^2.1.6",
-    "vue-masonry": "^0.16.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.6.5",
     "vue-template-compiler": "^2.6.14",

pnpm-lock.yaml

@@ -131,9 +131,6 @@ importers:
       vue-json-tree-view:
         specifier: ^2.1.6
         version: 2.1.6
-      vue-masonry:
-        specifier: ^0.16.0
-        version: 0.16.0(vue@2.7.16)
       vue-quill-editor:
         specifier: ^3.0.6
         version: 3.0.6
@@ -2114,9 +2111,6 @@ packages:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
 
-  desandro-matches-selector@2.0.2:
-    resolution: {integrity: sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==}
-
   destroy@1.2.0:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -2364,9 +2358,6 @@ packages:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
 
-  ev-emitter@1.1.1:
-    resolution: {integrity: sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==}
-
   event-emitter@0.3.5:
     resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
 
@@ -2463,9 +2454,6 @@ packages:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
 
-  fizzy-ui-utils@2.0.7:
-    resolution: {integrity: sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==}
-
   flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2548,9 +2536,6 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
-  get-size@2.0.3:
-    resolution: {integrity: sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==}
-
   get-stream@3.0.0:
     resolution: {integrity: sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==}
     engines: {node: '>=4'}
@@ -2753,9 +2738,6 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  imagesloaded@4.1.4:
-    resolution: {integrity: sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==}
-
   immutable@5.0.3:
     resolution: {integrity: sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==}
 
@@ -3108,9 +3090,6 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
-  masonry-layout@4.2.2:
-    resolution: {integrity: sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==}
-
   material-colors@1.2.6:
     resolution: {integrity: sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==}
 
@@ -3197,9 +3176,6 @@ packages:
     resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
     engines: {node: '>=8'}
 
-  mitt@3.0.1:
-    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
-
   mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
@@ -3389,9 +3365,6 @@ packages:
     resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
 
-  outlayer@2.1.1:
-    resolution: {integrity: sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==}
-
   p-finally@1.0.0:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
     engines: {node: '>=4'}
@@ -4556,15 +4529,6 @@ packages:
       vue:
         optional: true
 
-  vue-masonry@0.16.0:
-    resolution: {integrity: sha512-0Wi/BH4iYYRrAAFY/wokczz0lWWPg1vmOvFW4aC2nKybKf6kVqUvFfR9/+izDfzG657/vY+Om0gqOB5YPxPxuQ==}
-    peerDependencies:
-      '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^2.0.0 || >=3.0.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-
   vue-quill-editor@3.0.6:
     resolution: {integrity: sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==}
     engines: {node: '>= 4.0.0', npm: '>= 3.0.0'}
@@ -4791,6 +4755,7 @@ packages:
   yaeti@0.0.6:
     resolution: {integrity: sha512-MvQa//+KcZCUkBTIC9blM+CU9J2GzuTytsOUwf2lidtvkx/6gnEp1QvJv34t9vdjhFmha/mUiNDbN0D0mJWdug==}
     engines: {node: '>=0.10.32'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   yallist@2.1.2:
     resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
@@ -7116,8 +7081,6 @@ snapshots:
 
   depd@2.0.0: {}
 
-  desandro-matches-selector@2.0.2: {}
-
   destroy@1.2.0: {}
 
   detect-libc@1.0.3:
@@ -7391,8 +7354,6 @@ snapshots:
 
   etag@1.8.1: {}
 
-  ev-emitter@1.1.1: {}
-
   event-emitter@0.3.5:
     dependencies:
       d: 1.0.2
@@ -7547,10 +7508,6 @@ snapshots:
       locate-path: 5.0.0
       path-exists: 4.0.0
 
-  fizzy-ui-utils@2.0.7:
-    dependencies:
-      desandro-matches-selector: 2.0.2
-
   flat-cache@3.2.0:
     dependencies:
       flatted: 3.3.2
@@ -7623,8 +7580,6 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.0.0
 
-  get-size@2.0.3: {}
-
   get-stream@3.0.0: {}
 
   get-stream@4.1.0:
@@ -7826,10 +7781,6 @@ snapshots:
   image-size@0.5.5:
     optional: true
 
-  imagesloaded@4.1.4:
-    dependencies:
-      ev-emitter: 1.1.1
-
   immutable@5.0.3: {}
 
   import-fresh@3.3.0:
@@ -8141,11 +8092,6 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
-  masonry-layout@4.2.2:
-    dependencies:
-      get-size: 2.0.3
-      outlayer: 2.1.1
-
   material-colors@1.2.6: {}
 
   math-intrinsics@1.1.0: {}
@@ -8211,8 +8157,6 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  mitt@3.0.1: {}
-
   mkdirp@0.5.6:
     dependencies:
       minimist: 1.2.8
@@ -8392,12 +8336,6 @@ snapshots:
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
-  outlayer@2.1.1:
-    dependencies:
-      ev-emitter: 1.1.1
-      fizzy-ui-utils: 2.0.7
-      get-size: 2.0.3
-
   p-finally@1.0.0: {}
 
   p-limit@2.3.0:
@@ -9629,14 +9567,6 @@ snapshots:
       '@vue/compiler-sfc': 3.5.13
       vue: 2.7.16
 
-  vue-masonry@0.16.0(vue@2.7.16):
-    dependencies:
-      imagesloaded: 4.1.4
-      masonry-layout: 4.2.2
-      mitt: 3.0.1
-      vue: 2.7.16
-      vue-demi: 0.13.11(vue@2.7.16)
-
   vue-quill-editor@3.0.6:
     dependencies:
       object-assign: 4.1.1

src/main.js

@@ -29,7 +29,6 @@ import Enum from 'vue-enum';
 import enumInfo from '@/const/constants';
 import Avue from '@smallwei/avue';
 import '@smallwei/avue/lib/index.css';
-import { VueMasonryPlugin } from 'vue-masonry';
 
 Vue.use(ElementUI, {
   size: 'small',
@@ -47,7 +46,6 @@ Vue.use(VueAxios, axios);
 Vue.use(AvueUeditor);
 Vue.use(VueCropper);
 Vue.use(AvueMap);
-Vue.use(VueMasonryPlugin);
 
 Vue.use(ViewUI); //iview
 

src/views/serviceManagement/quickReview/index.vue

@@ -105,15 +105,15 @@
       </div>
     </div>
 
-    <div class="card-list card-container" v-loading="getPageLoading">
+    <div class="card-list card-container" v-loading="getPageLoading" :style="{ height: cardContainerheight, overflow: 'hidden' }">
       <template v-if="list.length === 0">
         <div class="no-data">
           <el-empty description="暂无数据"></el-empty>
         </div>
       </template>
-      <div class="cards" v-masonry :cols="2" :gutter="20" style="width: 100%" v-else>
+      <div class="cards" v-else>
         <template v-for="(curr, currIndex) in list">
-          <div class="card" v-masonry-tile :key="curr.info.taskId" v-if="curr.reviewInfo.show">
+          <div class="card" :key="curr.info.taskId" v-if="curr.reviewInfo.show" :style="{ left: curr.left, top: curr.top }" :class="'cls' + curr.info.taskId">
             <div class="task-info">
               <div class="task-type-info">
                 <el-checkbox
@@ -356,7 +356,8 @@ export default {
       pretreatmentInfo: {},
       lockedInfo: [],
       lockedDialog: false,
-      checkNodeId: ''
+      checkNodeId: '',
+      cardContainerheight: ''
     };
   },
   async created() {
@@ -569,12 +570,40 @@ export default {
           this.list.push(...list);
           this.$forceUpdate();
           this.getPageLoading = false;
+          this.$nextTick(() => {
+            this.waterfallFlowCalculation();
+          });
         }
       } catch (err) {
         this.getPageLoading = false;
       }
     },
-
+    waterfallFlowCalculation() {
+      let column1Height = 20;
+      let column2Height = 20;
+      let top = 0;
+      let left = 0;
+      this.list.forEach((item) => {
+        if (item.reviewInfo.show) {
+          const currEle = document.querySelector('.cls' + item.info.taskId);
+          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();
+    },
     allClick(val) {
       if (val) {
         this.list.forEach((item) => (item.reviewInfo.checked = true));
@@ -647,6 +676,7 @@ export default {
             item.reviewInfo.show = false;
           }
         });
+        this.waterfallFlowCalculation();
         this.lockedDialogClose();
       }
     },
@@ -848,12 +878,14 @@ export default {
         if (res.data.code === 0) {
           item.reviewInfo.checked = flag;
           item.reviewInfo.show = false;
+          this.waterfallFlowCalculation();
           this.$forceUpdate();
         }
       } catch (err) {
         // this.$message.error(err);
         item.reviewInfo.checked = flag;
         item.reviewInfo.show = false;
+        this.waterfallFlowCalculation();
         this.$forceUpdate();
       }
     },
@@ -915,6 +947,7 @@ export default {
                   item.reviewInfo.show = false;
                 }
               });
+              this.waterfallFlowCalculation();
             }
             this.loading = false;
           } catch (err) {
@@ -970,9 +1003,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);

src/views/servicePackageMonitoring/riskEventAudit/taskMonitor.vue

@@ -69,15 +69,15 @@
       </div>
     </div>
 
-    <div class="card-list card-container" v-loading="getPageLoading">
+    <div class="card-list card-container" v-loading="getPageLoading" :style="{ height: cardContainerheight, overflow: 'hidden' }">
       <template v-if="noData">
         <div class="no-data">
           <el-empty description="暂无数据"></el-empty>
         </div>
       </template>
-      <div class="cards" v-masonry :cols="2" :gutter="20" style="width: 100%" v-else>
+      <div class="cards" style="width: 100%" v-else>
         <template v-for="(item, index) in list">
-          <div class="card" v-masonry-tile :key="index" v-if="item.show">
+          <div class="card" :key="index" v-if="item.show">
             <div class="task-info">
               <div class="task-type-info">
                 <el-checkbox