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-11-16 17:38:54 +08:00
parent 1c54cc5af6
commit 954d24186f
9 changed files with 383 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/canvas/components/editor/Preview.vue
View File

@ -220,15 +220,19 @@ export default {
width: '100%'
}
if (this.canvasStyleData.openCommonStyle && this.isMainCanvas()) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
const styleInfo = this.terminal === 'mobile' && this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
style = {
background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
...style
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
} else if (styleInfo.backgroundType === 'color') {
style = {
background: this.canvasStyleData.panel.color,
...style
background: styleInfo.color
}
} else {
style = {
background: '#f7f8fa'
}
}
}

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

@ -7,7 +7,7 @@ import {
import { ApplicationContext } from '@/utils/ApplicationContext'
import { uuid } from 'vue-uuid'
import store from '@/store'
import { AIDED_DESIGN, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
import { AIDED_DESIGN, MOBILE_SETTING, PANEL_CHART_INFO, TAB_COMMON_STYLE } from '@/views/panel/panel'
import html2canvas from 'html2canvasde'
export function deepCopy(target) {
@ -86,6 +86,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
componentStyle.panel.mobileSetting = (componentStyle.panel.mobileSetting || MOBILE_SETTING)
componentData.forEach((item, index) => {
if (item.component && item.component === 'de-date') {
const widget = ApplicationContext.getService(item.serviceName)

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

@ -1865,6 +1865,8 @@ export default {
sure_bt: 'Confirm'
},
panel: {
mobile_style_setting: 'Style setting',
mobile_style_setting_tips: 'Customize the mobile background',
board: 'Border',
text: 'Text',
board_background: 'Background',

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

@ -1865,6 +1865,8 @@ export default {
sure_bt: '確定'
},
panel: {
mobile_style_setting: '樣式設置',
mobile_style_setting_tips: '自定義移動端背景',
board: '邊框',
text: '文字',
board_background: '背景',

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

@ -1865,6 +1865,8 @@ export default {
sure_bt: '确定'
},
panel: {
mobile_style_setting: '样式设置',
mobile_style_setting_tips: '自定义移动端背景',
board: '边框',
text: '文字',
board_background: '背景',

114
frontend/src/views/panel/edit/ComponentWait.vue
View File

@ -1,9 +1,22 @@
<template>
<el-row class="component-wait">
<el-row class="component-wait-title">
{{ $t('panel.component_hidden') }}
</el-row>
<el-row class="component-wait-main">
<el-tabs
v-model="activeName"
>
<el-tab-pane
:label="$t('panel.component_hidden')"
name="component-area"
/>
<el-tab-pane
:label="$t('panel.mobile_style_setting')"
name="style-area"
/>
</el-tabs>
<el-row
v-show="activeName === 'component-area'"
class="component-wait-main"
:style="mobileCanvasStyle"
>
<el-col
v-for="(config) in pcComponentData"
v-if="!config.mobileSelected && config.canvasId === 'canvas-main'"
@ -17,18 +30,25 @@
</el-col>
</el-row>
<el-row
v-show="activeName === 'style-area'"
class="component-wait-main"
style="padding:10px"
>
<mobile-background-selector />
</el-row>
</el-row>
</template>
<script>
import { mapState } from 'vuex'
import ComponentWaitItem from '@/views/panel/edit/ComponentWaitItem'
import MobileBackgroundSelector from '@/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector'
import { imgUrlTrans } from '@/components/canvas/utils/utils'
export default {
name: 'ComponentWait',
components: { ComponentWaitItem },
components: { MobileBackgroundSelector, ComponentWaitItem },
props: {
template: {
type: Object,
@ -39,6 +59,7 @@ export default {
},
data() {
return {
activeName: 'component-area',
itemWidth: 280,
itemHeight: 200,
outStyle: {
@ -48,6 +69,27 @@ export default {
}
},
computed: {
mobileCanvasStyle() {
let style
if (this.canvasStyleData.openCommonStyle) {
const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
style = {
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (styleInfo.backgroundType === 'color') {
style = {
background: styleInfo.color
}
} else {
style = {
background: '#f7f8fa'
}
}
}
return style
},
// 移动端编辑组件选择按钮显示
mobileCheckBarShow() {
// 显示条件：1.当前是移动端画布编辑状态
@ -62,36 +104,44 @@ export default {
},
...mapState([
'mobileLayoutStatus',
'canvasStyleData',
'pcComponentData'
])
},
methods: {
}
methods: {}
}
</script>
<style scoped>
.component-wait{
width: 100%;
height: 100%;
}
.component-wait-title {
width: 100%;
height: 30px;
color: #FFFFFF;
vertical-align: center;
background-color: #9ea6b2;
border-bottom: 1px black;
}
.component-wait-main {
width: 100%;
height: calc(100% - 30px);
float: left;
overflow-y: auto;
}
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
.component-wait {
width: 100%;
height: 100%;
}
.component-wait-title {
width: 100%;
height: 30px;
color: #FFFFFF;
vertical-align: center;
background-color: #9ea6b2;
border-bottom: 1px black;
}
.component-wait-main {
width: 100%;
height: calc(100% - 40px);
float: left;
overflow-y: auto;
}
.component-custom {
outline: none;
width: 100% !important;
height: 100%;
}
::v-deep .el-tabs--top {
height: 40px !important;
background-color: #9ea6b2;
}
</style>

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

@ -251,7 +251,6 @@
<el-col
:span="16"
class="this_mobile_canvas_cell this_mobile_canvas_wait_cell"
:style="mobileCanvasStyle"
>
<component-wait />
</el-col>
@ -680,13 +679,15 @@ export default {
mobileCanvasStyle() {
let style
if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && typeof (this.canvasStyleData.panel.imageUrl) === 'string') {
const styleInfo = this.canvasStyleData.panel.mobileSetting && this.canvasStyleData.panel.mobileSetting.customSetting
? this.canvasStyleData.panel.mobileSetting : this.canvasStyleData.panel
if (styleInfo.backgroundType === 'image' && typeof (styleInfo.imageUrl) === 'string') {
style = {
background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`
background: `url(${imgUrlTrans(styleInfo.imageUrl)}) no-repeat`
}
} else if (this.canvasStyleData.panel.backgroundType === 'color') {
} else if (styleInfo.backgroundType === 'color') {
style = {
background: this.canvasStyleData.panel.color
background: styleInfo.color
}
} else {
style = {
@ -1537,7 +1538,7 @@ export default {
.this_mobile_canvas_wait_cell {
background-size: 100% 100% !important;
border: 2px solid #9ea6b2
border: 1px solid #9ea6b2
}
.canvas_main_content {

8
frontend/src/views/panel/panel.js
View File

@ -29,7 +29,15 @@ export const FILTER_COMMON_STYLE_DARK = {
innerBgColor: '#131E42'
}
export const MOBILE_SETTING = {
customSetting: false,
color: '#ffffff',
imageUrl: null,
backgroundType: 'image'
}
export const DEFAULT_PANEL_STYLE = {
mobileSetting: MOBILE_SETTING,
themeColor: 'light',
color: '#ffffff',
imageUrl: null,

268
frontend/src/views/panel/subjectSetting/panelStyle/MobileBackgroundSelector.vue Normal file
View File

@ -0,0 +1,268 @@
<template>
<div style="width: 100%;margin-top: 12px">
<el-form
ref="overallMobileSettingForm"
size="mini"
>
<el-col>
<el-checkbox v-model="mobileSetting.customSetting">{{ $t('panel.mobile_style_setting_tips') }}</el-checkbox>
</el-col>
<el-col>
<el-radio-group
v-model="mobileSetting.backgroundType"
size="mini"
:disabled="!mobileSetting.customSetting"
@change="onChangeType()"
>
<el-radio label="color">{{ $t('chart.color') }}</el-radio>
<el-radio label="image">{{ $t('panel.photo') }}</el-radio>
</el-radio-group>
</el-col>
<el-col
v-show="mobileSetting.backgroundType==='color'"
:span="10"
>
<el-color-picker
v-model="mobileSetting.color"
:predefine="predefineColors"
size="mini"
class="color-picker-custom"
:disabled="!mobileSetting.customSetting"
@change="onChangeType"
/>
</el-col>
<el-col
v-show="mobileSetting.backgroundType==='image'"
:span="10"
>
<el-upload
action=""
accept=".jpeg,.jpg,.png,.gif"
class="avatar-uploader"
list-type="picture-card"
:http-request="upload"
:class="{disabled:uploadDisabled}"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:disabled="!mobileSetting.customSetting"
:file-list="fileList"
>
<i class="el-icon-plus" />
</el-upload>
<el-dialog
top="25vh"
width="600px"
:modal-append-to-body="false"
:visible.sync="dialogVisible"
>
<img
width="100%"
:src="dialogImageUrl"
alt=""
>
</el-dialog>
</el-col>
<el-col v-show="mobileSetting.backgroundType==='image'">
<span
v-show="!mobileSetting.imageUrl"
class="image-hint"
>{{ $t('panel.panel_background_image_tips') }}</span>
<span
v-show="mobileSetting.imageUrl && mobileSetting.customSetting"
class="re-update-span"
@click="goFile"
>{{ $t('panel.reUpload') }}</span>
</el-col>
<input
id="input"
ref="files"
type="file"
accept=".jpeg,.jpg,.png,.gif"
hidden
@click="e => {e.target.value = '';}"
@change="reUpload"
>
</el-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
import { COLOR_PANEL } from '@/views/chart/chart/chart'
import { uploadFileResult } from '@/api/staticResource/staticResource'
export default {
name: 'MobileBackgroundSelector',
data() {
return {
maxImageSize: 15000000,
fileList: [],
dialogImageUrl: '',
dialogVisible: false,
uploadDisabled: false,
mobileSetting: null,
predefineColors: COLOR_PANEL
}
},
computed: mapState([
'canvasStyleData'
]),
watch: {
// deep监听panel 如果改变 提交到 store
},
created() {
// 初始化赋值
this.mobileSetting = this.canvasStyleData.panel.mobileSetting
if (this.mobileSetting.imageUrl && typeof (this.mobileSetting.imageUrl) === 'string') {
this.fileList.push({ url: imgUrlTrans(this.mobileSetting.imageUrl) })
}
},
methods: {
goFile() {
this.$refs.files.click()
},
commitStyle() {
const canvasStyleData = deepCopy(this.canvasStyleData)
canvasStyleData.panel.mobileSetting = this.mobileSetting
this.$store.commit('setCanvasStyle', canvasStyleData)
this.$store.commit('recordSnapshot', 'commitStyle')
},
onChangeType() {
this.commitStyle()
},
handleRemove(file, fileList) {
this.uploadDisabled = false
this.mobileSetting.imageUrl = null
this.fileList = []
this.commitStyle()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
upload(file) {
const _this = this
if (file.size > this.maxImageSize) {
this.sizeMessage()
}
uploadFileResult(file.file, (fileUrl) => {
_this.$store.commit('canvasChange')
_this.mobileSetting.imageUrl = fileUrl
_this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
_this.commitStyle()
})
},
reUpload(e) {
const file = e.target.files[0]
const _this = this
if (file.size > this.maxImageSize) {
this.sizeMessage()
}
uploadFileResult(file, (fileUrl) => {
_this.$store.commit('canvasChange')
_this.mobileSetting.imageUrl = fileUrl
_this.fileList = [{ url: imgUrlTrans(this.mobileSetting.imageUrl) }]
_this.commitStyle()
})
},
sizeMessage() {
this.$notify({
message: this.$t('panel.image_size_tips'),
position: 'top-left'
})
}
}
}
</script>
<style scoped>
.avatar-uploader {
position: relative;
margin-left: 0px;
margin-top: 8px;
height: 80px;
width: 80px;
line-height: 80px;
overflow: hidden;
}
.avatar-uploader ::v-deep .el-upload {
width: 80px;
height: 80px;
line-height: 80px;
}
.avatar-uploader ::v-deep .el-upload-list li {
width: 80px !important;
height: 80px !important;
}
.disabled ::v-deep .el-upload--picture-card {
display: none;
}
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.color-picker-custom {
margin-left: 0px;
cursor: pointer;
margin-top: 8px;
z-index: 1004;
}
.custom-item {
width: 70px;
}
.re-update-span {
cursor: pointer;
color: #3370FF;
size: 14px;
line-height: 22px;
font-weight: 400;
}
.image-hint {
color: #8F959E;
size: 14px;
line-height: 22px;
font-weight: 400;
}
.custom-item-text {
font-weight: 400 !important;
font-size: 14px !important;
color: var(--TextPrimary, #1F2329) !important;
line-height: 22px;
}
</style>