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

feat(数据大屏): 组合到一个分组后，在图层管理中，可以查看该分组下的组件列表
2023-12-13 15:24:20 +08:00 · 2023-12-13 15:24:20 +08:00 · fb5169f104
commit fb5169f104
parent f22162aa6b ad03dd723f
6 changed files with 67 additions and 6 deletions
--- a/core/core-frontend/src/assets/svg/dv-expand-down.svg
+++ b/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>
--- a/core/core-frontend/src/assets/svg/dv-expand-right.svg
+++ b/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>
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/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 {
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/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;
--- a/core/core-frontend/src/store/modules/data-visualization/compose.ts
+++ b/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,
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/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