From 9db6355db182a9e2e4c46364d0b8dcefa05a3916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=98=89=E8=B1=AA?=
<42510293+ziyujiahao@users.noreply.github.com>
Date: Tue, 10 Feb 2026 09:44:41 +0800
Subject: [PATCH] Pr@dev v3@feat transform (#17950)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* refactor: 样式调整
* feat: 数据大屏支持transform画布
---
.../data-visualization/canvas/CanvasCore.vue | 18 +-
.../data-visualization/canvas/DePreview.vue | 176 +++++++++++-------
.../data-visualization/canvas/Shape.vue | 29 +--
core/core-frontend/src/pages/panel/App.vue | 2 +-
core/core-frontend/src/router/index.ts | 2 +-
.../modules/data-visualization/dvMain.ts | 15 ++
core/core-frontend/src/utils/canvasUtils.ts | 13 ++
.../src/views/chart/ChartView.vue | 2 +-
.../editor/util/dataVisualization.ts | 4 +
9 files changed, 169 insertions(+), 92 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 91082e0901..25d91e2154 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -33,6 +33,7 @@ import {
componentPreSort,
findDragComponent,
findNewComponent,
+ getTransformParams,
isDashboard,
isGroupOrTabCanvas,
isMainCanvas,
@@ -407,6 +408,7 @@ let snapshotTimer = ref(null)
// 根据需要需要扩充外部scroll区域也可以进行组合的功能 此方法变更为外部组件调用
const handleMouseDown = e => {
+ const transformParams = getTransformParams()
// 仪表板和预览状态不显示菜单和组创建
if (dashboardActive.value || editMode.value === 'preview') {
return
@@ -426,20 +428,20 @@ const handleMouseDown = e => {
const startX = e.clientX
const startY = e.clientY
- start.value.x = startX - editorX.value
- start.value.y = startY - editorY.value
+ start.value.x = (startX - editorX.value) * transformParams.tOffsetSpeed
+ start.value.y = (startY - editorY.value) * transformParams.tOffsetSpeed
// 展示选中区域
isShowArea.value = true
const move = moveEvent => {
- width.value = Math.abs(moveEvent.clientX - startX)
- height.value = Math.abs(moveEvent.clientY - startY)
+ width.value = Math.abs((moveEvent.clientX - startX) * transformParams.tOffsetSpeed)
+ height.value = Math.abs((moveEvent.clientY - startY) * transformParams.tOffsetSpeed)
if (moveEvent.clientX < startX) {
- start.value.x = moveEvent.clientX - editorX.value
+ start.value.x = (moveEvent.clientX - editorX.value) * transformParams.tOffsetSpeed
}
if (moveEvent.clientY < startY) {
- start.value.y = moveEvent.clientY - editorY.value
+ start.value.y = (moveEvent.clientY - editorY.value) * transformParams.tOffsetSpeed
}
}
@@ -577,8 +579,8 @@ const handleContextMenu = event => {
const offsetY = rect.top
// 计算鼠标相对于最外层 div 的坐标
- const left = mouseX - offsetX
- let top = mouseY - offsetY
+ const left = (mouseX - offsetX) / canvasStyleData.value.tScale
+ let top = (mouseY - offsetY) / canvasStyleData.value.tScale
// 组件处于编辑状态的时候 如富文本 不弹出右键菜单
if (!curComponent.value || (curComponent.value && !curComponent.value.editing)) {
if (
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 c3b155d05a..2acdbcbd26 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -122,6 +122,7 @@ const scaleWidthPoint = ref(100)
const scaleHeightPoint = ref(100)
const scaleMin = ref(100)
const previewCanvas = ref(null)
+const previewCanvasInner = ref(null)
const cellWidth = ref(10)
const cellHeight = ref(10)
const userViewEnlargeRef = ref(null)
@@ -169,6 +170,24 @@ const baseComponentData = computed(() =>
(!ele?.dashboardHidden || (ele?.dashboardHidden && isMobile()))
)
)
+const canvasStyleInner = computed(() => {
+ if (
+ dvInfo.value.type === 'dataV' &&
+ ['keep', 'widthFirst', 'heightFirst'].includes(canvasStyleData.value?.screenAdaptor)
+ ) {
+ const curScale = scaleMin.value / 100
+ return {
+ position: 'absolute',
+ height: 100 / curScale + '%!important',
+ width: 100 / curScale + '%!important',
+ left: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
+ top: 50 * (1 - 1 / curScale) + '%', // 放大余量 除以 2
+ transform: 'scale(' + curScale + ') translateZ(0)'
+ }
+ } else {
+ return {}
+ }
+})
const canvasStyle = computed(() => {
let style = {}
if (isMainCanvas(canvasId.value) && !isDashboard()) {
@@ -290,13 +309,26 @@ const resetLayout = () => {
// 需要保持宽高比例时 高度伸缩和宽度伸缩保持一致 否则 高度伸缩单独计算
// tip 当当前画布是tab时 使用的事 outerScale.value 因为 canvasStyleData.value为 {} 此处取数逻辑需进一步优化
const scaleMinHeight = dataVKeepRadio.value ? scaleMin.value : scaleHeightPoint.value
- changeRefComponentsSizeWithScalePoint(
- baseComponentData.value,
- canvasStyleData.value,
- scaleMin.value || outerScale.value * 100,
- scaleMinHeight || outerScale.value * 100,
- outerScale.value * 100
- )
+ if (
+ dvInfo.value.type === 'dataV' &&
+ ['keep', 'widthFirst', 'heightFirst'].includes(canvasStyleData.value?.screenAdaptor)
+ ) {
+ changeRefComponentsSizeWithScalePoint(
+ baseComponentData.value,
+ canvasStyleData.value,
+ 100,
+ 100,
+ 100
+ )
+ } else {
+ changeRefComponentsSizeWithScalePoint(
+ baseComponentData.value,
+ canvasStyleData.value,
+ scaleMin.value || outerScale.value * 100,
+ scaleMinHeight || outerScale.value * 100,
+ outerScale.value * 100
+ )
+ }
scaleMin.value = isMainCanvas(canvasId.value) ? scaleMin.value : outerScale.value * 100
}
renderReady.value = true
@@ -514,71 +546,77 @@ defineExpose({
@scroll="scrollPreview"
v-if="state.initState"
>
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
+ :canvasViewInfo="canvasViewInfo"
+ :pop-component-data="popComponentData"
+ :scale="scaleMin"
+ :canvas-state="canvasState"
+ :show-position="'preview'"
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-