Skip to content

jml0128 / xrk-bi

Go to a project
Commit b628da2c by web
Options

fix: 完善

1 parent 750f8b6f
Inline Side-by-side
Showing with 97 additions and 48 deletions
src/App.vue
......@@ -369,7 +369,7 @@ export default {
}
};
},
// 累计BI、自定义BI获取随机50张图片
// 累计、当期、自定义BI获取随机50张图片
getImageList() {
return {
data: {
......@@ -381,7 +381,8 @@ export default {
id: 1,
biInfoId: 123, //BI主键
taskId: 123, //任务记录ID
imageUrl: '图片地址'
imageUrl:
'http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png'
}
]
},
......
src/packages/bi/src/components/photo-wall/images.vue
<template>
<div :style="{ columnCount }">
<img v-for="(item, index) in imageUrls" :key="index" :src="setUrl(item)" />
<img
v-for="(item, index) in taskImageInfo.imageUrls"
:key="index"
:src="setUrl(item.imageUrl)"
/>
</div>
</template>
......@@ -22,31 +26,33 @@ const IMG_MAPPING = {
export default {
name: 'bi-photo-wall-images',
props: {
imageUrls: {
type: Array,
default() {
return [];
}
},
layout: {
taskImageInfo: {
type: Object,
default() {
return {
imageStyle: 2, // 1流式 2平铺 流式不限制高度，但是有max-height，平铺为正方形
imageSize: 2 // 1大548px 2中355px 3小262px
imageSize: 2, //图片大小 1 大 2中 3小
imageUrls: [
// {
// id: 1,
// biInfoId: 123, //BI主键
// taskId: 123, //任务记录ID
// imageUrl: '图片地址'
// }
]
};
}
}
},
computed: {
columnCount() {
return IMG_MAPPING[this.layout.imageSize].column;
return IMG_MAPPING[this.taskImageInfo.imageSize].column;
},
width() {
return IMG_MAPPING[this.layout.imageSize].width;
return IMG_MAPPING[this.taskImageInfo.imageSize].width;
},
height() {
if (this.layout.imageStyle === 2) {
if (this.taskImageInfo.imageStyle === 2) {
return this.width;
}
return 'auto';
......@@ -56,7 +62,7 @@ export default {
setUrl(url) {
// x-oss-process=image/resize,w_355 流式
// ?x-oss-process=image/resize,m_fill,w_355,h_355
if (this.layout.imageStyle === 1) {
if (this.taskImageInfo.imageStyle === 1) {
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}`;
......
src/packages/bi/src/components/photo-wall/index.vue
......@@ -6,14 +6,23 @@
<div class="bi-photo" ref="bi-photo">
<BiTitle :index="index" :name="name">
<template #handler>
<div class="bi-title-photo-btn">
<SelectStyle :layout="layout" @handleSave="selectStyleSave" />
<SelectImages :imageUrls="imageUrls" @handleSave="selectImgSave" />
<div class="bi-title-photo-btn" v-if="!isPrint">
<SelectStyle
:layout="{
imageStyle: value.imageStyle,
imageSize: value.imageSize
}"
@handleSave="selectStyleSave"
/>
<SelectImages
:imageUrls="value.imageUrls"
@handleSave="selectImgSave"
/>
<Del @del="onDel" />
</div>
</template>
</BiTitle>
<BiImages :imageUrls="imageUrls" :layout="layout" />
<BiImages :taskImageInfo="value" />
</div>
</template>
......@@ -24,9 +33,11 @@ import SelectImages from './select';
import SelectStyle from './style';
import Del from './del';
import { heightToPage } from '../../chart-type/common';
import mixin from '../../mixin/index';
export default {
name: 'bi-photo-wall',
mixins: [mixin],
components: {
BiTitle,
BiImages,
......@@ -36,45 +47,50 @@ export default {
},
props: {
name: String,
initUrl: {
default: () => [],
type: Array
value: {
default() {
return {
imageStyle: 2, // 1流式 2平铺 流式不限制高度，但是有max-height，平铺为正方形
imageSize: 2, //图片大小 1 大 2中 3小
imageUrls: [
// {
// id: 1,
// biInfoId: 123, //BI主键
// taskId: 123, //任务记录ID
// imageUrl: '图片地址'
// }
]
};
},
type: Object
},
index: {
type: Number,
default: 4
}
},
data() {
return {
imageUrls: [],
layout: {
imageStyle: 2, // 1流式 2平铺 流式不限制高度，但是有max-height，平铺为正方形
imageSize: 2 // 1大548px 2中355px 3小262px
}
};
},
methods: {
// 选择图片的保存
selectImgSave(e) {
this.imageUrls = e;
this.$emit('input', {
...this.value,
imageUrls: [...e]
});
},
// 选择样式的保存
selectStyleSave(e) {
this.layout = e;
this.$emit('input', {
...this.value,
...e
});
},
onDel() {
this.$refs['bi-photo'].style.display = 'none';
}
},
watch: {
initUrl: {
immediate: true,
handler(v) {
this.imageUrls = [...v];
}
},
imageUrls: {
value: {
handler() {
this.$nextTick(() => {
this.$emit('page', heightToPage(this.$refs['bi-photo'].offsetHeight));
......
src/packages/bi/src/project/20-configurable.vue
......@@ -65,8 +65,9 @@
</BiSingleChoice> -->
<BiPhoto
class="bi-block"
ref="bi-photo"
name="照片集合"
:initUrl="photoUrls"
v-model="taskImageInfo"
@page="setPage(arguments, 'page4')"
/>
<BiCoverEnd title="奇正藏药医学沙龙推广项目数据报告"></BiCoverEnd>
......@@ -136,7 +137,18 @@ export default {
baseInfo: [],
textData: [],
biInfo: {},
photoUrls: []
taskImageInfo: {
imageStyle: 2, //展示样式 1 流式 2平铺
imageSize: 2, //图片大小 1 大 2中 3小
imageUrls: [
// {
// id: 1,
// biInfoId: 123, //BI主键
// taskId: 123, //任务记录ID
// imageUrl: '图片地址'
// }
]
}
};
},
computed: {
......@@ -480,9 +492,12 @@ export default {
});
},
saveInfo() {
return new Promise(resolve => {
const { biInfoId, styleConfigureId } = this.biInfo;
const { content } = this.$refs['cover'];
return this.Bi.saveInfo({
console.log(this.$refs['bi-photo']);
Promise.all([
this.Bi.saveInfo({
biInfoId: biInfoId,
commandType: 2,
biStyleConfigureInfo: {
......@@ -500,6 +515,19 @@ export default {
this.singleChoice
),
makeSceneGroupDetails: chartConfigToSetInfo(this.singleChoiceMixin)
}),
this.Bi.saveBiPicList({
biInfoImageJson: JSON.stringify({
biInfoId: 1,
taskId: 1,
imageUrl: 'http://image',
imageStyle: 1,
imageSize: 1
})
})
]).then(() => {
resolve();
});
});
},
exportBi() {
......@@ -513,7 +541,7 @@ export default {
this.Bi.getTopicInfo(),
this.Bi.getGroupInfo(),
this.Bi.getTemplateList(),
this.Bi.getTaskPicList()
this.Bi.getImageList()
])
.then(
([
......@@ -522,16 +550,14 @@ export default {
topicInfo,
topicMixinInfo,
tempaletList = { data: { data: [] } },
photoInfo
taskImageInfo
]) => {
this.dealBaseInfo(baseInfo.data.data[0] || {});
this.dealFixedInfo(fixedInfo.data.data || []);
this.dealChoice(topicInfo.data.data || []);
this.dealChoiceMixin(topicMixinInfo.data.data || []);
this.coverList = tempaletList.data.data || [];
this.photoUrls = photoInfo.data.data.taskImages.map(
item => item.imageUrl
);
this.taskImageInfo = taskImageInfo.data.data;
this.$nextTick(async () => {
await this.preloadImg(this.coverUrl);
window.status = '1';
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!