Merge pull request #9775 from dataease/pr@dev-v2@feat_view-inject

feat(图表): 嵌入式图表支持外部参数

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

@@ -236,15 +236,19 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
   }
 }
 
-// 目标校验： 需要校验targetDvId 是否是当前可视化资源ID
+// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
 const winMsgHandle = event => {
   console.info('PostMessage Params Received')
   const msgInfo = event.data
-  // 校验targetDvId
-  if (msgInfo && msgInfo.type === 'attachParams' && msgInfo.targetDvId === dvInfo.value.id + '') {
+  // 校验targetSourceId
+  if (
+    msgInfo &&
+    msgInfo.type === 'attachParams' &&
+    msgInfo.targetSourceId === dvInfo.value.id + ''
+  ) {
     const attachParam = msgInfo.params
     if (attachParam) {
-      dvMainStore.addOuterParamsFilter(attachParam, 'outer')
+      dvMainStore.addOuterParamsFilter(attachParam, componentData.value, 'outer')
     }
   }
 }

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

@@ -73,7 +73,7 @@ onBeforeMount(async () => {
         dashboardPreview.value.restore()
       })
       if (attachParam) {
-        dvMainStore.addOuterParamsFilter(attachParam)
+        dvMainStore.addOuterParamsFilter(attachParam, canvasDataResult, 'outer')
       }
     }
   )

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

@@ -5,21 +5,41 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useEmbedded } from '@/store/modules/embedded'
 import { check } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
+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'
 const { wsCache } = useCache()
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const config = ref()
 const viewInfo = ref()
 const userViewEnlargeRef = ref()
+const dvMainStore = dvMainStoreWithOut()
+const { t } = useI18n()
 
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  chartId: null
 })
 
+// 目标校验： 需要校验targetSourceId 是否是当前可视化资源ID
+const winMsgHandle = event => {
+  console.info('PostMessage Params Received')
+  const msgInfo = event.data
+  // 校验targetSourceId
+  if (msgInfo && msgInfo.type === 'attachParams' && msgInfo.targetSourceId === state.chartId + '') {
+    const attachParam = msgInfo.params
+    if (attachParam) {
+      dvMainStore.addOuterParamsFilter(attachParam, state.canvasDataPreview, 'outer')
+    }
+  }
+}
+
 const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
@@ -34,6 +54,25 @@ onBeforeMount(async () => {
   if (!checkResult) {
     return
   }
+  state.chartId = embeddedStore.dvId
+  window.addEventListener('message', winMsgHandle)
+
+  // 添加外部参数
+  let attachParam
+  await getOuterParamsInfo(embeddedStore.dvId).then(rsp => {
+    dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
+  })
+
+  // div嵌入
+  if (embeddedStore.outerParams) {
+    try {
+      attachParam = JSON.parse(embeddedStore.outerParams)
+    } catch (e) {
+      console.error(e)
+      ElMessage.error(t('visualization.outer_param_decode_error'))
+    }
+  }
+
   initCanvasDataPrepare(
     embeddedStore.dvId,
     embeddedStore.busiFlag,
@@ -49,6 +88,9 @@ onBeforeMount(async () => {
       state.canvasViewInfoPreview = canvasViewInfoPreview
       state.dvInfo = dvInfo
       state.curPreviewGap = curPreviewGap
+      if (attachParam) {
+        dvMainStore.addOuterParamsFilter(attachParam, canvasDataResult)
+      }
 
       viewInfo.value = canvasViewInfoPreview[embeddedStore.chartId]
       ;(

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

@@ -850,9 +850,8 @@ export const dvMainStore = defineStore('dataVisualization', {
       })
     },
     // 添加外部参数的过滤条件
-    addOuterParamsFilter(params, source = 'inner') {
+    addOuterParamsFilter(params, curComponentData = this.componentData, source = 'inner') {
       // params 结构 {key1:value1,key2:value2}
-      const curComponentData = this.componentData
       if (params) {
         const preActiveComponentIds = []
         const trackInfo = this.nowPanelOuterParamsInfo