diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue index 7e0e43281d..c74c99f2e7 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue @@ -101,7 +101,7 @@ const dashboardActive = computed(() => { // 大屏是否保持宽高比例 非全屏 full 都需要保持宽高比例 const dataVKeepRadio = computed(() => { - return canvasStyleData.value.screenAdaptor !== 'full' + return canvasStyleData.value?.screenAdaptor !== 'full' }) const isReport = computed(() => { return !!router.currentRoute.value.query?.report @@ -205,12 +205,13 @@ const resetLayout = () => { : outerScale.value * 100 } else { // 需要保持宽高比例时 高度伸缩和宽度伸缩保持一致 否则 高度伸缩单独计算 + // tip 当当前画布是tab时 使用的事 outerScale.value 因为 canvasStyleData.value为 {} 此处取数逻辑需进一步优化 const scaleMinHeight = dataVKeepRadio.value ? scaleMin.value : scaleHeightPoint.value changeRefComponentsSizeWithScalePoint( baseComponentData.value, canvasStyleData.value, - scaleMin.value, - scaleMinHeight + scaleMin.value || outerScale.value * 100, + scaleMinHeight || outerScale.value * 100 ) scaleMin.value = isMainCanvas(canvasId.value) ? scaleMin.value : outerScale.value * 100 } diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue index e77a2c7360..f8b5974e96 100644 --- a/core/core-frontend/src/custom-component/de-tabs/Component.vue +++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue @@ -66,7 +66,7 @@ :dv-info="dvInfo" :cur-gap="curPreviewGap" :component-data="tabItem.componentData" - :canvas-style-data="canvasStyleData" + :canvas-style-data="{}" :canvas-view-info="canvasViewInfo" :canvas-id="element.id + '--' + tabItem.name" :preview-active="editableTabsValue === tabItem.name" @@ -289,11 +289,9 @@ const componentMoveIn = component => { component.style.left = 0 component.style.top = 0 tabItem.componentData.push(component) - if (isDashboard()) { - nextTick(() => { - refInstance.addItemBox(component) //在适当的时候初始化布局组件 - }) - } + nextTick(() => { + refInstance.addItemBox(component) //在适当的时候初始化布局组件 + }) } } else { // 从主画布删除 @@ -310,7 +308,9 @@ const componentMoveIn = component => { } const componentMoveOut = component => { - canvasChangeAdaptor(component, bashMatrixInfo.value, true) + if (isDashboard()) { + canvasChangeAdaptor(component, bashMatrixInfo.value, true) + } // 从Tab画布中移除 eventBus.emit('removeMatrixItemById-' + component.canvasId, component.id) dvMainStore.setCurComponent({ component: null, index: null }) @@ -324,6 +324,9 @@ const componentMoveOut = component => { } const addToMain = component => { + const { left, top } = element.value.style + component.style.left = component.style.left + left + component.style.top = component.style.top + top component.canvasId = 'canvas-main' dvMainStore.addComponent({ component, diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts index 2c2c9eccda..2efb7ed61e 100644 --- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts +++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts @@ -33,18 +33,18 @@ export function changeComponentsSizeWithScale(scale, changeAttrs = needToChangeA getOriginStyle(component.style[key], canvasStyleData.value.scale), scale ) - // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算 - // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey]. - if (['Group', 'DeTabs'].includes(component.component)) { - try { - groupSizeStyleAdaptor(component) - } catch (e) { - // 旧Group适配 - console.error('group adaptor error:' + e) - } - } } }) + // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算 + // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey]. + if (['Group', 'DeTabs'].includes(component.component)) { + try { + groupSizeStyleAdaptor(component) + } catch (e) { + // 旧Group适配 + console.error('group adaptor error:' + e) + } + } }) dvMainStore.setComponentData(componentDataCopy)