可视化大屏合并排序问题

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

@@ -105,6 +105,7 @@ const transformIndex = index => {
   return componentData.value.length - 1 - index
 }
 const areaDataPush = component => {
+  
   if (
     component &&
     !component.isLock &&
@@ -114,8 +115,30 @@ const areaDataPush = component => {
     !['GroupArea', 'DeTabs'].includes(component.component)
   ) {
     areaData.value.components.push(component)
+
+    // 修改排序。以原始数据排序为准
+    areaData.value.components.sort((a, b) => 
+      idOrder.indexOf(a.id) - idOrder.indexOf(b.id)
+    );
   }
+  
 }
+const idOrder = componentData.value.map(item => item.id);
+
+// 2. 按照 idOrder 的顺序对 areaData.value.components 进行排序
+areaData.value.components.sort((a, b) => {
+  const indexA = idOrder.indexOf(a.id);
+  const indexB = idOrder.indexOf(b.id);
+  
+  // 确保两个 id 都在排序列表中
+  if (indexA === -1 || indexB === -1) {
+    // 如果某个 id 不在排序列表中，可以自行决定如何处理
+    // 这里我们将不在列表中的项排在后面
+    return indexA === -1 ? (indexB === -1 ? 0 : 1) : -1;
+  }
+  
+  return indexA - indexB;
+});
 
 const hiddenAreaActive = computed(
   () => canvasState.value.curPointArea === 'hidden' && !curComponent.value