From 7b9f9c6bec6e0463729c7b65e6fb8e569509c330 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 4 Nov 2024 22:21:57 +0800 Subject: [PATCH] =?UTF-8?q?fix(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E4=B8=AD?= =?UTF-8?q?=E6=97=B6=E9=97=B4=E7=BB=84=E4=BB=B6=E9=A2=84=E8=A7=88=E6=9C=AA?= =?UTF-8?q?=E5=87=BA=E7=8E=B0=E7=AD=89=E9=97=AE=E9=A2=98=20#12118?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/DePreview.vue | 3 +- .../custom-component/de-tabs/Component.vue | 8 ++++- .../utils/changeComponentsSizeWithScale.ts | 32 +++++++++++++------ .../src/views/template-market/index.vue | 2 +- 4 files changed, 33 insertions(+), 12 deletions(-) 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',