refactor(仪表板): excel导出按钮防止重复点击#4925

frontend/src/components/canvas/components/editor/Preview.vue

@@ -115,6 +115,7 @@
           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') }}
@@ -122,6 +123,7 @@
         <el-button
           v-if="showChartInfoType==='details'&& hasDataPermission('export',panelInfo.privileges)"
           size="mini"
+          :disabled="$store.getters.loadingMap[$store.getters.currentPath]"
           @click="exportExcel"
         >
           <svg-icon
@@ -234,6 +236,7 @@ export default {
   },
   data() {
     return {
+      imageDownloading: false,
       chartDetailsVisible: false,
       showChartInfo: {},
       showChartTableInfo: {},
@@ -697,7 +700,10 @@ export default {
       this.$refs['userViewDialog-canvas-main'].exportExcel()
     },
     exportViewImg() {
-      this.$refs['userViewDialog-canvas-main'].exportViewImg()
+      this.imageDownloading = true
+      this.$refs['userViewDialog-canvas-main'].exportViewImg(()=>{
+        this.imageDownloading = false
+      })
     },
     deselectCurComponent(e) {
       if (!this.isClickComponent) {

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

@@ -144,6 +144,7 @@
           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') }}
@@ -151,6 +152,7 @@
         <el-button
           v-if="showChartInfoType==='details' && hasDataPermission('export',panelInfo.privileges)"
           size="mini"
+          :disabled="$store.getters.loadingMap[$store.getters.currentPath]"
           @click="exportExcel"
         >
           <svg-icon
@@ -306,6 +308,7 @@ export default {
   },
   data() {
     return {
+      imageDownloading: false,
       innerRefreshTimer: null,
       mobileChartDetailsVisible: false,
       chartDetailsVisible: false,
@@ -601,7 +604,10 @@ export default {
       this.$refs['userViewDialog'].exportExcel()
     },
     exportViewImg() {
-      this.$refs['userViewDialog'].exportViewImg()
+      this.imageDownloading = true
+      this.$refs['userViewDialog'].exportViewImg(()=>{
+        this.imageDownloading = false
+      })
     },
     pluginEditHandler(e) {
       this.$emit('trigger-plugin-edit', { e, id: this.element.id })

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

@@ -254,8 +254,8 @@ export default {
         }
       }
     },
-    exportViewImg() {
+    exportViewImg(callback) {
-      exportImg(this.chart.name)
+      exportImg(this.chart.name,callback)
     },
     setLastMapChart(data) {
       this.lastMapChart = JSON.parse(JSON.stringify(data))

frontend/src/components/canvas/utils/utils.js

@@ -212,7 +212,7 @@ export function checkViewTitle(opt, id, tile) {
   }
 }
 
-export function exportImg(imgName) {
+export function exportImg(imgName,callback) {
   const canvasID = document.getElementById('chartCanvas')
   const a = document.createElement('a')
   html2canvas(canvasID).then(canvas => {
@@ -227,6 +227,9 @@ export function exportImg(imgName) {
     a.click()
     URL.revokeObjectURL(blob)
     document.body.removeChild(a)
+    callback()
+  }).catch(() => {
+    callback()
   })
 }