Merge pull request #944 from dataease/pr@dev@feat_panel-hyperlinks

frontend/src/lang/zh.js

@@ -1334,7 +1334,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

 <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
+      _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

 <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,8 +190,11 @@ export default {
       window.open(url, '_blank')
     },
     saveToTemplate() {
-      this.templateSaveShow = true
+      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 = {
@@ -200,9 +210,13 @@ export default {
             }
           }
         })
+      }, 50)
     },
     downloadToTemplate() {
+      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 = {
@@ -217,16 +231,21 @@ export default {
             FileSaver.saveAs(blob, this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE')
           }
         })
+      }, 50)
     },
 
     downloadAsPDF() {
+      this.dataLoading = true
+      setTimeout(() => {
         html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
-        const snapshot = canvas.toDataURL('image/jpeg', 1) // 0.2是图片质量
+          const snapshot = canvas.toDataURL('image/jpeg', 1) // 是图片质量
+          this.dataLoading = false
           if (snapshot !== '') {
             this.snapshotInfo = snapshot
             this.pdfExportShow = true
           }
         })
+      }, 50)
     },
     refreshTemplateInfo() {
       this.templateInfo = {}