refactor(仪表板、数据大屏): 当前页面跳转的弹窗样式变更为内嵌式弹窗 #14264

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>

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>