refactor(图表): 调整tab大小变化时内部组件调整模式,防止出现偏移

This commit is contained in:
wangjiahao 2024-11-15 16:24:26 +08:00
parent c779f97f42
commit 294053b118
3 changed files with 14 additions and 4 deletions

View File

@ -131,7 +131,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 { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
import { groupSizeStyleAdaptor, groupStyleRevert, groupStyleRevertBatch } from '@/utils/style'
import { isDashboard, isGroupCanvas, isMainCanvas, isTabCanvas } from '@/utils/canvasUtils'
import Board from '@/components/de-board/Board.vue'
import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'

View File

@ -364,7 +364,7 @@ const componentMoveIn = component => {
dvMainStore.deleteComponent(curIndex)
dvMainStore.setCurComponent({ component: null, index: null })
component.canvasId = element.value.id + '--' + tabItem.name
dataVTabComponentAdd(component, element.value.style)
dataVTabComponentAdd(component, element.value)
tabItem.componentData.push(component)
}
}

View File

@ -278,6 +278,16 @@ function groupItemStyleAdaptor(component, parentStyle) {
component.style.height = parentStyle.height * styleScale.height
}
export function groupStyleRevertBatch(groupComponent, parentStyle) {
if (groupComponent.component === 'DeTabs') {
groupComponent.propValue.forEach(tabItem => {
tabItem.componentData.forEach(tabComponent => {
groupStyleRevert(tabComponent, parentStyle)
})
})
}
}
export function groupStyleRevert(innerComponent, parentStyle) {
const innerStyle = { ...innerComponent.style }
innerComponent.groupStyle.left = innerStyle.left / parentStyle.width
@ -297,11 +307,11 @@ export function groupSizeStyleAdaptor(groupComponent) {
}
}
export function dataVTabComponentAdd(innerComponent, parentStyle) {
export function dataVTabComponentAdd(innerComponent, parentComponent) {
//do dataVTabComponentAdd
innerComponent.style.top = 0
innerComponent.style.left = 0
const parentStyleAdaptor = { ...parentStyle }
const parentStyleAdaptor = { ...parentComponent.style }
// 去掉tab头部高度
parentStyleAdaptor.height = parentStyleAdaptor.height - 48
groupStyleRevert(innerComponent, parentStyleAdaptor)