Merge pull request #10747 from dataease/pr@dev-v2@refactor_dashboard-panel

refactor(仪表板): 优化初始化矩阵排序，解决仪表板保存后再次编辑可能出现的图表位置错乱问题

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

@@ -25,8 +25,10 @@ import _ from 'lodash'
 import DragShadow from '@/components/data-visualization/canvas/DragShadow.vue'
 import {
   canvasSave,
+  componentPreSort,
   findDragComponent,
   findNewComponent,
+  isDashboard,
   isGroupCanvas,
   isMainCanvas,
   isSameCanvas
@@ -1088,7 +1090,10 @@ const canvasInit = () => {
 
   reCalcCellWidth()
   resetPositionBox()
-
+  // 根据高度排序
+  if (isDashboard()) {
+    componentPreSort(componentData.value)
+  }
   let i = 0
   let timeId = setInterval(function () {
     if (i >= componentData.value.length) {

core/core-frontend/src/utils/canvasUtils.ts

@@ -546,3 +546,17 @@ export function trackBarStyleCheck(element, trackbarStyle, _scale, trackMenuNumb
     trackbarStyle.top = trackbarStyle.top - trackMenuHeight
   }
 }
+
+// 优化仪表板图层排序 根据所处的Y轴位置预先进行排序再渲染矩阵 防止出现串位
+export function componentPreSort(componentData) {
+  if (componentData && Array.isArray(componentData)) {
+    componentData.sort((c1, c2) => c1.y - c2.y)
+    componentData.forEach(componentItem => {
+      if (componentItem.component === 'DeTabs') {
+        componentItem.propValue.forEach(tabItem => {
+          componentPreSort(tabItem.componentData)
+        })
+      }
+    })
+  }
+}