refactor(图表): 指标卡同时使用联动和外部事件时，在非编辑界面可以使用弹框选择执行事件 (#15763)

core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue

@@ -314,11 +314,20 @@ const eventEnable = computed(
       ['indicator', 'rich-text'].includes(config.value.innerType)) &&
     config.value.events &&
     config.value.events.checked &&
-    (isDashboard() || (!isDashboard() && !isMobile()))
+    (isDashboard() || (!isDashboard() && !isMobile())) &&
+    showPosition.value !== 'canvas-multiplexing'
 )
 
+const onWrapperClickCur = e => {
+  // 指标卡为内部触发
+  if (['indicator'].includes(config.value.innerType)) {
+    return
+  }
+  onWrapperClick(e)
+}
+
 const onWrapperClick = e => {
-  if (eventEnable.value && showPosition.value !== 'canvas-multiplexing') {
+  if (eventEnable.value) {
     if (config.value.events.type === 'showHidden') {
       // 打开弹框区域
       nextTick(() => {
@@ -349,8 +358,8 @@ const onWrapperClick = e => {
     } else if (config.value.events.type === 'download') {
       useEmitt().emitter.emit('canvasDownload')
     }
-    e.preventDefault()
-    e.stopPropagation()
+    e?.preventDefault()
+    e?.stopPropagation()
   }
 }
 
@@ -374,6 +383,13 @@ const freezeFlag = computed(() => {
     scrollMain.value - config.value.style?.top > 0
   )
 })
+
+const commonParams = computed(() => {
+  return {
+    eventEnable: eventEnable.value,
+    eventType: config.value.events.type
+  }
+})
 </script>
 
 <template>
@@ -422,7 +438,7 @@ const freezeFlag = computed(() => {
         class="wrapper-inner-adaptor"
         :style="slotStyle"
         :class="{ 'pop-wrapper-inner': showActive, 'event-active': eventEnable }"
-        @mousedown="onWrapperClick"
+        @mousedown="onWrapperClickCur"
       >
         <component
           :is="findComponent(config['component'])"
@@ -447,7 +463,9 @@ const freezeFlag = computed(() => {
           :suffix-id="suffixId"
           :font-family="fontFamily"
           :active="active"
+          :common-params="commonParams"
           @onPointClick="onPointClick"
+          @onComponentEvent="onWrapperClick"
         />
       </div>
       <!--边框背景-->

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

@@ -12,6 +12,7 @@
             <el-dropdown-item
               v-for="(item, key) in trackMenu"
               :key="key"
+              @mousedown.stop
               @click="trackMenuClick(item)"
               ><span class="menu-item">{{ state.i18n_map[item] }}</span></el-dropdown-item
             >
@@ -52,7 +53,14 @@ const state = reactive({
     linkage: t('visualization.linkage'),
     linkageAndDrill: t('visualization.linkage_and_drill'),
     jump: t('visualization.jump'),
-    enlarge: t('visualization.enlarge')
+    enlarge: t('visualization.enlarge'),
+    event_jump: t('visualization.jump'),
+    event_download: t('visualization.download'),
+    event_share: t('visualization.share'),
+    event_fullScreen: t('visualization.fullscreen'),
+    event_showHidden: t('visualization.pop_area'),
+    event_refreshDataV: t('visualization.refresh'),
+    event_refreshView: t('visualization.refresh_view')
   }
 })
 const visibleChange = isVisible => {

core/core-frontend/src/custom-component/indicator/DeIndicator.vue

@@ -17,6 +17,11 @@ import { isDashboard, trackBarStyleCheck } from '@/utils/canvasUtils'
 import ViewTrackBar from '@/components/visualization/ViewTrackBar.vue'
 
 const props = defineProps({
+  // 公共参数集
+  commonParams: {
+    type: Object,
+    required: false
+  },
   element: {
     type: Object,
     default() {
@@ -60,7 +65,7 @@ const props = defineProps({
   }
 })
 
-const { view, scale, terminal, showPosition } = toRefs(props)
+const { view, scale, terminal, showPosition, commonParams } = toRefs(props)
 
 const dvMainStore = dvMainStoreWithOut()
 const dataVMobile = !isDashboard() && isMobile()
@@ -76,8 +81,8 @@ const state = reactive({
   totalItems: 0,
   trackBarStyle: {
     position: 'absolute',
-    left: '50px',
-    top: '50px'
+    left: '50%',
+    top: '50%'
   }
 })
 
@@ -200,7 +205,13 @@ const formattedResult = computed(() => {
   return _result
 })
 
-const emit = defineEmits(['onPointClick', 'onChartClick', 'onDrillFilters', 'onJumpClick'])
+const emit = defineEmits([
+  'onPointClick',
+  'onChartClick',
+  'onDrillFilters',
+  'onJumpClick',
+  'onComponentEvent'
+])
 const contentStyle = ref<CSSProperties>({
   display: 'flex',
   'flex-direction': 'column',
@@ -279,7 +290,7 @@ const renderChart = async view => {
   recursionTransObj(customStyleTrans, chart.customStyle, scale.value, terminal.value)
 
   if (chart.customAttr) {
-    const { indicator, indicatorName, basicStyle } = chart.customAttr
+    const { indicator, indicatorName } = chart.customAttr
 
     if (indicator) {
       switch (indicator.hPosition) {
@@ -442,6 +453,15 @@ const trackClick = trackAction => {
       if (mobileInPc.value && !inMobile.value) return
       emit('onJumpClick', jumpParam)
       break
+    case 'event_jump':
+    case 'event_download':
+    case 'event_share':
+    case 'event_fullScreen':
+    case 'event_showHidden':
+    case 'event_refreshDataV':
+    case 'event_refreshView':
+      emit('onComponentEvent', jumpParam)
+      break
     default:
       break
   }
@@ -479,6 +499,9 @@ const trackMenu = computed(() => {
   ) {
     trackMenuInfo = ['linkageAndDrill']
   }
+  if (commonParams.value?.eventEnable) {
+    trackMenuInfo.push('event_' + commonParams.value?.eventType)
+  }
   return trackMenuInfo
 })
 
@@ -501,29 +524,31 @@ const action = param => {
     // 只有一个事件直接调用
     trackClick(trackMenu.value[0])
   } else {
-    // 图表关联多个事件
-    const barStyleTemp = {
-      left: param.x - 50,
-      top: param.y + 10
-    }
-    trackBarStyleCheck(props.element, barStyleTemp, props.scale, trackMenu.value.length)
-    if (dataVMobile) {
-      state.trackBarStyle.left = barStyleTemp.left + 40 + 'px'
-      state.trackBarStyle.top = barStyleTemp.top + 70 + 'px'
-    } else {
-      state.trackBarStyle.left = barStyleTemp.left + 'px'
-      state.trackBarStyle.top = barStyleTemp.top + 'px'
-    }
-
-    viewTrack.value.trackButtonClick(view.value.id)
+    setTimeout(() => {
+      const barStyleTemp = {
+        left: param.x - 50,
+        top: param.y + 10
+      }
+      trackBarStyleCheck(props.element, barStyleTemp, props.scale, trackMenu.value.length)
+      if (dataVMobile) {
+        state.trackBarStyle.left = barStyleTemp.left + 40 + 'px'
+        state.trackBarStyle.top = barStyleTemp.top + 70 + 'px'
+      } else {
+        state.trackBarStyle.left = barStyleTemp.left + 'px'
+        state.trackBarStyle.top = barStyleTemp.top + 'px'
+      }
+      viewTrack.value.trackButtonClick()
+    }, 200)
   }
 }
 
-const onPointClick = () => {
+const onPointClick = e => {
   if (view.value?.yAxis?.length) {
     const axis = view.value.yAxis[0]
     // 模拟点击
     const params = {
+      x: e.offsetX,
+      y: e.offsetY,
       data: {
         name: axis.name,
         dimensionList: view.value.xAxis,
@@ -542,7 +567,7 @@ defineExpose({
 </script>
 
 <template>
-  <div :class="{ 'menu-point': showCursor }" :style="contentStyle" @click="onPointClick">
+  <div :class="{ 'menu-point': showCursor }" :style="contentStyle" @mousedown="onPointClick">
     <view-track-bar
       ref="viewTrack"
       :track-menu="trackMenu"

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -4,6 +4,11 @@ import Chart from '@/views/chart/components/views/index.vue'
 import { isISOMobile } from '@/utils/utils'
 
 const props = defineProps({
+  // 公共参数集
+  commonParams: {
+    type: Object,
+    required: false
+  },
   active: {
     type: Boolean,
     default: false
@@ -90,7 +95,7 @@ const autoStyle = computed(() => {
     return {}
   }
 })
-const emits = defineEmits(['onPointClick'])
+const emits = defineEmits(['onPointClick', 'onComponentEvent'])
 
 const onPointClick = param => {
   emits('onPointClick', param)
@@ -109,7 +114,9 @@ const onPointClick = param => {
       :disabled="disabled"
       :suffixId="suffixId"
       :font-family="fontFamily"
+      :common-params="commonParams"
       @onPointClick="onPointClick"
+      @onComponentEvent="() => emits('onComponentEvent')"
       :opt-type="optType"
     ></chart>
   </div>

core/core-frontend/src/locales/en.ts

@@ -3086,7 +3086,7 @@ export default {
     board_radius: 'Border Radius',
     enable_event_binding: 'Enable Event Binding',
     event_binding_tips:
-      'Event bindings will take effect after exiting edit mode. When rich text or metric cards have event binding enabled, their internal click events will be disabled.',
+      'Event bindings will take effect after exiting edit mode. When rich text have event binding enabled, their internal click events will be disabled.',
     input_url_tips: 'Please enter the redirect URL',
     edit_title: 'Edit Title',
     custom_sort: 'Custom Sort',

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

@@ -3008,7 +3008,7 @@ export default {
     board_width: '线宽',
     board_radius: '圆角',
     enable_event_binding: '开启事件绑定',
-    event_binding_tips: '事件绑定需退出编辑模式后生效,富文本、指标卡开启绑定事件则内部点击事件失效',
+    event_binding_tips: '事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效',
     input_url_tips: '请输入跳转地址',
     edit_title: '编辑标题',
     custom_sort: '自定义排序',

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

@@ -68,7 +68,7 @@ const appearanceStore = useAppearanceStoreWithOut()
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 const isIframe = computed(() => appStore.getIsIframe)
 
-const emit = defineEmits(['onPointClick'])
+const emit = defineEmits(['onPointClick', 'onComponentEvent'])
 
 const {
   nowPanelJumpInfo,
@@ -78,11 +78,15 @@ const {
   canvasStyleData,
   mobileInPc,
   inMobile,
-  editMode,
-  hiddenListStatus
+  editMode
 } = storeToRefs(dvMainStore)
 
 const props = defineProps({
+  // 公共参数集
+  commonParams: {
+    type: Object,
+    required: false
+  },
   active: {
     type: Boolean,
     default: false
@@ -1189,11 +1193,13 @@ const clearG2Tooltip = () => {
         :show-position="showPosition"
         :suffixId="suffixId"
         :font-family="fontFamily"
+        :common-params="commonParams"
         @touchstart="clearG2Tooltip"
         @onChartClick="chartClick"
         @onPointClick="onPointClick"
         @onDrillFilters="onDrillFilters"
         @onJumpClick="jumpClick"
+        @onComponentEvent="() => emit('onComponentEvent')"
       />
       <chart-component-g2-plot
         :scale="scale"