Merge pull request #7785 from dataease/pr@dev@refactor_view-dialog

refactor(仪表板): 视图导出支持选择分辨率

core/frontend/src/components/canvas/customComponent/UserView.vue

@@ -154,15 +154,39 @@
         v-if="chartDetailsVisible"
         style="position: absolute;right: 70px;top:15px"
       >
-        <el-button
+        <span v-if="showChartInfoType==='enlarge' && hasDataPermission('export',panelInfo.privileges)&& showChartInfo && !equalsAny(showChartInfo.type, 'symbol-map', 'flow-map')">
-          v-if="showChartInfoType==='enlarge' && hasDataPermission('export',panelInfo.privileges)&& showChartInfo && !equalsAny(showChartInfo.type, 'symbol-map', 'flow-map')"
+          <span style="font-size: 12px">
-          class="el-icon-picture-outline"
+            导出分辨率
-          size="mini"
+          </span>
-          :disabled="imageDownloading"
+          <el-select
-          @click="exportViewImg"
+            v-model="pixel"
-        >
+            style="width: 120px; margin-right: 8px; margin-top: -1px"
-          {{ $t('chart.export_img') }}
+            :popper-append-to-body="false"
-        </el-button>
+            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"
@@ -367,7 +391,44 @@ export default {
         show: 0
       },
       view: {},
-      cancelTime: null
+      cancelTime: null,
+      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'
     }
   },
 
@@ -685,7 +746,7 @@ export default {
     },
     exportViewImg() {
       this.imageDownloading = true
-      this.$refs['userViewDialog'].exportViewImg(() => {
+      this.$refs['userViewDialog'].exportViewImg(this.pixel,() => {
         this.imageDownloading = false
       })
     },

core/frontend/src/components/canvas/customComponent/UserViewDialog.vue

@@ -13,7 +13,6 @@
     >
       <div
         id="chartCanvas"
-        :class="{'canvas-class-exporting':exporting}"
         class="canvas-class"
         :style="customStyle"
       >
@@ -23,6 +22,7 @@
         >
           <plugin-com
             v-if="chart.isPlugin"
+            :ref="element.propValue.id"
             :component-name="chart.type + '-view'"
             :obj="{chart: mapChart || chart}"
             :chart="mapChart || chart"
@@ -31,32 +31,38 @@
             class="chart-class"
           />
           <chart-component
+            :ref="element.propValue.id"
             v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'"
             :theme-style="element.commonBackground"
             class="chart-class"
             :chart="mapChart || chart"
           />
           <chart-component-g2
+            :ref="element.propValue.id"
             v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'"
             class="chart-class show-in-dialog"
             :chart="chart"
           />
           <chart-component-s2
+            :ref="element.propValue.id"
             v-else-if="chart.type.includes('table') && renderComponent() === 'antv'"
             class="chart-class"
             :chart="chart"
           />
           <label-normal
+            :ref="element.propValue.id"
             v-else-if="chart.type.includes('text')"
             :chart="chart"
             class="table-class"
           />
           <label-normal-text
+            :ref="element.propValue.id"
             v-else-if="chart.type === 'label'"
             :chart="chart"
             class="table-class"
           />
           <table-normal
+            :ref="element.propValue.id"
             v-else-if="chart.type.includes('table') && renderComponent() === 'echarts'"
             :chart="chart"
             class="table-class"
@@ -126,7 +132,8 @@ export default {
       lastMapChart: null,
       linkLoading: false,
       exporting: false,
-      exportLoading: false
+      exportLoading: false,
+      pixel: '1280 * 720'
     }
   },
   computed: {
@@ -144,6 +151,13 @@ export default {
     },
     customStyle() {
       let style = {}
+      if (this.exporting) {
+        const bashStyle = this.pixel.split(' * ')
+        style = {
+          width: bashStyle[0] + 'px!important',
+          height: bashStyle[1] + 'px!important'
+        }
+      }
       if (this.canvasStyleData.openCommonStyle) {
         if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
           style = {
@@ -261,13 +275,16 @@ export default {
         }
       }
     },
-    exportViewImg(callback) {
+    exportViewImg(pixel, callback) {
+      this.pixel = pixel
       this.exportLoading = true
       this.$nextTick(() => {
         this.exporting = true
+        this.resizeChart()
         setTimeout(() => {
           exportImg(this.chart.name, (params) => {
             this.exporting = false
+            this.resizeChart()
             setTimeout(() => {
               this.exportLoading = false
             }, 500)
@@ -286,6 +303,13 @@ export default {
 
     renderComponent() {
       return this.chart.render
+    },
+    resizeChart() {
+      if (this.$refs[this.element.propValue.id]) {
+        this.chart.isPlugin
+          ? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
+          : this.$refs[this.element.propValue.id].chartResize()
+      }
     }
   }
 }
@@ -320,8 +344,8 @@ export default {
   background-size: 100% 100% !important;
 }
 .canvas-class-exporting {
-  width: 1080px!important;
+  width: 1980px!important;
-  height: 560px!important;
+  height: 860px!important;
 }
 
 .abs-container {