fix(移动端): 移动端添加跳转 #9828

core/core-frontend/src/router/mobile.ts

@@ -58,6 +58,20 @@ export const routes: AppRouteRecordRaw[] = [
     hidden: true,
     meta: {},
     component: () => import('@/views/mobile/panel/NotSupport.vue')
+  },
+  {
+    path: '/DashboardEmpty',
+    name: 'DashboardEmpty',
+    hidden: true,
+    meta: {},
+    component: () => import('@/views/mobile/panel/DashboardEmpty.vue')
+  },
+  {
+    path: '/preview',
+    name: 'preview',
+    hidden: true,
+    meta: {},
+    component: () => import('@/views/data-visualization/PreviewCanvasMobile.vue')
   }
 ]
 

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -35,6 +35,7 @@ export const dvMainStore = defineStore('dataVisualization', {
       embeddedCallBack: 'no', // 嵌入模式是否允许反馈参数
       editMode: 'preview', // 编辑器模式 edit preview
       mobileInPc: false,
+      inMobile: false,
       firstLoadMap: [],
       canvasStyleData: { ...deepCopy(DEFAULT_CANVAS_STYLE_DATA_DARK), backgroundColor: null },
       // 当前展示画布缓存数据
@@ -192,6 +193,9 @@ export const dvMainStore = defineStore('dataVisualization', {
     aceSetCanvasData(value) {
       this.canvasStyleData = value
     },
+    setInMobile(value) {
+      this.inMobile = value
+    },
 
     aceSetCurComponent(value) {
       for (let i = 0; i < this.componentData.length; i++) {

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -20,7 +20,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { L7ChartView } from '@/views/chart/components/js/panel/types/impl/l7'
 
 const dvMainStore = dvMainStoreWithOut()
-const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, embeddedCallBack } =
+const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, embeddedCallBack, inMobile } =
   storeToRefs(dvMainStore)
 const { emitter } = useEmitt()
 const props = defineProps({
@@ -328,7 +328,7 @@ const trackClick = trackAction => {
       dvMainStore.addViewTrackFilter(linkageParam)
       break
     case 'jump':
-      if (mobileInPc.value) return
+      if (mobileInPc.value && !inMobile.value) return
       emit('onJumpClick', jumpParam)
       break
     default:
@@ -351,7 +351,10 @@ const trackMenu = computed(() => {
         jumpCount++
       }
     })
-    jumpCount && view.value?.jumpActive && !mobileInPc.value && trackMenuInfo.push('jump')
+    jumpCount &&
+      view.value?.jumpActive &&
+      (!mobileInPc.value || inMobile.value) &&
+      trackMenuInfo.push('jump')
     linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
     view.value.drillFields.length && trackMenuInfo.push('drill')
     // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -29,8 +29,14 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { trackBarStyleCheck } from '@/utils/canvasUtils'
 
 const dvMainStore = dvMainStoreWithOut()
-const { nowPanelTrackInfo, nowPanelJumpInfo, mobileInPc, canvasStyleData, embeddedCallBack } =
-  storeToRefs(dvMainStore)
+const {
+  nowPanelTrackInfo,
+  nowPanelJumpInfo,
+  mobileInPc,
+  canvasStyleData,
+  embeddedCallBack,
+  inMobile
+} = storeToRefs(dvMainStore)
 const { emitter } = useEmitt()
 
 const props = defineProps({
@@ -332,7 +338,7 @@ const trackClick = trackAction => {
       dvMainStore.addViewTrackFilter(linkageParam)
       break
     case 'jump':
-      if (mobileInPc.value) return
+      if (mobileInPc.value && !inMobile.value) return
       emit('onJumpClick', jumpParam)
       break
     default:
@@ -356,7 +362,10 @@ const trackMenu = computed(() => {
       jumpCount++
     }
   })
-  jumpCount && view.value?.jumpActive && !mobileInPc.value && trackMenuInfo.push('jump')
+  jumpCount &&
+    view.value?.jumpActive &&
+    (!mobileInPc.value || inMobile.value) &&
+    trackMenuInfo.push('jump')
   linkageCount && view.value?.linkageActive && trackMenuInfo.push('linkage')
   view.value.drillFields.length && trackMenuInfo.push('drill')
   // 如果同时配置jump linkage drill 切配置联动时同时下钻 在实际只显示两个 '跳转' '联动和下钻'

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

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { onMounted, reactive } from 'vue'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
+import router from '@/router/mobile'
+import { initCanvasDataMobile } from '@/utils/canvasUtils'
+import { queryTargetVisualizationJumpInfo } from '@/api/visualization/linkJump'
+import { Base64 } from 'js-base64'
+import { getOuterParamsInfo } from '@/api/visualization/outerParams'
+import { ElMessage } from 'element-plus-secondary'
+import { useEmbedded } from '@/store/modules/embedded'
+import { useI18n } from '@/hooks/web/useI18n'
+import { XpackComponent } from '@/components/plugin'
+
+const dvMainStore = dvMainStoreWithOut()
+const { t } = useI18n()
+const embeddedStore = useEmbedded()
+const state = reactive({
+  canvasDataPreview: null,
+  canvasStylePreview: null,
+  canvasViewInfoPreview: null,
+  dvInfo: null,
+  curPreviewGap: 0
+})
+
+const props = defineProps({
+  publicLinkStatus: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  isSelector: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const loadCanvasDataAsync = async (dvId, dvType) => {
+  const jumpInfoParam = embeddedStore.jumpInfoParam || router.currentRoute.value.query.jumpInfoParam
+  let jumpParam
+  // 获取外部跳转参数
+  if (jumpInfoParam) {
+    jumpParam = JSON.parse(Base64.decode(decodeURIComponent(jumpInfoParam as string)))
+    const jumpRequestParam = {
+      sourceDvId: jumpParam.sourceDvId,
+      sourceViewId: jumpParam.sourceViewId,
+      sourceFieldId: null,
+      targetDvId: dvId
+    }
+    try {
+      // 刷新跳转目标仪表板联动信息
+      await queryTargetVisualizationJumpInfo(jumpRequestParam).then(rsp => {
+        dvMainStore.setNowTargetPanelJumpInfo(rsp.data)
+      })
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  // 添加外部参数
+  let attachParam
+  await getOuterParamsInfo(dvId).then(rsp => {
+    dvMainStore.setNowPanelOuterParamsInfo(rsp.data)
+  })
+
+  // 外部参数（iframe 或者 iframe嵌入）
+  const attachParamsEncode = router.currentRoute.value.query.attachParams
+  if (attachParamsEncode) {
+    try {
+      attachParam = JSON.parse(Base64.decode(decodeURIComponent(attachParamsEncode as string)))
+    } catch (e) {
+      console.error(e)
+      ElMessage.error(t('visualization.outer_param_decode_error'))
+    }
+  }
+  initCanvasDataMobile(
+    dvId,
+    dvType,
+    function ({
+      canvasDataResult,
+      canvasStyleResult,
+      dvInfo,
+      canvasViewInfoPreview,
+      curPreviewGap
+    }) {
+      if (!dvInfo.mobileLayout) {
+        router.push('/DashboardEmpty')
+        return
+      }
+      state.canvasDataPreview = canvasDataResult
+      state.canvasStylePreview = canvasStyleResult
+      state.canvasViewInfoPreview = canvasViewInfoPreview
+      state.dvInfo = dvInfo
+      state.curPreviewGap = curPreviewGap
+      if (jumpParam) {
+        dvMainStore.addViewTrackFilter(jumpParam)
+      }
+      if (attachParam) {
+        dvMainStore.addOuterParamsFilter(attachParam)
+      }
+      if (props.publicLinkStatus) {
+        // 设置浏览器title为当前仪表板名称
+        document.title = dvInfo.name
+      }
+    }
+  )
+}
+
+let p = null
+const XpackLoaded = () => p(true)
+onMounted(async () => {
+  await new Promise(r => (p = r))
+  dvMainStore.setMobileInPc(true)
+  dvMainStore.setInMobile(true)
+  const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
+  const { dvType, callBackFlag } = router.currentRoute.value.query
+  if (dvId) {
+    loadCanvasDataAsync(dvId, dvType)
+    return
+  }
+  dvMainStore.setEmbeddedCallBack(callBackFlag || 'no')
+  dvMainStore.setPublicLinkStatus(props.publicLinkStatus)
+})
+
+defineExpose({
+  loadCanvasDataAsync
+})
+</script>
+
+<template>
+  <div class="content">
+    <de-preview
+      ref="dvPreview"
+      v-if="state.canvasStylePreview"
+      :component-data="state.canvasDataPreview"
+      :canvas-style-data="state.canvasStylePreview"
+      :canvas-view-info="state.canvasViewInfoPreview"
+      :dv-info="state.dvInfo"
+      :cur-gap="state.curPreviewGap"
+      :is-selector="props.isSelector"
+    ></de-preview>
+  </div>
+  <XpackComponent
+    jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
+    @loaded="XpackLoaded"
+    @load-fail="XpackLoaded"
+  />
+</template>
+
+<style lang="less">
+.content {
+  background-color: #ffffff;
+  width: 100vw;
+  height: 100vh;
+  align-items: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+  ::-webkit-scrollbar {
+    width: 0px !important;
+    height: 0px !important;
+  }
+}
+</style>

core/core-frontend/src/views/mobile/panel/DashboardEmpty.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="not-support">仪表板未开启移动端，因此无法正常展示</div>
+</template>
+
+<style lang="less" scoped>
+.not-support {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+</style>

core/core-frontend/src/views/mobile/panel/Mobile.vue

@@ -53,6 +53,7 @@ const router = useRouter()
 let fromPage, cache
 onBeforeMount(() => {
   dvMainStore.setMobileInPc(true)
+  dvMainStore.setInMobile(true)
   const dvId = route.query.dvId as unknown as string
   fromPage = route.query.from as unknown as string
   cache = route.query.cache as unknown as string

core/core-frontend/src/views/share/link/mobile.vue

@@ -3,22 +3,13 @@
     <LinkError v-if="!loading && !linkExist" />
     <Exp v-else-if="!loading && linkExp" />
     <PwdTips v-else-if="!loading && !pwdValid" />
-    <de-preview
-      ref="dashboardPreview"
-      v-else-if="state.canvasStylePreview && dataInitState && curType === 'dashboard'"
-      :component-data="state.canvasDataPreview"
-      :canvas-style-data="state.canvasStylePreview"
-      :canvas-view-info="state.canvasViewInfoPreview"
-      :dv-info="state.dvInfo"
-      :cur-gap="state.curPreviewGap"
-    ></de-preview>
+    <PreviewCanvas v-else :class="{ 'hidden-link': loading }" ref="pcanvas" public-link-status />
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, nextTick, ref, reactive } from 'vue'
-import { initCanvasDataMobile } from '@/utils/canvasUtils'
+import { onMounted, nextTick, ref } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
+import PreviewCanvas from '@/views/data-visualization/PreviewCanvasMobile.vue'
 import { ProxyInfo, shareProxy } from './ShareProxy'
 import Exp from './exp.vue'
 import router from '@/router/mobile'
@@ -29,54 +20,12 @@ const loading = ref(true)
 const linkExp = ref(false)
 const pwdValid = ref(false)
 const dvMainStore = dvMainStoreWithOut()
-const state = reactive({
-  canvasDataPreview: null,
-  canvasStylePreview: null,
-  canvasViewInfoPreview: null,
-  dvInfo: {
-    name: '',
-    mobileLayout: false
-  },
-  curPreviewGap: 0
-})
-const dataInitState = ref(true)
-const dashboardPreview = ref(null)
-const loadCanvasData = (dvId, weight?) => {
-  dataInitState.value = false
-  initCanvasDataMobile(
-    dvId,
-    'dashboard',
-    function ({
-      canvasDataResult,
-      canvasStyleResult,
-      dvInfo,
-      canvasViewInfoPreview,
-      curPreviewGap
-    }) {
-      dvInfo['weight'] = weight
-      state.canvasDataPreview = canvasDataResult
-      state.canvasStylePreview = canvasStyleResult
-      state.canvasViewInfoPreview = canvasViewInfoPreview
-      state.dvInfo = dvInfo
-      state.curPreviewGap = curPreviewGap
-      dataInitState.value = true
-      if (!state.dvInfo.mobileLayout) {
-        const href = window.location.href.replace('/de-link', '/pc/de-link')
-        window.location.href = href
-        return
-      }
-      nextTick(() => {
-        document.title = dvInfo.name
-        dashboardPreview.value.restore()
-      })
-    }
-  )
-}
-
+const pcanvas = ref(null)
 const curType = ref('')
 onMounted(async () => {
   const proxyInfo = (await shareProxy.loadProxy()) as ProxyInfo
   curType.value = proxyInfo.type || 'dashboard'
+  dvMainStore.setInMobile(true)
   dvMainStore.setMobileInPc(curType.value === 'dashboard')
   if (!proxyInfo?.resourceId) {
     loading.value = false
@@ -87,8 +36,10 @@ onMounted(async () => {
   pwdValid.value = !!proxyInfo.pwdValid
   nextTick(() => {
     if (curType.value === 'dashboard') {
-      loadCanvasData(proxyInfo.resourceId, proxyInfo.type)
-      dvMainStore.setPublicLinkStatus(true)
+      const method = pcanvas?.value?.loadCanvasDataAsync
+      if (method) {
+        method(proxyInfo.resourceId, 'dashboard', null)
+      }
       loading.value = false
     } else {
       loading.value = false