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

web
Commit 3c08803f authored May 23, 2022 by web
Showing with 59 additions and 24 deletions
package.json
src/App.vue
src/main.js
src/packages/bi/src/components/photo-wall/del.vue
src/packages/bi/src/components/photo-wall/images.vue
src/packages/bi/src/components/photo-wall/index.vue
src/packages/bi/src/main.vue
--- a/package.json
+++ b/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": {

--- a/src/App.vue
+++ b/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报告
    };
  }
 };

--- a/src/main.js
+++ b/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({

--- a/src/packages/bi/src/components/photo-wall/del.vue
+++ b/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">
+  <div>
-    <img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg" alt="" />
+    <el-button @click="handleRemove" class="bi-photo_btn">
-    删除
+      <img
-  </el-button>
+        src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg"
+        alt=""
+      />
+      删除
+    </el-button>
+  </div>
 </template>
 <script>

--- a/src/packages/bi/src/components/photo-wall/images.vue
+++ b/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;
+  li {
-    // 大548px 中355px 小262px
+    break-inside: avoid;
-    // width: 358px;
+    img {
-    // height: 358px;
+      max-height: 588px;
-    // object-fit: fill;
+      margin: 10px;
+      // 大548px 中355px 小262px
+      // width: 358px;
+      // height: 358px;
+      // object-fit: fill;
+    }
  }
 }
 </style>
--- a/src/packages/bi/src/components/photo-wall/index.vue
+++ b/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>
--- a/src/packages/bi/src/main.vue
+++ b/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: () => {}