refactor(数据大屏): 分组和Tab组件禁用相互组合

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

@@ -39,7 +39,7 @@ const areaDataPush = component => {
     component.isShow &&
     component.canvasId === 'canvas-main' &&
     component.category !== 'hidden' &&
-    !['Group', 'GroupArea'].includes(component.component)
+    !['Group', 'GroupArea', 'DeTabs'].includes(component.component)
   ) {
     areaData.value.components.push(component)
   }
@@ -75,7 +75,7 @@ const shiftDataPush = curClickIndex => {
         !component.isLock &&
         component.isShow &&
         component.category !== 'hidden' &&
-        !['Group', 'GroupArea'].includes(component.component)
+        !['Group', 'GroupArea', 'DeTabs'].includes(component.component)
     )
   areaData.value.components.push(...shiftAreaComponents)
   dvMainStore.setCurComponent({ component: null, index: null })

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

@@ -160,7 +160,7 @@ const state = reactive({
     id: ''
   },
   // 禁止移入Tab中的组件
-  ignoreTabMoveComponent: ['de-button', 'de-reset-button', 'DeTabs'],
+  ignoreTabMoveComponent: ['de-button', 'de-reset-button', 'DeTabs', 'Group'],
   // 当画布在tab中是 宽度左右拓展的余量
   parentWidthTabOffset: 40,
   canvasChangeTips: 'none',
@@ -431,7 +431,7 @@ const areaDataPush = component => {
     !component.isLock &&
     component.isShow &&
     component.canvasId === 'canvas-main' &&
-    !['Group', 'GroupArea'].includes(component.component)
+    !['Group', 'GroupArea', 'DeTabs'].includes(component.component)
   ) {
     areaData.value.components.push(component)
   }

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

@@ -142,9 +142,7 @@ export const composeStore = defineStore('compose', {
 
       const components = []
       areaData.components.forEach(component => {
-        if (!['Group', 'GroupArea'].includes(component.component)) {
-          components.push(component)
-        } else {
+        if (['Group'].includes(component.component)) {
           // 如果要组合的组件中，已经存在组合数据，则需要提前拆分
           const parentStyle = { ...component.style }
           const subComponents = component.propValue
@@ -155,6 +153,10 @@ export const composeStore = defineStore('compose', {
           })
 
           components.push(...component.propValue)
+        } else if (['DeTabs', 'GroupArea'].includes(component.component)) {
+          // do nothing GroupAreas组合视阔区 DeTabs 均不加入分组中
+        } else {
+          components.push(component)
         }
       })
 
@@ -202,10 +204,12 @@ export const composeStore = defineStore('compose', {
     // 将已经放到 Group 组件数据删除，也就是在 componentData 中删除，因为它们已经从 componentData 挪到 Group 组件中了
     batchDeleteComponent(deleteData) {
       deleteData.forEach(component => {
-        for (let i = 0, len = componentData.value.length; i < len; i++) {
-          if (component.id == componentData.value[i].id) {
-            componentData.value.splice(i, 1)
-            break
+        if (!['DeTabs', 'GroupArea'].includes(component.component)) {
+          for (let i = 0, len = componentData.value.length; i < len; i++) {
+            if (component.id == componentData.value[i].id) {
+              componentData.value.splice(i, 1)
+              break
+            }
           }
         }
       })