Merge pull request #9770 from dataease/pr@dev-v2@feat_div-inject-params

feat(仪表板): 仪表板数据大屏支持div嵌入外部传参

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

@@ -236,6 +236,19 @@ const initWatermark = (waterDomId = 'preview-canvas-main') => {
   }
 }
 
+// 目标校验： 需要校验targetDvId 是否是当前可视化资源ID
+const winMsgHandle = event => {
+  console.info('PostMessage Params Received')
+  const msgInfo = event.data
+  // 校验targetDvId
+  if (msgInfo && msgInfo.type === 'attachParams' && msgInfo.targetDvId === dvInfo.value.id + '') {
+    const attachParam = msgInfo.params
+    if (attachParam) {
+      dvMainStore.addOuterParamsFilter(attachParam, 'outer')
+    }
+  }
+}
+
 onMounted(() => {
   initRefreshTimer()
   resetLayout()
@@ -245,10 +258,12 @@ onMounted(() => {
     restore()
     initWatermark()
   })
+  window.addEventListener('message', winMsgHandle)
 })
 
 onBeforeUnmount(() => {
   clearInterval(refreshTimer.value)
+  window.removeEventListener('message', winMsgHandle)
 })
 
 const userViewEnlargeOpen = (opt, item) => {

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

@@ -5,10 +5,15 @@ 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 dashboardPreview = ref(null)
+const { t } = useI18n()
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
@@ -16,6 +21,8 @@ const state = reactive({
   dvInfo: null,
   curPreviewGap: 0
 })
+const dvMainStore = dvMainStoreWithOut()
+
 const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
@@ -30,6 +37,23 @@ onBeforeMount(async () => {
   if (!checkResult) {
     return
   }
+
+  // 添加外部参数
+  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'))
+    }
+  }
+
   initCanvasData(
     embeddedStore.dvId,
     embeddedStore.busiFlag,
@@ -48,6 +72,9 @@ onBeforeMount(async () => {
       nextTick(() => {
         dashboardPreview.value.restore()
       })
+      if (attachParam) {
+        dvMainStore.addOuterParamsFilter(attachParam)
+      }
     }
   )
 })

core/core-frontend/src/pages/panel/main.ts

@@ -70,6 +70,7 @@ const setupAll = async (
   dom: string,
   type: string,
   busiFlag: string,
+  outerParams: string,
   token: string,
   baseUrl: string,
   dvId: string,
@@ -86,6 +87,7 @@ const setupAll = async (
   const embeddedStore = useEmbedded()
   embeddedStore.setType(type)
   embeddedStore.setBusiFlag(busiFlag)
+  embeddedStore.setOuterParams(outerParams)
   embeddedStore.setToken(token)
   embeddedStore.setBaseUrl(baseUrl)
   embeddedStore.setDvId(dvId)
@@ -129,6 +131,7 @@ class DataEaseBi {
     | 'DashboardPanel'
   dvId: string
   busiFlag: 'dashboard' | 'dataV'
+  outerParams: string
   resourceId: string
   pid: string
   chartId: string
@@ -139,6 +142,7 @@ class DataEaseBi {
     this.type = type
     this.token = options.token
     this.busiFlag = options.busiFlag
+    this.outerParams = options.outerParams
     this.baseUrl = options.baseUrl
     this.dvId = options.dvId
     this.pid = options.pid
@@ -152,6 +156,7 @@ class DataEaseBi {
       this.deOptions.container,
       this.type,
       this.busiFlag,
+      this.outerParams,
       this.token,
       this.baseUrl,
       this.dvId,
@@ -169,6 +174,7 @@ class DataEaseBi {
     const embeddedStore = useEmbedded()
     embeddedStore.setType(null)
     embeddedStore.setBusiFlag(null)
+    embeddedStore.setOuterParams(null)
     embeddedStore.setToken(null)
     embeddedStore.setBaseUrl(null)
     embeddedStore.setDvId(null)
@@ -179,6 +185,7 @@ class DataEaseBi {
     this.type = null
     this.token = null
     this.busiFlag = null
+    this.outerParams = null
     this.baseUrl = null
     this.dvId = null
     this.pid = null

core/core-frontend/src/store/modules/embedded.ts

@@ -4,6 +4,7 @@ interface AppState {
   type: string
   token: string
   busiFlag: string
+  outerParams: string
   baseUrl: string
   dvId: string
   pid: string
@@ -17,6 +18,7 @@ export const userStore = defineStore('embedded', {
       type: '',
       token: '',
       busiFlag: '',
+      outerParams: '',
       baseUrl: '',
       dvId: '',
       pid: '',
@@ -34,6 +36,9 @@ export const userStore = defineStore('embedded', {
     getBusiFlag(): string {
       return this.busiFlag
     },
+    getOuterParams(): string {
+      return this.outerParams
+    },
     getBaseUrl(): string {
       return this.baseUrl
     },
@@ -53,6 +58,7 @@ export const userStore = defineStore('embedded', {
       return {
         embeddedToken: this.token,
         busiFlag: this.busiFlag,
+        outerParams: this.outerParams,
         type: this.type,
         dvId: this.dvId,
         chartId: this.chartId,
@@ -71,6 +77,9 @@ export const userStore = defineStore('embedded', {
     setBusiFlag(busiFlag: string) {
       this.busiFlag = busiFlag
     },
+    setOuterParams(outerParams: string) {
+      this.outerParams = outerParams
+    },
     setBaseUrl(baseUrl: string) {
       this.baseUrl = baseUrl
     },
@@ -90,6 +99,7 @@ export const userStore = defineStore('embedded', {
       this.type = data['type']
       this.token = data['embeddedToken']
       this.busiFlag = data['busiFlag']
+      this.outerParams = data['outerParams']
       this.dvId = data['dvId']
       this.chartId = data['chartId']
       this.pid = data['pid']

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, computed, onUnmounted } from 'vue'
+import { onMounted, reactive } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import router from '@/router'
 import { initCanvasData } from '@/utils/canvasUtils'
@@ -10,8 +10,6 @@ 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()
@@ -32,19 +30,9 @@ 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
@@ -84,16 +72,6 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
     }
   }
 
-  // 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'))
-    }
-  }
-
   initCanvasData(
     dvId,
     dvType,
@@ -123,19 +101,6 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
   )
 }
 
-// 目标校验： 需要校验targetDvId 是否是当前可视化资源ID
-const winMsgHandle = event => {
-  console.info('PostMessage Params Received')
-  const msgInfo = event.data
-  // 校验targetDvId
-  if (msgInfo && msgInfo.type === 'attachParams' && msgInfo.targetDvId === state.dvInfo.id + '') {
-    const attachParam = msgInfo.params
-    if (attachParam) {
-      dvMainStore.addOuterParamsFilter(attachParam, 'outer')
-    }
-  }
-}
-
 let p = null
 const XpackLoaded = () => p(true)
 onMounted(async () => {
@@ -146,11 +111,6 @@ onMounted(async () => {
     return
   }
   dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
-  window.addEventListener('message', winMsgHandle)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('message', winMsgHandle)
 })
 
 defineExpose({