Merge pull request #10299 from dataease/pr@dev-v2@feat_fullscreen2

refactor(仪表板、数据大屏): 优化全屏组件，解决因局部全屏导致的过滤组件下拉框，提示等body层组件无法显示问题

core/core-frontend/src/components/visualization/common/DeFullscreenButton.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+
+const dvMainStore = dvMainStoreWithOut()
+import screenfull from 'screenfull'
+import { onBeforeUnmount, onMounted } from 'vue'
+
+defineProps({
+  themes: {
+    type: String,
+    default: 'light'
+  }
+})
+const fullscreenChange = () => {
+  if (screenfull.isEnabled) {
+    dvMainStore.setFullscreenFlag(screenfull.isFullscreen)
+  }
+}
+
+const toggleFullscreen = () => {
+  if (screenfull.isEnabled) {
+    const bodyNode = document.querySelector('body')
+    //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
+    screenfull.toggle(bodyNode)
+  }
+}
+
+onMounted(() => {
+  if (screenfull.isEnabled) {
+    screenfull.on('change', fullscreenChange)
+  }
+})
+
+onBeforeUnmount(() => {
+  screenfull.off('change', fullscreenChange)
+})
+</script>
+
+<template>
+  <el-button secondary @click="toggleFullscreen">
+    <template #icon>
+      <icon name="icon_pc_fullscreen"></icon>
+    </template>
+    全屏</el-button
+  >
+</template>
+
+<style lang="less" scoped></style>

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

@@ -23,6 +23,7 @@ import { get, set } from 'lodash-es'
 export const dvMainStore = defineStore('dataVisualization', {
   state: () => {
     return {
+      fullscreenFlag: false, // 全屏启用标识
       staticResourcePath: '/static-resource/',
       canvasCollapse: {
         defaultSide: false,
@@ -442,6 +443,9 @@ export const dvMainStore = defineStore('dataVisualization', {
       this.curLinkageView = this.curComponent
       this.targetLinkageInfo = targetLinkageInfo
     },
+    setFullscreenFlag(val) {
+      this.fullscreenFlag = val
+    },
     removeViewFilter(componentId) {
       this.componentData = this.componentData.map(item => {
         const newItem = item

core/core-frontend/src/style/index.less

@@ -495,3 +495,16 @@ strong {
   top: calc(50% - 22px) !important;
   left: calc(50% - 40px) !important;
 }
+
+// 解决screenfull全屏时 部分嵌入到body中的组件（如 下来框 消息通知框等）被覆盖问题
+// 这里使用的方案为直接将body全屏 区间组件覆盖整个body
+.de-screen-full{
+  position:fixed !important;
+  z-index:200;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100% !important;
+}

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

@@ -13,7 +13,7 @@ import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
 import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
-import screenfull from 'screenfull'
+import { storeToRefs } from 'pinia'
 
 const dvMainStore = dvMainStoreWithOut()
 const previewCanvasContainer = ref(null)
@@ -32,6 +32,8 @@ const state = reactive({
   curPreviewGap: 0
 })
 
+const { fullscreenFlag } = storeToRefs(dvMainStore)
+
 const { width, node } = useMoveLine('DASHBOARD')
 
 const props = defineProps({
@@ -154,13 +156,6 @@ const mouseleave = () => {
   appStore.setArrowSide(false)
 }
 
-const fullscreenPreview = () => {
-  const ele = document.getElementById('de-preview-content') //指定全屏区域元素
-  if (screenfull.isEnabled) {
-    screenfull.request(ele)
-  }
-}
-
 defineExpose({
   getPreviewStateInfo
 })
@@ -216,9 +211,13 @@ defineExpose({
           @reload="reload"
           @download="downloadH2"
           @downloadAsAppTemplate="downloadAsAppTemplate"
-          @fullscreenPreview="fullscreenPreview"
         />
-        <div ref="previewCanvasContainer" class="content" id="de-preview-content">
+        <div
+          ref="previewCanvasContainer"
+          class="content"
+          id="de-preview-content"
+          :class="{ 'de-screen-full': fullscreenFlag }"
+        >
           <de-preview
             ref="dashboardPreview"
             v-if="state.canvasStylePreview && dataInitState"

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

@@ -8,10 +8,11 @@ import { storeApi, storeStatusApi } from '@/api/visualization/dataVisualization'
 import { ref, watch, computed } from 'vue'
 import ShareVisualHead from '@/views/share/share/ShareVisualHead.vue'
 import { XpackComponent } from '@/components/plugin'
+import DeFullscreenButton from '@/components/visualization/common/DeFullscreenButton.vue'
 const dvMainStore = dvMainStoreWithOut()
 const appStore = useAppStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
-const emit = defineEmits(['reload', 'download', 'downloadAsAppTemplate', 'fullscreenPreview'])
+const emit = defineEmits(['reload', 'download', 'downloadAsAppTemplate'])
 const { t } = useI18n()
 
 const favorited = ref(false)
@@ -22,10 +23,6 @@ const preview = () => {
 }
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 
-const fullscreenPreview = () => {
-  emit('fullscreenPreview', dvInfo.value.id)
-}
-
 const reload = () => {
   emit('reload', dvInfo.value.id)
 }
@@ -106,12 +103,7 @@ 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
-      >
+      <de-fullscreen-button v-if="!isDataEaseBi"></de-fullscreen-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,10 +15,9 @@ 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)
+const { dvInfo, fullscreenFlag } = storeToRefs(dvMainStore)
 const previewCanvasContainer = ref(null)
 const dvPreview = ref(null)
 const slideShow = ref(true)
@@ -27,7 +26,6 @@ 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,
@@ -102,13 +100,6 @@ 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(() => {
@@ -212,7 +203,6 @@ onBeforeMount(() => {
           @reload="reload"
           @download="download"
           @downloadAsAppTemplate="downloadAsAppTemplate"
-          @fullscreenPreview="fullscreenPreview"
         />
         <div
           v-if="showPosition === 'multiplexing' && dataInitState"
@@ -226,7 +216,11 @@ onBeforeMount(() => {
           ></multiplex-preview-show>
         </div>
         <div v-if="showPosition === 'preview'" ref="previewCanvasContainer" class="content">
-          <div id="de-preview-content" class="content-outer">
+          <div
+            id="de-preview-content"
+            :class="{ 'de-screen-full': fullscreenFlag }"
+            class="content-outer"
+          >
             <div class="content-inner">
               <de-preview
                 ref="dvPreview"