Skip to content

jml0128 / xrk-bi

Go to a project
Commit 0c2b9037 by web
Options

feat: 开发照片墙

1 parent e1805ec1
Inline Side-by-side
Showing with 136 additions and 71 deletions
src/packages/bi/src/components/photo-wall/del.vue
<!--
* @Description:
* @Date: 2022-05-13 09:41:06
-->
<template> <template>
<el-button @click="handleRemove" class="bi-photo_btn"> <el-button @click="handleRemove" class="bi-photo_btn">
<img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg" alt="" /> <img src="http://cdn.yxvzb.com/WEB/SaaS/images/bi/svg/delete.svg" alt="" />
...@@ -25,6 +29,7 @@ export default { ...@@ -25,6 +29,7 @@ export default {
} }
) )
.then(() => { .then(() => {
this.$emit('del');
Message({ Message({
type: 'success', type: 'success',
message: '删除成功!' message: '删除成功!'
......
src/packages/bi/src/components/photo-wall/images.vue
<template> <template>
<ul> <div :style="{ columnCount }">
<li> <img v-for="(item, index) in list" :key="index" :src="setUrl(item)" />
<img </div>
src="http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/20201013_1147.png"
alt=""
/>
</li>
<li>
<img
src="http://yiyang.oss-cn-beijing.aliyuncs.com/WEB/SaaS/images/2103251844.png"
alt=""
/>
</li>
</ul>
</template> </template>
<script> <script>
const IMG_MAPPING = {
1: {
column: 2,
width: 548
},
2: {
column: 3,
width: 355
},
3: {
column: 4,
width: 262
}
};
export default { export default {
name: 'bi-photo-wall-images', name: 'bi-photo-wall-images',
mixins: [], props: {
components: {}, list: {
data() { type: Array,
return {}; default() {
return [];
}
},
imgStyle: {
type: Object,
default() {
return {
layout: 2, // 1流式 2平铺 流式不限制高度，但是有max-height，平铺为正方形
size: 2 // 1大548px 2中355px 3小262px
};
}
}
},
computed: {
columnCount() {
return IMG_MAPPING[this.imgStyle.size].column;
},
width() {
return IMG_MAPPING[this.imgStyle.size].width;
},
height() {
if (this.imgStyle.layout === 2) {
return this.width;
}
return 'auto';
}
}, },
computed: {}, methods: {
watch: {}, setUrl(url) {
methods: {}, // x-oss-process=image/resize,w_355 流式
created() {}, // ?x-oss-process=image/resize,m_fill,w_355,h_355
beforeDestroy() {} if (this.imgStyle.layout === 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}`;
}
}
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
ul { // https://help.aliyun.com/document_detail/44688.html
// ul {
// padding: 0 30px;
// padding-top: 35px;
// position: relative;
// list-style: none;
// display: flex;
// flex-wrap: wrap;
// li {
// margin: 10px;
// img {
// // 大548px 中355px 小262px
// width: 358px;
// height: 358px;
// // object-fit: fill;
// }
// }
// }
div {
padding: 0 30px; padding: 0 30px;
padding-top: 35px; padding-top: 35px;
position: relative; position: relative;
list-style: none;
// display: flex;
// flex-wrap: wrap;
column-count: 3;
column-gap: 0;
img { img {
max-width: 300px; margin: 10px;
max-height: 300px; // 大548px 中355px 小262px
// width: 358px;
// height: 358px;
// object-fit: fill;
} }
} }
</style> </style>
src/packages/bi/src/components/photo-wall/index.vue
...@@ -7,13 +7,13 @@ ...@@ -7,13 +7,13 @@
<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">
<SelectStyle @handleSave="selectStyleSave" /> <SelectStyle :imgStyle="imgStyle" @handleSave="selectStyleSave" />
<SelectImages @handleSave="selectImgSave" /> <SelectImages :selected="list" @handleSave="selectImgSave" />
<Del /> <Del @del="onDel" />
</div> </div>
</template> </template>
</BiTitle> </BiTitle>
<BiImages /> <BiImages :list="list" :imgStyle="imgStyle" />
</div> </div>
</template> </template>
...@@ -24,7 +24,6 @@ import SelectImages from './select'; ...@@ -24,7 +24,6 @@ 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 { MessageBox, Message } from 'element-ui';
export default { export default {
name: 'bi-photo-wall', name: 'bi-photo-wall',
...@@ -47,39 +46,25 @@ export default { ...@@ -47,39 +46,25 @@ export default {
} }
}, },
data() { data() {
return {}; return {
list: [],
imgStyle: {
layout: 2, // 1流式 2平铺
size: 2 // 1大 2中 3小
}
};
}, },
methods: { methods: {
// 选择图片的保存 // 选择图片的保存
selectImgSave(e) { selectImgSave(e) {
console.log(e); this.list = e;
}, },
// 选择样式的保存 // 选择样式的保存
selectStyleSave(e) { selectStyleSave(e) {
console.log(e); this.imgStyle = e;
}, },
handleRemove() { onDel() {
MessageBox.confirm( this.$refs['bi-photo'].style.display = 'none';
'是否确认删除?删除后可在撤销删除里面回复该分析',
'提示',
{
confirmButtonText: '是',
cancelButtonText: '否',
type: 'warning'
}
)
.then(() => {
Message({
type: 'success',
message: '删除成功!'
});
})
.catch(() => {
Message({
type: 'info',
message: '已取消删除'
});
});
} }
}, },
mounted() {}, mounted() {},
......
src/packages/bi/src/components/photo-wall/select.vue
...@@ -69,7 +69,14 @@ import { ...@@ -69,7 +69,14 @@ import {
export default { export default {
name: 'select-img', name: 'select-img',
mixins: [], props: {
selected: {
type: Array,
default() {
return [];
}
}
},
components: { components: {
[Dialog.name]: Dialog, [Dialog.name]: Dialog,
[Button.name]: Button, [Button.name]: Button,
...@@ -134,8 +141,11 @@ export default { ...@@ -134,8 +141,11 @@ export default {
handleSave() { handleSave() {
this.$emit( this.$emit(
'handleSave', 'handleSave',
this.imgWallList.filter(item => item.isSelect === 1) this.imgWallList
.filter(item => item.isSelect === 1)
.map(item => item.imgUrl)
); );
this.selectImgShow = false;
} }
}, },
computed: { computed: {
......
src/packages/bi/src/components/photo-wall/style.vue
...@@ -16,13 +16,13 @@ ...@@ -16,13 +16,13 @@
> >
<el-form ref="form" :model="form" label-width="80px"> <el-form ref="form" :model="form" label-width="80px">
<el-form-item label="布局样式:"> <el-form-item label="布局样式:">
<el-radio-group v-model="form.layoutStyle"> <el-radio-group v-model="form.layout">
<el-radio :label="1">流式布局</el-radio> <el-radio :label="1">流式布局</el-radio>
<el-radio :label="2">平铺布局</el-radio> <el-radio :label="2">平铺布局</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="图片大小:"> <el-form-item label="图片大小:">
<el-radio-group v-model="form.imgSize"> <el-radio-group v-model="form.size">
<el-radio :label="1">大图</el-radio> <el-radio :label="1">大图</el-radio>
<el-radio :label="2">中图</el-radio> <el-radio :label="2">中图</el-radio>
<el-radio :label="3">小图</el-radio> <el-radio :label="3">小图</el-radio>
...@@ -42,7 +42,17 @@ import { Dialog, Button, Radio, RadioGroup, Form, FormItem } from 'element-ui'; ...@@ -42,7 +42,17 @@ import { Dialog, Button, Radio, RadioGroup, Form, FormItem } from 'element-ui';
export default { export default {
name: 'select-style', name: 'select-style',
mixins: [], props: {
imgStyle: {
type: Object,
default() {
return {
layout: 2,
size: 2
};
}
}
},
components: { components: {
[Form.name]: Form, [Form.name]: Form,
[FormItem.name]: FormItem, [FormItem.name]: FormItem,
...@@ -55,29 +65,24 @@ export default { ...@@ -55,29 +65,24 @@ export default {
return { return {
selectStyleShow: false, selectStyleShow: false,
form: { form: {
layoutStyle: 1, layout: 2,
imgSize: 2 size: 2
} }
}; };
}, },
methods: { methods: {
openDialog() { openDialog() {
this.selectStyleShow = true; this.selectStyleShow = true;
const asyncData = { Object.assign(this.form, this.imgStyle);
layoutStyle: 1,
imgSize: 2
};
this.form = asyncData;
}, },
handleClose() { handleClose() {
this.selectStyleShow = false; this.selectStyleShow = false;
}, },
handleSave() { handleSave() {
this.$emit('handleSave', this.form); this.$emit('handleSave', this.form);
this.selectStyleShow = false;
} }
}, }
computed: {},
created() {}
}; };
</script> </script>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!