CN-128 perf: 优化图表加载动画

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;
+  }
+}

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>

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 () {

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"

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>

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

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

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;
+      let routePath
-      if(label=='clientIP'){
+      if (label == 'clientIP') {
-        routePath = 'ipEntityDetail';
+        routePath = 'ipEntityDetail'
-      }else if(label=='serverIP'){
+      } else if (label == 'serverIP') {
-        routePath = 'serverIpEntityDetail';
+        routePath = 'serverIpEntityDetail'
       }
-      this.panelType = panelTypeAndRouteMapping[routePath];
+      this.panelType = panelTypeAndRouteMapping[routePath]
-      await this.init();
+      await this.init()
     },
     async init () {
       const panels = await getPanelList({ type: this.panelType })

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>
+</style>