From 5e2f2b183e5c2da611745b2b1e6bbace1ae10407 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 14 Dec 2023 19:26:46 +0800 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=E5=9B=BE=E5=B1=82=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/data-visualization/RealTimeGroup.vue | 2 +- .../data-visualization/canvas/CanvasCore.vue | 10 +++++++++- .../components/data-visualization/canvas/Shape.vue | 11 +++++++++++ .../src/store/modules/data-visualization/compose.ts | 6 +++++- .../src/utils/changeComponentsSizeWithScale.ts | 10 ++-------- core/core-frontend/src/utils/decomposeComponent.ts | 1 + core/core-frontend/src/utils/style.ts | 2 +- 7 files changed, 30 insertions(+), 12 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue index 4505fa3416..ec26a616f4 100644 --- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue +++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue @@ -365,7 +365,7 @@ const handleContextMenu = e => { font-size: 12px; margin-left: 10px; position: relative; - min-width: 65px; + min-width: 43px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 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 56a3c03a5b..7e5cb6c784 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -1203,6 +1203,14 @@ const linkageSetOpen = item => { }) } +const contextMenuShow = computed(() => { + if (curComponent.value) { + return curComponent.value.canvasId === canvasId.value + } else { + return isMainCanvas(canvasId.value) + } +}) + const markLineShow = computed(() => isMainCanvas(canvasId.value)) onMounted(() => { @@ -1333,7 +1341,7 @@ defineExpose({ /> - + 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 a6484b02d0..9f3a7e84c7 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue @@ -454,6 +454,17 @@ const handleMouseDownOnShape = e => { ) { emit('onDragging', e) } + + //如果当前组件是Group分组 则要进行内部组件深度计算 + element.value.component === 'Group' && groupSizeStyleAdaptor(element.value) + //如果当前画布是Group内部画布 则对应组件定位在resize时要还原到groupStyle中 + if (isGroupCanvas(canvasId.value)) { + groupStyleRevert(element.value, { + width: parentNode.value.offsetWidth, + height: parentNode.value.offsetHeight + }) + } + // 防止首次组件在tab旁边无法触发矩阵移动 if (isFirst) { isFirst = false diff --git a/core/core-frontend/src/store/modules/data-visualization/compose.ts b/core/core-frontend/src/store/modules/data-visualization/compose.ts index 926bcda1a4..733c2cffd4 100644 --- a/core/core-frontend/src/store/modules/data-visualization/compose.ts +++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts @@ -84,8 +84,12 @@ export const composeStore = defineStore('compose', { } }) + const newId = generateID() + components.forEach(component => { + component.canvasId = 'Group-' + newId + }) const groupComponent = { - id: generateID(), + id: newId, component: 'Group', name: '组合', label: '组合', diff --git a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts index f555497332..2167f9742b 100644 --- a/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts +++ b/core/core-frontend/src/utils/changeComponentsSizeWithScale.ts @@ -2,6 +2,7 @@ import { deepCopy } from './utils' import { divide, multiply } from 'mathjs' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { storeToRefs } from 'pinia' +import { groupSizeStyleAdaptor } from '@/utils/style' const dvMainStore = dvMainStoreWithOut() const { componentData, curComponentIndex, canvasStyleData } = storeToRefs(dvMainStore) @@ -28,14 +29,7 @@ export function changeComponentsSizeWithScale(scale) { // 计算逻辑 Group 中样式 * groupComponent.groupStyle[sonKey]. if (component.component === 'Group') { try { - component.propValue.forEach(groupComponent => { - Object.keys(groupComponent.style).forEach(sonKey => { - if (groupComponent.groupStyle[sonKey]) { - groupComponent.style[sonKey] = - component.style[sonKey] * groupComponent.groupStyle[sonKey] - } - }) - }) + groupSizeStyleAdaptor(component) } catch (e) { // 旧Group适配 console.error('group adaptor error:' + e) diff --git a/core/core-frontend/src/utils/decomposeComponent.ts b/core/core-frontend/src/utils/decomposeComponent.ts index f0b2bf7260..9ac7f7ed31 100644 --- a/core/core-frontend/src/utils/decomposeComponent.ts +++ b/core/core-frontend/src/utils/decomposeComponent.ts @@ -4,4 +4,5 @@ export default function decomposeComponent(component, editorRect, parentStyle) { component.style.left = component.style.left + parentStyle.left component.style.top = component.style.top + parentStyle.top component.groupStyle = {} + component.canvasId = 'canvas-main' } diff --git a/core/core-frontend/src/utils/style.ts b/core/core-frontend/src/utils/style.ts index 5b6010bb7d..4cb8f1642b 100644 --- a/core/core-frontend/src/utils/style.ts +++ b/core/core-frontend/src/utils/style.ts @@ -228,7 +228,7 @@ export function groupSizeStyleAdaptor(groupComponent) { groupComponent.propValue.forEach(component => { // 分组还原逻辑 // 当发上分组缩放是，要将内部组件按照比例转换 - const styleScale = { ...component.groupStyle } + 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 From 8dfe8fb77d21e0f24c5ced00787161f157b57982 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 14 Dec 2023 20:17:00 +0800 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20=E6=95=B0=E6=8D=AE=E5=A4=A7?= =?UTF-8?q?=E5=B1=8F=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/RealTimeGroup.vue | 6 +++ .../canvas/ContextMenuDetails.vue | 7 ++- .../modules/data-visualization/common.ts | 29 +++++++++++ .../store/modules/data-visualization/copy.ts | 7 +-- .../store/modules/data-visualization/layer.ts | 51 ++++++++++++------- 5 files changed, 78 insertions(+), 22 deletions(-) create mode 100644 core/core-frontend/src/store/modules/data-visualization/common.ts diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue index ec26a616f4..481c3633d9 100644 --- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue +++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue @@ -67,6 +67,12 @@ const shiftDataPush = curClickIndex => { } const onClick = (e, index) => { + setCurComponent(index) + //其他情况点击清理选择区域 + areaData.value.components.splice(0, areaData.value.components.length) +} + +const onClickBack = (e, index) => { // 初始化点击是 laterIndex=0 if (!curComponent.value) { composeStore.setLaterIndex(null) diff --git a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue index 7a7fcb33cb..e32beddc99 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue @@ -9,6 +9,7 @@ import { storeToRefs } from 'pinia' import { computed, toRefs } from 'vue' import { ElDivider } from 'element-plus-secondary' import eventBus from '@/utils/eventBus' +import { getCurInfo } from '@/store/modules/data-visualization/common' const dvMainStore = dvMainStoreWithOut() const copyStore = copyStoreWithOut() const lockStore = lockStoreWithOut() @@ -52,7 +53,8 @@ const menuOpt = optName => { } const cut = () => { - copyStore.cut() + const curInfo = getCurInfo() + copyStore.cut(curInfo.componentData) menuOpt('cut') } @@ -85,7 +87,8 @@ const paste = () => { const deleteComponent = () => { if (curComponent.value) { - dvMainStore.deleteComponentById(curComponent.value?.id) + const curInfo = getCurInfo() + dvMainStore.deleteComponentById(curComponent.value?.id, curInfo.componentData) } else if (areaData.value.components.length) { areaData.value.components.forEach(component => { dvMainStore.deleteComponentById(component.id) diff --git a/core/core-frontend/src/store/modules/data-visualization/common.ts b/core/core-frontend/src/store/modules/data-visualization/common.ts new file mode 100644 index 0000000000..ff51a9b921 --- /dev/null +++ b/core/core-frontend/src/store/modules/data-visualization/common.ts @@ -0,0 +1,29 @@ +import { storeToRefs } from 'pinia' +import { dvMainStoreWithOut } from './dvMain' +const dvMainStore = dvMainStoreWithOut() +const { curComponent, componentData } = storeToRefs(dvMainStore) + +export const getCurInfo = () => { + if (curComponent.value) { + const curComponentId = curComponent.value.id + let curIndex = 0 + let curComponentData = componentData.value + componentData.value.forEach((component, index) => { + if (curComponentId === component.id) { + curIndex = index + } + if (component.component === 'Group') { + component.propValue.forEach((subComponent, subIndex) => { + if (curComponentId === subComponent.id) { + curIndex = subIndex + curComponentData = component.propValue + } + }) + } + }) + return { + index: curIndex, + componentData: curComponentData + } + } +} diff --git a/core/core-frontend/src/store/modules/data-visualization/copy.ts b/core/core-frontend/src/store/modules/data-visualization/copy.ts index 904013c629..27d6ab41cc 100644 --- a/core/core-frontend/src/store/modules/data-visualization/copy.ts +++ b/core/core-frontend/src/store/modules/data-visualization/copy.ts @@ -18,7 +18,8 @@ const { curMultiplexingComponents, dvInfo, pcMatrixCount, - canvasStyleData + canvasStyleData, + componentData } = storeToRefs(dvMainStore) const { menuTop, menuLeft } = storeToRefs(contextmenuStore) @@ -119,10 +120,10 @@ export const copyStore = defineStore('copy', { }, moveTime) snapshotStore.recordSnapshotCache() }, - cut() { + cut(curComponentData = componentData.value) { if (curComponent.value) { this.copyDataInfo([curComponent.value]) - dvMainStore.deleteComponentById(curComponent.value.id) + dvMainStore.deleteComponentById(curComponent.value.id, curComponentData) } else if (composeStore.areaData.components.length) { this.copyDataInfo(composeStore.areaData.components) composeStore.areaData.components.forEach(component => { diff --git a/core/core-frontend/src/store/modules/data-visualization/layer.ts b/core/core-frontend/src/store/modules/data-visualization/layer.ts index f373e10c8f..d31f1b9c6a 100644 --- a/core/core-frontend/src/store/modules/data-visualization/layer.ts +++ b/core/core-frontend/src/store/modules/data-visualization/layer.ts @@ -3,43 +3,60 @@ import { store } from '../../index' import { dvMainStoreWithOut } from './dvMain' import { swap } from '@/utils/utils' import { useEmitt } from '@/hooks/web/useEmitt' +import { getCurInfo } from '@/store/modules/data-visualization/common' const dvMainStore = dvMainStoreWithOut() -const { componentData, curComponentIndex, curComponent } = storeToRefs(dvMainStore) +const { curComponentIndex, curComponent } = storeToRefs(dvMainStore) export const layerStore = defineStore('layer', { actions: { upComponent() { - // 上移图层 index，表示元素在数组中越往后 - if (curComponentIndex.value < componentData.value.length - 1) { - swap(componentData.value, curComponentIndex.value, curComponentIndex.value + 1) - curComponentIndex.value = curComponentIndex.value + 1 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + // 上移图层 index，表示元素在数组中越往后 + if (index < componentData.length - 1) { + swap(componentData, index, index + 1) + curComponentIndex.value = index + 1 + } } }, downComponent() { - // 下移图层 index，表示元素在数组中越往前 - if (curComponentIndex.value > 0) { - swap(componentData.value, curComponentIndex.value, curComponentIndex.value - 1) - curComponentIndex.value = curComponentIndex.value - 1 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + // 下移图层 index，表示元素在数组中越往前 + if (index > 0) { + swap(componentData, index, index - 1) + curComponentIndex.value = index - 1 + } } }, topComponent() { // 置顶 - if (curComponentIndex.value < componentData.value.length - 1) { - componentData.value.splice(curComponentIndex.value, 1) - componentData.value.push(curComponent.value) - curComponentIndex.value = componentData.value.length - 1 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + if (index < componentData.length - 1) { + componentData.splice(curComponentIndex.value, 1) + componentData.push(curComponent.value) + curComponentIndex.value = componentData.length - 1 + } } }, bottomComponent() { // 置底 - if (curComponentIndex.value > 0) { - componentData.value.splice(curComponentIndex.value, 1) - componentData.value.unshift(curComponent.value) - curComponentIndex.value = 0 + const curInfo = getCurInfo() + if (curInfo) { + const { index, componentData } = curInfo + if (index > 0) { + componentData.splice(index, 1) + componentData.unshift(curComponent.value) + curComponentIndex.value = 0 + } } }, From cc212b8215063db4cfe7a71a54c9e6ef41d22e68 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Mon, 18 Dec 2023 13:35:54 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E7=94=A8=E6=88=B7=E6=89=B9=E9=87=8F?= =?UTF-8?q?=E5=AF=BC=E5=85=A5=E4=BD=BF=E7=94=A8=E7=9A=84=E4=B8=8D=E6=98=AF?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=AF=86=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- de-xpack | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/de-xpack b/de-xpack index 79da01c6f4..b6dd53ff93 160000 --- a/de-xpack +++ b/de-xpack @@ -1 +1 @@ -Subproject commit 79da01c6f46aec7b0d3e5920213fe866a8a07678 +Subproject commit b6dd53ff930400ff2d169db95ea21dd19f3e205a From eeee99be12a94bad52c284c6f6361f198ec02694 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Mon, 18 Dec 2023 14:09:41 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E7=94=A8=E6=88=B7=E6=89=B9=E9=87=8F?= =?UTF-8?q?=E5=AF=BC=E5=85=A5=E5=9B=BD=E9=99=85=E5=8C=96=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/core-frontend/src/store/modules/user.ts | 3 +++ de-xpack | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/core/core-frontend/src/store/modules/user.ts b/core/core-frontend/src/store/modules/user.ts index ca7999f50c..a6b2693656 100644 --- a/core/core-frontend/src/store/modules/user.ts +++ b/core/core-frontend/src/store/modules/user.ts @@ -85,6 +85,9 @@ export const userStore = defineStore('user', { this.oid = oid }, setLanguage(language: string) { + if (!language || language === 'zh_CN') { + language = 'zh-CN' + } wsCache.set('user.language', language) this.language = language locale.setLang(language) diff --git a/de-xpack b/de-xpack index b6dd53ff93..dfc290223f 160000 --- a/de-xpack +++ b/de-xpack @@ -1 +1 @@ -Subproject commit b6dd53ff930400ff2d169db95ea21dd19f3e205a +Subproject commit dfc290223ffb39bcff839d43f5e828dbe647c730 From eaa0610432985e611890a3ac50d188d011c519b0 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 18 Dec 2023 14:41:26 +0800 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=E5=A4=8D=E5=88=B6=E7=AD=89?= =?UTF-8?q?=E8=B5=84=E6=BA=90=E6=A0=91=E6=93=8D=E4=BD=9C=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/canvas/CanvasCore.vue | 2 ++ core/core-frontend/src/utils/canvasUtils.ts | 26 +++++++++++++++++++ .../src/views/common/DeResourceGroupOpt.vue | 4 ++- .../src/views/common/DeResourceTree.vue | 19 ++++++++++++-- .../src/views/data-visualization/index.vue | 14 ++++++++-- 5 files changed, 60 insertions(+), 5 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 7e5cb6c784..a2f0aff85b 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -1185,7 +1185,9 @@ const userViewEnlargeOpen = (opt, item) => { } const initSnapshotTimer = () => { + console.log('check1==') snapshotTimer.value = setInterval(() => { + console.log('check2==') snapshotStore.snapshotCatchToStore() }, 1000) } diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts index c78c8e3492..bbacdce160 100644 --- a/core/core-frontend/src/utils/canvasUtils.ts +++ b/core/core-frontend/src/utils/canvasUtils.ts @@ -286,3 +286,29 @@ export function filterEmptyFolderTree(nodes) { } }) } + +export function findParentIdByChildIdRecursive(tree, targetChildId) { + function findParentId(node, targetChildId) { + if (node.type === 'folder' && node.children) { + for (const childNode of node.children) { + if (childNode.id === targetChildId) { + return node.id // 找到匹配的子节点，返回其父节点的 ID + } + const parentId = findParentId(childNode, targetChildId) + if (parentId !== null) { + return parentId // 在子节点中找到匹配的父节点 + } + } + } + return null // 没有找到匹配的子节点 + } + + for (const node of tree) { + const parentId = findParentId(node, targetChildId) + if (parentId !== null) { + return parentId // 在整个树中找到匹配的父节点 + } + } + + return null // 没有找到匹配的子节点 +} diff --git a/core/core-frontend/src/views/common/DeResourceGroupOpt.vue b/core/core-frontend/src/views/common/DeResourceGroupOpt.vue index 0fb5b8d31c..09cf1ba9ff 100644 --- a/core/core-frontend/src/views/common/DeResourceGroupOpt.vue +++ b/core/core-frontend/src/views/common/DeResourceGroupOpt.vue @@ -276,7 +276,9 @@ const saveResource = () => { ElMessage.success('保存成功') if (cmd.value === 'copy') { const baseUrl = - curCanvasType.value === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId=' + curCanvasType.value === 'dataV' + ? '#/dvCanvas?opt=copy&dvId=' + : '#/dashboard?opt=copy&resourceId=' window.open(baseUrl + data.data, '_blank') } }) diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue index b0c1ca951d..7aefe562ce 100644 --- a/core/core-frontend/src/views/common/DeResourceTree.vue +++ b/core/core-frontend/src/views/common/DeResourceTree.vue @@ -1,6 +1,6 @@