From 952c5638701f64d0b87e2d22c416120eeb65c4fe Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Thu, 26 Aug 2021 14:38:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dpanel=20=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=AF=B7=E6=B1=82=E6=95=B0=E6=8D=AE=E5=89=8D=20create?=
 =?UTF-8?q?PanelTitleSec=20=E5=8A=9F=E8=83=BD=E9=97=AA=E5=87=BA=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/css/common/tableCommon.scss    |  9 +++++++++
 .../src/components/page/dashboard/panel.vue   | 20 +++++++++++++++++++
 2 files changed, 29 insertions(+)

diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 47f03e92b..bcc7ac615 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -471,3 +471,12 @@
   overflow: hidden;
   white-space: nowrap;
 }
+
+.fade-enter,
+.fade-leave-active {
+  opacity: .7;
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s;
+}
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 01ee2b8fc..c9d54f0a6 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="panel list-page">
     <div class="main-list">
+      <div>
+        <transition name="el-zoom-in-center">
+          <div class="loading" v-if="isLoading"></div>
+        </transition>
+      </div>
       <div class="main-container" style="padding-right: 0">
         <div class="top-tools">
           <div v-if="panelData.length == 0" class="top-tool-left" style="margin-left: 10px;">
@@ -108,12 +113,14 @@ import chartTempBox from '@/components/common/rightBox/chartTempBox'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
 import Template from '@/components/page/config/template'
 import { fromRoute } from '@/components/common/js/constants'
+
 export default {
   name: 'panel',
   data () {
     return {
       fromRoute,
       overScroll10: false,
+      isLoading: true,
       panelLock: true,
       showTopBtn: false, // top按钮
       visible: false,
@@ -546,9 +553,11 @@ export default {
                 this.$refs.selectPanel.$refs.panelTree.setCurrentKey(this.showPanel)
               } catch (e) {}
             })
+            this.isLoading = false
           } else {
             this.showPanel.id = ''
             this.filter.panelId = ''
+            this.isLoading = true
           }
           this.pageObj.total = response.data.total
           if (!isInitData && (this.panel.id === '' || this.panel.id === this.showPanel.id)) {
@@ -923,3 +932,14 @@ export default {
 <style lang="scss">
   @import '@/assets/css/common/tableCommon.scss';
 </style>
+<style scoped>
+  .loading {
+    position: fixed;
+    left: 250px;
+    top: 59px;
+    height: 100%;
+    width: 100%;
+    background: center center no-repeat #fff;
+    z-index: 10;
+  }
+</style>