feat(移动端): 新增仪表板详情页

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -13,7 +13,7 @@ import { isMainCanvas } from '@/utils/canvasUtils'
 import { activeWatermark } from '@/components/watermark/watermark'
 import { personInfoApi } from '@/api/user'
 const dvMainStore = dvMainStoreWithOut()
-const { pcMatrixCount, curComponent } = storeToRefs(dvMainStore)
+const { pcMatrixCount, curComponent, mobileInPc } = storeToRefs(dvMainStore)
 
 const props = defineProps({
   canvasStyleData: {
@@ -64,8 +64,7 @@ const {
   canvasViewInfo,
   showPosition,
   previewActive,
-  downloadStatus,
-  userId
+  downloadStatus
 } = toRefs(props)
 const domId = 'preview-' + canvasId.value
 const scaleWidth = ref(100)
@@ -266,7 +265,7 @@ defineExpose({
       :style="getShapeItemShowStyle(item)"
       :show-position="showPosition"
       :search-count="searchCount"
-      :scale="scaleWidth"
+      :scale="mobileInPc ? scaleWidth * 3 : scaleWidth"
       @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
     />
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>

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

@@ -30,6 +30,13 @@ export const routes: AppRouteRecordRaw[] = [
     hidden: true,
     meta: {},
     component: () => import('@/views/mobile/panel/index.vue')
+  },
+  {
+    path: '/panel/mobile',
+    name: 'mobile',
+    hidden: true,
+    meta: {},
+    component: () => import('@/views/mobile/panel/Mobile.vue')
   }
 ]
 

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

@@ -138,6 +138,41 @@ export function initCanvasData(dvId, busiFlag, callBack) {
   )
 }
 
+export function initCanvasDataMobile(dvId, busiFlag, callBack) {
+  initCanvasDataPrepare(
+    dvId,
+    busiFlag,
+    function ({ canvasDataResult, canvasStyleResult, dvInfo, canvasViewInfoPreview }) {
+      const componentData = canvasDataResult.filter(ele => !!ele.inMobile)
+      canvasDataResult.forEach(ele => {
+        const { mx, my, mSizeX, mSizeY } = ele
+        ele.x = mx
+        ele.y = my
+        ele.sizeX = mSizeX
+        ele.sizeY = mSizeY
+      })
+      dvMainStore.setComponentData(componentData)
+      dvMainStore.setCanvasStyle(canvasStyleResult)
+      dvMainStore.updateCurDvInfo(dvInfo)
+      dvMainStore.setCanvasViewInfo(canvasViewInfoPreview)
+      // 刷新联动信息
+      getPanelAllLinkageInfo(dvInfo.id).then(rsp => {
+        dvMainStore.setNowPanelTrackInfo(rsp.data)
+      })
+      // 刷新跳转信息
+      queryVisualizationJumpInfo(dvInfo.id).then(rsp => {
+        dvMainStore.setNowPanelJumpInfo(rsp.data)
+      })
+      callBack({
+        canvasDataResult: componentData,
+        canvasStyleResult,
+        dvInfo,
+        canvasViewInfoPreview
+      })
+    }
+  )
+}
+
 export function checkIsBatchOptView(viewId) {
   return curBatchOptComponents.value.includes(viewId)
 }

core/core-frontend/src/views/mobile/home/index.vue

@@ -3,6 +3,7 @@ import { ref, computed, onMounted, reactive } from 'vue'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { shortcutOption } from '@/views/workbranch/ShortcutOption'
 import { XpackComponent } from '@/components/plugin'
+import { useRouter } from 'vue-router'
 import VanTabs from 'vant/es/tabs'
 import VanTab from 'vant/es/tab'
 import VanCell from 'vant/es/cell'
@@ -14,6 +15,8 @@ import 'vant/es/tabs/style'
 import 'vant/es/cell/style'
 import 'vant/es/cell-group/style'
 
+const router = useRouter()
+
 const activeTab = ref('recent')
 const state = reactive({
   tableData: [],
@@ -80,6 +83,15 @@ onMounted(() => {
     })
 })
 
+const handleCellClick = ele => {
+  router.push({
+    path: '/panel/mobile',
+    query: {
+      dvId: ele.id
+    }
+  })
+}
+
 const formatterTime = val => {
   return new Date(val).toLocaleString()
 }
@@ -100,6 +112,7 @@ const formatterTime = val => {
     </van-sticky>
     <van-cell-group>
       <van-cell
+        @click="handleCellClick(ele)"
         v-for="ele in state.tableData"
         :key="ele.id"
         size="large"

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { initCanvasDataMobile } from '@/utils/canvasUtils'
+import { ref, nextTick, onBeforeMount } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+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 dvMainStore = dvMainStoreWithOut()
+const state = reactive({
+  canvasDataPreview: null,
+  canvasStylePreview: null,
+  canvasViewInfoPreview: null,
+  dvInfo: {
+    name: ''
+  },
+  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
+      nextTick(() => {
+        dashboardPreview.value.restore()
+      })
+    }
+  )
+}
+
+const route = useRoute()
+const router = useRouter()
+
+onBeforeMount(() => {
+  dvMainStore.setMobileInPc(true)
+  const dvId = route.query.dvId as unknown as string
+  loadCanvasData(dvId)
+})
+
+const onClickLeft = () => {
+  router.replace({
+    path: '/index'
+  })
+}
+</script>
+
+<template>
+  <div class="dv-common-layout-mobile">
+    <van-sticky>
+      <van-nav-bar
+        :title="state.dvInfo.name"
+        left-text="返回"
+        left-arrow
+        @click-left="onClickLeft"
+      />
+    </van-sticky>
+    <de-preview
+      ref="dashboardPreview"
+      v-if="state.canvasStylePreview && dataInitState"
+      :dv-info="state.dvInfo"
+      :cur-gap="state.curPreviewGap"
+      :component-data="state.canvasDataPreview"
+      :canvas-style-data="state.canvasStylePreview"
+      :canvas-view-info="state.canvasViewInfoPreview"
+      :download-status="false"
+    ></de-preview>
+  </div>
+</template>
+
+<style lang="less">
+.dv-common-layout-mobile {
+  height: 100vh;
+  width: 100vw;
+  overflow-y: auto;
+}
+</style>