From 904b6b0332a46d8b535a6914890cdb81b339e521 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 13 Jan 2025 19:20:39 +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=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=B7=B3=E8=BD=AC=E7=9A=84=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=8F=98=E6=9B=B4=E4=B8=BA=E5=86=85=E5=B5=8C?=
 =?UTF-8?q?=E5=BC=8F=E5=BC=B9=E7=AA=97=20#14264?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visualization/DePreviewPopDialog.vue      | 89 +++++++++++++++++++
 .../views/chart/components/views/index.vue    | 45 +++++-----
 2 files changed, 113 insertions(+), 21 deletions(-)
 create mode 100644 core/core-frontend/src/components/visualization/DePreviewPopDialog.vue

diff --git a/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
new file mode 100644
index 0000000000..485d615e37
--- /dev/null
+++ b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
@@ -0,0 +1,89 @@
+<template>
+  <el-dialog
+    ref="previewPopDialog"
+    :custom-class="'preview_pop_custom'"
+    :append-to-body="true"
+    :fullscreen="state.fullscreen"
+    v-model="state.dialogShow"
+    :style="dialogStyle"
+    :modal="false"
+    :width="state.width"
+  >
+    <div v-if="state.url" class="preview-main-frame-outer">
+      <iframe
+        v-if="state.dialogShow"
+        class="preview-main-frame"
+        id="iframe-de-preview-pop"
+        :src="state.url"
+        scrolling="auto"
+        frameborder="0"
+      />
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+
+const state = reactive({
+  dialogShow: false,
+  name: '',
+  fullscreen: false,
+  url: '',
+  width: '70vw',
+  height: '70%'
+})
+
+const dialogStyle = computed(() => {
+  if (state.fullscreen) {
+    return {}
+  } else {
+    return { height: state.height }
+  }
+})
+
+const previewInit = params => {
+  state.url = params.url
+  if (params.size === 'large') {
+    state.fullscreen = true
+  } else if (params.size === 'middle') {
+    state.fullscreen = false
+    state.width = '80vw'
+    state.height = '80%'
+  } else {
+    state.fullscreen = false
+    state.width = '65vw'
+    state.height = '65%'
+  }
+  state.dialogShow = true
+}
+
+defineExpose({
+  previewInit
+})
+</script>
+
+<style lang="less">
+.preview_pop_custom {
+  overflow: hidden;
+  .preview-main-frame-outer {
+    width: 100%;
+    height: 100%;
+    .preview-main-frame {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .ed-dialog__body {
+    height: calc(100% - 42px);
+    padding: 0;
+  }
+  .ed-dialog__header {
+    height: 36px;
+    .ed-dialog__headerbtn {
+      top: 4px !important;
+      right: 8px !important;
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index 451dd0f34d..7afe0fce96 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -53,13 +53,14 @@ import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart'
 import request from '@/config/axios'
 import { store } from '@/store'
 import { clearExtremum } from '@/views/chart/components/js/extremumUitl'
+import DePreviewPopDialog from '@/components/visualization/DePreviewPopDialog.vue'
 
 const { wsCache } = useCache()
 const chartComponent = ref<any>()
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const { emitter } = useEmitt()
-
+const dePreviewPopDialogRef = ref(null)
 let innerRefreshTimer = null
 const appStore = useAppStoreWithOut()
 const appearanceStore = useAppearanceStoreWithOut()
@@ -411,26 +412,27 @@ const windowsJump = (url, jumpType, size = 'middle') => {
   try {
     let newWindow
     if ('newPop' === jumpType) {
-      let sizeX, sizeY
-      if (size === 'large') {
-        sizeX = 0.95
-        sizeY = 0.9
-      } else if (size === 'middle') {
-        sizeX = 0.8
-        sizeY = 0.75
-      } else {
-        sizeX = 0.6
-        sizeY = 0.5
-      }
-      const height = screen.height * sizeY
-      const width = screen.width * sizeX
-      const left = screen.width * ((1 - sizeX) / 2)
-      const top = screen.height * ((1 - sizeY) / 2)
-      newWindow = window.open(
-        url,
-        '_blank',
-        `width=${width},height=${height},left=${left},top=${top},toolbar=no,scrollbars=yes,resizable=yes,location=no`
-      )
+      dePreviewPopDialogRef.value.previewInit({ url, size })
+      // let sizeX, sizeY
+      // if (size === 'large') {
+      //   sizeX = 0.95
+      //   sizeY = 0.9
+      // } else if (size === 'middle') {
+      //   sizeX = 0.8
+      //   sizeY = 0.75
+      // } else {
+      //   sizeX = 0.6
+      //   sizeY = 0.5
+      // }
+      // const height = screen.height * sizeY
+      // const width = screen.width * sizeX
+      // const left = screen.width * ((1 - sizeX) / 2)
+      // const top = screen.height * ((1 - sizeY) / 2)
+      // newWindow = window.open(
+      //   url,
+      //   '_blank',
+      //   `width=${width},height=${height},left=${left},top=${top},toolbar=no,scrollbars=yes,resizable=yes,location=no`
+      // )
     } else if ('_self' === jumpType) {
       newWindow = window.open(url, jumpType)
       if (inMobile.value) {
@@ -1246,6 +1248,7 @@ const titleTooltipWidth = computed(() => {
       jsname="L2NvbXBvbmVudC9wbHVnaW5zLWhhbmRsZXIvVmlld0NhdGVnb3J5SGFuZGxlcg=="
       @load-plugin-category="loadPluginCategory"
     />
+    <DePreviewPopDialog ref="dePreviewPopDialogRef"></DePreviewPopDialog>
   </div>
 </template>