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

2023-12-13 15:20:41 +08:00 · 2023-12-13 15:20:41 +08:00 · ad03dd723f
commit ad03dd723f
parent f3274c0528
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