fix(嵌入式): DIV 嵌入视图优化

core/core-frontend/src/config/axios/service.ts

@@ -10,6 +10,7 @@ import axios, {
 import { tryShowLoading, tryHideLoading } from '@/utils/loading'
 import qs from 'qs'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
+import { useEmbedded } from '@/store/modules/embedded'
 import { useLinkStoreWithOut } from '@/store/modules/link'
 import { config } from './config'
 import { configHandler } from './refresh'
@@ -31,9 +32,10 @@ const { result_code } = config
 import { useCache } from '@/hooks/web/useCache'
 
 const { wsCache } = useCache()
+const embeddedStore = useEmbedded()
 
-export const PATH_URL = window.DataEaseBi
-  ? window.DataEaseBi?.baseUrl + 'de2api/'
+export const PATH_URL = embeddedStore.baseUrl
+  ? embeddedStore?.baseUrl + 'de2api/'
   : import.meta.env.VITE_API_BASEPATH
 
 export interface AxiosInstanceWithLoading extends AxiosInstance {
@@ -101,14 +103,14 @@ service.interceptors.request.use(
     ) {
       config.data = qs.stringify(config.data)
     }
-    if (window.DataEaseBi?.baseUrl) {
-      config.baseURL = window.DataEaseBi.baseUrl + 'de2api/'
+    if (embeddedStore.baseUrl) {
+      config.baseURL = embeddedStore.baseUrl + 'de2api/'
     }
 
     if (linkStore.getLinkToken) {
       ;(config.headers as AxiosRequestHeaders)['X-DE-LINK-TOKEN'] = linkStore.getLinkToken
-    } else if (window.DataEaseBi?.token) {
-      ;(config.headers as AxiosRequestHeaders)['X-EMBEDDED-TOKEN'] = window.DataEaseBi.token
+    } else if (embeddedStore.token) {
+      ;(config.headers as AxiosRequestHeaders)['X-EMBEDDED-TOKEN'] = embeddedStore.token
     }
     if (wsCache.get('user.language')) {
       const key = wsCache.get('user.language')

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

@@ -2,10 +2,12 @@
 import { ref, reactive, onBeforeMount, nextTick } from 'vue'
 import { initCanvasData } from '@/utils/canvasUtils'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
+import { useEmbedded } from '@/store/modules/embedded'
 import { check } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
 const { wsCache } = useCache()
 const interactiveStore = interactiveStoreWithOut()
+const embeddedStore = useEmbedded()
 const dashboardPreview = ref(null)
 const state = reactive({
   canvasDataPreview: null,
@@ -18,19 +20,19 @@ const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
   }
-  const request = { busiFlag: window.DataEaseBi.busiFlag }
+  const request = { busiFlag: embeddedStore.busiFlag }
   await interactiveStore.setInteractive(request)
-  const key = window.DataEaseBi.busiFlag === 'dataV' ? 'screen-weight' : 'panel-weight'
+  const key = embeddedStore.busiFlag === 'dataV' ? 'screen-weight' : 'panel-weight'
   return check(wsCache.get(key), resourceId, 1)
 }
 onBeforeMount(async () => {
-  const checkResult = await checkPer(window.DataEaseBi.dvId)
+  const checkResult = await checkPer(embeddedStore.dvId)
   if (!checkResult) {
     return
   }
   initCanvasData(
-    window.DataEaseBi.dvId,
-    window.DataEaseBi.busiFlag,
+    embeddedStore.dvId,
+    embeddedStore.busiFlag,
     function ({
       canvasDataResult,
       canvasStyleResult,

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

@@ -2,10 +2,12 @@
 import { ref, onBeforeMount, reactive } from 'vue'
 import { initCanvasDataPrepare } from '@/utils/canvasUtils'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
+import { useEmbedded } from '@/store/modules/embedded'
 import { check } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
 const { wsCache } = useCache()
 const interactiveStore = interactiveStoreWithOut()
+const embeddedStore = useEmbedded()
 const config = ref()
 const viewInfo = ref()
 const userViewEnlargeRef = ref()
@@ -22,19 +24,19 @@ const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
   }
-  const request = { busiFlag: window.DataEaseBi.busiFlag }
+  const request = { busiFlag: embeddedStore.busiFlag }
   await interactiveStore.setInteractive(request)
-  const key = window.DataEaseBi.busiFlag === 'dataV' ? 'screen-weight' : 'panel-weight'
+  const key = embeddedStore.busiFlag === 'dataV' ? 'screen-weight' : 'panel-weight'
   return check(wsCache.get(key), resourceId, 1)
 }
 onBeforeMount(async () => {
-  const checkResult = await checkPer(window.DataEaseBi.dvId)
+  const checkResult = await checkPer(embeddedStore.dvId)
   if (!checkResult) {
     return
   }
   initCanvasDataPrepare(
-    window.DataEaseBi.dvId,
-    window.DataEaseBi.busiFlag,
+    embeddedStore.dvId,
+    embeddedStore.busiFlag,
     function ({
       canvasDataResult,
       canvasStyleResult,
@@ -48,7 +50,7 @@ onBeforeMount(async () => {
       state.dvInfo = dvInfo
       state.curPreviewGap = curPreviewGap
 
-      viewInfo.value = canvasViewInfoPreview[window.DataEaseBi.chartId]
+      viewInfo.value = canvasViewInfoPreview[embeddedStore.chartId]
       ;(
         (canvasDataResult as unknown as Array<{
           id: string
@@ -56,14 +58,14 @@ onBeforeMount(async () => {
           propValue: Array<{ id: string }>
         }>) || []
       ).some(ele => {
-        if (ele.id === window.DataEaseBi.chartId) {
+        if (ele.id === embeddedStore.chartId) {
           config.value = ele
           return true
         }
 
         if (ele.component === 'Group') {
           return (ele.propValue || []).some(itx => {
-            if (itx.id === window.DataEaseBi.chartId) {
+            if (itx.id === embeddedStore.chartId) {
               config.value = itx
               return true
             }
@@ -97,8 +99,8 @@ const userViewEnlargeOpen = () => {
 
 <style lang="less" scoped>
 .de-view-wrapper {
-  width: 400px;
-  height: 400px;
+  width: 100%;
+  height: 100%;
   position: relative;
 }
 </style>

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

@@ -57,12 +57,23 @@ import 'normalize.css/normalize.css'
 import AppElement from './App.vue'
 import { setupI18n } from '@/plugins/vue-i18n'
 import { setupStore } from '@/store'
+import { useEmbedded } from '@/store/modules/embedded'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { setupElementPlus, setupElementPlusIcons } from '@/plugins/element-plus'
 import { setupRouter } from '@/router'
 
-const setupAll = async (dom: string, componentName: string): Promise<App<Element>> => {
-  const app = createApp(AppElement, { componentName })
+const setupAll = async (
+  dom: string,
+  type: string,
+  busiFlag: string,
+  token: string,
+  baseUrl: string,
+  dvId: string,
+  pid: string,
+  chartId: string,
+  resourceId: string
+): Promise<App<Element>> => {
+  const app = createApp(AppElement, { componentName: type })
   await setupI18n(app)
   setupStore(app)
   setupRouter(app)
@@ -70,6 +81,15 @@ const setupAll = async (dom: string, componentName: string): Promise<App<Element
   setupElementPlusIcons(app)
   const userStore = useUserStoreWithOut()
   await userStore.setUser()
+  const embeddedStore = useEmbedded()
+  embeddedStore.setType(type)
+  embeddedStore.setBusiFlag(busiFlag)
+  embeddedStore.setToken(token)
+  embeddedStore.setBaseUrl(baseUrl)
+  embeddedStore.setDvId(dvId)
+  embeddedStore.setPid(pid)
+  embeddedStore.setChartId(chartId)
+  embeddedStore.setResourceId(resourceId)
   app.mount(dom)
   return app
 }
@@ -104,7 +124,7 @@ class DataEaseBi {
   deOptions: Options
   vm: App<Element>
 
-  create(type, options) {
+  constructor(type, options) {
     this.type = type
     this.token = options.token
     this.busiFlag = options.busiFlag
@@ -117,15 +137,42 @@ class DataEaseBi {
 
   async initialize(options: Options) {
     this.deOptions = { ...defaultOptions, ...options }
-    this.vm = await setupAll(this.deOptions.container, this.type)
+    this.vm = await setupAll(
+      this.deOptions.container,
+      this.type,
+      this.busiFlag,
+      this.token,
+      this.baseUrl,
+      this.dvId,
+      this.pid,
+      this.chartId,
+      this.resourceId
+    )
   }
 
   destroy() {
     const userStore = useUserStoreWithOut()
+    const embeddedStore = useEmbedded()
     userStore.clear()
+    embeddedStore.setType(null)
+    embeddedStore.setBusiFlag(null)
+    embeddedStore.setToken(null)
+    embeddedStore.setBaseUrl(null)
+    embeddedStore.setDvId(null)
+    embeddedStore.setPid(null)
+    embeddedStore.setChartId(null)
+    embeddedStore.setResourceId(null)
     this.vm.unmount()
+    this.type = null
+    this.token = null
+    this.busiFlag = null
+    this.baseUrl = null
+    this.dvId = null
+    this.pid = null
+    this.chartId = null
+    this.resourceId = null
     this.vm = null
   }
 }
 
-window.DataEaseBi = new DataEaseBi()
+window.DataEaseBi = DataEaseBi

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

@@ -0,0 +1,83 @@
+import { defineStore } from 'pinia'
+import { store } from '../index'
+interface AppState {
+  type: string
+  token: string
+  busiFlag: string
+  baseUrl: string
+  dvId: string
+  pid: string
+  chartId: string
+  resourceId: string
+}
+
+export const userStore = defineStore('embedded', {
+  state: (): AppState => {
+    return {
+      type: '',
+      token: '',
+      busiFlag: '',
+      baseUrl: '',
+      dvId: '',
+      pid: '',
+      chartId: '',
+      resourceId: ''
+    }
+  },
+  getters: {
+    getType(): string {
+      return this.type
+    },
+    getToken(): string {
+      return this.token
+    },
+    getBusiFlag(): string {
+      return this.busiFlag
+    },
+    getBaseUrl(): string {
+      return this.baseUrl
+    },
+    getDvId(): string {
+      return this.dvId
+    },
+    getPid(): string {
+      return this.pid
+    },
+    getChartId(): string {
+      return this.chartId
+    },
+    getResourceId(): string {
+      return this.resourceId
+    }
+  },
+  actions: {
+    setType(type: string) {
+      this.type = type
+    },
+    setToken(token: string) {
+      this.token = token
+    },
+    setBusiFlag(busiFlag: string) {
+      this.busiFlag = busiFlag
+    },
+    setBaseUrl(baseUrl: string) {
+      this.baseUrl = baseUrl
+    },
+    setDvId(dvId: string) {
+      this.dvId = dvId
+    },
+    setPid(pid: string) {
+      this.pid = pid
+    },
+    setChartId(chartId: string) {
+      this.chartId = chartId
+    },
+    setResourceId(resourceId: string) {
+      this.resourceId = resourceId
+    }
+  }
+})
+
+export const useEmbedded = () => {
+  return userStore(store)
+}

core/core-frontend/src/utils/imgUtils.ts

@@ -1,10 +1,12 @@
 import html2canvas from 'html2canvas'
 import JsPDF from 'jspdf'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useEmbedded } from '@/store/modules/embedded'
 import { storeToRefs } from 'pinia'
 import { findResourceAsBase64 } from '@/api/staticResource'
 import FileSaver from 'file-saver'
 import { deepCopy } from '@/utils/utils'
+const embeddedStore = useEmbedded()
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData, componentData, canvasViewInfo, canvasViewDataInfo, dvInfo } =
   storeToRefs(dvMainStore)
@@ -20,8 +22,8 @@ export function imgUrlTrans(url) {
         ? (basePath.endsWith('/') ? basePath.substring(0, basePath.length - 1) : basePath) + url
         : null
       return formatterUrl(
-        window.DataEaseBi
-          ? `${window.DataEaseBi.baseUrl}${
+        embeddedStore.baseUrl
+          ? `${embeddedStore.baseUrl}${
               rawUrl.startsWith('/api') ? rawUrl.slice(5) : rawUrl
             }`.replace('com//', 'com/')
           : rawUrl

core/core-frontend/src/utils/url.ts

@@ -1,3 +1,5 @@
+import { useEmbedded } from '@/store/modules/embedded'
+const embeddedStore = useEmbedded()
 export const formatDataEaseBi = (url: string) => {
-  return window.DataEaseBi?.baseUrl ? `${window.DataEaseBi.baseUrl}${url}` : url
+  return embeddedStore.baseUrl ? `${embeddedStore.baseUrl}${url}` : url
 }

core/core-frontend/src/views/chart/ChartView.vue

@@ -1,23 +1,19 @@
 <script lang="ts" setup>
 import ViewWrapper from '@/pages/panel/ViewWrapper.vue'
+import { useEmbedded } from '@/store/modules/embedded'
 import { useRoute } from 'vue-router'
 import { onBeforeMount } from 'vue'
 const route = useRoute()
+const embeddedStore = useEmbedded()
 const init = () => {
-  const busiFlag = route.query.busiFlag
-  const dvId = route.query.dvId
-  const chartId = route.query.chartId
-  const embeddedToken = route.query.embeddedToken
-  console.log(busiFlag)
-  console.log(dvId)
-  console.log(chartId)
-  console.log(embeddedToken)
-  window.DataEaseBi = {
-    token: embeddedToken,
-    chartId: chartId,
-    dvId: dvId,
-    busiFlag: busiFlag
-  }
+  const busiFlag = route.query.busiFlag as string
+  const dvId = route.query.dvId as string
+  const chartId = route.query.chartId as string
+  const embeddedToken = route.query.embeddedToken as string
+  embeddedStore.setBusiFlag(busiFlag)
+  embeddedStore.setToken(embeddedToken)
+  embeddedStore.setChartId(chartId)
+  embeddedStore.setDvId(dvId)
 }
 onBeforeMount(() => {
   init()

core/core-frontend/src/views/common/DeResourceTree.vue

@@ -5,6 +5,7 @@ import { ElIcon, ElMessage, ElMessageBox, ElScrollbar } from 'element-plus-secon
 import { Icon } from '@/components/icon-custom'
 import { HandleMore } from '@/components/handle-more'
 import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
+import { useEmbedded } from '@/store/modules/embedded'
 import { BusiTreeNode, BusiTreeRequest } from '@/models/tree/TreeNode'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useAppStoreWithOut } from '@/store/modules/app'
@@ -23,6 +24,7 @@ const { wsCache } = useCache()
 
 const dvMainStore = dvMainStoreWithOut()
 const appStore = useAppStoreWithOut()
+const embeddedStore = useEmbedded()
 const { dvInfo } = storeToRefs(dvMainStore)
 const { t } = useI18n()
 
@@ -152,7 +154,7 @@ const menuList = computed(() => {
   return [...list, ...edit]
 })
 
-const { dvId } = window.DataEaseBi || router.currentRoute.value.query
+const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
 if (dvId) {
   selectedNodeKey.value = dvId
   returnMounted.value = true

core/core-frontend/src/views/dashboard/index.vue

@@ -15,16 +15,19 @@ import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/Cha
 import DeCanvas from '@/views/canvas/DeCanvas.vue'
 import { check, compareStorage } from '@/utils/CrossPermission'
 import { useCache } from '@/hooks/web/useCache'
+import { useEmbedded } from '@/store/modules/embedded'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { watermarkFind } from '@/api/watermark'
 const interactiveStore = interactiveStoreWithOut()
+const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const eventCheck = e => {
   if (e.key === 'panel-weight' && !compareStorage(e.oldValue, e.newValue)) {
-    const { resourceId, opt } = window.DataEaseBi || router.currentRoute.value.query
+    const resourceId = embeddedStore.resourceId || router.currentRoute.value.query.resourceId
+    const { opt } = router.currentRoute.value.query
     if (!(opt && opt === 'create')) {
-      check(wsCache.get('panel-weight'), resourceId, 4)
+      check(wsCache.get('panel-weight'), resourceId as string, 4)
     }
   }
 }
@@ -72,7 +75,9 @@ const checkPer = async resourceId => {
 // 全局监听按键事件
 onMounted(async () => {
   window.addEventListener('storage', eventCheck)
-  const { resourceId, opt, pid, createType } = window.DataEaseBi || router.currentRoute.value.query
+  const resourceId = embeddedStore.resourceId || router.currentRoute.value.query.resourceId
+  const pid = embeddedStore.pid || router.currentRoute.value.query.pid
+  const { opt, createType } = router.currentRoute.value.query
   const checkResult = await checkPer(resourceId)
   if (!checkResult) {
     return

core/core-frontend/src/views/data-visualization/index.vue

@@ -20,6 +20,7 @@ import { findDragComponent, findNewComponent, initCanvasData } from '@/utils/can
 import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
 import { listenGlobalKeyDown, releaseAttachKey } from '@/utils/DeShortcutKey'
 import { adaptCurThemeCommonStyle } from '@/utils/canvasStyle'
+import { useEmbedded } from '@/store/modules/embedded'
 import { changeComponentSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { check, compareStorage } from '@/utils/CrossPermission'
@@ -28,12 +29,17 @@ import RealTimeListTree from '@/components/data-visualization/RealTimeListTree.v
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { watermarkFind } from '@/api/watermark'
 const interactiveStore = interactiveStoreWithOut()
+const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const eventCheck = e => {
   if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
-    const { dvId, opt } = window.DataEaseBi || router.currentRoute.value.query
+    const { opt } = router.currentRoute.value.query
     if (!(opt && opt === 'create')) {
-      check(wsCache.get('screen-weight'), dvId, 4)
+      check(
+        wsCache.get('screen-weight'),
+        embeddedStore.dvId || (router.currentRoute.value.query.dvId as string),
+        4
+      )
     }
   }
 }
@@ -196,7 +202,9 @@ onMounted(async () => {
   if (editMode.value === 'edit') {
     window.addEventListener('storage', eventCheck)
   }
-  const { dvId, opt, pid, createType } = window.DataEaseBi || router.currentRoute.value.query
+  const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
+  const pid = embeddedStore.pid || router.currentRoute.value.query.pid
+  const { opt, createType } = router.currentRoute.value.query
   const checkResult = await checkPer(dvId)
   if (!checkResult) {
     return