center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #11591 from dataease/pr@dev-v2@feat_datav-tab

Browse Source 
Pr@dev v2@feat datav tab
This commit is contained in:
王嘉豪 2024-08-15 17:41:11 +08:00 committed by GitHub
commit 911c006f69
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 114 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
View File

@ -29,7 +29,7 @@ import {
findDragComponent,
findNewComponent,
isDashboard,
isGroupCanvas,
isGroupOrTabCanvas,
isMainCanvas,
isSameCanvas
} from '@/utils/canvasUtils'
@ -569,7 +569,7 @@ const getTextareaHeight = (element, text) => {
}
const editStyle = computed(() => {
if (dashboardActive.value || isGroupCanvas(canvasId.value)) {
if (dashboardActive.value || isGroupOrTabCanvas(canvasId.value)) {
return {
width: '100%',
height: '100%'

23
core/core-frontend/src/components/data-visualization/canvas/Shape.vue
View File

@ -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, {

4
core/core-frontend/src/components/visualization/common/ComponentPosition.vue
View File

@ -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)
}

61
core/core-frontend/src/custom-component/de-tabs/Component.vue
View File

@ -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(() => {

8
core/core-frontend/src/utils/canvasUtils.ts
View File

@ -489,10 +489,18 @@ 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')
}
export function isTabCanvas(canvasId) {
return canvasId && canvasId.includes('tab')
}
export function findComponentIndexById(componentId, componentDataMatch = componentData.value) {
let indexResult = -1
componentDataMatch.forEach((component, index) => {

2
core/core-frontend/src/utils/changeComponentsSizeWithScale.ts
View File

@ -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) {

51
core/core-frontend/src/utils/style.ts
View File

@ -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,
@ -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)
}