refactor(数据大屏): 优化批量上移下移置顶置底等批操作位移逻辑

core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue

@@ -119,7 +119,13 @@ const deleteComponent = () => {
 }
 
 const upComponent = () => {
-  layerStore.upComponent()
+  if (curComponent.value && !isGroupArea.value) {
+    layerStore.upComponent(curComponent.value.id)
+  } else if (areaData.value.components.length) {
+    areaData.value.components.forEach(component => {
+      layerStore.upComponent(component.id)
+    })
+  }
   snapshotStore.recordSnapshotCache('upComponent')
   menuOpt('upComponent')
 }
@@ -131,13 +137,25 @@ const downComponent = () => {
 }
 
 const topComponent = () => {
-  layerStore.topComponent()
+  if (curComponent.value && !isGroupArea.value) {
+    layerStore.topComponent(curComponent.value.id)
+  } else if (areaData.value.components.length) {
+    areaData.value.components.forEach(component => {
+      layerStore.topComponent(component.id)
+    })
+  }
   snapshotStore.recordSnapshotCache('topComponent')
   menuOpt('topComponent')
 }
 
 const bottomComponent = () => {
-  layerStore.bottomComponent()
+  if (curComponent.value && !isGroupArea.value) {
+    layerStore.bottomComponent(curComponent.value.id)
+  } else if (areaData.value.components.length) {
+    areaData.value.components.forEach(component => {
+      layerStore.bottomComponent(component.id)
+    })
+  }
   snapshotStore.recordSnapshotCache('bottomComponent')
   menuOpt('bottomComponent')
 }

core/core-frontend/src/store/modules/data-visualization/common.ts

@@ -3,20 +3,37 @@ import { dvMainStoreWithOut } from './dvMain'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, componentData } = storeToRefs(dvMainStore)
 
-export const getCurInfo = () => {
-  if (curComponent.value) {
-    const curComponentId = curComponent.value.id
+export const getComponentById = (componentId?) => {
+  const curInfo = getCurInfo(componentId)
+  if (curInfo) {
+    return curInfo.targetComponent
+  } else return null
+}
+
+export const getCurInfo = (componentId?) => {
+  if (componentId) {
+    return getCurInfoById(componentId)
+  } else if (curComponent.value) {
+    return getCurInfoById(curComponent.value.id)
+  }
+}
+
+export const getCurInfoById = curComponentId => {
+  if (curComponentId) {
     let curIndex = 0
     let curTabIndex = 0
     let curComponentData = componentData.value
+    let targetComponent = null
     componentData.value.forEach((component, index) => {
       if (curComponentId === component.id) {
         curIndex = index
+        targetComponent = component
       }
       if (component.component === 'Group') {
         component.propValue.forEach((subComponent, subIndex) => {
           if (curComponentId === subComponent.id) {
             curIndex = subIndex
+            targetComponent = subComponent
             curComponentData = component.propValue
           }
         })
@@ -27,6 +44,7 @@ export const getCurInfo = () => {
           tabItem.componentData.forEach((tabComponent, subIndex) => {
             if (curComponentId === tabComponent.id) {
               curIndex = subIndex
+              targetComponent = tabComponent
               curComponentData = tabItem.componentData
             }
           })
@@ -36,6 +54,7 @@ export const getCurInfo = () => {
     return {
       index: curIndex,
       tabIndex: curTabIndex,
+      targetComponent: targetComponent,
       componentData: curComponentData
     }
   }

core/core-frontend/src/store/modules/data-visualization/layer.ts

@@ -3,15 +3,15 @@ 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'
+import { getComponentById, getCurInfo } from '@/store/modules/data-visualization/common'
 
 const dvMainStore = dvMainStoreWithOut()
 const { curComponentIndex, curComponent } = storeToRefs(dvMainStore)
 
 export const layerStore = defineStore('layer', {
   actions: {
-    upComponent() {
-      const curInfo = getCurInfo()
+    upComponent(componentId?) {
+      const curInfo = getCurInfo(componentId)
       if (curInfo) {
         const { index, componentData } = curInfo
         // 上移图层 index，表示元素在数组中越往后
@@ -22,8 +22,8 @@ export const layerStore = defineStore('layer', {
       }
     },
 
-    downComponent() {
-      const curInfo = getCurInfo()
+    downComponent(componentId?) {
+      const curInfo = getCurInfo(componentId)
       if (curInfo) {
         const { index, componentData } = curInfo
         // 下移图层 index，表示元素在数组中越往前
@@ -34,51 +34,53 @@ export const layerStore = defineStore('layer', {
       }
     },
 
-    topComponent() {
+    topComponent(componentId?) {
       // 置顶
-      const curInfo = getCurInfo()
+      const curInfo = getCurInfo(componentId)
       if (curInfo) {
-        const { index, componentData } = curInfo
+        const { index, componentData, targetComponent } = curInfo
         if (index < componentData.length - 1) {
-          componentData.splice(curComponentIndex.value, 1)
-          componentData.push(curComponent.value)
+          componentData.splice(targetComponent, 1)
+          componentData.push(targetComponent)
           curComponentIndex.value = componentData.length - 1
         }
       }
     },
 
-    bottomComponent() {
+    bottomComponent(componentId?) {
       // 置底
-      const curInfo = getCurInfo()
+      const curInfo = getCurInfo(componentId)
       if (curInfo) {
-        const { index, componentData } = curInfo
+        const { index, componentData, targetComponent } = curInfo
         if (index > 0) {
           componentData.splice(index, 1)
-          componentData.unshift(curComponent.value)
+          componentData.unshift(targetComponent)
           curComponentIndex.value = 0
         }
       }
     },
 
-    hideComponent() {
+    hideComponent(componentId?) {
+      const targetComponent = getComponentById(componentId)
       // 隐藏
-      if (curComponent && curComponent.value) {
-        curComponent.value.isShow = false
+      if (targetComponent) {
+        targetComponent.isShow = false
       }
     },
-    showComponent() {
+    showComponent(componentId?) {
       // 显示
-      if (curComponent && curComponent.value) {
-        curComponent.value.isShow = true
-        if (curComponent.value.component == 'Group') {
-          curComponent.value.propValue.forEach(item => {
+      const targetComponent = getComponentById(componentId)
+      if (targetComponent) {
+        targetComponent.isShow = true
+        if (targetComponent.component == 'Group') {
+          targetComponent.propValue.forEach(item => {
             if (item.innerType?.indexOf('table') !== -1) {
               setTimeout(() => {
                 useEmitt().emitter.emit('renderChart-' + item.id)
               }, 400)
             }
           })
-        } else if (curComponent.value?.innerType?.indexOf('table') !== -1) {
+        } else if (targetComponent?.innerType?.indexOf('table') !== -1) {
           setTimeout(() => {
             useEmitt().emitter.emit('renderChart-' + curComponent.value.id)
           }, 400)