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 2024-10-23 18:33:19 +08:00
parent dc11e81d20
commit 58fc7693c6
2 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
View File

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

41
core/core-frontend/src/views/mobile/panel/index.vue
View File

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