From 27acb44d9c11a76a29bc7d82a24550ee7a4c1a5a Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 14 Jun 2024 17:54:38 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E7=BB=84=E4=BB=B6=EF=BC=8C=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E5=9B=A0=E5=B1=80=E9=83=A8=E5=85=A8=E5=B1=8F=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E8=BF=87=E6=BB=A4=E7=BB=84=E4=BB=B6=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E6=A1=86=EF=BC=8C=E6=8F=90=E7=A4=BA=E7=AD=89body=E5=B1=82?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/DeFullscreenButton.vue             | 48 +++++++++++++++++++
 .../modules/data-visualization/dvMain.ts      |  4 ++
 core/core-frontend/src/style/index.less       | 13 +++++
 .../views/dashboard/DashboardPreviewShow.vue  | 19 ++++----
 .../views/data-visualization/PreviewHead.vue  | 14 ++----
 .../views/data-visualization/PreviewShow.vue  | 18 +++----
 6 files changed, 83 insertions(+), 33 deletions(-)
 create mode 100644 core/core-frontend/src/components/visualization/common/DeFullscreenButton.vue

diff --git a/core/core-frontend/src/components/visualization/common/DeFullscreenButton.vue b/core/core-frontend/src/components/visualization/common/DeFullscreenButton.vue
new file mode 100644
index 0000000000..df3d5198fa
--- /dev/null
+++ b/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>
diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 7e202e3b66..0271bbda48 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/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
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 4e79048f4c..1fb9324735 100644
--- a/core/core-frontend/src/style/index.less
+++ b/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;
+}
diff --git a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
index 12a022e2f6..9c1ef24cfd 100644
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/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"
diff --git a/core/core-frontend/src/views/data-visualization/PreviewHead.vue b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
index 1081be53ef..592f8964e6 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewHead.vue
+++ b/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>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewShow.vue b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
index 3bacf2aac0..a329bbd356 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/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"