Merge pull request #7142 from dataease/pr@dev-v2@feat_real-list-adaptor

feat(数据大屏): 组合到一个分组后，在图层管理中，可以查看该分组下的组件列表

core/core-frontend/src/assets/svg/dv-expand-down.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.76003 7.79314L1.11628 3.25044C1.0169 3.12669 1.0169 2.92586 1.11628 2.8019C1.16398 2.74231 1.22878 2.70898 1.29606 2.70898H8.7042C8.84461 2.70898 8.95857 2.85106 8.95857 3.02627C8.95857 3.11044 8.9317 3.19086 8.88398 3.25044L5.24023 7.79336C5.10773 7.95856 4.89273 7.95856 4.76023 7.79336L4.76003 7.79314Z" fill="#A6A6A6"/>
+</svg>

core/core-frontend/src/assets/svg/dv-expand-right.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.79266 5.23935L3.24995 8.8831C3.1262 8.98248 2.92537 8.98248 2.80142 8.8831C2.74183 8.8354 2.7085 8.7706 2.7085 8.70332V1.29518C2.70828 1.15497 2.85037 1.04102 3.02558 1.04102C3.10975 1.04102 3.19016 1.06789 3.24975 1.1156L7.79266 4.75935C7.95787 4.89185 7.95787 5.10685 7.79266 5.23935V5.23935Z" fill="#A6A6A6"/>
+</svg>

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

@@ -5,12 +5,13 @@ import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
 import { storeToRefs } from 'pinia'
 import { ElIcon, ElRow } from 'element-plus-secondary'
 import Icon from '../icon-custom/src/Icon.vue'
-import { computed, nextTick, ref } from 'vue'
+import { computed, nextTick, ref, toRefs } from 'vue'
 import draggable from 'vuedraggable'
 import { lockStoreWithOut } from '@/store/modules/data-visualization/lock'
 import ContextMenuAsideDetails from '@/components/data-visualization/canvas/ContextMenuAsideDetails.vue'
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
+import { propTypes } from '@/utils/propTypes'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
 
@@ -23,7 +24,11 @@ const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(compo
 
 const { curComponent, canvasViewInfo } = storeToRefs(dvMainStore)
 
-const componentData = computed(() => dvMainStore.componentData)
+const props = defineProps({
+  componentData: []
+})
+
+const { componentData } = toRefs(props)
 
 const getComponent = index => {
   return componentData.value[componentData.value.length - 1 - index]
@@ -312,7 +317,6 @@ const handleContextMenu = e => {
             </div>
           </template>
         </draggable>
-        <el-row style="width: 100%; height: 150px"></el-row>
       </div>
     </el-row>
     <Teleport v-if="editComponentId && nameEdit" :to="editComponentId">
@@ -346,7 +350,7 @@ const handleContextMenu = e => {
         align-items: center;
         justify-content: flex-start;
         font-size: 12px;
-        padding: 0 2px 0 22px;
+        padding: 0 2px 0 44px;
         user-select: none;
 
         .component-icon {

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

@@ -90,6 +90,10 @@ const setCurComponent = index => {
   dvMainStore.setCurComponent({ component: componentData.value[index], index })
 }
 
+const expandClick = component => {
+  component['expand'] = !component['expand']
+}
+
 let nameEdit = ref(false)
 let editComponentId = ref('')
 let inputName = ref('')
@@ -227,6 +231,24 @@ const handleContextMenu = e => {
                 }"
                 @click="onClick($event, transformIndex(index))"
               >
+                <div style="width: 22px; padding-left: 3px">
+                  <el-icon
+                    v-show="getComponent(index)?.component === 'Group'"
+                    class="component-expand"
+                    @click="expandClick(getComponent(index))"
+                  >
+                    <Icon
+                      v-show="getComponent(index)?.expand"
+                      name="dv-expand-down"
+                      class="expand-icon"
+                    ></Icon>
+                    <Icon
+                      v-show="!getComponent(index)?.expand"
+                      name="dv-expand-right"
+                      class="expand-icon"
+                    ></Icon>
+                  </el-icon>
+                </div>
                 <el-icon class="component-icon">
                   <Icon :name="getIconName(getComponent(index))"></Icon>
                 </el-icon>
@@ -314,6 +336,9 @@ const handleContextMenu = e => {
                   </template>
                 </el-dropdown>
               </div>
+              <div v-if="getComponent(index)?.component === 'Group' && getComponent(index)?.expand">
+                <real-time-group :component-data="getComponent(index).propValue"></real-time-group>
+              </div>
             </div>
           </template>
         </draggable>
@@ -351,7 +376,7 @@ const handleContextMenu = e => {
         align-items: center;
         justify-content: flex-start;
         font-size: 12px;
-        padding: 0 2px 0 22px;
+        padding: 0 2px 0 0px;
         user-select: none;
 
         .component-icon {
@@ -394,7 +419,7 @@ const handleContextMenu = e => {
             .component-base {
               opacity: 1;
             }
-            width: 70px !important;
+            width: 66px !important;
           }
         }
 
@@ -431,6 +456,26 @@ const handleContextMenu = e => {
   background: #303133 !important;
 }
 
+.component-expand {
+  cursor: pointer;
+  height: 16px !important;
+  width: 16px !important;
+  border-radius: 2px;
+  padding: 0 2px;
+
+  .expand-icon {
+    font-size: 10px;
+  }
+
+  &:hover {
+    background: rgba(235, 235, 235, 0.1);
+  }
+
+  &:active {
+    background: rgba(235, 235, 235, 0.1);
+  }
+}
+
 .component-base {
   cursor: pointer;
   height: 22px !important;

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

@@ -90,6 +90,7 @@ export const composeStore = defineStore('compose', {
         name: '组合',
         label: '组合',
         icon: 'group',
+        expand: false,
         commonBackground: {
           ...deepCopy(COMMON_COMPONENT_BACKGROUND_MAP[curOriginThemes.value]),
           backgroundColorSelect: false,

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

@@ -95,6 +95,11 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
     const canvasDataResult = JSON.parse(canvasInfo.componentData)
     const canvasStyleResult = JSON.parse(canvasInfo.canvasStyleData)
     const canvasViewInfoPreview = canvasInfo.canvasViewInfo
+    canvasDataResult.forEach(componentItem => {
+      if (componentItem.component === 'Group') {
+        componentItem.expand = componentItem.expand || false
+      }
+    })
     const curPreviewGap =
       dvInfo.type === 'dashboard' && canvasStyleResult['dashboard'].gap === 'yes'
         ? canvasStyleResult['dashboard'].gapSize