diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 7687e24f7f..48bf818fdf 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -750,7 +750,7 @@ export function componentSwitch(componentData, changeComponent) { export function findComponentById(componentId) { let result - componentData.forEach(item => { + componentData.value.forEach(item => { if (item.id === componentId) { result = item } else if (item.component === 'Group') { @@ -776,6 +776,6 @@ export function mobileViewStyleSwitch(component) { if (component) { const viewInfo = canvasViewInfo.value[component.id] viewInfo.customStyle = component.customStyle - viewInfo.customStyleMobile = component.customStyleMobile + viewInfo.customAttr = component.customAttr } } diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue index db804f45d4..c7ace29314 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -1077,10 +1077,24 @@ const onFunctionCfgChange = val => { const onBackgroundChange = val => { curComponent.value.commonBackground = val + if (mobileInPc.value) { + //移动端设计 + useEmitt().emitter.emit('onMobileStatusChange', { + type: 'componentStyleChange', + value: { type: 'commonBackground', component: JSON.parse(JSON.stringify(curComponent.value)) } + }) + } } const onStyleAttrChange = val => { curComponent.value.style[val.property] = val.value + if (mobileInPc.value) { + //移动端设计 + useEmitt().emitter.emit('onMobileStatusChange', { + type: 'componentStyleChange', + value: { type: 'style', component: JSON.parse(JSON.stringify(curComponent.value)) } + }) + } } const onAssistLineChange = val => { diff --git a/core/core-frontend/src/views/common/ComponentStyleEditor.vue b/core/core-frontend/src/views/common/ComponentStyleEditor.vue index c2c9d39094..bfc40a0c8e 100644 --- a/core/core-frontend/src/views/common/ComponentStyleEditor.vue +++ b/core/core-frontend/src/views/common/ComponentStyleEditor.vue @@ -5,7 +5,14 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import ViewEditor from '@/views/chart/components/editor/index.vue' import { computed } from 'vue' const dvMainStore = dvMainStoreWithOut() -const { curComponent, canvasViewInfo, batchOptStatus } = storeToRefs(dvMainStore) +const { curComponent, batchOptStatus } = storeToRefs(dvMainStore) + +defineProps({ + canvasViewInfoMobile: { + type: Object, + required: true + } +}) const otherEditorShow = computed(() => { return Boolean( @@ -35,7 +42,7 @@ const viewEditorShow = computed(() => { diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue index eb4f6478c6..bf954f510b 100644 --- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue +++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue @@ -22,6 +22,7 @@ const mobileLoading = ref(true) const mobileStyle = ref(null) const emits = defineEmits(['pcMode']) const snapshotStore = snapshotStoreWithOut() +const canvasViewInfoMobile = ref({}) const getComponentStyleDefault = () => { return { @@ -51,6 +52,7 @@ const iframeSrc = computed(() => { : './mobile.html#/panel' }) const handleLoad = () => { + canvasViewInfoMobile.value = JSON.parse(JSON.stringify(unref(canvasViewInfo))) mobileStatusChange( 'panelInit', JSON.parse( @@ -140,6 +142,14 @@ const hanedleMessage = event => { } } }) + // 将图表的修改信息还原 + if (!!canvasViewInfoMobile.value) { + Object.keys(canvasViewInfoMobile.value).forEach(key => { + const { customAttr, customStyle } = canvasViewInfoMobile.value[key] + canvasViewInfo.value[key]['customAttrMobile'] = customAttr + canvasViewInfo.value[key]['customStyleMobile'] = customStyle + }) + } } if (event.data.type === 'mobileSaveFromMobile') { saveCanvasWithCheckFromMobile() @@ -285,7 +295,9 @@ const save = () => {
- +
{ const hanedleMessage = event => { if (event.data.type === 'panelInit') { const { componentData, canvasStyleData, dvInfo, canvasViewInfo, isEmbedded } = event.data.value + Object.keys(canvasViewInfo).forEach(viewId => { + const viewInfo = canvasViewInfo[viewId] + const { customAttrMobile, customStyleMobile } = viewInfo + viewInfo.customAttr = customAttrMobile || viewInfo.customAttr + viewInfo.customStyle = customStyleMobile || viewInfo.customStyle + }) componentData.forEach(ele => { const { mx, my, mSizeX, mSizeY, mStyle, mCommonBackground } = ele ele.x = mx @@ -64,14 +70,16 @@ const hanedleMessage = event => { } // 进行内部组件渲染 type render 渲染 calcData 计算 主组件渲染 if (event.data.type === 'componentStyleChange') { - const { type, innerOptType, component } = event.data.value + const { type, component } = event.data.value if (type === 'renderChart') { mobileViewStyleSwitch(component) useEmitt().emitter.emit('renderChart-' + component.id, component) } else if (type === 'calcData') { mobileViewStyleSwitch(component) useEmitt().emitter.emit('calcData-' + component.id, component) - } else if (type === 'component') { + } else if (['style', 'commonBackground'].includes(type)) { + const mobileComponent = findComponentById(component.id) + mobileComponent[type] = component[type] } }