Merge pull request #10994 from dataease/pr@dev-v2_st

feat(嵌入式): DataEase嵌入第三方系统后，移动端访问第三方系统时，希望展示移动端布局

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

@@ -24,6 +24,7 @@ const DashboardPanel = defineAsyncComponent(
 )
 
 const Preview = defineAsyncComponent(() => import('@/views/data-visualization/PreviewCanvas.vue'))
+const DashboardEmpty = defineAsyncComponent(() => import('@/views/mobile/panel/DashboardEmpty.vue'))
 
 const props = defineProps({
   componentName: propTypes.string.def('Iframe')
@@ -41,7 +42,8 @@ const componentMap = {
   Datasource,
   ScreenPanel,
   DashboardPanel,
-  DatasetEditor
+  DatasetEditor,
+  DashboardEmpty
 }
 
 const changeCurrentComponent = val => {

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

@@ -1,14 +1,20 @@
 <script lang="ts" setup>
 import { ref, reactive, onBeforeMount, nextTick } from 'vue'
-import { initCanvasData } from '@/utils/canvasUtils'
+import { initCanvasData, initCanvasDataMobile } from '@/utils/canvasUtils'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useEmbedded } from '@/store/modules/embedded'
+import { isMobile } from '@/utils/utils'
 import { check } from '@/utils/CrossPermission'
+import { useEmitt } from '@/hooks/web/useEmitt'
 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'
+import VanSticky from 'vant/es/sticky'
+import VanNavBar from 'vant/es/nav-bar'
+import 'vant/es/nav-bar/style'
+import 'vant/es/sticky/style'
 const { wsCache } = useCache()
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
@@ -32,12 +38,12 @@ const checkPer = async resourceId => {
   const key = embeddedStore.busiFlag === 'dataV' ? 'screen-weight' : 'panel-weight'
   return check(wsCache.get(key), resourceId, 1)
 }
+const isPc = ref(true)
 onBeforeMount(async () => {
   const checkResult = await checkPer(embeddedStore.dvId)
   if (!checkResult) {
     return
   }
-
   // 添加外部参数
   let attachParams
   await getOuterParamsInfo(embeddedStore.dvId).then(rsp => {
@@ -56,7 +62,10 @@ onBeforeMount(async () => {
     }
   }
 
-  initCanvasData(
+  isPc.value = !isMobile()
+  const req = isPc.value ? initCanvasData : initCanvasDataMobile
+
+  req(
     embeddedStore.dvId,
     embeddedStore.busiFlag,
     function ({
@@ -66,6 +75,10 @@ onBeforeMount(async () => {
       canvasViewInfoPreview,
       curPreviewGap
     }) {
+      if (!dvInfo.mobileLayout) {
+        useEmitt().emitter.emit('changeCurrentComponent', 'DashboardEmpty')
+        return
+      }
       state.canvasDataPreview = canvasDataResult
       state.canvasStylePreview = canvasStyleResult
       state.canvasViewInfoPreview = canvasViewInfoPreview
@@ -83,7 +96,13 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <div class="dashboard-preview" v-if="state.canvasStylePreview">
+  <div
+    :class="isPc ? 'dashboard-preview' : 'dv-common-layout-mobile_embedded'"
+    v-if="state.canvasStylePreview"
+  >
+    <van-sticky v-if="!isPc">
+      <van-nav-bar :title="state.dvInfo.name" />
+    </van-sticky>
     <de-preview
       ref="dashboardPreview"
       :dv-info="state.dvInfo"
@@ -92,6 +111,7 @@ onBeforeMount(async () => {
       :canvas-style-data="state.canvasStylePreview"
       :canvas-view-info="state.canvasViewInfoPreview"
       show-position="preview"
+      :download-status="isPc"
     ></de-preview>
   </div>
 </template>
@@ -102,3 +122,16 @@ onBeforeMount(async () => {
   height: 100%;
 }
 </style>
+<style lang="less">
+.dv-common-layout-mobile_embedded {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  --van-nav-bar-height: 44px;
+  --van-nav-bar-arrow-size: 20px;
+  --van-nav-bar-icon-color: #1f2329;
+  --van-nav-bar-title-text-color: #1f2329;
+  --van-font-bold: 500;
+  --van-nav-bar-title-font-size: 17px;
+}
+</style>

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

@@ -2,6 +2,7 @@
 import { shallowRef, defineAsyncComponent, ref, onBeforeUnmount, onBeforeMount } from 'vue'
 import { debounce } from 'lodash-es'
 import { XpackComponent } from '@/components/plugin'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const currentComponent = shallowRef()
 
@@ -49,6 +50,11 @@ onBeforeUnmount(() => {
 const initIframe = (name: string) => {
   currentComponent.value = componentMap[name || 'ViewWrapper']
 }
+
+useEmitt({
+  name: 'changeCurrentComponent',
+  callback: initIframe
+})
 </script>
 
 <template>