From fecc4056bcc71768ec7a0b3f4ebc9aac10be6069 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 19 Jun 2024 10:08:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):?=
 =?UTF-8?q?=20=E4=BC=98=E5=8C=96=E5=A4=A7=E5=B1=8F=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/ComponentToolBar.vue   |  7 ++
 .../data-visualization/DvToolbar.vue          | 10 ++-
 .../visualization/common/DeFullscreen.vue     |  5 ++
 .../views/data-visualization/DvPreview.vue    | 89 +++++++++++++++++++
 .../views/data-visualization/PreviewShow.vue  | 38 ++++----
 .../src/views/data-visualization/index.vue    | 12 +++
 6 files changed, 137 insertions(+), 24 deletions(-)
 create mode 100644 core/core-frontend/src/views/data-visualization/DvPreview.vue

diff --git a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
index b911edb003..cda9545518 100644
--- a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
+++ b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
@@ -94,6 +94,13 @@ onMounted(() => {
       useEmitt().emitter.emit('initScroll')
     })
   }, 1000)
+  useEmitt({
+    name: 'canvasScrollRestore',
+    callback: function () {
+      // 用于全屏后还原编辑状态大小
+      changeSizeWithScale(scale.value)
+    }
+  })
 })
 
 onUnmounted(() => {
diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
index 8cb9023442..61d1f74a0f 100644
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@@ -23,6 +23,7 @@ import ComponentButton from '@/components/visualization/ComponentButton.vue'
 import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
 import MultiplexingCanvas from '@/views/common/MultiplexingCanvas.vue'
 import ComponentButtonLabel from '@/components/visualization/ComponentButtonLabel.vue'
+import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -36,6 +37,7 @@ let scaleEdit = 100
 const { wsCache } = useCache('localStorage')
 const dvModel = 'dataV'
 const outerParamsSetRef = ref(null)
+const fullScreeRef = ref(null)
 
 const closeEditCanvasName = () => {
   nameEdit.value = false
@@ -303,7 +305,12 @@ const multiplexingCanvasOpen = () => {
         >
           编辑
         </el-button>
-        <el-button v-else class="preview-button" @click="preview()" style="float: right">
+        <el-button
+          v-else
+          class="preview-button"
+          @click="() => fullScreeRef.toggleFullscreen()"
+          style="float: right"
+        >
           预览
         </el-button>
         <el-button
@@ -335,6 +342,7 @@ const multiplexingCanvasOpen = () => {
       ref="resourceGroupOpt"
     />
   </div>
+  <de-fullscreen ref="fullScreeRef" show-position="dvEdit"></de-fullscreen>
   <multiplexing-canvas ref="multiplexingRef"></multiplexing-canvas>
   <outer-params-set ref="outerParamsSetRef"> </outer-params-set>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
diff --git a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
index 5570e2caa8..5ae9de0c68 100644
--- a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
+++ b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
@@ -4,6 +4,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 const dvMainStore = dvMainStoreWithOut()
 import screenfull from 'screenfull'
 import { onBeforeUnmount, onMounted, toRefs } from 'vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const props = defineProps({
   themes: {
@@ -33,6 +34,10 @@ const fullscreenChange = () => {
         dvMainStore.setEditMode('edit')
       }
     }
+    // 大屏编辑使用
+    if (props.showPosition === 'dvEdit') {
+      useEmitt().emitter.emit('canvasScrollRestore')
+    }
   }
 }
 
diff --git a/core/core-frontend/src/views/data-visualization/DvPreview.vue b/core/core-frontend/src/views/data-visualization/DvPreview.vue
new file mode 100644
index 0000000000..f750a3911e
--- /dev/null
+++ b/core/core-frontend/src/views/data-visualization/DvPreview.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { ref } from 'vue'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
+import { storeToRefs } from 'pinia'
+
+const dvMainStore = dvMainStoreWithOut()
+const { fullscreenFlag } = storeToRefs(dvMainStore)
+const dePreviewRef = ref(null)
+const dataInitState = ref(true)
+defineProps({
+  canvasStylePreview: {
+    required: true,
+    type: Object
+  },
+  canvasDataPreview: {
+    required: true,
+    type: Object
+  },
+  canvasViewInfoPreview: {
+    required: true,
+    type: Object
+  },
+  dvInfo: {
+    required: true,
+    type: Object
+  },
+  curPreviewGap: {
+    required: false,
+    type: Number,
+    default: 0
+  },
+  showPosition: {
+    required: false,
+    type: String,
+    default: 'preview'
+  },
+  downloadStatus: {
+    required: false,
+    type: Boolean,
+    default: false
+  }
+})
+
+const restore = () => {
+  dePreviewRef.value.restore()
+}
+
+defineExpose({
+  restore
+})
+</script>
+
+<template>
+  <div id="de-preview-content" :class="{ 'de-screen-full': fullscreenFlag }" class="content-outer">
+    <div class="content-inner">
+      <de-preview
+        ref="dePreviewRef"
+        v-if="canvasStylePreview && dataInitState"
+        :component-data="canvasDataPreview"
+        :canvas-style-data="canvasStylePreview"
+        :canvas-view-info="canvasViewInfoPreview"
+        :dv-info="dvInfo"
+        :cur-gap="curPreviewGap"
+        :show-position="showPosition"
+        :download-status="downloadStatus"
+      ></de-preview>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.content-outer {
+  width: 100%;
+  height: calc(100vh - 112px);
+  background: #f5f6f7;
+  display: flex;
+  overflow-y: auto;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center; /* 上下居中 */
+  .content-inner {
+    width: 100%;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewShow.vue b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
index a329bbd356..d6ed1be5a7 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
@@ -3,7 +3,6 @@ import DeResourceTree from '@/views/common/DeResourceTree.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import { nextTick, onBeforeMount, reactive, ref, computed } from 'vue'
-import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import PreviewHead from '@/views/data-visualization/PreviewHead.vue'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
 import { storeToRefs } from 'pinia'
@@ -15,11 +14,12 @@ 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 DvPreview from '@/views/data-visualization/DvPreview.vue'
 
 const dvMainStore = dvMainStoreWithOut()
-const { dvInfo, fullscreenFlag } = storeToRefs(dvMainStore)
+const { dvInfo } = storeToRefs(dvMainStore)
 const previewCanvasContainer = ref(null)
-const dvPreview = ref(null)
+const dvPreviewRef = ref(null)
 const slideShow = ref(true)
 const requestStore = useRequestStoreWithOut()
 const permissionStore = usePermissionStoreWithOut()
@@ -83,7 +83,7 @@ const loadCanvasData = (dvId, weight?) => {
       if (props.showPosition === 'preview') {
         dvMainStore.updateCurDvInfo(dvInfo)
         nextTick(() => {
-          dvPreview.value?.restore()
+          dvPreviewRef.value?.restore()
         })
       }
     }
@@ -216,25 +216,17 @@ onBeforeMount(() => {
           ></multiplex-preview-show>
         </div>
         <div v-if="showPosition === 'preview'" ref="previewCanvasContainer" class="content">
-          <div
-            id="de-preview-content"
-            :class="{ 'de-screen-full': fullscreenFlag }"
-            class="content-outer"
-          >
-            <div class="content-inner">
-              <de-preview
-                ref="dvPreview"
-                v-if="state.canvasStylePreview && dataInitState"
-                :component-data="state.canvasDataPreview"
-                :canvas-style-data="state.canvasStylePreview"
-                :canvas-view-info="state.canvasViewInfoPreview"
-                :dv-info="state.dvInfo"
-                :cur-gap="state.curPreviewGap"
-                :show-position="showPosition"
-                :download-status="downloadStatus"
-              ></de-preview>
-            </div>
-          </div>
+          <dv-preview
+            ref="dvPreviewRef"
+            v-if="state.canvasStylePreview && dataInitState"
+            :show-position="showPosition"
+            :canvas-data-preview="state.canvasDataPreview"
+            :canvas-style-preview="state.canvasStylePreview"
+            :canvas-view-info-preview="state.canvasViewInfoPreview"
+            :dv-info="state.dvInfo"
+            :cur-preview-gap="state.curPreviewGap"
+            :download-status="downloadStatus"
+          ></dv-preview>
         </div>
       </template>
       <template v-else-if="hasTreeData && mounted">
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 80ed02760b..fe79e6d58b 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -38,9 +38,11 @@ import { XpackComponent } from '@/components/plugin'
 import { Base64 } from 'js-base64'
 import CanvasCacheDialog from '@/components/visualization/CanvasCacheDialog.vue'
 import { deepCopy } from '@/utils/utils'
+import DvPreview from '@/views/data-visualization/DvPreview.vue'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
+const dvPreviewRef = ref(null)
 const eventCheck = e => {
   if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
     const opt = embeddedStore.opt || router.currentRoute.value.query.opt
@@ -63,6 +65,7 @@ const composeStore = composeStoreWithOut()
 const canvasCacheOutRef = ref(null)
 
 const {
+  fullscreenFlag,
   componentData,
   curComponent,
   isClickComponent,
@@ -454,6 +457,15 @@ eventBus.on('handleNew', handleNew)
     @load-fail="XpackLoaded"
   />
   <canvas-cache-dialog ref="canvasCacheOutRef" @doUseCache="doUseCache"></canvas-cache-dialog>
+  <dv-preview
+    v-if="fullscreenFlag"
+    style="z-index: 10"
+    ref="dvPreviewRef"
+    :canvas-data-preview="componentData"
+    :canvas-style-preview="canvasStyleData"
+    :canvas-view-info-preview="canvasViewInfo"
+    :dv-info="dvInfo"
+  ></dv-preview>
 </template>
 
 <style lang="less">