From 8b2c71c7a7bcbb03c2c80c0a3f7d72bfcb737e0b Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 24 Jan 2024 14:40:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=85=A8=E5=B1=8F=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E8=A7=86=E5=9B=BE=E5=83=8F=E7=B4=A0=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/editor/CanvasOptBar.vue |  2 +-
 .../canvas/components/editor/Preview.vue      | 83 ++++++++++++++++---
 .../canvas/customComponent/UserViewDialog.vue |  1 -
 .../src/components/canvas/utils/utils.js      |  7 ++
 4 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
index d81fb40174..2eff60e48f 100644
--- a/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
+++ b/core/frontend/src/components/canvas/components/editor/CanvasOptBar.vue
@@ -106,7 +106,7 @@ export default {
   },
   computed: {
     isPcTerminal() {
-      return this.terminal === 'PC'
+      return this.terminal === 'pc'
     },
     functionClass() {
       let result = 'function-light'
diff --git a/core/frontend/src/components/canvas/components/editor/Preview.vue b/core/frontend/src/components/canvas/components/editor/Preview.vue
index 1cbca01509..073ec965e9 100644
--- a/core/frontend/src/components/canvas/components/editor/Preview.vue
+++ b/core/frontend/src/components/canvas/components/editor/Preview.vue
@@ -116,15 +116,39 @@
         v-if="chartDetailsVisible"
         style="position: absolute;right: 70px;top:15px"
       >
-        <el-button
-          v-if="showChartInfoType==='enlarge' && hasDataPermission('export',panelInfo.privileges)&& showChartInfo && showChartInfo.type !== 'symbol-map'"
-          class="el-icon-picture-outline"
-          size="mini"
-          :disabled="imageDownloading"
-          @click="exportViewImg"
-        >
-          {{ $t('chart.export_img') }}
-        </el-button>
+        <span v-if="showChartInfoType==='enlarge' && hasDataPermission('export',panelInfo.privileges)&& showChartInfo && showChartInfo.type !== 'symbol-map'">
+          <span style="font-size: 12px">
+            导出分辨率
+          </span>
+          <el-select
+            v-model="pixel"
+            style="width: 120px; margin-right: 8px; margin-top: -1px"
+            :popper-append-to-body="false"
+            size="mini"
+          >
+            <el-option-group
+              v-for="group in pixelOptions"
+              :key="group.label"
+              :label="group.label"
+            >
+              <el-option
+                v-for="item in group.options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-option-group>
+          </el-select>
+          <el-button
+            class="el-icon-picture-outline"
+            size="mini"
+            :disabled="imageDownloading"
+            @click="exportViewImg"
+          >
+            {{ $t('chart.export_img') }}
+          </el-button>
+        </span>
+
         <el-button
           v-if="showChartInfoType==='details'&& hasDataPermission('export',panelInfo.privileges)"
           size="mini"
@@ -293,7 +317,44 @@ export default {
       pdfTemplateSelectedIndex: 0,
       pdfTemplateContent: '',
       templateInfo: {},
-      pdfTemplateAll: []
+      pdfTemplateAll: [],
+      pixelOptions: [
+        {
+          label: 'Windows(16:9)',
+          options: [
+            {
+              value: '1920 * 1080',
+              label: '1920 * 1080'
+            },
+            {
+              value: '1600 * 900',
+              label: '1600 * 900'
+            },
+            {
+              value: '1280 * 720',
+              label: '1280 * 720'
+            }
+          ]
+        },
+        {
+          label: 'MacOS(16:10)',
+          options: [
+            {
+              value: '2560 * 1600',
+              label: '2560 * 1600'
+            },
+            {
+              value: '1920 * 1200',
+              label: '1920 * 1200'
+            },
+            {
+              value: '1680 * 1050',
+              label: '1680 * 1050'
+            }
+          ]
+        }
+      ],
+      pixel: '1280 * 720'
     }
   },
   computed: {
@@ -764,7 +825,7 @@ export default {
     },
     exportViewImg() {
       this.imageDownloading = true
-      this.$refs['userViewDialog-canvas-main'].exportViewImg(() => {
+      this.$refs['userViewDialog-canvas-main'].exportViewImg(this.pixel, () => {
         this.imageDownloading = false
       })
     },
diff --git a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
index abde76c736..8439019ce9 100644
--- a/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
+++ b/core/frontend/src/components/canvas/customComponent/UserViewDialog.vue
@@ -5,7 +5,6 @@
   >
     <de-main-container
       v-show="showChartCanvas"
-      v-loading="exportLoading"
       style="overflow: hidden"
       :element-loading-text="$t('panel.data_loading')"
       element-loading-spinner="el-icon-loading"
diff --git a/core/frontend/src/components/canvas/utils/utils.js b/core/frontend/src/components/canvas/utils/utils.js
index 19ed237940..148fb01374 100644
--- a/core/frontend/src/components/canvas/utils/utils.js
+++ b/core/frontend/src/components/canvas/utils/utils.js
@@ -226,6 +226,11 @@ export function checkViewTitle(opt, id, tile) {
 export function exportImg(imgName, callback) {
   const canvasID = document.getElementById('chartCanvas')
   const a = document.createElement('a')
+  // 保存原始的设备像素比值
+  const originalDPR = window.devicePixelRatio
+
+  // 将设备像素比设置为1
+  window.devicePixelRatio = 1
   html2canvas(canvasID).then(canvas => {
     const dom = document.body.appendChild(canvas)
     dom.style.display = 'none'
@@ -238,8 +243,10 @@ export function exportImg(imgName, callback) {
     a.click()
     URL.revokeObjectURL(blob)
     document.body.removeChild(a)
+    window.devicePixelRatio = originalDPR
     callback()
   }).catch(() => {
+    window.devicePixelRatio = originalDPR
     callback()
   })
 }