fix: 添加布局组件，修改图片宽高

package.json

 {
   "name": "xrk-bi",
-  "version": "0.3.0-beta.22",
+  "version": "0.3.0-beta.23",
   "description": "xrk-bi",
   "author": "xrk",
   "main": "dist/bundler.js",
@@ -30,6 +30,7 @@
     "vue": "^2.5.11",
     "vue-awesome-swiper": "^4.1.1",
     "vue-echarts": "^6.0.0-rc.5",
+    "vue-waterfall2": "^1.10.1",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {

src/App.vue

@@ -11,8 +11,8 @@
       :mobile="isMobile"
       :print="isPrint"
       :projectType="projectType"
+      :selectType="selectType"
     ></component>
-    <!-- <XrkTaskRecordPdf :projectType="20" :taskId="1209388" :from="1" /> -->
   </div>
   <!-- <ul class="pervie">
     <li name="任务记录">
@@ -36,7 +36,7 @@
 
 <script>
 import { getQueryVariable } from './packages/bi/src/chart-type/common';
-// import { XrkTaskRecordPdf } from './packages/task-recored/index';
+
 export default {
   name: 'App',
   data() {
@@ -44,7 +44,8 @@ export default {
       isMobile: +getQueryVariable('mobile') === 1,
       isPrint: +getQueryVariable('print') === 1,
       projectType: +getQueryVariable('projectType') || 6,
-      componentName: getQueryVariable('componentName') || 'XrkBi'
+      componentName: getQueryVariable('componentName') || 'XrkBi',
+      selectType: +getQueryVariable('selectType') || 45 // 44自定义-BI报告 45当期-BI报告 46累计-BI报告
     };
   }
 };

src/main.js

@@ -2,13 +2,14 @@
  * @Description:
  * @Date: 2021-01-28 23:29:19
  */
-import 'babel-polyfill';
+// import 'babel-polyfill';
 import Vue from 'vue';
 import App from './App';
 import Xrk from './lib/index.js';
-
+import waterfall from 'vue-waterfall2';
 Vue.config.productionTip = false;
 Vue.use(Xrk);
+Vue.use(waterfall);
 
 /* eslint-disable no-new */
 new Vue({

src/packages/bi/src/components/photo-wall/del.vue

@@ -3,10 +3,15 @@
  * @Date: 2022-05-13 09:41:06
 -->
 <template>
-  <el-button @click="handleRemove" class="bi-photo_btn">
-    <img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg" alt="" />
-    删除
-  </el-button>
+  <div>
+    <el-button @click="handleRemove" class="bi-photo_btn">
+      <img
+        src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
+        alt=""
+      />
+      删除
+    </el-button>
+  </div>
 </template>
 
 <script>

src/packages/bi/src/components/photo-wall/images.vue

 <template>
-  <ul :style="{ columnCount }">
+  <!-- <ul :style="{ columnCount }">
     <li v-for="(item, index) in taskImageInfo.imageUrls" :key="index">
       <img :src="setUrl(item.imageUrl)" />
     </li>
-  </ul>
+  </ul> -->
+  <waterfall :col="columnCount" :data="taskImageInfo.imageUrls">
+    <template>
+      <div v-for="(item, index) in taskImageInfo.imageUrls" :key="index">
+        <img
+          :style="{ width: widthPx, height: heightPx }"
+          :src="setUrl(item.imageUrl)"
+        />
+      </div>
+    </template>
+  </waterfall>
 </template>
 
 <script>
@@ -49,9 +59,12 @@ export default {
     width() {
       return IMG_MAPPING[this.taskImageInfo.imageSize].width;
     },
-    height() {
+    widthPx() {
+      return this.width + 'px';
+    },
+    heightPx() {
       if (this.taskImageInfo.imageStyle === 2) {
-        return this.width;
+        return this.widthPx;
       }
       return 'auto';
     }
@@ -98,12 +111,17 @@ ul {
   // flex-wrap: wrap;
   column-count: 3;
   column-gap: 0;
-  img {
-    margin: 10px;
-    // 大548px 中355px 小262px
-    // width: 358px;
-    // height: 358px;
-    // object-fit: fill;
+
+  li {
+    break-inside: avoid;
+    img {
+      max-height: 588px;
+      margin: 10px;
+      // 大548px 中355px 小262px
+      // width: 358px;
+      // height: 358px;
+      // object-fit: fill;
+    }
   }
 }
 </style>

src/packages/bi/src/components/photo-wall/index.vue

@@ -8,6 +8,8 @@
       <template #handler>
         <div class="bi-title-photo-btn" v-if="!isPrint">
           <SelectStyle
+            style="margin: 0 5px"
+            v-if="showEdit"
             :layout="{
               imageStyle: value.imageStyle,
               imageSize: value.imageSize
@@ -15,10 +17,12 @@
             @handleSave="selectStyleSave"
           />
           <SelectImages
+            style="margin: 0 5px"
+            v-if="showEdit"
             :imageUrls="value.imageUrls"
             @handleSave="selectImgSave"
           />
-          <Del @del="onDel" />
+          <Del style="margin: 0 5px" @del="onDel" />
         </div>
       </template>
     </BiTitle>
@@ -70,7 +74,11 @@ export default {
       default: 4
     }
   },
-
+  computed: {
+    showEdit() {
+      return +this.Bi.selectType === 45; // 44自定义-BI报告 45当期-BI报告(显示样式、选择) 46累计-BI报告
+    }
+  },
   methods: {
     // 选择图片的保存
     selectImgSave(e) {
@@ -144,6 +152,6 @@ export default {
 .bi-title-photo-btn {
   display: flex;
   width: 320px;
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 </style>

src/packages/bi/src/main.vue

@@ -2,7 +2,7 @@
  * @Description: 
  * @Author: jml
  * @Date: 2021-02-26 15:38:10
- * @LastEditTime: 2022-05-19 15:25:49
+ * @LastEditTime: 2022-05-23 10:46:24
 -->
 <template>
   <div class="xrk-components-bi bi" :class="{ 'bi-print': print }">
@@ -58,6 +58,7 @@ export default {
     cantEdit: [Number, String],
     projectType: [Number, String],
     from: [Number, String],
+    selectType: Number, // 44自定义-BI报告 45当期-BI报告 46累计-BI报告
     getBaseInfo: {
       type: Function,
       default: () => {}