Merge pull request #8060 from dataease/pr@dev-v2_dzz_mobile

feat(嵌入式): 模块嵌入支持 iframe 嵌入方式

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>

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)

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

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>

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>
 

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>

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>({

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]

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

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

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