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

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"