Merge pull request #9084 from dataease/pr@dev-v2@refactor_drill

refactor(仪表板): 调整下钻和联动同时触发时，弹出框的显示逻辑 #8701

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

@@ -34,6 +34,7 @@ const state = reactive({
   i18n_map: {
     drill: t('visualization.drill'),
     linkage: t('visualization.linkage'),
+    linkageAndDrill: t('visualization.linkage_and_drill'),
     jump: t('visualization.jump')
   }
 })
@@ -58,10 +59,6 @@ defineExpose({
   font-size: 12px;
 }
 
-:deep(ul) {
-  width: 80px;
-}
-
 :deep(.ed-dropdown__popper) {
   position: static !important;
 }

core/core-frontend/src/locales/zh-CN.ts

@@ -2041,6 +2041,7 @@ export default {
     save: '保存',
     drill: '下钻',
     linkage: '联动',
+    linkage_and_drill: '联动和下钻',
     jump: '跳转',
     cancel_linkage: '取消联动',
     switch_picture: '更换图片',

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -200,12 +200,6 @@ const action = param => {
   if (trackMenu.value.length < 2) {
     // 只有一个事件直接调用
     trackClick(trackMenu.value[0])
-  } else if (
-    props.element.actionSelection.linkageActive === 'auto' &&
-    trackMenu.value.length === 2 &&
-    !trackMenu.value.includes('jump')
-  ) {
-    trackClickPre('linkage')
   } else {
     // 图表关联多个事件
     state.trackBarStyle.left = param.x - 50 + 'px'
@@ -213,20 +207,6 @@ const action = param => {
     viewTrack.value.trackButtonClick()
   }
 }
-const trackClickPre = trackAction => {
-  if (
-    props.element.actionSelection.linkageActive === 'auto' &&
-    trackMenu.value.length === 2 &&
-    trackAction === 'linkage' &&
-    !trackMenu.value.includes('jump')
-  ) {
-    trackMenu.value.forEach(action => {
-      trackClick(action)
-    })
-  } else {
-    trackClick(trackAction)
-  }
-}
 
 const trackClick = trackAction => {
   const param = state.pointParam
@@ -256,6 +236,10 @@ const trackClick = trackAction => {
   }
 
   switch (trackAction) {
+    case 'linkageAndDrill':
+      dvMainStore.addViewTrackFilter(linkageParam)
+      emit('onChartClick', param)
+      break
     case 'drill':
       emit('onChartClick', param)
       break
@@ -272,7 +256,7 @@ const trackClick = trackAction => {
 }
 
 const trackMenu = computed(() => {
-  const trackMenuInfo = []
+  let trackMenuInfo = []
   // 复用、放大状态的仪表板不进行联动、跳转和下钻的动作
   if (!['multiplexing', 'viewDialog'].includes(showPosition.value)) {
     let linkageCount = 0
@@ -293,6 +277,16 @@ const trackMenu = computed(() => {
       trackMenuInfo.push('jump')
     linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
     view.value.drillFields.length && trackMenuInfo.push('drill')
+    // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'
+    if (trackMenuInfo.length === 3 && props.element.actionSelection.linkageActive === 'auto') {
+      trackMenuInfo = ['jump', 'linkageAndDrill']
+    } else if (
+      trackMenuInfo.length === 2 &&
+      props.element.actionSelection.linkageActive === 'auto' &&
+      !trackMenuInfo.includes('jump')
+    ) {
+      trackMenuInfo = ['linkageAndDrill']
+    }
   }
   return trackMenuInfo
 })
@@ -340,7 +334,7 @@ onBeforeUnmount(() => {
       :track-menu="trackMenu"
       class="track-bar"
       :style="state.trackBarStyle"
-      @trackClick="trackClickPre"
+      @trackClick="trackClick"
     />
     <div v-if="!isError" ref="chartContainer" class="canvas-content" :id="containerId"></div>
     <chart-error v-else :err-msg="errMsg" />

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -32,6 +32,14 @@ const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainSt
 const { emitter } = useEmitt()
 
 const props = defineProps({
+  element: {
+    type: Object,
+    default() {
+      return {
+        propValue: null
+      }
+    }
+  },
   view: {
     type: Object as PropType<ChartObj>,
     default() {
@@ -269,6 +277,10 @@ const trackClick = trackAction => {
     sourceType: state.pointParam.data.sourceType
   }
   switch (trackAction) {
+    case 'linkageAndDrill':
+      dvMainStore.addViewTrackFilter(linkageParam)
+      emit('onChartClick', param)
+      break
     case 'drill':
       emit('onChartClick', param)
       break
@@ -285,7 +297,7 @@ const trackClick = trackAction => {
 }
 
 const trackMenu = computed(() => {
-  const trackMenuInfo = []
+  let trackMenuInfo = []
   if (showPosition.value === 'viewDialog') {
     return trackMenuInfo
   }
@@ -307,6 +319,16 @@ const trackMenu = computed(() => {
     trackMenuInfo.push('jump')
   linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
   view.value.drillFields.length && trackMenuInfo.push('drill')
+  // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'
+  if (trackMenuInfo.length === 3 && props.element.actionSelection.linkageActive === 'auto') {
+    trackMenuInfo = ['jump', 'linkageAndDrill']
+  } else if (
+    trackMenuInfo.length === 2 &&
+    props.element.actionSelection.linkageActive === 'auto' &&
+    !trackMenuInfo.includes('jump')
+  ) {
+    trackMenuInfo = ['linkageAndDrill']
+  }
   return trackMenuInfo
 })
 

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

@@ -153,13 +153,13 @@ const trackMenu = computed<Array<string>>(() => {
 })
 
 const hasLinkIcon = computed(() => {
-  return trackMenu.value.indexOf('linkage') > -1
+  return trackMenu.value.indexOf('linkage') > -1 || trackMenu.value.indexOf('linkageAndDrill')
 })
 const hasJumpIcon = computed(() => {
   return trackMenu.value.indexOf('jump') > -1 && !mobileInPc.value
 })
 const hasDrillIcon = computed(() => {
-  return trackMenu.value.indexOf('drill') > -1
+  return trackMenu.value.indexOf('drill') > -1 || trackMenu.value.indexOf('linkageAndDrill')
 })
 
 const loading = ref(false)