From 45dd2c9a17908b6a3c896218f8ab5a024185b61f Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 15 Aug 2024 13:24:20 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?= =?UTF-8?q?=20Tab=E7=BB=84=E4=BB=B6=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/data-visualization/canvas/CanvasCore.vue | 5 +++-- core/core-frontend/src/utils/canvasUtils.ts | 4 ++++ core/core-frontend/src/utils/style.ts | 2 +- 3 files changed, 8 insertions(+), 3 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 bd402be76a..e9bae0bcc6 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -31,7 +31,8 @@ import { isDashboard, isGroupCanvas, isMainCanvas, - isSameCanvas + isSameCanvas, + isTabCanvas } from '@/utils/canvasUtils' import { guid } from '@/views/visualized/data/dataset/form/util' import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' @@ -569,7 +570,7 @@ const getTextareaHeight = (element, text) => { } const editStyle = computed(() => { - if (dashboardActive.value || isGroupCanvas(canvasId.value)) { + if (dashboardActive.value || isGroupCanvas(canvasId.value) || isTabCanvas(canvasId.value)) { return { width: '100%', height: '100%' diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index 11fa62ee3e..c6d02e3d52 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -493,6 +493,10 @@ export function isGroupCanvas(canvasId) { return canvasId && canvasId.includes('Group') } +export function isTabCanvas(canvasId) { + return canvasId && canvasId.includes('tab') +} + export function findComponentIndexById(componentId, componentDataMatch = componentData.value) { let indexResult = -1 componentDataMatch.forEach((component, index) => { diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts index c311ed2de1..254122331b 100644 --- a/core/core-frontend/src/utils/style.ts +++ b/core/core-frontend/src/utils/style.ts @@ -182,7 +182,7 @@ export function getComponentRotatedStyle(style) { return style } -export function getCanvasStyle(canvasStyleData, canvasId = 'canvasMain') { +export function getCanvasStyle(canvasStyleData, canvasId = 'canvas-main') { const { backgroundColorSelect, background, From 2f68eaf8f843e5b6489ff8daf110d01547bb0e39 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 15 Aug 2024 17:40:19 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?= =?UTF-8?q?=20=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81Tab?= =?UTF-8?q?=E7=BB=84=E4=BB=B6#9449?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/CanvasCore.vue | 7 +-- .../data-visualization/canvas/Shape.vue | 23 +++++-- .../common/ComponentPosition.vue | 4 +- .../custom-component/de-tabs/Component.vue | 61 +++++++++++++------ core/core-frontend/src/utils/canvasUtils.ts | 4 ++ .../utils/changeComponentsSizeWithScale.ts | 2 +- core/core-frontend/src/utils/style.ts | 49 ++++++++++++--- 7 files changed, 110 insertions(+), 40 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 e9bae0bcc6..ca518daa2c 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -29,10 +29,9 @@ import { findDragComponent, findNewComponent, isDashboard, - isGroupCanvas, + isGroupOrTabCanvas, isMainCanvas, - isSameCanvas, - isTabCanvas + isSameCanvas } from '@/utils/canvasUtils' import { guid } from '@/views/visualized/data/dataset/form/util' import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' @@ -570,7 +569,7 @@ const getTextareaHeight = (element, text) => { } const editStyle = computed(() => { - if (dashboardActive.value || isGroupCanvas(canvasId.value) || isTabCanvas(canvasId.value)) { + if (dashboardActive.value || isGroupOrTabCanvas(canvasId.value)) { return { width: '100%', height: '100%' 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 f63d1656f3..76edc2c066 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -114,8 +114,8 @@ 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 { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style' -import { isGroupCanvas, isMainCanvas } from '@/utils/canvasUtils' +import { dataVTabComponentAdd, 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' const dvMainStore = dvMainStoreWithOut() @@ -541,9 +541,18 @@ const handleMouseDownOnShape = e => { } //如果当前组件是Group分组 则要进行内部组件深度计算 - element.value.component === 'Group' && groupSizeStyleAdaptor(element.value) + if (['DeTabs', 'Group'].includes(element.value.component)) { + 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 + }) + } + //如果当前画布是Tab内部画布 则对应组件定位在resize时要还原到groupStyle中 + if (isTabCanvas(canvasId.value)) { groupStyleRevert(element.value, { width: parentNode.value.offsetWidth, height: parentNode.value.offsetHeight @@ -730,8 +739,10 @@ const handleMouseDownOnPoint = (point, e) => { // 矩阵逻辑 如果当前是仪表板（矩阵模式）则要进行矩阵重排 dashboardActive.value && emit('onResizing', moveEvent) element.value['resizing'] = true - //如果当前组件是Group分组 则要进行内部组件深度计算 - element.value.component === 'Group' && groupSizeStyleAdaptor(element.value) + //如果当前组件是Group分组或者Tab 则要进行内部组件深度计算 + if (['DeTabs', 'Group'].includes(element.value.component)) { + groupSizeStyleAdaptor(element.value) + } //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中 if (isGroupCanvas(canvasId.value)) { groupStyleRevert(element.value, { diff --git a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue index bfefb9fb43..3c32cc72aa 100644 --- a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue +++ b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue @@ -160,8 +160,8 @@ const onPositionChange = key => { ) } - if (curComponent.value.component === 'Group') { - //如果当前组件是Group分组 则要进行内部组件深度计算 + if (['Group', 'DeTabs'].includes(curComponent.value.component)) { + //如果当前组件是Group分组或者Tab 则要进行内部组件深度计算 groupSizeStyleAdaptor(curComponent.value) } 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 22b5523ee9..665640114a 100644 --- a/core/core-frontend/src/custom-component/de-tabs/Component.vue +++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue @@ -122,6 +122,7 @@ import DeCustomTab from '@/custom-component/de-tabs/DeCustomTab.vue' 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' const dvMainStore = dvMainStoreWithOut() const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore) const tabComponentRef = ref(null) @@ -275,23 +276,31 @@ const componentMoveIn = component => { //获取主画布当前组件的index const curIndex = findComponentIndexById(component.id) // 从主画布中移除 - eventBus.emit('removeMatrixItem-canvas-main', curIndex) - dvMainStore.setCurComponent({ component: null, index: null }) - component.canvasId = element.value.id + '--' + tabItem.name - const refInstance = currentInstance.refs['tabCanvas_' + index][0] - if (refInstance) { - const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小 - canvasChangeAdaptor(component, matrixBase) - component.x = 1 - component.y = 200 - component.style.left = 0 - component.style.top = 0 - tabItem.componentData.push(component) - if (isDashboard()) { - nextTick(() => { - refInstance.addItemBox(component) //在适当的时候初始化布局组件 - }) + if (isDashboard()) { + eventBus.emit('removeMatrixItem-canvas-main', curIndex) + dvMainStore.setCurComponent({ component: null, index: null }) + component.canvasId = element.value.id + '--' + tabItem.name + const refInstance = currentInstance.refs['tabCanvas_' + index][0] + if (refInstance) { + const matrixBase = refInstance.getBaseMatrixSize() //矩阵基础大小 + canvasChangeAdaptor(component, matrixBase) + component.x = 1 + component.y = 200 + component.style.left = 0 + component.style.top = 0 + tabItem.componentData.push(component) + if (isDashboard()) { + nextTick(() => { + refInstance.addItemBox(component) //在适当的时候初始化布局组件 + }) + } } + } else { + // 从主画布删除 + dvMainStore.deleteComponent(curIndex) + dvMainStore.setCurComponent({ component: null, index: null }) + component.canvasId = element.value.id + '--' + tabItem.name + dataVTabComponentAdd(component, element.value.style) } } }) @@ -305,10 +314,23 @@ const componentMoveOut = component => { eventBus.emit('removeMatrixItemById-' + component.canvasId, component.id) dvMainStore.setCurComponent({ component: null, index: null }) // 主画布中添加 - eventBus.emit('moveOutFromTab-canvas-main', component) + if (isDashboard()) { + eventBus.emit('moveOutFromTab-canvas-main', component) + } else { + addToMain(component) + } reloadLinkage() } +const addToMain = component => { + component.canvasId = 'canvas-main' + dvMainStore.addComponent({ + component, + index: undefined, + isFromGroup: true + }) +} + const moveActive = computed(() => { return tabMoveInActiveId.value && tabMoveInActiveId.value === element.value.id }) @@ -441,6 +463,11 @@ onMounted(() => { eventBus.on('onTabSortChange-' + element.value.id, reShow) currentInstance = getCurrentInstance() initCarousel() + if (isDashboard()) { + nextTick(() => { + groupSizeStyleAdaptor(element.value) + }) + } }) onBeforeMount(() => { diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index c6d02e3d52..5820285f85 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -489,6 +489,10 @@ export function isSameCanvas(item, canvasId) { return item.canvasId === canvasId } +export function isGroupOrTabCanvas(canvasId) { + return isGroupCanvas(canvasId) || isTabCanvas(canvasId) +} + export function isGroupCanvas(canvasId) { return canvasId && canvasId.includes('Group') } diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts index 72f166f212..2c2c9eccda 100644 --- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts +++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts @@ -35,7 +35,7 @@ export function changeComponentsSizeWithScale(scale, changeAttrs = needToChangeA ) // 如果是分组组件 则要进行分组内部组件groupStyle进行深度计算 // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey]. - if (component.component === 'Group') { + if (['Group', 'DeTabs'].includes(component.component)) { try { groupSizeStyleAdaptor(component) } catch (e) { diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts index 254122331b..df7666d31b 100644 --- a/core/core-frontend/src/utils/style.ts +++ b/core/core-frontend/src/utils/style.ts @@ -236,19 +236,27 @@ export function createGroupStyle(groupComponent) { }) } -export function groupSizeStyleAdaptor(groupComponent) { - const parentStyle = groupComponent.style - groupComponent.propValue.forEach(component => { - // 分组还原逻辑 - // 当发上分组缩放是，要将内部组件按照比例转换 - const styleScale = component.groupStyle - component.style.left = parentStyle.width * styleScale.left - component.style.top = parentStyle.height * styleScale.top - component.style.width = parentStyle.width * styleScale.width - component.style.height = parentStyle.height * styleScale.height +function dataVTabSizeStyleAdaptor(tabComponent) { + const parentStyleAdaptor = { ...tabComponent.style } + parentStyleAdaptor.height = parentStyleAdaptor.height - 48 + tabComponent.propValue.forEach(tabItem => { + tabItem.componentData.forEach(tabComponent => { + tabComponent.linkageFilters = [] + groupItemStyleAdaptor(tabComponent, parentStyleAdaptor) + }) }) } +function groupItemStyleAdaptor(component, parentStyle) { + // 分组还原逻辑 + // 当发上分组缩放是，要将内部组件按照比例转换 + const styleScale = component.groupStyle + component.style.left = parentStyle.width * styleScale.left + component.style.top = parentStyle.height * styleScale.top + component.style.width = parentStyle.width * styleScale.width + component.style.height = parentStyle.height * styleScale.height +} + export function groupStyleRevert(innerComponent, parentStyle) { const innerStyle = { ...innerComponent.style } innerComponent.groupStyle.left = innerStyle.left / parentStyle.width @@ -256,3 +264,24 @@ export function groupStyleRevert(innerComponent, parentStyle) { innerComponent.groupStyle.width = innerStyle.width / parentStyle.width innerComponent.groupStyle.height = innerStyle.height / parentStyle.height } + +export function groupSizeStyleAdaptor(groupComponent) { + if (groupComponent.component === 'Group') { + const parentStyle = groupComponent.style + groupComponent.propValue.forEach(component => { + groupItemStyleAdaptor(component, parentStyle) + }) + } else { + dataVTabSizeStyleAdaptor(groupComponent) + } +} + +export function dataVTabComponentAdd(innerComponent, parentStyle) { + //do dataVTabComponentAdd + innerComponent.style.top = 0 + innerComponent.style.left = 0 + const parentStyleAdaptor = { ...parentStyle } + // 去掉tab头部高度 + parentStyleAdaptor.height = parentStyleAdaptor.height - 48 + groupStyleRevert(innerComponent, parentStyleAdaptor) +}