refactor(数据大屏): 图层管理移动优化

core/core-frontend/src/components/data-visualization/RealTimeListTree.vue

@@ -187,7 +187,7 @@ const popComponentData = computed(() =>
 )
 
 const baseComponentData = computed(() =>
-  componentData.value.filter(ele => ele.category !== 'hidden' && ele.component !== 'GroupArea')
+  componentData.value.filter(ele => ele?.category !== 'hidden' && ele.component !== 'GroupArea')
 )
 
 const dragOnEnd = ({ oldIndex, newIndex }) => {

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

@@ -9,7 +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'
+import { componentArraySort, getCurInfo } from '@/store/modules/data-visualization/common'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { XpackComponent } from '@/components/plugin'
 const dvMainStore = dvMainStoreWithOut()
@@ -122,6 +122,7 @@ const upComponent = () => {
   if (curComponent.value && !isGroupArea.value) {
     layerStore.upComponent(curComponent.value.id)
   } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components)
     areaData.value.components.forEach(component => {
       layerStore.upComponent(component.id)
     })
@@ -131,7 +132,14 @@ const upComponent = () => {
 }
 
 const downComponent = () => {
-  layerStore.downComponent()
+  if (curComponent.value && !isGroupArea.value) {
+    layerStore.downComponent(curComponent.value.id)
+  } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components, 'top')
+    areaData.value.components.forEach(component => {
+      layerStore.downComponent(component.id)
+    })
+  }
   snapshotStore.recordSnapshotCache('downComponent')
   menuOpt('downComponent')
 }
@@ -140,6 +148,7 @@ const topComponent = () => {
   if (curComponent.value && !isGroupArea.value) {
     layerStore.topComponent(curComponent.value.id)
   } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components, 'top')
     areaData.value.components.forEach(component => {
       layerStore.topComponent(component.id)
     })
@@ -152,6 +161,7 @@ const bottomComponent = () => {
   if (curComponent.value && !isGroupArea.value) {
     layerStore.bottomComponent(curComponent.value.id)
   } else if (areaData.value.components.length) {
+    componentArraySort(areaData.value.components)
     areaData.value.components.forEach(component => {
       layerStore.bottomComponent(component.id)
     })
@@ -260,7 +270,6 @@ const editQueryCriteria = () => {
         <template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
           <li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">编辑</li>
           <li @click="upComponent">上移一层</li>
-          <li @click="upComponent">上移一层</li>
           <li @click="downComponent">下移一层</li>
           <li @click="topComponent">置于顶层</li>
           <li @click="bottomComponent">置于底层</li>

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

@@ -121,7 +121,7 @@ const popComponentData = computed(() =>
 )
 
 const baseComponentData = computed(() =>
-  componentData.value.filter(ele => ele.category !== 'hidden' && ele.component !== 'GroupArea')
+  componentData.value.filter(ele => ele?.category !== 'hidden' && ele.component !== 'GroupArea')
 )
 const canvasStyle = computed(() => {
   let style = {}

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

@@ -59,3 +59,13 @@ export const getCurInfoById = curComponentId => {
     }
   }
 }
+
+export const componentArraySort = (sortArray, direction = 'down') => {
+  sortArray.sort((a, b) => {
+    // 在 componentData 中找到 a 和 b 的索引位置
+    const indexA = componentData.value.findIndex(item => item.id === a.id)
+    const indexB = componentData.value.findIndex(item => item.id === b.id)
+    // 按照索引位置进行排序
+    return direction === 'down' ? indexB - indexA : indexA - indexB
+  })
+}

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

@@ -1347,7 +1347,7 @@ export const dvMainStore = defineStore('dataVisualization', {
     },
     removeGroupArea(curComponentData = this.componentData) {
       // 清理临时组件
-      const groupAreaHis = curComponentData.filter(ele => ele.component === 'GroupArea')
+      const groupAreaHis = curComponentData?.filter(ele => ele?.component === 'GroupArea')
       if (groupAreaHis && groupAreaHis.length > 0) {
         groupAreaHis.forEach(ele => {
           this.deleteComponentById(ele.id, curComponentData)