refactor(嵌入式): 图表嵌入式消息发送优化

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

@@ -83,7 +83,7 @@ const { config, showPosition, index, canvasStyleData, canvasViewInfo, dvInfo, se
   toRefs(props)
 let currentInstance
 const component = ref(null)
-const emits = defineEmits(['userViewEnlargeOpen'])
+const emits = defineEmits(['userViewEnlargeOpen', 'onPointClick'])
 
 const htmlToImage = () => {
   setTimeout(() => {
@@ -180,6 +180,10 @@ const commonBackgroundSvgInner = computed(() => {
   }
 })
 
+const onPointClick = param => {
+  emits('onPointClick', param)
+}
+
 const deepScale = computed(() => scale.value / 100)
 </script>
 
@@ -234,6 +238,7 @@ const deepScale = computed(() => scale.value / 100)
           :scale="deepScale"
           :disabled="true"
           :is-edit="false"
+          @onPointClick="onPointClick"
         />
       </div>
     </div>

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

@@ -13,9 +13,10 @@ import { isMainCanvas } from '@/utils/canvasUtils'
 import { activeWatermark } from '@/components/watermark/watermark'
 import { personInfoApi } from '@/api/user'
 import router from '@/router'
+import { XpackComponent } from '@/components/plugin'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc } = storeToRefs(dvMainStore)
-
+const openHandler = ref(null)
 const props = defineProps({
   canvasStyleData: {
     type: Object,
@@ -281,6 +282,32 @@ const userViewEnlargeOpen = (opt, item) => {
 const handleMouseDown = () => {
   dvMainStore.setCurComponent({ component: null, index: null })
 }
+
+const onPointClick = param => {
+  try {
+    console.info('de_inner_params send')
+    if (window['dataease-embedded-host'] && openHandler?.value) {
+      const pm = {
+        methodName: 'embeddedInteractive',
+        args: {
+          eventName: 'de_inner_params',
+          args: param
+        }
+      }
+      openHandler.value.invokeMethod(pm)
+    } else {
+      console.info('de_inner_params send to host')
+      const targetPm = {
+        type: 'dataease-embedded-interactive',
+        eventName: 'de_inner_params',
+        args: param
+      }
+      window.parent.postMessage(targetPm, '*')
+    }
+  } catch (e) {
+    console.warn('de_inner_params send error')
+  }
+}
 defineExpose({
   restore
 })
@@ -316,9 +343,11 @@ defineExpose({
       :scale="mobileInPc ? 100 : scaleWidth"
       :is-selector="props.isSelector"
       @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
+      @onPointClick="onPointClick"
     />
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
   </div>
+  <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 
 <style lang="less" scoped>

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

@@ -71,6 +71,11 @@ const autoStyle = computed(() => {
     return {}
   }
 })
+const emits = defineEmits(['onPointClick'])
+
+const onPointClick = param => {
+  emits('onPointClick', param)
+}
 </script>
 
 <template>
@@ -83,6 +88,7 @@ const autoStyle = computed(() => {
       :show-position="showPosition"
       :search-count="searchCount"
       :disabled="disabled"
+      @onPointClick="onPointClick"
     ></chart>
   </div>
 </template>

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

@@ -9,6 +9,7 @@ import { getOuterParamsInfo } from '@/api/visualization/outerParams'
 import { ElMessage } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useI18n } from '@/hooks/web/useI18n'
+import { XpackComponent } from '@/components/plugin'
 const { wsCache } = useCache()
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
@@ -17,7 +18,7 @@ const viewInfo = ref()
 const userViewEnlargeRef = ref()
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
-
+const openHandler = ref(null)
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
@@ -124,6 +125,32 @@ onBeforeMount(async () => {
 const userViewEnlargeOpen = () => {
   userViewEnlargeRef.value.dialogInit(state.canvasStylePreview, viewInfo.value, config.value)
 }
+
+const onPointClick = param => {
+  try {
+    console.info('de_inner_params send')
+    if (window['dataease-embedded-host'] && openHandler?.value) {
+      const pm = {
+        methodName: 'embeddedInteractive',
+        args: {
+          eventName: 'de_inner_params',
+          args: param
+        }
+      }
+      openHandler.value.invokeMethod(pm)
+    } else {
+      console.info('de_inner_params send to host')
+      const targetPm = {
+        type: 'dataease-embedded-interactive',
+        eventName: 'de_inner_params',
+        args: param
+      }
+      window.parent.postMessage(targetPm, '*')
+    }
+  } catch (e) {
+    console.warn('de_inner_params send error')
+  }
+}
 </script>
 
 <template>
@@ -136,9 +163,11 @@ const userViewEnlargeOpen = () => {
       :dv-info="state.dvInfo"
       :canvas-view-info="state.canvasViewInfoPreview"
       @userViewEnlargeOpen="userViewEnlargeOpen"
+      @onPointClick="onPointClick"
     />
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
   </div>
+  <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 
 <style lang="less" scoped>

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

@@ -50,7 +50,8 @@ const dvMainStore = dvMainStoreWithOut()
 let innerRefreshTimer = null
 const appStore = useAppStoreWithOut()
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
-const isIframe = computed(() => appStore.getIsIframe)
+
+const emit = defineEmits(['onPointClick'])
 
 const { nowPanelJumpInfo, publicLinkStatus, dvInfo, curComponent, canvasStyleData, mobileInPc } =
   storeToRefs(dvMainStore)
@@ -286,17 +287,12 @@ const drillJump = (index: number) => {
 
 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(JSON.stringify(param))
     }
-    if (window['dataease-embedded-host']) {
+    emit('onPointClick', msg)
-      console.info('de_inner_params send to host')
-      window['dataease-embedded-host'].postMessage(msg, '*')
-    }
   } catch (e) {
     console.warn('de_inner_params send error')
   }