From 515f44eeb31024c10f7b8ad4e7ad546fe6c9213f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 21 May 2024 18:16:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20iframe?=
 =?UTF-8?q?=E5=B5=8C=E5=85=A5=E6=94=AF=E6=8C=81=E5=A4=96=E9=83=A8=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E5=8F=98=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/PreviewCanvas.vue      | 51 +++++++++++++++++--
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
index 8b4c21b366..93c9ca5cdf 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, computed, onUnmounted } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import router from '@/router'
 import { initCanvasData } from '@/utils/canvasUtils'
@@ -10,6 +10,9 @@ import { getOuterParamsInfo } from '@/api/visualization/outerParams'
 import { ElMessage } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
 import { XpackComponent } from '@/components/plugin'
+import { useAppStoreWithOut } from '@/store/modules/app'
+const appStore = useAppStoreWithOut()
+
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
 const state = reactive({
@@ -29,9 +32,19 @@ const props = defineProps({
   isSelector: {
     type: Boolean,
     default: false
+  },
+  // JSON String 格式
+  embedParams: {
+    type: String,
+    required: false
   }
 })
 
+// div嵌入
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
+// iframe嵌入
+const isIframe = computed(() => appStore.getIsIframe)
+
 const loadCanvasDataAsync = async (dvId, dvType) => {
   const { jumpInfoParam } = router.currentRoute.value.query
   let jumpParam
@@ -55,14 +68,26 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
   }
 
   // 添加外部参数
-  const attachParamsEncode = router.currentRoute.value.query.attachParams
   let attachParam
+  await getOuterParamsInfo(dvId).then(rsp => {
+    dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
+  })
+
+  // 外部参数（iframe 或者 iframe嵌入）
+  const attachParamsEncode = router.currentRoute.value.query.attachParams
   if (attachParamsEncode) {
     try {
       attachParam = JSON.parse(Base64.decode(decodeURIComponent(attachParamsEncode)))
-      await getOuterParamsInfo(dvId).then(rsp => {
-        dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
-      })
+    } catch (e) {
+      console.error(e)
+      ElMessage.error(t('visualization.outer_param_decode_error'))
+    }
+  }
+
+  // div嵌入
+  if (props.embedParams && isDataEaseBi.value) {
+    try {
+      attachParam = JSON.parse(props.embedParams)
     } catch (e) {
       console.error(e)
       ElMessage.error(t('visualization.outer_param_decode_error'))
@@ -97,6 +122,16 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
     }
   )
 }
+const winMsgHandel = event => {
+  const msgInfo = JSON.parse(event.data.info)
+  if (msgInfo.type === 'attachParams') {
+    const attachParam = msgInfo.params
+    if (attachParam) {
+      dvMainStore.addOuterParamsFilter(attachParam)
+    }
+  }
+}
+
 let p = null
 const XpackLoaded = () => p(true)
 onMounted(async () => {
@@ -107,7 +142,13 @@ onMounted(async () => {
     return
   }
   dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
+  window.addEventListener('embedParamsMessage', winMsgHandel)
 })
+
+onUnmounted(() => {
+  window.removeEventListener('embedParamsMessage', winMsgHandel)
+})
+
 defineExpose({
   loadCanvasDataAsync
 })