From 2d50f1d87be047556e4cb2146dc0b36b4a8baa15 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Wed, 27 Dec 2023 21:21:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=88=86=E7=BB=84=E4=BD=8D=E7=BD=AE=E5=AE=9A?= =?UTF-8?q?=E4=BD=8D=E4=B8=8D=E5=87=86=E7=A1=AE=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/core-frontend/src/utils/canvasUtils.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 0f31d450ed..8e805f9bcc 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -11,6 +11,7 @@ import { getPanelAllLinkageInfo } from '@/api/visualization/linkage' import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump' import { getViewConfig } from '@/views/chart/components/editor/util/chart' import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' +import { toPercent } from '@/utils/translate' const dvMainStore = dvMainStoreWithOut() const { curBatchOptComponents, dvInfo, canvasStyleData, componentData, canvasViewInfo } = storeToRefs(dvMainStore) @@ -145,10 +146,10 @@ export function canvasSave(callBack) { item.propValue.forEach(groupItem => { groupItem.linkageFilters = [] // 计算groupStyle - groupItem.groupStyle.left = groupItem.style.left / groupStyle.width - groupItem.groupStyle.top = groupItem.style.top / groupStyle.height - groupItem.groupStyle.width = groupItem.style.width / groupStyle.width - groupItem.groupStyle.height = groupItem.style.height / groupStyle.height + groupItem.groupStyle.left = toPercent(groupItem.style.left / groupStyle.width) + groupItem.groupStyle.top = toPercent(groupItem.style.top / groupStyle.height) + groupItem.groupStyle.width = toPercent(groupItem.style.width / groupStyle.width) + groupItem.groupStyle.height = toPercent(groupItem.style.height / groupStyle.height) }) } else if (item.component === 'DeTabs') { item.propValue.forEach(tabItem => { From 06b4465522823cea8d2051bedcb4f3d23bd9f3b7 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 28 Dec 2023 09:46:01 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E7=BC=A9=E6=94=BE=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/CanvasCore.vue | 13 +++++- .../data-visualization/canvas/DePreview.vue | 1 + .../rich-text/DeRichTextView.vue | 11 ----- .../custom-component/v-query/Component.vue | 25 +++++++---- .../views/components/ChartComponentS2.vue | 43 +++++++++++++------ 5 files changed, 60 insertions(+), 33 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue index e6cb00c61d..7b0dfbff02 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -207,11 +207,19 @@ const curComponentId = computed(() => { const { emitter } = useEmitt() const curScale = computed(() => { - return canvasStyleData.value.scale / 100 + if (dashboardActive.value) { + return (canvasStyleData.value.scale * 1.5) / 100 + } else { + return canvasStyleData.value.scale / 100 + } }) const curBaseScale = computed(() => { - return dvMainStore.canvasStyleData.scale / 100 + if (dashboardActive.value) { + return (dvMainStore.canvasStyleData.scale * 1.5) / 100 + } else { + return dvMainStore.canvasStyleData.scale / 100 + } }) const pointShadowShow = computed(() => { @@ -1340,6 +1348,7 @@ defineExpose({ v-else :is="findComponent(item.component)" :id="'component' + item.id" + :scale="curBaseScale" class="component" :is-edit="true" :style="getComponentStyle(item.style)" 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 d7bdb80ca0..684da1ad21 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue @@ -126,6 +126,7 @@ const restore = () => { if (dashboardActive.value) { cellWidth.value = canvasWidth / pcMatrixCount.value.x cellHeight.value = canvasHeight / pcMatrixCount.value.y + scaleWidth.value = scaleWidth.value * 1.5 } else { changeRefComponentsSizeWithScale( componentData.value, diff --git a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue index ffbedeff26..9cf388cb59 100644 --- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue +++ b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue @@ -2,7 +2,6 @@
{ return editMode.value === 'edit' }) -const autoStyle = computed(() => { - return { - height: 100 / scale.value + '%!important', - width: 100 / scale.value + '%!important', - left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2 - top: 50 * (1 - 1 / scale.value) + '%', - transform: 'scale(' + scale.value + ')' - } -}) - watch( () => active.value, val => { diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue index 9f13217ba1..52521852cb 100644 --- a/core/core-frontend/src/custom-component/v-query/Component.vue +++ b/core/core-frontend/src/custom-component/v-query/Component.vue @@ -43,9 +43,14 @@ const props = defineProps({ type: String, required: true, default: '' + }, + scale: { + type: Number, + required: false, + default: 1 } }) -const { element, view } = toRefs(props) +const { element, view, scale } = toRefs(props) const { t } = useI18n() const dvMainStore = dvMainStoreWithOut() const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore) @@ -311,17 +316,21 @@ const labelStyle = computed(() => { color: customStyle.labelColor || '#1f2329' } as CSSProperties }) -const opacityStyle = computed(() => { - return element.value?.style?.opacity - ? ({ - opacity: element.value.style.opacity - } as CSSProperties) - : {} +const autoStyle = computed(() => { + return { + position: 'absolute', + height: 100 / scale.value + '%!important', + width: 100 / scale.value + '%!important', + left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2 + top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2 + transform: 'scale(' + scale.value + ')', + opacity: element.value?.style?.opacity || 1 + } as CSSProperties })