From dad008ee7df2385e6aed48c195eab2c05995ea0e Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 25 Apr 2022 15:08:10 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dweb=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E6=8C=89=E9=92=AE=E4=B8=8D=E5=AE=B9=E6=98=93?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Preview.vue      |  2 +-
 .../canvas/components/Editor/index.vue        |  2 +-
 .../canvas/custom-component/DeFrame.vue       | 33 +++++++++++++++----
 .../src/views/panel/list/PanelViewShow.vue    |  4 +--
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 0469c8d67c..1051b8a3a2 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -37,7 +37,7 @@
                 {{ $t('chart.export') }}<i class="el-icon-download" />
               </el-button>
               <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+                <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
                 <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 231ba944cb..474aa993ea 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -159,7 +159,7 @@
             {{ $t('chart.export') }}<i class="el-icon-download" />
           </el-button>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excle</el-dropdown-item>
+            <el-dropdown-item @click.native="exportExcel"><svg-icon icon-class="ds-excel" class="ds-icon-excel" />Excel</el-dropdown-item>
             <el-dropdown-item v-if="showExportImgButton" icon="el-icon-picture-outline" @click.native="exportViewImg">{{ $t('chart.image') }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
diff --git a/frontend/src/components/canvas/custom-component/DeFrame.vue b/frontend/src/components/canvas/custom-component/DeFrame.vue
index dc27903414..a6d7e9e7ae 100644
--- a/frontend/src/components/canvas/custom-component/DeFrame.vue
+++ b/frontend/src/components/canvas/custom-component/DeFrame.vue
@@ -2,11 +2,15 @@
   <el-row class="main-frame">
     <div v-if="element.frameLinks.src" class="main-frame">
       <iframe v-if="frameShow" id="iframe" :src="element.frameLinks.src" scrolling="auto" frameborder="0" class="main-frame" @load="loaded" @error="onError" />
-      <div v-if="editMode==='edit'" class="frame-mask">
+      <div v-if="editMode==='edit'" class="frame-mask edit-mask">
         <span style="opacity: 1;">
           <span style="font-weight: bold;color: lawngreen;">{{ $t('panel.edit_web_tips') }}</span>
         </span>
       </div>
+      <!--Here are three 15px wide masks(left top right) for easy clicking on the display jump button-->
+      <div v-if="editMode!=='edit'" class="frame-mask preview-top-mask" />
+      <div v-if="editMode!=='edit'" class="frame-mask preview-right-mask" />
+      <div v-if="editMode!=='edit'" class="frame-mask preview-left-mask" />
       <div v-if="screenShot" class="frame-mask" />
     </div>
     <div v-else class="info-class">
@@ -100,17 +104,34 @@ export default {
   }
   .frame-mask {
     display: flex;
-    height: 100%!important;
-    width: 100% !important;
-    background-color: #5c5e61;
     opacity: 0.5;
     position:absolute;
     top:0px;
-    left: 0px;
-    z-index: 2;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
+  .edit-mask{
+    left: 0px;
+    background-color: #5c5e61;
+    height: 100%!important;
+    width: 100% !important;
+  }
+  .preview-top-mask{
+    left: 0px;
+    height: 15px!important;
+    width: 100% !important;
+  }
+  .preview-right-mask{
+    right: 0px;
+    height: 100%!important;
+    width: 15px !important;
+  }
+  .preview-left-mask{
+    left: 0px;
+    height: 100%!important;
+    width: 15px !important;
+  }
 </style>
 
diff --git a/frontend/src/views/panel/list/PanelViewShow.vue b/frontend/src/views/panel/list/PanelViewShow.vue
index f6c96880f9..f80a2d1a88 100644
--- a/frontend/src/views/panel/list/PanelViewShow.vue
+++ b/frontend/src/views/panel/list/PanelViewShow.vue
@@ -307,8 +307,8 @@ export default {
               this.dataLoading = false
             }, 300)
           })
-        }, 500)
-      }, 0)
+        }, 1500)
+      }, 500)
     },
 
     downloadAsPDF() {