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