Skip to content

jml0128 / xrk-bi

Go to a project
Commit 468e98bd by web
Options

Merge branch 'feature/照片墙' into 'develop' 

Feature/照片墙

See merge request !19
2 parents 3d37b3a6 9bd54476
Expand all
Inline Side-by-side
Showing with 186 additions and 54 deletions
.eslintignore
/dist
\ No newline at end of file
/dist
/src/packages/bi/src/components/photo-wall/waterfall.vue
\ No newline at end of file
package.json
{
"name": "xrk-bi",
"version": "0.3.0-beta.21",
"version": "0.4.1",
"description": "xrk-bi",
"author": "xrk",
"main": "dist/bundler.js",
......
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,11 +2,10 @@
* @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';
Vue.config.productionTip = false;
Vue.use(Xrk);
......
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> -->
<div>
<div
v-for="(imageUrls, imageUrlsIndex) in waterfalls"
:key="imageUrlsIndex"
>
<waterfall
ref="waterfall"
:col="columnCount"
:data="imageUrls"
@finish="finish"
>
<template>
<div
v-for="(item, index) in imageUrls"
:key="index"
:style="{
padding: '10px 0',
'text-align': 'center'
}"
>
<img
:style="{ width: widthPx, height: heightPx }"
:src="setUrl(item.imageUrl)"
/>
</div>
</template>
</waterfall>
</div>
</div>
</template>
<script>
import waterfall from './waterfall.vue';
const IMG_MAPPING = {
1: {
column: 2,
width: 548
column: 2, // 2列数据
width: 548,
height: 305
},
2: {
column: 3,
width: 355
width: 355,
height: 198
},
3: {
column: 4,
width: 262
width: 262,
height: 144
}
};
const baseHeight = 1697;
export default {
name: 'bi-photo-wall-images',
components: {
waterfall
},
props: {
taskImageInfo: {
type: Object,
......@@ -42,6 +80,49 @@ export default {
}
}
},
watch: {
taskImageInfo: {
deep: true,
immediate: true,
handler(v) {
const { imageUrls, imageStyle } = v;
let waterfalls = [];
const titleHeight = 88;
const margin = 20;
// 第一页图片总列数
const firstColumnNum = Math.floor(
(baseHeight - titleHeight) / (this.height + margin)
);
// 其他页图片总列数
const otherColumnNum = Math.floor(baseHeight / (this.height + margin));
const firstCount = firstColumnNum * this.columnCount; // 第一页数据总数
const otherCount = otherColumnNum * this.columnCount; // 其他页数据总数
if (imageUrls) {
if (imageStyle === 2) {
imageUrls.forEach((item, index) => {
// 第一个 || 第一组最后一个（只会出现一次） || 其他组最后一个（多次出现）
if (
index === 0 ||
index === firstCount ||
!(index % otherCount)
) {
waterfalls[waterfalls.length] = [];
}
waterfalls[waterfalls.length - 1].push(item);
});
} else {
waterfalls = [imageUrls];
}
this.waterfalls = waterfalls;
}
}
}
},
data() {
return {
waterfalls: [] // 二维数组，第一个为第一页算上title单独计算，其他为统一计算分组
};
},
computed: {
columnCount() {
return IMG_MAPPING[this.taskImageInfo.imageSize].column;
......@@ -50,20 +131,30 @@ export default {
return IMG_MAPPING[this.taskImageInfo.imageSize].width;
},
height() {
return IMG_MAPPING[this.taskImageInfo.imageSize].height;
},
widthPx() {
return this.width + 'px';
},
heightPx() {
if (this.taskImageInfo.imageStyle === 2) {
return this.width;
return this.height + 'px';
}
return 'auto';
}
},
methods: {
finish() {
this.$emit('finish');
},
setUrl(url) {
// x-oss-process=image/resize,w_355 流式
// ?x-oss-process=image/resize,m_fill,w_355,h_355
const _url = url.split('?')[0];
if (this.taskImageInfo.imageStyle === 1) {
return `${url}?x-oss-process=image/resize,w_${this.width}`;
return `${_url}?x-oss-process=image/resize,w_${this.width}`;
}
return `${url}?x-oss-process=image/resize,m_fill,w_${this.width},h_${this.width}`;
return `${_url}?x-oss-process=image/resize,m_fill,w_${this.width},h_${this.height}`;
}
}
};
......@@ -97,12 +188,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,14 +17,16 @@
@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>
<BiImages :taskImageInfo="value" />
<BiImages :taskImageInfo="value" @finish="finish" />
</div>
</template>
......@@ -70,8 +74,15 @@ export default {
default: 4
}
},
computed: {
showEdit() {
return +this.Bi.selectType === 45; // 44自定义-BI报告 45当期-BI报告(显示样式、选择) 46累计-BI报告
}
},
methods: {
finish() {
this.$emit('finish');
},
// 选择图片的保存
selectImgSave(e) {
this.$emit('input', {
......@@ -108,7 +119,7 @@ export default {
</script>
<style lang="scss" scoped>
.bi-photo {
// page-break-before: always;
page-break-before: always;
// page-break-after: always;
padding-bottom: 50px;
......@@ -144,6 +155,6 @@ export default {
.bi-title-photo-btn {
display: flex;
width: 320px;
justify-content: space-between;
justify-content: flex-end;
}
</style>
src/packages/bi/src/components/photo-wall/select.vue
......@@ -21,7 +21,7 @@
:key="item.imageUrl + index"
>
<el-checkbox
:disabled="selectSum >= 50 && item.isSelect === 0"
:disabled="selectSum >= 50 && !imageUrlsMap.includes(item.imageUrl)"
class="select-box"
:value="imageUrlsMap.includes(item.imageUrl)"
@change="
......
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-06-07 11:25:17
-->
<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: () => {}
......
src/packages/bi/src/mixin/project.js
......@@ -51,6 +51,12 @@ export default {
resolve('load fail');
};
});
},
preloadImgs(urls) {
if (!urls.length) {
return Promise.resolve();
}
return Promise.all(urls.map(url => this.preloadImg(url)));
}
}
};
src/packages/bi/src/project/20-configurable.vue
......@@ -61,15 +61,16 @@
@sort="sort(arguments, 'singleChoice', hideSingleChoice)"
@page="setPage(arguments, 'page4')"
>
<BiSingleChoiceInfo index="4" name="照片集合"></BiSingleChoiceInfo>
<BiSingleChoiceInfo index="4" name="照片合集"></BiSingleChoiceInfo>
</BiSingleChoice> -->
<BiPhoto
v-if="!hideTaskImage"
class="bi-block"
ref="bi-photo"
name="照片集合"
name="照片合集"
v-model="taskImageInfo"
@page="setPage(arguments, 'page4')"
@finish="taskImageInfo.finish = true"
/>
<BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
<BiOperate
......@@ -142,6 +143,7 @@ export default {
title: {
name: '照片墙'
},
finish: false, // 图片是否渲染完成
has: false, // true有图片题，false无
isDelete: 0,
imageStyle: 2, //展示样式 1 流式 2平铺
......@@ -218,10 +220,10 @@ export default {
},
...(!this.hideTaskImage && [
{
name: '照片集合',
name: '照片合集',
child: [
{
name: '照片集合',
name: '照片合集',
page: 4
}
]
......@@ -246,6 +248,15 @@ export default {
}
},
methods: {
taskImageFinish(resolve) {
if (this.taskImageInfo.finish) {
resolve();
} else {
setTimeout(() => {
this.taskImageFinish(resolve);
}, 1000);
}
},
dealPos(dis) {
return dis * (this.isPrint ? printWidth : this.baseFontSize);
},
......@@ -506,11 +517,7 @@ export default {
return new Promise((resolve, reject) => {
const { biInfoId, styleConfigureId } = this.biInfo;
const { content } = this.$refs['cover'];
if (
this.taskImageInfo.has &&
!this.taskImageInfo.isDelete &&
!this.taskImageInfo.imageUrls.length
) {
if (!this.hideTaskImage && !this.taskImageInfo.imageUrls.length) {
reject('照片墙：请删除或至少选择一张图片');
}
Promise.all([
......@@ -585,14 +592,23 @@ export default {
this.dealChoice(topicInfo.data.data || []);
this.dealChoiceMixin(topicMixinInfo.data.data || []);
this.coverList = tempaletList.data.data || [];
if (hasImageQuestion) {
Object.assign(this.taskImageInfo, taskImageInfo.data.data, {
has: hasImageQuestion
});
}
// taskImageInfo.data.data.imageUrls.forEach(item => {
// item.imageUrl = item.imageUrl.replace('https', 'http');
// });
Object.assign(this.taskImageInfo, taskImageInfo.data.data, {
has: hasImageQuestion,
finish: !hasImageQuestion || !!taskImageInfo.data.data.isDelete
});
this.$nextTick(async () => {
await this.preloadImg(this.coverUrl);
window.status = '1';
await new Promise(resolve => {
this.taskImageFinish(resolve); // 提供给wkwebivewtopdf使用，页面处理完成，node不用
});
setTimeout(() => {
window.status = '1'; // 提供给wkwebivewtopdf使用，页面处理完成，node不用
console.log('done7');
}, 1000 * 5);
});
}
)
......@@ -604,8 +620,4 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.bi-block {
// margin-top: 8px;
}
</style>
<style lang="scss" scoped></style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!