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 d36476acc2..3626de4346 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue @@ -235,7 +235,8 @@ const resetLayout = () => { baseComponentData.value, canvasStyleData.value, scaleMin.value || outerScale.value * 100, - scaleMinHeight || outerScale.value * 100 + scaleMinHeight || outerScale.value * 100, + 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 9e70ac88ac..267fd3f172 100644 --- a/core/core-frontend/src/custom-component/de-tabs/Component.vue +++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue @@ -129,8 +129,10 @@ import DePreview from '@/components/data-visualization/canvas/DePreview.vue' import { useEmitt } from '@/hooks/web/useEmitt' import { getPanelAllLinkageInfo } from '@/api/visualization/linkage' import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style' -import { copyStoreWithOut, deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy' +import { deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy' +import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' const dvMainStore = dvMainStoreWithOut() +const snapshotStore = snapshotStoreWithOut() const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore) const tabComponentRef = ref(null) let carouselTimer = null @@ -233,6 +235,7 @@ const curPreviewGap = computed(() => function sureCurTitle() { state.curItem.title = state.textarea state.dialogVisible = false + snapshotStore.recordSnapshotCache() } function addTab() { @@ -245,6 +248,7 @@ function addTab() { } element.value.propValue.push(newTab) editableTabsValue.value = newTab.name + snapshotStore.recordSnapshotCache() } function deleteCur(param) { @@ -286,9 +290,11 @@ function handleCommand(command) { break case 'deleteCur': deleteCur(command.param) + snapshotStore.recordSnapshotCache() break case 'copyCur': copyCur(command.param) + snapshotStore.recordSnapshotCache() break } } diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts index 0da51824da..6f81b1a566 100644 --- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts +++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts @@ -26,17 +26,18 @@ export function changeSizeWithScale(scale) { return changeComponentsSizeWithScale(scale) } -export function changeComponentsSizeWithScale(scale) { - const componentDataCopy = deepCopy(componentData.value) +function changeComponentsSizeWithScaleCircle(componentDataCopy, scale) { componentDataCopy.forEach(component => { Object.keys(component.style).forEach(key => { if (needToChangeDirectionAttrs.width.includes(key)) { // 根据原来的比例获取样式原来的尺寸 // 再用原来的尺寸 * 现在的比例得出新的尺寸 - component.style[key] = format( - getOriginStyle(component.style[key], canvasStyleData.value.scale), - scale - ) + if (!!component.style[key]) { + component.style[key] = format( + getOriginStyle(component.style[key], canvasStyleData.value.scale), + scale + ) + } } else if (needToChangeDirectionAttrs.height.includes(key)) { // 根据原来的比例获取样式原来的尺寸 // 再用原来的尺寸 * 现在的比例得出新的尺寸 @@ -46,6 +47,14 @@ export function changeComponentsSizeWithScale(scale) { ) } }) + + if (['Group'].includes(component.component)) { + changeComponentsSizeWithScaleCircle(component.propValue, scale) + } else if (['DeTabs'].includes(component.component)) { + component.propValue.forEach(tabItem => { + changeComponentsSizeWithScaleCircle(tabItem.componentData, scale) + }) + } // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算 // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey]. if (['Group', 'DeTabs'].includes(component.component)) { @@ -57,7 +66,11 @@ export function changeComponentsSizeWithScale(scale) { } } }) +} +function changeComponentsSizeWithScale(scale) { + const componentDataCopy = deepCopy(componentData.value) + changeComponentsSizeWithScaleCircle(componentDataCopy, scale) dvMainStore.setComponentData(componentDataCopy) // 更新画布数组后,需要重新设置当前组件,否则在改变比例后,直接拖动圆点改变组件大小不会生效 dvMainStore.setCurComponent({ @@ -94,7 +107,8 @@ export function changeRefComponentsSizeWithScalePoint( componentDataRef, canvasStyleDataRef, scaleWidth, - scaleHeight + scaleHeight, + outScale ) { componentDataRef.forEach(component => { Object.keys(component.style).forEach(key => { @@ -103,14 +117,14 @@ export function changeRefComponentsSizeWithScalePoint( // 根据原来的比例获取样式原来的尺寸 // 再用原来的尺寸 * 现在的比例得出新的尺寸 component.style[key] = format( - getOriginStyle(component.style[key], canvasStyleDataRef.scale), + getOriginStyle(component.style[key], canvasStyleDataRef.scale || outScale), scaleWidth ) } else if (needToChangeDirectionAttrs.height.includes(key)) { // 根据原来的比例获取样式原来的尺寸 // 再用原来的尺寸 * 现在的比例得出新的尺寸 component.style[key] = format( - getOriginStyle(component.style[key], canvasStyleDataRef.scaleHeight), + getOriginStyle(component.style[key], canvasStyleDataRef.scaleHeight || outScale), scaleHeight ) } diff --git a/core/core-frontend/src/views/template-market/index.vue b/core/core-frontend/src/views/template-market/index.vue index 47d5cef375..bc1968333a 100644 --- a/core/core-frontend/src/views/template-market/index.vue +++ b/core/core-frontend/src/views/template-market/index.vue @@ -240,7 +240,7 @@ const state = reactive({ }, { value: 'market', - label: t('work_branch.template_market_official') + label: t('visualization.template_market') }, { value: 'manage',