From 34f60c7d3e99fc68c2796bbfce91b331a7d978c2 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 19 Aug 2024 11:08:30 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
=?UTF-8?q?=20=E4=BC=98=E5=8C=96Tab=E5=86=85=E9=83=A8=E7=94=BB=E5=B8=83?=
=?UTF-8?q?=EF=BC=8C=E9=98=B2=E6=AD=A2=E5=86=85=E9=83=A8=E7=BB=84=E4=BB=B6?=
=?UTF-8?q?=E5=8F=98=E5=BD=A2=E6=AF=94=E4=BE=8B=E4=B8=8D=E5=8D=8F=E8=B0=83?=
=?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../data-visualization/canvas/DePreview.vue | 54 +++++++++++--------
.../data-visualization/canvas/Shape.vue | 12 +----
core/core-frontend/src/utils/style.ts | 16 +++++-
3 files changed, 48 insertions(+), 34 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 ffe8c2da76..08460a51be 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -94,8 +94,7 @@ const cellHeight = ref(10)
const userViewEnlargeRef = ref(null)
const searchCount = ref(0)
const refreshTimer = ref(null)
-const userInfo = ref(null)
-
+const renderReady = ref(false)
const dashboardActive = computed(() => {
return dvInfo.value.type === 'dashboard'
})
@@ -193,6 +192,14 @@ const resetLayout = () => {
//div容器获取tableBox.value.clientWidth
let canvasWidth = previewCanvas.value.clientWidth
let canvasHeight = previewCanvas.value.clientHeight
+ console.log(
+ '===canvasId=' +
+ canvasId.value +
+ ';canvasWidth =' +
+ canvasWidth +
+ ';canvasHeight =' +
+ canvasHeight
+ )
scaleWidthPoint.value = (canvasWidth * 100) / canvasStyleData.value.width
scaleHeightPoint.value = (canvasHeight * 100) / canvasStyleData.value.height
scaleMin.value = isDashboard()
@@ -214,6 +221,7 @@ const resetLayout = () => {
scaleMinHeight
)
}
+ renderReady.value = true
emits('onResetLayout')
}
})
@@ -398,26 +406,28 @@ defineExpose({
:canvas-style-data="canvasStyleData"
:component-data="baseComponentData"
>
-
+
+
+
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 76edc2c066..c45ecc4b78 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -114,7 +114,7 @@ import Icon from '@/components/icon-custom/src/Icon.vue'
import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
import { useEmitt } from '@/hooks/web/useEmitt'
import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
-import { dataVTabComponentAdd, groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
+import { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
import { isGroupCanvas, isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
import Board from '@/components/de-board/Board.vue'
import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
@@ -551,14 +551,6 @@ const handleMouseDownOnShape = e => {
height: parentNode.value.offsetHeight
})
}
- //如果当前画布是Tab内部画布 则对应组件定位在resize时要还原到groupStyle中
- if (isTabCanvas(canvasId.value)) {
- groupStyleRevert(element.value, {
- width: parentNode.value.offsetWidth,
- height: parentNode.value.offsetHeight
- })
- }
-
// 防止首次组件在tab旁边无法触发矩阵移动
if (isFirst) {
isFirst = false
@@ -744,7 +736,7 @@ const handleMouseDownOnPoint = (point, e) => {
groupSizeStyleAdaptor(element.value)
}
//如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中
- if (isGroupCanvas(canvasId.value)) {
+ if (isGroupCanvas(canvasId.value) || isTabCanvas(canvasId.value)) {
groupStyleRevert(element.value, {
width: parentNode.value.offsetWidth,
height: parentNode.value.offsetHeight
diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts
index db19c21ba0..1c550ae242 100644
--- a/core/core-frontend/src/utils/style.ts
+++ b/core/core-frontend/src/utils/style.ts
@@ -1,8 +1,8 @@
-import { sin, cos } from '@/utils/translate'
+import { sin, cos, toPercent } from '@/utils/translate'
import { imgUrlTrans } from '@/utils/imgUtils'
import { hexColorToRGBA } from '@/views/chart/components/js/util'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { isMainCanvas } from '@/utils/canvasUtils'
+import { isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
const dvMainStore = dvMainStoreWithOut()
export function getShapeStyle(style) {
const result = {}
@@ -27,6 +27,18 @@ export function getShapeItemStyle(item, { dvModel, cellWidth, cellHeight, curGap
left: cellWidth * (item.x - 1) + 'px',
top: cellHeight * (item.y - 1) + 'px'
}
+ } else if (
+ dvModel === 'dataV' &&
+ isTabCanvas(item.canvasId) &&
+ dvMainStore.editMode === 'preview'
+ ) {
+ result = {
+ padding: curGap + 'px!important',
+ width: toPercent(item.groupStyle.width),
+ height: toPercent(item.groupStyle.height),
+ top: toPercent(item.groupStyle.top),
+ left: toPercent(item.groupStyle.left)
+ }
} else {
result = {
padding: curGap + 'px!important',