feat(仪表板): iframe嵌入支持外部参数变动

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
 })