组合拆分

core/core-frontend/src/components/visualization/DvSidebar.vue

@@ -5,15 +5,21 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import Icon from '../icon-custom/src/Icon.vue'
+import dvInfoSvg from '@/assets/svg/dv-info.svg'
+import { useI18n } from '@/hooks/web/useI18n'
+import combinationSvg from '@/assets/svg/combinationpage.svg'
+import scatterSvg from '@/assets/svg/scatterpage.svg'
+import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasCollapse } = storeToRefs(dvMainStore)
+const { canvasCollapse,curComponent } = storeToRefs(dvMainStore)
 let componentNameEdit = ref(false)
 let inputComponentName = ref({ id: null, name: null })
 let componentNameInputAttr = ref(null)
-import dvInfoSvg from '@/assets/svg/dv-info.svg'
-import { useI18n } from '@/hooks/web/useI18n'
 const snapshotStore = snapshotStoreWithOut()
+const composeStore = composeStoreWithOut()
+const { areaData } = storeToRefs(composeStore)
 const { t } = useI18n()
+const emit = defineEmits(['close', 'rename'])
 const props = defineProps({
   element: {
     required: false,
@@ -58,10 +64,13 @@ const props = defineProps({
     type: String as PropType<EditorTheme>,
     default: 'light'
   },
-  title: String
+  title: String,
+  activePosition: {
+    type: String,
+    default: 'canvas'
+  }
 })
-
-const { width, asidePosition, sideName, themeInfo, view, themes, element } = toRefs(props)
+const { width, asidePosition, sideName, themeInfo, view, themes, element,activePosition } = toRefs(props)
 const collapseChange = () => {
   canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
 }
@@ -122,6 +131,33 @@ const editComponentName = () => {
 const onComponentNameChange = () => {
   snapshotStore.recordSnapshotCache('onComponentNameChange')
 }
+
+//组合
+const combinationclick = () => {
+  if(areaData.value.components.length){
+    composeStore.compose()
+    snapshotStore.recordSnapshotCache('componentCompose')
+    menuOpt('componentCompose')
+  }else{
+    ElMessage.warning('请选择多个组件进行组合！')
+    return
+  }
+}
+//打散
+const scatterclick= () => {
+  if(curComponent.value['component'] == 'Group'){
+    composeStore.decompose()
+    snapshotStore.recordSnapshotCache('decompose')
+    menuOpt('decompose')
+  }else{
+    ElMessage.warning('请选择组合！')
+    return
+  }
+}
+const menuOpt = optName => {
+  const param = { opt: optName }
+  activePosition.value === 'aside' && emit('close', param)
+}
 </script>
 
 <template>
@@ -168,20 +204,30 @@ const onComponentNameChange = () => {
           </div>
         </el-popover>
       </div>
-      <el-icon
-        :title="title"
-        :class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
-        size="20px"
-        @click="collapseChange"
-      >
-        <Expand
-          v-if="
-            (canvasCollapse[sideName] && asidePosition === 'left') ||
-            (!canvasCollapse[sideName] && asidePosition === 'right')
-          "
-        />
-        <Fold v-else />
-      </el-icon>
+      <div style="display: flex;">
+        <div v-if="!canvasCollapse[sideName] && asidePosition === 'left'">
+          <el-icon title="组合" style="font-size: 16px;margin-right: 8px;cursor: pointer" @click="combinationclick">
+            <Icon><combinationSvg class="svg-icon" /></Icon>
+          </el-icon>
+          <el-icon title="打散" style="font-size: 16px;margin-right: 5px;cursor: pointer" @click="scatterclick">
+            <Icon><scatterSvg class="svg-icon" /></Icon>
+          </el-icon>
+        </div>
+        <el-icon
+          :title="title"
+          :class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
+          size="20px"
+          @click="collapseChange"
+        >
+          <Expand
+            v-if="
+              (canvasCollapse[sideName] && asidePosition === 'left') ||
+              (!canvasCollapse[sideName] && asidePosition === 'right')
+            "
+          />
+          <Fold v-else />
+        </el-icon>
+    </div>
     </el-row>
     <div class="main-content" v-if="!canvasCollapse[sideName]">
       <el-scrollbar>

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -2040,10 +2040,10 @@ const deleteChartFieldItem = id => {
                       ><Icon><dvInfoSvg class="svg-icon" /></Icon
                     ></el-icon>
                   </template>
-                  <div style="margin-bottom: 4px; font-size: 14px; color: #646a73">
+                  <div style="margin-bottom: 4px; font-size: 14px; color: #fff">
                     {{ t('visualization.view_id') }}
                   </div>
-                  <div style="font-size: 14px; color: #1f2329">
+                  <div style="font-size: 14px; color: #fff">
                     {{ view.id }}
                   </div>
                 </el-popover>