From 7721e1ddef2ec27a1d9742d2705af5fa10f8579c Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 30 Oct 2024 15:38:06 +0800 Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?= =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=AF=8C=E6=96=87=E6=9C=AC=E4=BF=9D?= =?UTF-8?q?=E7=95=99=E7=8B=AC=E7=AB=8B=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/data-visualization/dvMain.ts | 3 + core/core-frontend/src/utils/canvasUtils.ts | 78 ++++++++++--------- .../src/views/dashboard/MobileConfigPanel.vue | 13 ++-- .../src/views/mobile/panel/index.vue | 19 +++-- 4 files changed, 66 insertions(+), 47 deletions(-) diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts index 04cf68ba00..154a6726df 100644 --- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts +++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts @@ -260,6 +260,9 @@ export const dvMainStore = defineStore('dataVisualization', { setAppDataInfo(appDataInfo) { this.appData = appDataInfo }, + setCurComponentMobileConfig(component) { + this.curComponent = component + }, setCurComponent({ component, index }) { if (!component && this.curComponent) { this.curComponent['editing'] = false diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 2bebf4f04a..e766b56f93 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -349,45 +349,50 @@ export async function initCanvasData(dvId, busiFlag, callBack) { } export async function backCanvasData(dvId, busiFlag, callBack) { - initCanvasDataPrepare(dvId, busiFlag, function ({ canvasDataResult, canvasStyleResult }) { - const componentDataCopy = canvasDataResult.filter(ele => !!ele.inMobile) - const componentDataId = componentDataCopy.map(ele => ele.id) - componentData.value.forEach(ele => { - ele.inMobile = componentDataId.includes(ele.id) - if (ele.inMobile) { - const { mx, my, mSizeX, mSizeY } = componentDataCopy.find(itx => itx.id === ele.id) - ele.mx = mx - ele.my = my - ele.mSizeX = mSizeX - ele.mSizeY = mSizeY - if (ele.component === 'DeTabs') { - ele.propValue.forEach(tabItem => { - tabItem.componentData.forEach(tabComponent => { - tabComponent.mx = tabComponent.mx - tabComponent.my = tabComponent.my - tabComponent.mSizeX = tabComponent.mSizeX - tabComponent.mSizeY = tabComponent.mSizeY + initCanvasDataPrepare( + dvId, + busiFlag, + function ({ canvasDataResult, canvasStyleResult, canvasViewInfoPreview }) { + const componentDataCopy = canvasDataResult.filter(ele => !!ele.inMobile) + const componentDataId = componentDataCopy.map(ele => ele.id) + componentData.value.forEach(ele => { + ele.inMobile = componentDataId.includes(ele.id) + if (ele.inMobile) { + const { mx, my, mSizeX, mSizeY } = componentDataCopy.find(itx => itx.id === ele.id) + ele.mx = mx + ele.my = my + ele.mSizeX = mSizeX + ele.mSizeY = mSizeY + if (ele.component === 'DeTabs') { + ele.propValue.forEach(tabItem => { + tabItem.componentData.forEach(tabComponent => { + tabComponent.mx = tabComponent.mx + tabComponent.my = tabComponent.my + tabComponent.mSizeX = tabComponent.mSizeX + tabComponent.mSizeY = tabComponent.mSizeY + }) }) - }) + } } + }) + dvMainStore.setComponentData(componentData.value) + dvMainStore.setCanvasViewInfo(canvasViewInfoPreview) + const canvasStyleDataCopy = cloneDeep(canvasStyleData.value) + if (!canvasStyleDataCopy.mobileSetting) { + canvasStyleDataCopy.mobileSetting = { + backgroundColorSelect: false, + background: '', + color: '#ffffff', + backgroundImageEnable: false, + customSetting: false + } + } else { + canvasStyleDataCopy.mobileSetting = canvasStyleResult.mobileSetting } - }) - dvMainStore.setComponentData(componentData.value) - const canvasStyleDataCopy = cloneDeep(canvasStyleData.value) - if (!canvasStyleDataCopy.mobileSetting) { - canvasStyleDataCopy.mobileSetting = { - backgroundColorSelect: false, - background: '', - color: '#ffffff', - backgroundImageEnable: false, - customSetting: false - } - } else { - canvasStyleDataCopy.mobileSetting = canvasStyleResult.mobileSetting + dvMainStore.setCanvasStyle(canvasStyleDataCopy) + callBack() } - dvMainStore.setCanvasStyle(canvasStyleDataCopy) - callBack() - }) + ) } export function initCanvasDataMobile(dvId, busiFlag, callBack) { @@ -397,12 +402,13 @@ export function initCanvasDataMobile(dvId, busiFlag, callBack) { function ({ canvasDataResult, canvasStyleResult, dvInfo, canvasViewInfoPreview }) { const componentData = canvasDataResult.filter(ele => !!ele.inMobile) canvasDataResult.forEach(ele => { - const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground } = ele + const { mx, my, mSizeX, mSizeY, mStyle, mPropValue, mCommonBackground } = ele ele.x = mx ele.y = my ele.sizeX = mSizeX ele.sizeY = mSizeY ele.mStyle = mStyle || ele.Style + ele.mPropValue = mPropValue || ele.propValue ele.mCommonBackground = mCommonBackground || ele.commonBackground if (ele.component === 'DeTabs') { ele.propValue.forEach(tabItem => { diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue index 92c990568f..0d2ca05996 100644 --- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue +++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue @@ -108,8 +108,8 @@ const hanedleMessage = event => { } if (event.data.type === 'curComponentChange') { - // 移动端CurComponent引用不在主dvMain中 1111 - dvMainStore.setCurComponent({ component: event.data.value, index: 0 }) + // 移动端CurComponent引用不在主dvMain中 + dvMainStore.setCurComponentMobileConfig(event.data.value) if (!!event.data.value) { activeCollapse.value = 'componentStyle' } else { @@ -132,12 +132,13 @@ const hanedleMessage = event => { componentData.value.forEach(ele => { const com = event.data.value[ele.id] if (!!com) { - const { x, y, sizeX, sizeY, style, commonBackground } = com + const { x, y, sizeX, sizeY, style, propValue, commonBackground } = com ele.mx = x ele.my = y ele.mSizeX = sizeX ele.mSizeY = sizeY ele.mStyle = style + ele.mPropValue = propValue ele.mCommonBackground = commonBackground if (ele.component === 'DeTabs') { ele.propValue.forEach(tabItem => { @@ -148,6 +149,7 @@ const hanedleMessage = event => { sizeX: tSizeX, sizeY: tSizeY, style: tStyle, + propValue: tPropValue, commonBackground: tCommonBackground } = com.tab[tabComponent.id] tabComponent.mx = tx @@ -155,6 +157,7 @@ const hanedleMessage = event => { tabComponent.mSizeX = tSizeX tabComponent.mSizeY = tSizeY tabComponent.mStyle = tStyle + tabComponent.mPropValue = tPropValue tabComponent.mCommonBackground = tCommonBackground }) }) @@ -331,8 +334,8 @@ const save = () => { canvas-id="canvas-main" :canvas-style-data="canvasStyleData" :dv-info="dvInfo" - :canvas-view-info="canvasViewInfo" - :view-info="canvasViewInfo[item.id]" + :canvas-view-info="canvasViewInfoMobile" + :view-info="canvasViewInfoMobile[item.id]" :config="item" :style="getComponentStyleDefault()" show-position="preview" diff --git a/core/core-frontend/src/views/mobile/panel/index.vue b/core/core-frontend/src/views/mobile/panel/index.vue index 0b9d8a037f..eb4eaf3a9d 100644 --- a/core/core-frontend/src/views/mobile/panel/index.vue +++ b/core/core-frontend/src/views/mobile/panel/index.vue @@ -6,6 +6,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { XpackComponent } from '@/components/plugin' import DePreviewMobile from './MobileInPc.vue' import { findComponentById, mobileViewStyleSwitch } from '@/utils/canvasUtils' +import { deepCopy } from '@/utils/utils' const panelInit = ref(false) const dvMainStore = dvMainStoreWithOut() @@ -22,13 +23,14 @@ 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, mStyle, mCommonBackground } = ele + const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground, mPropValue } = ele ele.x = mx ele.y = my ele.sizeX = mSizeX ele.sizeY = mSizeY ele.style = mStyle || ele.style - ele.commonBackground = mCommonBackground || ele.commonBackground + ele.commonBackground = deepCopy(mCommonBackground || ele.commonBackground) + ele.propValue = deepCopy(mPropValue || ele.propValue) if (ele.component === 'DeTabs') { ele.propValue.forEach(tabItem => { @@ -39,15 +41,19 @@ const hanedleMessage = event => { mSizeX: tSizeX, mSizeY: tSizeY, mStyle: tStyle, - mCommonBackground: tCommonBackground + mCommonBackground: tCommonBackground, + mPropValue: tPropValue } = 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 + tabComponent.style = deepCopy(tStyle || tabComponent.style) + tabComponent.commonBackground = deepCopy( + tCommonBackground || tabComponent.commonBackground + ) + tabComponent.propValue = deepCopy(tPropValue || tabComponent.propValue) } }) }) @@ -96,13 +102,14 @@ const hanedleMessage = event => { { type: `${event.data.type}FromMobile`, value: dvMainStore.componentData.reduce((pre, next) => { - const { x, y, sizeX, sizeY, id, component, style, commonBackground } = next + const { x, y, sizeX, sizeY, id, component, propValue, style, commonBackground } = next pre[id] = { x, y, sizeX, sizeY, component, + propValue: JSON.parse(JSON.stringify(propValue)), style: JSON.parse(JSON.stringify(style)), commonBackground: JSON.parse(JSON.stringify(commonBackground)) }