center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat: 图片组件增加尺寸适应方式

Browse Source
This commit is contained in:
wangjiahao 2022-06-24 17:59:20 +08:00
parent b1b1e0f58e
commit 028c03733c
8 changed files with 104 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/canvas/components/TextAttr.vue
View File

@ -105,7 +105,7 @@
</div>
<div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="边框颜色">
<el-tooltip :content="$t('panel.border_color')">
<i class="iconfont icon-huabi" @click="goBoardColor" />
</el-tooltip>
<div :style="boardDivColor" />
@ -115,7 +115,7 @@
<div v-if="attrShow('backgroundColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<div style="width: 16px;height: 18px">
<el-tooltip content="背景颜色">
<el-tooltip :content="$t('panel.background_color')">
<i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
</el-tooltip>
<div :style="backgroundDivColor" />
@ -123,58 +123,70 @@
</div>
</div>
<div v-if="attrShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="视频信息">
<el-tooltip :content="$t('panel.video_info')">
<VideoLinks :link-info="curComponent.videoLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="流媒体信息">
<el-tooltip :content="$t('panel.stream_media_info')">
<StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
<el-tooltip content="网页地址">
<el-tooltip :content="$t('panel.web_addr')">
<FrameLinks :link-info="curComponent.frameLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="日期格式">
<el-tooltip :content="$t('panel.data_format')">
<date-format :format-info="curComponent.formatInfo" />
</el-tooltip>
</div>
<div v-if="attrShow('deTabStyle')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="tab内部样式">
<el-tooltip :content="$t('panel.tab_inner_style')">
<tab-style :style-info="styleInfo" />
</el-tooltip>
</div>
<div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="标题位置">
<el-tooltip :content="$t('panel.title_position')">
<title-postion :element-type="elementType" :show-vertical="showVertical" :style-info="styleInfo" />
</el-tooltip>
</div>
<!--tab 内部组件样式-->
<div v-if="attrTabShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="视频信息">
<el-tooltip :content="$t('panel.video_info')">
<VideoLinks :attr-position="'tab'" :link-info="curActiveTabInner.videoLinks" />
</el-tooltip>
</div>
<div v-if="attrTabShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="流媒体信息">
<el-tooltip :content="$t('panel.stream_media_info')">
<StreamMediaLinks :attr-position="'tab'" :link-info="curActiveTabInner.streamMediaLinks" />
</el-tooltip>
</div>
<div v-if="attrTabShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
<el-tooltip content="网页地址">
<el-tooltip :content="$t('panel.web_addr')">
<FrameLinks :attr-position="'tab'" :link-info="curActiveTabInner.frameLinks" />
</el-tooltip>
</div>
<div v-if="attrShow('adaptation')" style="width: 100px;margin-top: 2px;margin-right:2px;float: left">
<el-tooltip :content="$t('panel.pic_size')">
<el-select v-model="styleInfo.adaptation" size="mini" @change="styleChange">
<el-option
v-for="item in pictureAdaptation"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-tooltip>
</div>
</div>
</el-card>
</template>
@ -257,12 +269,23 @@ export default {
value: '5',
label: '5'
}],
pictureAdaptation: [{
value: 'adaptation',
label: this.$t('panel.pic_adaptation')
}, {
value: 'equiratio',
label: this.$t('panel.pic_equiratio')
}, {
value: 'original',
label: this.$t('panel.pic_original')
}],
// 矩形组件显示的属性
'picture-add': [
'borderStyle',
'borderWidth',
'borderColor',
'hyperlinks'
'hyperlinks',
'adaptation'
],
// 过滤组件显示的属性
'custom': [
@ -480,6 +503,7 @@ export default {
.el-card-main {
height: 34px;
z-index: 10;
padding-right: 2px;
position: absolute;
}

25
frontend/src/components/canvas/custom-component/Picture.vue
View File

@ -1,8 +1,8 @@
<template>
<div style="overflow: hidden;width: 100%;height: 100%;">
<img v-if="!showLink" :src="element.propValue">
<img v-if="!showLink" :style="imageAdapter" :src="element.propValue">
<a v-if="showLink" :title="element.hyperlinks.content " :target="element.hyperlinks.openMode " :href="element.hyperlinks.content ">
<img :src="element.propValue">
<img :style="imageAdapter" :src="element.propValue">
</a>
</div>
</template>
@ -23,14 +23,29 @@ export default {
computed: {
showLink() {
return this.editMode === 'preview' && this.element && this.element.hyperlinks && this.element.hyperlinks.enable
},
imageAdapter() {
const style = {
position: 'relative',
width: '100%',
height: '100%'
}
if (this.element.style.adaptation === 'original') {
style.width = 'auto'
style.height = 'auto'
} else if (this.element.style.adaptation === 'equiratio') {
style.height = 'auto'
}
return style
}
}
}
</script>
<style lang="scss" scoped>
img {
width: 100%;
height: 100%;
.pic-main{
overflow: hidden;
width: 100%;
height: 100%;
}
</style>

12
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -56,6 +56,11 @@ export const commonStyle = {
borderRadius: 0
}
export const PIC_STYLE = {
...commonStyle,
adaptation: 'adaptation'
}
export const commonAttr = {
animations: [],
events: {},
@ -163,7 +168,7 @@ export const assistList = [
export const pictureList = [
{
id: '20001',
component: 'picture-add',
component: 'Picture',
type: 'picture-add',
label: '图片',
icon: 'iconfont icon-picture',
@ -457,7 +462,7 @@ const list = [
},
{
id: '20001',
component: 'picture-add',
component: 'Picture',
type: 'picture-add',
label: '图片',
icon: 'iconfont icon-picture',
@ -466,7 +471,8 @@ const list = [
hyperlinks: HYPERLINKS,
style: {
width: 400,
height: 200
height: 200,
adaptation: 'adaptation'
},
x: 1,
y: 1,

4
frontend/src/components/canvas/utils/utils.js
View File

@ -123,6 +123,10 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
item.commonBackground.enable = false
item.commonBackground.backgroundType = 'innerImage'
}
// picture component
if (item.component && item.component === 'Picture') {
item.style.adaptation = item.style.adaptation || 'adaptation'
}
})
// 初始化密度为最高密度
componentStyle.aidedDesign.matrixBase = 4

11
frontend/src/lang/en.js
View File

@ -1464,6 +1464,17 @@ export default {
sure_bt: 'Confirm'
},
panel: {
pic_adaptation: 'Adaptation',
pic_equiratio: 'Equiratio',
pic_original: 'Original',
pic_size: 'Image Size',
web_addr: 'Web Address',
stream_media_info: 'Stream Media Info',
video_info: 'Video Info',
title_position: 'Title Position',
tab_inner_style: 'Tab Inner Style',
data_format: 'Data Format',
border_color: 'Border Color',
theme_change_warn: 'Subject Change',
theme_change_tips: 'Changing the theme will overwrite the view related theme attributes. It is recommended to back up in advance. Do you want to continue the replacement?',
theme_color_change_warn: 'Theme Color Change',

11
frontend/src/lang/tw.js
View File

@ -1465,6 +1465,17 @@ export default {
sure_bt: '確定'
},
panel: {
pic_adaptation: '适应组件',
pic_equiratio: '等比适应',
pic_original: '原始尺寸',
pic_size: '图片尺寸',
web_addr: '网页地址',
stream_media_info: '流媒体信息',
video_info: '视频信息',
title_position: '标题位置',
tab_inner_style: 'tab内部样式',
data_format: '日期格式',
border_color: '边框颜色',
theme_change_warn: '主題更換',
theme_change_tips: '更換主題將會覆蓋視圖相關主題屬性建議提前備份,是否繼續更換？',
theme_color_change_warn: '主題色更換',

11
frontend/src/lang/zh.js
View File

@ -1472,6 +1472,17 @@ export default {
sure_bt: '确定'
},
panel: {
pic_adaptation: '适应组件',
pic_equiratio: '等比适应',
pic_original: '原始尺寸',
pic_size: '图片尺寸',
web_addr: '网页地址',
stream_media_info: '流媒体信息',
video_info: '视频信息',
title_position: '标题位置',
tab_inner_style: 'tab内部样式',
data_format: '日期格式',
border_color: '边框颜色',
theme_change_warn: '主题更换',
theme_change_tips: '更换主题将会覆盖视图相关主题属性建议提前备份,是否继续更换？',
theme_color_change_warn: '主题色更换',

4
frontend/src/views/panel/edit/index.vue
View File

@ -341,7 +341,7 @@ import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
import componentList, {
BASE_MOBILE_STYLE,
COMMON_BACKGROUND,
HYPERLINKS
HYPERLINKS, PIC_STYLE
} from '@/components/canvas/custom-component/component-list' // 左侧列表数据
import { mapState } from 'vuex'
import { uuid } from 'vue-uuid'
@ -967,7 +967,7 @@ export default {
propValue: fileResult,
commonBackground: deepCopy(COMMON_BACKGROUND),
style: {
...commonStyle
...PIC_STYLE
}
}
component.auxiliaryMatrix = false