Merge pull request #9781 from dataease/pr@dev-v2@feat_send-message

feat(图表): 嵌入式大屏、图表支持向外部系统传参

core/core-frontend/src/pages/panel/DashboardPreview.vue

@@ -47,7 +47,9 @@ onBeforeMount(async () => {
   // div嵌入
   if (embeddedStore.outerParams) {
     try {
-      attachParam = JSON.parse(embeddedStore.outerParams)
+      const outerPramsParse = JSON.parse(embeddedStore.outerParams)
+      attachParam = outerPramsParse.attachParam
+      dvMainStore.setEmbeddedCallBack(outerPramsParse.callBackFlag || 'no')
     } catch (e) {
       console.error(e)
       ElMessage.error(t('visualization.outer_param_decode_error'))

core/core-frontend/src/pages/panel/ViewWrapper.vue

@@ -66,7 +66,9 @@ onBeforeMount(async () => {
   // div嵌入
   if (embeddedStore.outerParams) {
     try {
-      attachParam = JSON.parse(embeddedStore.outerParams)
+      const outerPramsParse = JSON.parse(embeddedStore.outerParams)
+      attachParam = outerPramsParse.attachParam
+      dvMainStore.setEmbeddedCallBack(outerPramsParse.callBackFlag || 'no')
     } catch (e) {
       console.error(e)
       ElMessage.error(t('visualization.outer_param_decode_error'))

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -32,6 +32,7 @@ export const dvMainStore = defineStore('dataVisualization', {
         chartAreaCollapse: false,
         datasetAreaCollapse: false
       },
+      embeddedCallBack: 'no', // 嵌入模式是否允许反馈参数
       editMode: 'edit', // 编辑器模式 edit preview
       mobileInPc: false,
       firstLoadMap: [],
@@ -173,6 +174,9 @@ export const dvMainStore = defineStore('dataVisualization', {
     }
   },
   actions: {
+    setEmbeddedCallBack(value) {
+      this.embeddedCallBack = value
+    },
     setPublicLinkStatus(value) {
       this.publicLinkStatus = value
     },

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

@@ -19,7 +19,8 @@ import { trackBarStyleCheck } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 
 const dvMainStore = dvMainStoreWithOut()
-const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc } = storeToRefs(dvMainStore)
+const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, embeddedCallBack } =
+  storeToRefs(dvMainStore)
 const { emitter } = useEmitt()
 const props = defineProps({
   element: {
@@ -54,7 +55,13 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick', 'resetLoading'])
+const emit = defineEmits([
+  'onPointClick',
+  'onChartClick',
+  'onDrillFilters',
+  'onJumpClick',
+  'resetLoading'
+])
 
 const { view, showPosition, scale, terminal } = toRefs(props)
 
@@ -192,9 +199,17 @@ const renderL7Plot = async (chart: ChartObj, chartView: L7PlotChartView<any, any
   }, 500)
 }
 
+const pointClickTrans = () => {
+  if (embeddedCallBack.value === 'yes') {
+    trackClick('pointClick')
+  }
+}
+
 const action = param => {
-  // 下钻 联动 跳转
   state.pointParam = param.data
+  // 点击
+  pointClickTrans()
+  // 下钻 联动 跳转
   state.linkageActiveParam = {
     category: state.pointParam.data.category ? state.pointParam.data.category : 'NO_DATA',
     name: state.pointParam.data.name ? state.pointParam.data.name : 'NO_DATA'
@@ -246,7 +261,18 @@ const trackClick = trackAction => {
     quotaList: quotaList
   }
 
+  const clickParams = {
+    option: 'pointClick',
+    name: checkName,
+    viewId: view.value.id,
+    dimensionList: state.pointParam.data.dimensionList,
+    quotaList: quotaList
+  }
+
   switch (trackAction) {
+    case 'pointClick':
+      emit('onPointClick', clickParams)
+      break
     case 'linkageAndDrill':
       dvMainStore.addViewTrackFilter(linkageParam)
       emit('onChartClick', param)

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

@@ -29,7 +29,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
 
 const dvMainStore = dvMainStoreWithOut()
-const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, canvasStyleData } =
+const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, canvasStyleData, embeddedCallBack } =
   storeToRefs(dvMainStore)
 const { emitter } = useEmitt()
 
@@ -66,7 +66,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick'])
+const emit = defineEmits(['onPointClick', 'onChartClick', 'onDrillFilters', 'onJumpClick'])
 
 const { view, showPosition, scale, terminal } = toRefs(props)
 
@@ -241,10 +241,17 @@ const handleCurrentChange = pageNum => {
   const chart = { ...view.value, chartExtRequest: extReq }
   calcData(chart, null, false)
 }
+const pointClickTrans = () => {
+  if (embeddedCallBack.value === 'yes') {
+    trackClick('pointClick')
+  }
+}
 
 const action = param => {
-  // 下钻 联动 跳转
   state.pointParam = param
+  // 点击
+  pointClickTrans()
+  // 下钻 联动 跳转
   if (trackMenu.value.length < 2) {
     // 只有一个事件直接调用
     trackClick(trackMenu.value[0])
@@ -282,7 +289,19 @@ const trackClick = trackAction => {
     quotaList: state.pointParam.data.quotaList,
     sourceType: state.pointParam.data.sourceType
   }
+
+  const clickParams = {
+    option: 'pointClick',
+    name: state.pointParam.data.name,
+    viewId: view.value.id,
+    dimensionList: state.pointParam.data.dimensionList,
+    quotaList: state.pointParam.data.quotaList
+  }
+
   switch (trackAction) {
+    case 'pointClick':
+      emit('onPointClick', clickParams)
+      break
     case 'linkageAndDrill':
       dvMainStore.addViewTrackFilter(linkageParam)
       emit('onChartClick', param)

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

@@ -40,6 +40,7 @@ import { Base64 } from 'js-base64'
 import DeRichTextView from '@/custom-component/rich-text/DeRichTextView.vue'
 import ChartEmptyInfo from '@/views/chart/components/views/components/ChartEmptyInfo.vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { useAppStoreWithOut } from '@/store/modules/app'
 
 const { wsCache } = useCache()
 const chartComponent = ref<any>()
@@ -47,6 +48,9 @@ const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 
 let innerRefreshTimer = null
+const appStore = useAppStoreWithOut()
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
+const isIframe = computed(() => appStore.getIsIframe)
 
 const { nowPanelJumpInfo, publicLinkStatus, dvInfo, curComponent, canvasStyleData, mobileInPc } =
   storeToRefs(dvMainStore)
@@ -281,6 +285,21 @@ const drillJump = (index: number) => {
   calcData(view.value)
 }
 
+const onPointClick = param => {
+  try {
+    console.info('de_inner_params send')
+    const msg = {
+      type: 'de_inner_params',
+      sourceDvId: dvInfo.value.id,
+      sourceViewId: view.value.id,
+      message: Base64.encode(param)
+    }
+    window.parent.postMessage(msg, '*')
+  } catch (e) {
+    console.warn('de_inner_params send error')
+  }
+}
+
 const chartClick = param => {
   // 下钻字段第一个没有在维度中不允许下钻
   const xIds = view.value.xAxis.map(ele => ele.id)
@@ -710,6 +729,7 @@ const titleIconStyle = computed(() => {
         v-else-if="showChartView(ChartLibraryType.G2_PLOT, ChartLibraryType.L7_PLOT)"
         ref="chartComponent"
         @onChartClick="chartClick"
+        @onPointClick="onPointClick"
         @onDrillFilters="onDrillFilters"
         @onJumpClick="jumpClick"
         @resetLoading="() => (loading = false)"
@@ -721,6 +741,7 @@ const titleIconStyle = computed(() => {
         :element="element"
         v-else-if="showChartView(ChartLibraryType.S2)"
         ref="chartComponent"
+        @onPointClick="onPointClick"
         @onChartClick="chartClick"
         @onDrillFilters="onDrillFilters"
         @onJumpClick="jumpClick"

core/core-frontend/src/views/data-visualization/PreviewCanvas.vue

@@ -105,11 +105,12 @@ let p = null
 const XpackLoaded = () => p(true)
 onMounted(async () => {
   await new Promise(r => (p = r))
-  const { dvId, dvType } = router.currentRoute.value.query
+  const { dvId, dvType, callBackFlag } = router.currentRoute.value.query
   if (dvId) {
     loadCanvasDataAsync(dvId, dvType)
     return
   }
+  dvMainStore.setEmbeddedCallBack(callBackFlag || 'no')
   dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
 })