feat(仪表板、数据大屏): 支持一键全屏预览

core/core-frontend/package.json

@@ -45,6 +45,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.0.32",
     "qs": "^6.11.0",
+    "screenfull": "^6.0.2",
     "snowflake-id": "^1.1.0",
     "tinymce": "^5.8.2",
     "vant": "^4.8.3",

core/core-frontend/src/assets/svg/icon_pc_fullscreen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718353836926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4416" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M862.1 69H161.9C110.7 69 69 110.7 69 161.9v700.2c0 51.2 41.7 92.9 92.9 92.9h700.2c51.2 0 92.9-41.7 92.9-92.9V161.9c0-51.2-41.7-92.9-92.9-92.9z m16.6 92.9v716.7H161.9c-12.5 0-16.5-4-16.5-16.5V161.9c0-12.5 4-16.5 16.5-16.5h700.2c12.6-0.1 16.6 3.9 16.6 16.5z" p-id="4417"></path><path d="M370.3 222.4H268.7c-25.4 0-46 20.6-46 46V370c0 19.8 16.1 35.8 35.8 35.8 19.7 0 35.8-16.1 35.8-35.8v-75.9h75.9c19.8 0 35.8-16.1 35.8-35.8 0.1-19.8-16-35.9-35.7-35.9zM370.3 730.4h-75.9v-75.9c0-19.8-16.1-35.8-35.8-35.8-19.8 0-35.8 16.1-35.8 35.8V756c0 25.4 20.6 46 46 46h101.6c19.8 0 35.8-16.1 35.8-35.8-0.1-19.8-16.2-35.8-35.9-35.8zM766.5 618.6c-19.8 0-35.8 16.1-35.8 35.8v75.9h-75.9c-19.8 0-35.8 16.1-35.8 35.8 0 19.8 16.1 35.8 35.8 35.8h101.6c25.4 0 46-20.6 46-46V654.4c-0.1-19.7-16.2-35.8-35.9-35.8zM756.3 222.4H654.7c-19.8 0-35.8 16.1-35.8 35.8 0 19.8 16.1 35.8 35.8 35.8h75.9v76c0 19.8 16.1 35.8 35.8 35.8 19.7 0 35.8-16.1 35.8-35.8V268.4c0.1-25.3-20.5-46-45.9-46z" p-id="4418"></path></svg>

core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue

@@ -12,7 +12,8 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
-import { download2AppTemplate, downloadCanvas, downloadCanvas2 } from '@/utils/imgUtils'
+import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
+import screenfull from 'screenfull'
 
 const dvMainStore = dvMainStoreWithOut()
 const previewCanvasContainer = ref(null)
@@ -153,6 +154,13 @@ const mouseleave = () => {
   appStore.setArrowSide(false)
 }
 
+const fullscreenPreview = () => {
+  const ele = document.getElementById('de-preview-content') //指定全屏区域元素
+  if (screenfull.isEnabled) {
+    screenfull.request(ele)
+  }
+}
+
 defineExpose({
   getPreviewStateInfo
 })
@@ -208,8 +216,9 @@ defineExpose({
           @reload="reload"
           @download="downloadH2"
           @downloadAsAppTemplate="downloadAsAppTemplate"
+          @fullscreenPreview="fullscreenPreview"
         />
-        <div ref="previewCanvasContainer" class="content">
+        <div ref="previewCanvasContainer" class="content" id="de-preview-content">
           <de-preview
             ref="dashboardPreview"
             v-if="state.canvasStylePreview && dataInitState"

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

@@ -11,7 +11,7 @@ import { XpackComponent } from '@/components/plugin'
 const dvMainStore = dvMainStoreWithOut()
 const appStore = useAppStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
-const emit = defineEmits(['reload', 'download', 'downloadAsAppTemplate'])
+const emit = defineEmits(['reload', 'download', 'downloadAsAppTemplate', 'fullscreenPreview'])
 const { t } = useI18n()
 
 const favorited = ref(false)
@@ -22,6 +22,10 @@ const preview = () => {
 }
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 
+const fullscreenPreview = () => {
+  emit('fullscreenPreview', dvInfo.value.id)
+}
+
 const reload = () => {
   emit('reload', dvInfo.value.id)
 }
@@ -102,6 +106,12 @@ const initOpenHandler = newWindow => {
       </el-popover>
     </div>
     <div class="canvas-opt-button">
+      <el-button secondary v-if="!isDataEaseBi" @click="fullscreenPreview()">
+        <template #icon>
+          <icon name="icon_pc_fullscreen"></icon>
+        </template>
+        全屏</el-button
+      >
       <el-button secondary v-if="!isDataEaseBi" @click="preview()">
         <template #icon>
           <icon name="icon_pc_outlined"></icon>

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

@@ -15,6 +15,7 @@ import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
 import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
 import MultiplexPreviewShow from '@/views/data-visualization/MultiplexPreviewShow.vue'
+import screenfull from 'screenfull'
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
@@ -26,7 +27,7 @@ const permissionStore = usePermissionStoreWithOut()
 const dataInitState = ref(true)
 const downloadStatus = ref(false)
 const { width, node } = useMoveLine('DASHBOARD')
-
+const fullscreenFlag = ref(false)
 const props = defineProps({
   showPosition: {
     required: false,
@@ -101,6 +102,13 @@ const download = type => {
   }, 200)
 }
 
+const fullscreenPreview = () => {
+  const ele = document.getElementById('de-preview-content') //指定全屏区域元素
+  if (screenfull.isEnabled) {
+    screenfull.request(ele)
+  }
+}
+
 const downloadAsAppTemplate = downloadType => {
   downloadStatus.value = true
   nextTick(() => {
@@ -204,6 +212,7 @@ onBeforeMount(() => {
           @reload="reload"
           @download="download"
           @downloadAsAppTemplate="downloadAsAppTemplate"
+          @fullscreenPreview="fullscreenPreview"
         />
         <div
           v-if="showPosition === 'multiplexing' && dataInitState"
@@ -217,7 +226,7 @@ onBeforeMount(() => {
           ></multiplex-preview-show>
         </div>
         <div v-if="showPosition === 'preview'" ref="previewCanvasContainer" class="content">
-          <div class="content-outer">
+          <div id="de-preview-content" class="content-outer">
             <div class="content-inner">
               <de-preview
                 ref="dvPreview"