Merge pull request #12861 from dataease/pr@dev-v2@feat_mobile-change

feat(仪表板): 移动端支持独立样式设计
This commit is contained in:
王嘉豪 2024-10-23 18:34:26 +08:00 committed by GitHub
commit 634dabe918
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 8 deletions

View File

@ -111,19 +111,30 @@ const hanedleMessage = event => {
componentData.value.forEach(ele => {
const com = event.data.value[ele.id]
if (!!com) {
const { x, y, sizeX, sizeY } = com
const { x, y, sizeX, sizeY, style, commonBackground } = com
ele.mx = x
ele.my = y
ele.mSizeX = sizeX
ele.mSizeY = sizeY
ele.mStyle = style
ele.mCommonBackground = commonBackground
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {
tabItem.componentData.forEach(tabComponent => {
const { x: tx, y: ty, sizeX: tSizeX, sizeY: tSizeY } = com.tab[tabComponent.id]
const {
x: tx,
y: ty,
sizeX: tSizeX,
sizeY: tSizeY,
style: tStyle,
commonBackground: tCommonBackground
} = com.tab[tabComponent.id]
tabComponent.mx = tx
tabComponent.my = ty
tabComponent.mSizeX = tSizeX
tabComponent.mSizeY = tSizeY
tabComponent.mStyle = tStyle
tabComponent.mCommonBackground = tCommonBackground
})
})
}

View File

@ -22,21 +22,32 @@ const hanedleMessage = event => {
if (event.data.type === 'panelInit') {
const { componentData, canvasStyleData, dvInfo, canvasViewInfo, isEmbedded } = event.data.value
componentData.forEach(ele => {
const { mx, my, mSizeX, mSizeY } = ele
const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground } = ele
ele.x = mx
ele.y = my
ele.sizeX = mSizeX
ele.sizeY = mSizeY
ele.style = mStyle || ele.style
ele.commonBackground = mCommonBackground || ele.commonBackground
if (ele.component === 'DeTabs') {
ele.propValue.forEach(tabItem => {
tabItem.componentData.forEach(tabComponent => {
const { mx: tx, my: ty, mSizeX: tSizeX, mSizeY: tSizeY } = tabComponent
const {
mx: tx,
my: ty,
mSizeX: tSizeX,
mSizeY: tSizeY,
mStyle: tStyle,
mCommonBackground: tCommonBackground
} = tabComponent
if (tSizeX && tSizeY) {
tabComponent.x = tx
tabComponent.y = ty
tabComponent.sizeX = tSizeX
tabComponent.sizeY = tSizeY
tabComponent.style = tStyle || tabComponent.style
tabComponent.commonBackground = tCommonBackground || tabComponent.commonBackground
}
})
})
@ -80,18 +91,36 @@ const hanedleMessage = event => {
{
type: `${event.data.type}FromMobile`,
value: dvMainStore.componentData.reduce((pre, next) => {
const { x, y, sizeX, sizeY, id, component } = next
pre[id] = { x, y, sizeX, sizeY, component }
const { x, y, sizeX, sizeY, id, component, style, commonBackground } = next
pre[id] = {
x,
y,
sizeX,
sizeY,
component,
style: JSON.parse(JSON.stringify(style)),
commonBackground: JSON.parse(JSON.stringify(commonBackground))
}
if (next.component === 'DeTabs') {
pre[id].tab = {}
next.propValue.forEach(tabItem => {
tabItem.componentData.forEach(tabComponent => {
const { x: tx, y: ty, sizeX: tSizeX, sizeY: tSizeY, id: tId } = tabComponent
const {
x: tx,
y: ty,
sizeX: tSizeX,
sizeY: tSizeY,
id: tId,
style: tStyle,
commonBackground: tCommonBackground
} = tabComponent
pre[id].tab[tId] = {
x: tx,
y: ty,
sizeX: tSizeX,
sizeY: tSizeY
sizeY: tSizeY,
style: JSON.parse(JSON.stringify(tStyle)),
commonBackground: JSON.parse(JSON.stringify(tCommonBackground))
}
})
})