From 0fd1857ae27f343547e2f78332bdc8facd2302a6 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 19 Feb 2024 17:22:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=B5=8C=E5=85=A5=E5=BC=8F):=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=E5=B5=8C=E5=85=A5=E6=94=AF=E6=8C=81=20iframe=20?=
 =?UTF-8?q?=E5=B5=8C=E5=85=A5=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dashboard/DbToolbar.vue    |  9 ++---
 .../data-visualization/DvToolbar.vue          |  9 ++---
 core/core-frontend/src/store/modules/app.ts   |  8 ++++
 .../src/views/chart/ChartView.vue             | 39 ++++++++++++++++++-
 .../editor/dataset-select/DatasetSelect.vue   | 17 ++------
 .../editor/editor-senior/Senior.vue           |  9 ++---
 .../views/chart/components/editor/index.vue   |  8 ++--
 .../views/components/ChartComponentG2Plot.vue |  5 ++-
 .../views/components/ChartComponentS2.vue     |  5 ++-
 .../views/visualized/data/dataset/index.vue   |  3 +-
 .../visualized/data/datasource/index.vue      |  3 +-
 11 files changed, 74 insertions(+), 41 deletions(-)

diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index 13068f522a..90a8e4ad5b 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -2,8 +2,9 @@
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
 import { deepCopy } from '@/utils/utils'
-import { nextTick, reactive, ref, computed, onMounted } from 'vue'
+import { nextTick, reactive, ref, computed } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { storeToRefs } from 'pinia'
 import Icon from '../icon-custom/src/Icon.vue'
@@ -307,10 +308,8 @@ const saveLinkageSetting = () => {
 const onDvNameChange = () => {
   snapshotStore.recordSnapshotCache()
 }
-const isDataEaseBi = ref(false)
-onMounted(() => {
-  isDataEaseBi.value = !!window.DataEaseBi
-})
+const appStore = useAppStoreWithOut()
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 </script>
 
 <template>
diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
index 5e1d99f82e..7abdb4cddb 100644
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
-import { ref, nextTick, onMounted } from 'vue'
+import { ref, nextTick, computed } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import { storeToRefs } from 'pinia'
 import Icon from '../icon-custom/src/Icon.vue'
 import ComponentGroup from '@/components/visualization/ComponentGroup.vue'
@@ -131,10 +132,8 @@ const getFullScale = () => {
   const curWidth = dvToolbarMain.value.clientWidth
   return (curWidth * 100) / canvasStyleData.value.width
 }
-const isDataEaseBi = ref(false)
-onMounted(() => {
-  isDataEaseBi.value = !!window.DataEaseBi
-})
+const appStore = useAppStoreWithOut()
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 
 eventBus.on('preview', preview)
 eventBus.on('save', saveCanvasWithCheck)
diff --git a/core/core-frontend/src/store/modules/app.ts b/core/core-frontend/src/store/modules/app.ts
index 7a80da02a1..bcbc994db4 100644
--- a/core/core-frontend/src/store/modules/app.ts
+++ b/core/core-frontend/src/store/modules/app.ts
@@ -10,6 +10,7 @@ interface AppState {
   dekey: string
   desktop: boolean
   isDataEaseBi: boolean
+  isIframe: boolean
 }
 
 export const useAppStore = defineStore('app', {
@@ -20,6 +21,7 @@ export const useAppStore = defineStore('app', {
       title: 'DataEase',
       dekey: 'DataEaseKey',
       isDataEaseBi: false,
+      isIframe: false,
       desktop: false
     }
   },
@@ -36,6 +38,9 @@ export const useAppStore = defineStore('app', {
     getIsDataEaseBi(): boolean {
       return this.isDataEaseBi
     },
+    getIsIframe(): boolean {
+      return this.isIframe
+    },
     getDekey(): string {
       return this.dekey
     },
@@ -56,6 +61,9 @@ export const useAppStore = defineStore('app', {
     setIsDataEaseBi(isDataEaseBi: boolean) {
       this.isDataEaseBi = isDataEaseBi
     },
+    setIsIframe(isIframe: boolean) {
+      this.isIframe = isIframe
+    },
     setPageLoading(pageLoading: boolean) {
       this.pageLoading = pageLoading
     },
diff --git a/core/core-frontend/src/views/chart/ChartView.vue b/core/core-frontend/src/views/chart/ChartView.vue
index 61be508be5..a88313226c 100644
--- a/core/core-frontend/src/views/chart/ChartView.vue
+++ b/core/core-frontend/src/views/chart/ChartView.vue
@@ -1,19 +1,54 @@
 <script lang="ts" setup>
-import ViewWrapper from '@/pages/panel/ViewWrapper.vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { useEmbedded } from '@/store/modules/embedded'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import { useRoute } from 'vue-router'
 import { onBeforeMount } from 'vue'
 const route = useRoute()
 const embeddedStore = useEmbedded()
+const appStore = useAppStoreWithOut()
+
+const currentComponent = shallowRef()
+
+const VisualizationEditor = defineAsyncComponent(
+  () => import('@/views/data-visualization/index.vue')
+)
+const DashboardEditor = defineAsyncComponent(() => import('@/views/dashboard/index.vue'))
+
+const Dashboard = defineAsyncComponent(() => import('./DashboardPreview.vue'))
+const ViewWrapper = defineAsyncComponent(() => import('./ViewWrapper.vue'))
+const Dataset = defineAsyncComponent(() => import('@/views/visualized/data/dataset/index.vue'))
+const Datasource = defineAsyncComponent(
+  () => import('@/views/visualized/data/datasource/index.vue')
+)
+const ScreenPanel = defineAsyncComponent(() => import('@/views/data-visualization/PreviewShow.vue'))
+const DashboardPanel = defineAsyncComponent(
+  () => import('@/views/dashboard/DashboardPreviewShow.vue')
+)
+
+const componentMap = {
+  DashboardEditor,
+  VisualizationEditor,
+  ViewWrapper,
+  Dashboard,
+  Dataset,
+  Datasource,
+  ScreenPanel,
+  DashboardPanel
+}
 const init = () => {
+  appStore.setIsIframe(true)
   const busiFlag = route.query.busiFlag as string
   const dvId = route.query.dvId as string
   const chartId = route.query.chartId as string
+  const type = route.query.type as string
   const embeddedToken = route.query.embeddedToken as string
   embeddedStore.setBusiFlag(busiFlag)
   embeddedStore.setToken(embeddedToken)
   embeddedStore.setChartId(chartId)
   embeddedStore.setDvId(dvId)
+  embeddedStore.setType(type)
+  currentComponent.value = componentMap[type || 'ViewWrapper']
 }
 onBeforeMount(() => {
   init()
@@ -21,5 +56,5 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <view-wrapper />
+  <component :is="currentComponent"></component>
 </template>
diff --git a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
index 379f34814f..14875f8a12 100644
--- a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { Tree } from '../../../../visualized/data/dataset/form/CreatDsGroup.vue'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { Plus, Search } from '@element-plus/icons-vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { Field, getFieldByDQ } from '@/api/chart'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import _ from 'lodash'
 import { useRouter } from 'vue-router'
 import { getDatasetTree } from '@/api/dataset'
@@ -55,15 +55,6 @@ const _modelValue = computed({
   }
 })
 
-const state = computed({
-  get() {
-    return props.stateObj
-  },
-  set(v) {
-    emits('update:stateObj', v)
-  }
-})
-
 const dsSelectProps = {
   label: 'name',
   children: 'children',
@@ -190,10 +181,10 @@ function getNode(nodeId: number) {
 }
 
 defineExpose({ getNode })
-const isDataEaseBi = ref(false)
+const appStore = useAppStoreWithOut()
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 onMounted(() => {
   initDataset()
-  isDataEaseBi.value = !!window.DataEaseBi
 })
 </script>
 
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
index 59d9dab97d..e400f8f779 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
@@ -5,7 +5,8 @@ import ScrollCfg from '@/views/chart/components/editor/editor-senior/components/
 import AssistLine from '@/views/chart/components/editor/editor-senior/components/AssistLine.vue'
 import Threshold from '@/views/chart/components/editor/editor-senior/components/Threshold.vue'
 import CollapseSwitchItem from '@/components/collapse-switch-item/src/CollapseSwitchItem.vue'
-import { computed, PropType, ref, toRefs, watch, onMounted } from 'vue'
+import { useAppStoreWithOut } from '@/store/modules/app'
+import { computed, PropType, ref, toRefs, watch } from 'vue'
 import LinkJumpSet from '@/components/visualization/LinkJumpSet.vue'
 import LinkageSet from '@/components/visualization/LinkageSet.vue'
 import { canvasSave } from '@/utils/canvasUtils'
@@ -171,10 +172,8 @@ const linkageActiveChange = () => {
     dvMainStore.setNowPanelTrackInfo(rsp.data)
   })
 }
-const isDataEaseBi = ref(false)
-onMounted(() => {
-  isDataEaseBi.value = !!window.DataEaseBi
-})
+const appStore = useAppStoreWithOut()
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 </script>
 
 <template>
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index dbda67309d..4b5a12f8ac 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -8,12 +8,12 @@ import {
   computed,
   nextTick,
   onBeforeMount,
-  onMounted,
   provide,
   h
 } from 'vue'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import type { FormInstance, FormRules } from 'element-plus-secondary'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Tree } from '../../../visualized/data/dataset/form/CreatDsGroup.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
@@ -103,10 +103,8 @@ onBeforeMount(() => {
   cacheId = route.query.id as unknown as string
 })
 
-const isDataEaseBi = ref(false)
-onMounted(() => {
-  isDataEaseBi.value = !!window.DataEaseBi
-})
+const appStore = useAppStoreWithOut()
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 const dsFieldDragOptions = { group: { name: 'drag', pull: 'clone' }, sort: true }
 
 const itemFormRules = reactive<FormRules>({
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index d78e6ac3fd..4608aac9b2 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -5,6 +5,7 @@ import { ChartLibraryType } from '@/views/chart/components/js/panel/types'
 import { G2PlotChartView } from '@/views/chart/components/js/panel/types/impl/g2plot'
 import { L7PlotChartView } from '@/views/chart/components/js/panel/types/impl/l7plot'
 import chartViewManager from '@/views/chart/components/js/panel'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ViewTrackBar from '@/components/visualization/ViewTrackBar.vue'
 import { storeToRefs } from 'pinia'
@@ -147,7 +148,8 @@ const renderG2Plot = (chart, chartView: G2PlotChartView<any, any>) => {
 
 const dynamicAreaId = ref('')
 const country = ref('')
-const isDataEaseBi = ref(false)
+const appStore = useAppStoreWithOut()
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 let mapTimer
 const renderL7Plot = (chart, chartView: L7PlotChartView<any, any>) => {
   const map = parseJson(chart.customAttr).map
@@ -260,7 +262,6 @@ defineExpose({
 let resizeObserver
 const TOLERANCE = 0.01
 onMounted(() => {
-  isDataEaseBi.value = !!window.DataEaseBi
   const containerDom = document.getElementById(containerId)
   const { offsetWidth, offsetHeight } = containerDom
   const preSize = [offsetWidth, offsetHeight]
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index afea752c4d..9951ebe771 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -15,6 +15,7 @@ import {
 } from 'vue'
 import { getData } from '@/api/chart'
 import chartViewManager from '@/views/chart/components/js/panel'
+import { useAppStoreWithOut } from '@/store/modules/app'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ViewTrackBar from '@/components/visualization/ViewTrackBar.vue'
 import { storeToRefs } from 'pinia'
@@ -233,8 +234,9 @@ const action = param => {
     viewTrack.value.trackButtonClick()
   }
 }
+const appStore = useAppStoreWithOut()
 
-const isDataEaseBi = ref(false)
+const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 
 const trackClick = trackAction => {
   const param = state.pointParam
@@ -316,7 +318,6 @@ const preSize = [0, 0]
 const TOLERANCE = 1
 let resizeObserver: ResizeObserver
 onMounted(() => {
-  isDataEaseBi.value = !!window.DataEaseBi
   resizeObserver = new ResizeObserver(([entry] = []) => {
     const [size] = entry.borderBoxSize || []
     // 拖动的时候宽高重新计算，误差范围内不重绘，误差先设置为1
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index 56f373a6e4..e5a40bd4bf 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -66,6 +66,7 @@ const curCanvasType = ref('')
 const mounted = ref(false)
 
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
+const isIframe = computed(() => appStore.getIsIframe)
 const createPanel = path => {
   const baseUrl = `#/${path}?opt=create&id=${nodeInfo.id}`
   window.open(baseUrl, '_blank')
@@ -569,7 +570,7 @@ const getMenuList = (val: boolean) => {
       </div>
     </el-aside>
 
-    <div class="dataset-content" :class="isDataEaseBi && 'h100'">
+    <div class="dataset-content" :class="(isDataEaseBi || isIframe) && 'h100'">
       <template v-if="!state.datasetTree.length && mounted">
         <empty-background description="暂无数据集" img-type="none">
           <el-button
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index 6ce8517c84..635d00c0d0 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -71,6 +71,7 @@ const recordState = reactive({
   }
 })
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
+const isIframe = computed(() => appStore.getIsIframe)
 
 const createDataset = (tableName?: string) => {
   router.push({
@@ -776,7 +777,7 @@ const getMenuList = (val: boolean) => {
       </div>
     </el-aside>
 
-    <div class="datasource-content" :class="isDataEaseBi && 'h100'">
+    <div class="datasource-content" :class="(isDataEaseBi || isIframe) && 'h100'">
       <template v-if="!state.datasourceTree.length && mounted">
         <empty-background description="暂无数据源" img-type="none">
           <el-button