From 3c47b8d613f321c7f93f8bf200736056a72b7f70 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 7 Sep 2021 11:38:06 +0800
Subject: [PATCH] =?UTF-8?q?CN-128=20perf:=20=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/chart.scss                  | 11 +++++++++++
 src/components/charts/ChartMap.vue         |  5 ++++-
 src/components/charts/ChartSingleValue.vue | 14 +++++++++-----
 src/components/charts/ChartTable.vue       |  5 ++++-
 src/components/charts/EchartsFrame.vue     |  5 ++++-
 src/utils/constants.js                     |  2 +-
 src/views/charts/Chart.vue                 |  2 +-
 src/views/charts/Panel.vue                 | 16 ++++++++--------
 src/views/settings/GalaxyProxy.vue         |  4 ++--
 9 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/assets/css/chart.scss b/src/assets/css/chart.scss
index 6ee893d6..ffdc8ecb 100644
--- a/src/assets/css/chart.scss
+++ b/src/assets/css/chart.scss
@@ -19,3 +19,14 @@
     font-weight:900;
   }
 }
+.chart__loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fefefe;
+
+  i {
+    font-size: 30px;
+    color: #aaa;
+  }
+}
\ No newline at end of file
diff --git a/src/components/charts/ChartMap.vue b/src/components/charts/ChartMap.vue
index 8f85bf10..35cee22c 100644
--- a/src/components/charts/ChartMap.vue
+++ b/src/components/charts/ChartMap.vue
@@ -9,9 +9,12 @@
         <slot name="operations"></slot>
       </div>
     </div>
-    <div class="cn-chart__body" v-loading="loading">
+    <div class="cn-chart__body" v-show="!loading">
       <slot></slot>
     </div>
+    <div class="cn-chart__body chart__loading" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
     <div class="cn-chart__footer">
       <slot name="footer"></slot>
     </div>
diff --git a/src/components/charts/ChartSingleValue.vue b/src/components/charts/ChartSingleValue.vue
index 653ac621..b875b2e1 100644
--- a/src/components/charts/ChartSingleValue.vue
+++ b/src/components/charts/ChartSingleValue.vue
@@ -1,10 +1,13 @@
 <template>
-  <div class="cn-chart cn-chart__single-value chart-header-position" :class="singleValueClass(type)" >
+  <div class="cn-chart cn-chart__single-value chart-header-position" :class="singleValueClass(type)">
     <slot name="chartErrorInfo"></slot>
     <div class="single-value-icon__box" >
       <div class="single-value__icon"><i :class="icon"></i></div>
     </div>
-    <div class="single-value__content" v-if="type === 51">
+    <div class="single-value__content chart__loading" style="height: 100%; width: 100%;" v-if="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div class="single-value__content" v-if="type === 51" v-show="!loading">
       <div class="content__data">
         <slot name="data"></slot>
       </div>
@@ -12,7 +15,7 @@
         <slot name="title"></slot>
       </div>
     </div>
-    <div class="single-value__content" v-if="type === 52">
+    <div class="single-value__content" v-if="type === 52" v-show="!loading">
       <div class="content__title">
         <slot name="title"></slot>
       </div>
@@ -23,7 +26,7 @@
         <slot name="chart"></slot>
       </div>
     </div>
-    <div class="single-value__content" v-if="type === 53">
+    <div class="single-value__content" v-if="type === 53" v-show="!loading">
       <div class="content__title"></div>
       <div class="content__data"></div>
     </div>
@@ -35,7 +38,8 @@ export default {
   name: 'ChartSingleValue',
   props: {
     type: Number,
-    icon: String
+    icon: String,
+    loading: Boolean
   },
   computed: {
     singleValueClass () {
diff --git a/src/components/charts/ChartTable.vue b/src/components/charts/ChartTable.vue
index 0f5f58ad..58a16ab8 100644
--- a/src/components/charts/ChartTable.vue
+++ b/src/components/charts/ChartTable.vue
@@ -9,7 +9,10 @@
         <slot name="operations"></slot>
       </div>
     </div>
-    <div class="cn-chart__body" v-loading="loading" v-no-data="noData">
+    <div class="cn-chart__body chart__loading" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div class="cn-chart__body" v-show="!loading" v-no-data="noData">
       <el-table
           style="width: 100%"
           tooltip-effect="light"
diff --git a/src/components/charts/EchartsFrame.vue b/src/components/charts/EchartsFrame.vue
index 8d17f05e..fd79862e 100644
--- a/src/components/charts/EchartsFrame.vue
+++ b/src/components/charts/EchartsFrame.vue
@@ -9,9 +9,12 @@
         <slot name="operations"></slot>
       </div>
     </div>
-    <div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-loading="loading" v-no-data="noData">
+    <div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-no-data="noData" v-show="!loading">
       <slot></slot>
     </div>
+    <div class="cn-chart__body chart__loading" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
     <div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1 && !noData" :class="{'pie-with-table': isPieWithTable}" v-loading="loading">
       <slot name="footer"></slot>
     </div>
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 3d943433..1563f7f2 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -38,7 +38,7 @@ export const panelTypeAndRouteMapping = {
   trafficSummary: 1,
   networkAppPerformance: 2,
   dnsServiceInsights: 3,
-  ipEntityDetail: 4,//此为clientIP
+  ipEntityDetail: 4, // 此为clientIP
   domainEntityDetail: 5,
   appEntityDetail: 6,
   serverIpEntityDetail: 7
diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue
index f075c75b..f5454921 100644
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -99,7 +99,7 @@
     :type="chartInfo.type"
     :style="computePosition"
     :icon="singleValue.icon"
-    v-loading="loading"
+    :loading="loading"
   >
     <template #chartErrorInfo>
       <chart-error
diff --git a/src/views/charts/Panel.vue b/src/views/charts/Panel.vue
index 382bbcc7..90984910 100644
--- a/src/views/charts/Panel.vue
+++ b/src/views/charts/Panel.vue
@@ -69,7 +69,7 @@ export default {
     tabTitle () {
       let title
       switch (this.typeName) {
-        case 'ipEntityDetail':{//client IP
+        case 'ipEntityDetail': { // client IP
           title = this.$t('entities.ipDetail')
           break
         }
@@ -119,14 +119,14 @@ export default {
       this.$emit('goBack')
     },
     async changeTab (label) {
-      let routePath;
-      if(label=='clientIP'){
-        routePath = 'ipEntityDetail';
-      }else if(label=='serverIP'){
-        routePath = 'serverIpEntityDetail';
+      let routePath
+      if (label == 'clientIP') {
+        routePath = 'ipEntityDetail'
+      } else if (label == 'serverIP') {
+        routePath = 'serverIpEntityDetail'
       }
-      this.panelType = panelTypeAndRouteMapping[routePath];
-      await this.init();
+      this.panelType = panelTypeAndRouteMapping[routePath]
+      await this.init()
     },
     async init () {
       const panels = await getPanelList({ type: this.panelType })
diff --git a/src/views/settings/GalaxyProxy.vue b/src/views/settings/GalaxyProxy.vue
index 8768965b..f6498689 100644
--- a/src/views/settings/GalaxyProxy.vue
+++ b/src/views/settings/GalaxyProxy.vue
@@ -53,7 +53,7 @@ import galaxyProxyBox from '@/components/rightBox/settings/GalaxyProxyBox'
 import galaxyProxyTable from '@/components/table/settings/GalaxyProxyTable'
 import dataListMixin from '@/mixins/dataList'
 import { api } from '@/utils/api'
-import {get} from "@/utils/http";
+import { get } from '@/utils/http'
 
 export default {
   name: 'GalaxyProxy',
@@ -92,4 +92,4 @@ export default {
 
 <style>
 
-</style>
\ No newline at end of file
+</style>