Merge pull request #9026 from dataease/pr@dev-v2@feat_linkage

feat(仪表板): 增加配置项，下钻和联动可同时触发 #8701

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

@@ -8,6 +8,10 @@
     top="10vh"
     trigger="click"
   >
+    <linkage-set-option
+      v-if="curComponent && curComponent.actionSelection"
+      :action-selection="customLinkageActive"
+    ></linkage-set-option>
     <div v-loading="loading" @keydown.stop @keyup.stop v-if="state.initState" style="height: 550px">
       <el-row style="flex-direction: row">
         <div class="top-area">
@@ -198,8 +202,11 @@ import {
 import { getDatasetDetails } from '@/api/dataset'
 import { findAllViewsId } from '@/utils/canvasUtils'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import LinkageSetOption from '@/components/visualization/LinkageSetOption.vue'
+import { deepCopy } from '@/utils/utils'
+import { ACTION_SELECTION } from '@/custom-component/component-list'
 const dvMainStore = dvMainStoreWithOut()
-const { dvInfo, canvasViewInfo, componentData } = storeToRefs(dvMainStore)
+const { dvInfo, canvasViewInfo, componentData, curComponent } = storeToRefs(dvMainStore)
 const linkageInfoTree = ref(null)
 const { t } = useI18n()
 const dialogShow = ref(false)
@@ -221,6 +228,8 @@ const state = reactive({
   linkageInfo: null
 })
 
+const customLinkageActive = ref(deepCopy(ACTION_SELECTION))
+
 const dialogInit = viewItem => {
   state.showSelected = false
   dialogShow.value = true
@@ -277,6 +286,7 @@ const init = viewItem => {
       state.curDatasetInfo = res || {}
     })
   }
+  customLinkageActive.value = curComponent.value.actionSelection
   linkageSetting(state.viewId)
 }
 
@@ -314,6 +324,7 @@ const saveLinkageSetting = () => {
   loading.value = true
   saveLinkage(request)
     .then(() => {
+      curComponent.value.actionSelection.linkageActive = customLinkageActive.value.linkageActive
       snapshotStore.recordSnapshotCache()
       ElMessage.success('保存成功')
       // 刷新联动信息

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  title: propTypes.string,
+  baseWidth: {
+    required: false,
+    type: Number,
+    default: 300
+  },
+  actionSelection: {
+    required: true,
+    type: Object
+  },
+  themes: {
+    type: String,
+    default: 'dark'
+  }
+})
+
+const selection = ref()
+
+const selectionChange = () => {
+  // do selection
+}
+
+const { title, themes, actionSelection } = toRefs(props)
+</script>
+
+<template>
+  <el-popover placement="right-start" :width="baseWidth" trigger="click" :show-arrow="false">
+    <template #reference>
+      <el-icon class="option-set"><Setting /></el-icon>
+    </template>
+    <el-row>
+      如果联动维度已配置钻取，点击维度将
+      <el-radio-group
+        style="margin-top: 12px"
+        v-model="actionSelection.linkageActive"
+        @change="selectionChange"
+      >
+        <el-radio label="custom"
+          ><span style="font-weight: normal">弹出浮框，由用户选择联动或者下钻</span></el-radio
+        >
+        <el-radio label="auto"
+          ><span style="font-weight: normal">同时触发联动和下钻</span></el-radio
+        >
+      </el-radio-group>
+    </el-row>
+  </el-popover>
+</template>
+<style lang="less" scoped>
+.option-set {
+  position: absolute;
+  left: 90px;
+  top: 30px;
+}
+</style>

core/core-frontend/src/custom-component/component-list.ts

@@ -30,6 +30,10 @@ export const defaultStyleValue = {
   headFontActiveColor: '#000000'
 }
 
+export const ACTION_SELECTION = {
+  linkageActive: 'custom'
+}
+
 export const COMMON_COMPONENT_BACKGROUND_BASE = {
   backgroundColorSelect: true,
   backgroundImageEnable: false,
@@ -134,6 +138,7 @@ const list = [
     innerType: 'bar',
     editing: false,
     canvasActive: false,
+    actionSelection: ACTION_SELECTION,
     x: 1,
     y: 1,
     sizeX: 18,

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

@@ -1,5 +1,6 @@
 import { cloneDeep } from 'lodash-es'
 import componentList, {
+  ACTION_SELECTION,
   COMMON_COMPONENT_BACKGROUND_DARK,
   COMMON_COMPONENT_BACKGROUND_LIGHT
 } from '@/custom-component/component-list'
@@ -16,6 +17,7 @@ import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
 import { getViewConfig } from '@/views/chart/components/editor/util/chart'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { deepCopy } from '@/utils/utils'
 const dvMainStore = dvMainStoreWithOut()
 const { curBatchOptComponents, dvInfo, canvasStyleData, componentData, canvasViewInfo } =
   storeToRefs(dvMainStore)
@@ -118,6 +120,9 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
       }
       componentItem['maintainRadio'] = componentItem['maintainRadio'] || false
       componentItem['aspectRatio'] = componentItem['aspectRatio'] || 1
+      if (componentItem.component === 'UserView') {
+        componentItem.actionSelection = componentItem.actionSelection || deepCopy(ACTION_SELECTION)
+      }
     })
     const curPreviewGap =
       dvInfo.type === 'dashboard' && canvasStyleResult['dashboard'].gap === 'yes'