refactor:PDF导出，模板导出等增加数据准备提示，PDF导出后自动关闭对话框

frontend/src/lang/zh.js

@@ -1333,7 +1333,10 @@ export default {
     new_window: '新窗口',
     now_window: '当前窗口',
     hyperLinks: '超链接',
-    link_open_tips: '仪表板非编辑状态可打开链接'
+    link_open_tips: '仪表板非编辑状态可打开链接',
+    data_loading: '数据准备中...',
+    export_loading: '导出中...',
+    export_pdf: '导出PDF'
   },
   plugin: {
     local_install: '本地安装',

frontend/src/views/panel/export/PDFPreExport.vue

@@ -1,5 +1,11 @@
 <template>
-  <el-row>
+  <el-row
+    v-loading="exportLoading"
+    style="height: 100%;width: 100%;"
+    :element-loading-text="$t('panel.export_loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
     <el-row class="export_body_class">
       <div id="exportPdf" ref="exportPdf">
         <div class="export_body_inner_class" v-html="templateContentChange" />
@@ -7,7 +13,7 @@
     </el-row>
     <el-row class="root_class">
       <el-button size="mini" @click="cancel()">{{ $t('commons.cancel') }}</el-button>
-      <el-button type="primary" size="mini" @click="save()">导出PDF</el-button>
+      <el-button type="primary" size="mini" @click="save()">{{ $t('panel.export_pdf') }}</el-button>
     </el-row>
   </el-row>
 </template>
@@ -36,6 +42,7 @@ export default {
   },
   data() {
     return {
+      exportLoading: false,
       activeName: '',
       templateContentChange: '',
       time: '',
@@ -82,15 +89,20 @@ export default {
     },
     save() {
       const _this = this
-      html2canvas(document.getElementById('exportPdf')).then(function(canvas) {
-        const contentWidth = canvas.width
-        const contentHeight = canvas.height
-        const pageData = canvas.toDataURL('image/jpeg', 1.0)
-        const PDF = new JsPDF('l', 'px', [contentWidth, contentHeight])
-        PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
-        PDF.save(_this.panelName + '.pdf')
-      }
-      )
+      _this.exportLoading = true
+      setTimeout(() => {
+        html2canvas(document.getElementById('exportPdf')).then(function(canvas) {
+          _this.exportLoading = false
+          const contentWidth = canvas.width
+          const contentHeight = canvas.height
+          const pageData = canvas.toDataURL('image/jpeg', 1.0)
+          const PDF = new JsPDF('l', 'px', [contentWidth, contentHeight])
+          PDF.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight)
+          PDF.save(_this.panelName + '.pdf')
+          _this.$emit('closePreExport')
+        }
+        )
+      }, 50)
     }
 
   }

frontend/src/views/panel/list/PanelViewShow.vue

@@ -1,5 +1,11 @@
 <template>
-  <el-row style="height: 100%;width: 100%;">
+  <el-row
+    v-loading="dataLoading"
+    style="height: 100%;width: 100%;"
+    :element-loading-text="$t('panel.data_loading')"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
     <el-col v-if="panelInfo.name.length>0" class="panel-design">
       <el-row class="panel-design-head">
         <!--仪表板头部区域-->
@@ -132,7 +138,8 @@ export default {
       fullscreen: false,
       pdfExportShow: false,
       snapshotInfo: '',
-      isShare: false
+      isShare: false,
+      dataLoading: false
     }
   },
   computed: {
@@ -183,50 +190,62 @@ export default {
       window.open(url, '_blank')
     },
     saveToTemplate() {
-      this.templateSaveShow = true
-      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
-        const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
-        if (snapshot !== '') {
-          this.templateInfo = {
-            name: this.$store.state.panel.panelInfo.name,
-            snapshot: snapshot,
-            templateStyle: JSON.stringify(this.canvasStyleData),
-            templateData: JSON.stringify(this.componentData),
-            templateType: 'self',
-            nodeType: 'template',
-            level: 1,
-            pid: null,
-            dynamicData: ''
+      this.dataLoading = true
+      setTimeout(() => {
+        html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+          this.templateSaveShow = true
+          this.dataLoading = false
+          const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
+          if (snapshot !== '') {
+            this.templateInfo = {
+              name: this.$store.state.panel.panelInfo.name,
+              snapshot: snapshot,
+              templateStyle: JSON.stringify(this.canvasStyleData),
+              templateData: JSON.stringify(this.componentData),
+              templateType: 'self',
+              nodeType: 'template',
+              level: 1,
+              pid: null,
+              dynamicData: ''
+            }
           }
-        }
-      })
+        })
+      }, 50)
     },
     downloadToTemplate() {
-      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
-        const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
-        if (snapshot !== '') {
-          this.templateInfo = {
-            name: this.$store.state.panel.panelInfo.name,
-            templateType: 'self',
-            snapshot: snapshot,
-            panelStyle: JSON.stringify(this.canvasStyleData),
-            panelData: JSON.stringify(this.componentData),
-            dynamicData: ''
+      this.dataLoading = true
+      setTimeout(() => {
+        html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+          this.dataLoading = false
+          const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
+          if (snapshot !== '') {
+            this.templateInfo = {
+              name: this.$store.state.panel.panelInfo.name,
+              templateType: 'self',
+              snapshot: snapshot,
+              panelStyle: JSON.stringify(this.canvasStyleData),
+              panelData: JSON.stringify(this.componentData),
+              dynamicData: ''
+            }
+            const blob = new Blob([JSON.stringify(this.templateInfo)], { type: '' })
+            FileSaver.saveAs(blob, this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE')
           }
-          const blob = new Blob([JSON.stringify(this.templateInfo)], { type: '' })
-          FileSaver.saveAs(blob, this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE')
-        }
-      })
+        })
+      }, 50)
     },
 
     downloadAsPDF() {
-      html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
-        const snapshot = canvas.toDataURL('image/jpeg', 1) // 0.2是图片质量
-        if (snapshot !== '') {
-          this.snapshotInfo = snapshot
-          this.pdfExportShow = true
-        }
-      })
+      this.dataLoading = true
+      setTimeout(() => {
+        html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
+          const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
+          this.dataLoading = false
+          if (snapshot !== '') {
+            this.snapshotInfo = snapshot
+            this.pdfExportShow = true
+          }
+        })
+      }, 50)
     },
     refreshTemplateInfo() {
       this.templateInfo = {}