From 72e90896b91ec0389e180141239463d023791c49 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 30 Aug 2024 18:04:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E5=9B=BE=E5=B1=82=E7=AE=A1=E7=90=86=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/RealTimeListTree.vue       |  2 +-
 .../canvas/ContextMenuDetails.vue                 | 15 ++++++++++++---
 .../data-visualization/canvas/DePreview.vue       |  2 +-
 .../store/modules/data-visualization/common.ts    | 10 ++++++++++
 .../store/modules/data-visualization/dvMain.ts    |  2 +-
 5 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index 35f63c43f5..2a3dfd4715 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/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 }) => {
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 0f2679534c..88c567a8ef 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/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>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index 6c69f1e2b3..fceff88857 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/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 = {}
diff --git a/core/core-frontend/src/store/modules/data-visualization/common.ts b/core/core-frontend/src/store/modules/data-visualization/common.ts
index b70a2a88ef..e5f5fac811 100644
--- a/core/core-frontend/src/store/modules/data-visualization/common.ts
+++ b/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
+  })
+}
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 60115bd1a1..215d19f7ca 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/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)