feat(仪表板、数据大屏): 嵌入式可视化资源支持渲染完毕通知

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -64,19 +64,6 @@ const props = defineProps({
 const { element, view, active, searchCount, scale } = toRefs(props)
 const autoStyle = computed(() => {
   return { zoom: scale.value }
-  // if (element.value.innerType === 'rich-text') {
-  //
-  //   return {
-  //     position: 'absolute',
-  //     height: 100 / scale.value + '%!important',
-  //     width: 100 / scale.value + '%!important',
-  //     left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-  //     top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-  //     transform: 'scale(' + scale.value + ') translateZ(0)'
-  //   } as CSSProperties
-  // } else {
-  //   return {}
-  // }
 })
 const emits = defineEmits(['onPointClick'])
 

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref, onBeforeMount, reactive, inject } from 'vue'
-import { initCanvasData } from '@/utils/canvasUtils'
+import { ref, onBeforeMount, reactive, inject, nextTick } from 'vue'
+import { initCanvasData, onInitReady } from '@/utils/canvasUtils'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useEmbedded } from '@/store/modules/embedded'
 import { check } from '@/utils/CrossPermission'
@@ -125,6 +125,9 @@ onBeforeMount(async () => {
         }
         return false
       })
+      nextTick(() => {
+        onInitReady({ resourceId: chartId })
+      })
     }
   )
 })

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

@@ -782,12 +782,16 @@ export function findComponentById(componentId) {
   return result
 }
 
-export function mobileViewStyleSwitch(component) {
-  if (component) {
-    const viewInfo = canvasViewInfo.value[component.id]
-    viewInfo.customStyle = component.customStyle
-    viewInfo.customAttr = component.customAttr
-    viewInfo.title = component.title
-    viewInfo.name = component.name
+export function onInitReady(params) {
+  try {
+    console.info('Canvas initReady')
+    const targetPm = {
+      type: 'dataease-embedded-interactive',
+      eventName: 'canvas_init_ready',
+      args: params
+    }
+    window.parent.postMessage(targetPm, '*')
+  } catch (e) {
+    console.warn('de_inner_params send error')
   }
 }

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

@@ -7,7 +7,7 @@ import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
-import { initCanvasData, initCanvasDataPrepare } from '@/utils/canvasUtils'
+import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
@@ -108,6 +108,7 @@ const loadCanvasData = (dvId, weight?) => {
       dataInitState.value = true
       nextTick(() => {
         dashboardPreview.value.restore()
+        onInitReady({ resourceId: dvId })
       })
     }
   )

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

@@ -13,7 +13,7 @@ import ViewEditor from '@/views/chart/components/editor/index.vue'
 import { getDatasetTree } from '@/api/dataset'
 import { Tree } from '@/views/visualized/data/dataset/form/CreatDsGroup.vue'
 import DbCanvasAttr from '@/components/dashboard/DbCanvasAttr.vue'
-import { decompressionPre, initCanvasData } from '@/utils/canvasUtils'
+import { decompressionPre, initCanvasData, onInitReady } from '@/utils/canvasUtils'
 import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
 import DeCanvas from '@/views/canvas/DeCanvas.vue'
 import { check, compareStorage } from '@/utils/CrossPermission'
@@ -160,6 +160,7 @@ const initLocalCanvasData = () => {
         snapshotStore.recordSnapshotCache()
       }, 1500)
     }
+    onInitReady({ resourceId: resourceId })
   })
 }
 onMounted(async () => {

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

@@ -3,7 +3,6 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { computed, ref } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { storeToRefs } from 'pinia'
-import { ElScrollbar } from 'element-plus-secondary'
 
 const dvMainStore = dvMainStoreWithOut()
 const { fullscreenFlag } = storeToRefs(dvMainStore)

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

@@ -4,7 +4,7 @@ import { nextTick, onMounted, reactive, ref } from 'vue'
 import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import router from '@/router'
 import { useEmitt } from '@/hooks/web/useEmitt'
-import { initCanvasData } from '@/utils/canvasUtils'
+import { initCanvasData, onInitReady } from '@/utils/canvasUtils'
 import { queryTargetVisualizationJumpInfo } from '@/api/visualization/linkJump'
 import { Base64 } from 'js-base64'
 import { getOuterParamsInfo } from '@/api/visualization/outerParams'
@@ -28,7 +28,7 @@ const state = reactive({
   canvasViewInfoPreview: null,
   dvInfo: null,
   curPreviewGap: 0,
-  initState: false
+  initState: true
 })
 
 const props = defineProps({
@@ -116,7 +116,6 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       canvasViewInfoPreview,
       curPreviewGap
     }) {
-      state.initState = false
       state.canvasDataPreview = canvasDataResult
       state.canvasStylePreview = canvasStyleResult
       state.canvasViewInfoPreview = canvasViewInfoPreview
@@ -125,6 +124,7 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
       if (jumpParam) {
         dvMainStore.addViewTrackFilter(jumpParam)
       }
+      state.initState = false
       dvMainStore.addOuterParamsFilter(attachParam)
       state.initState = true
       if (props.publicLinkStatus) {
@@ -133,9 +133,13 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
         setTitle(dvInfo.name)
       }
       initBrowserTimer()
+      nextTick(() => {
+        onInitReady({ resourceId: dvId })
+      })
     }
   )
 }
+
 const downloadH2 = type => {
   downloadStatus.value = true
   nextTick(() => {

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

@@ -8,7 +8,7 @@ import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { storeToRefs } from 'pinia'
 import { useAppStoreWithOut } from '@/store/modules/app'
-import { initCanvasData, initCanvasDataPrepare } from '@/utils/canvasUtils'
+import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
@@ -92,6 +92,9 @@ const loadCanvasData = (dvId, weight?) => {
           dvPreviewRef.value?.restore()
         })
       }
+      nextTick(() => {
+        onInitReady({ resourceId: dvId })
+      })
     }
   )
 }

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

@@ -22,7 +22,8 @@ import {
   decompressionPre,
   findDragComponent,
   findNewComponent,
-  initCanvasData
+  initCanvasData,
+  onInitReady
 } from '@/utils/canvasUtils'
 import CanvasCore from '@/components/data-visualization/canvas/CanvasCore.vue'
 import { listenGlobalKeyDown, releaseAttachKey } from '@/utils/DeShortcutKey'
@@ -245,6 +246,7 @@ const initLocalCanvasData = async () => {
           snapshotStore.recordSnapshotCache('renderChart')
         }, 1500)
       }
+      onInitReady({ resourceId: resourceId })
     })
   })
 }