From 8a9e6efcfc498e71090464811ded6bd5d0dfd5aa Mon Sep 17 00:00:00 2001
From: changyongqiang <changyongqiang@geedgenetworks.com>
Date: Fri, 27 May 2022 12:14:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=A8=E5=B1=80loading=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=EF=BC=8C=E5=AE=9E=E4=BD=93=E8=AF=A6=E6=83=85=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=9C=B0=E5=9B=BEloading=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/detections/DetectionList.vue        |  6 ++---
 src/views/detections/Index.vue                |  9 ++++---
 .../entityList/detailOverview/App.vue         | 24 +++++++++++--------
 .../entityList/detailOverview/Domain.vue      | 24 +++++++++++--------
 .../entityList/detailOverview/Ip.vue          |  8 +++++--
 .../detailOverview/entityDetailMixin.js       |  2 +-
 6 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue
index 0cf47b3a..41600999 100644
--- a/src/views/detections/DetectionList.vue
+++ b/src/views/detections/DetectionList.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="detection-list" id="detectionList">
-    <div class="detection__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
-      <i class="el-icon-loading"></i>
-    </div>
+    <loading :loading="loading"></loading>
     <div class="detection-list__content">
       <div class="detection-list--list">
         <div class="no-data" v-if="noData">No data</div>
@@ -24,9 +22,11 @@
 
 <script>
 import DetectionRow from '@/views/detections/DetectionRow'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'DetectionList',
   components: {
+    Loading,
     DetectionRow
   },
   props: {
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index 44c1249e..27a6febe 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -15,9 +15,7 @@
     ></detection-search>
     <!-- 内容区 -->
     <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
-      <div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
-        <i class="el-icon-loading"></i>
-      </div>
+      <loading :loading="loading"></loading>
       <template v-if="isEventSeverityNoData">
          <div class="no-data detection__event-severity-bar" >No data</div>
       </template>
@@ -108,18 +106,19 @@ import DetectionList from '@/views/detections/DetectionList'
 import Pagination from '@/components/common/Pagination'
 import { defaultPageSize, detectionPageType } from '@/utils/constants'
 import { getNowTime, getSecond, rTime } from '@/utils/date-util'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 import * as echarts from 'echarts'
 import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
 import { api, getData } from '@/utils/api'
 import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import DetectionNoData from '@/views/detections/DetectionNoData'
-import { shallowRef } from 'vue'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'Index',
   components: {
+    Loading,
     DetectionSearch,
     DateTimeRange,
     TimeRefresh,
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index 910e7c9d..86b78953 100644
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -27,7 +27,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingTraffic"></loading>
+      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
         <div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -62,7 +62,7 @@
     <div class="overview__content domain__content">
       <div class="overview__tags domain__tags" ref="relationship">
         <div class="overview__domain-tabs overview__domain-tabs-loading">
-          <loading :loading="loadingRelationshipOne"></loading>
+          <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
           <div class="overview__domain-tab">
             <div class="overview__tag domain__tag">
               <span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -82,7 +82,7 @@
           </div>
         </div>
         <div class="overview__domain-tabs overview__domain-tabs-loading">
-          <loading :loading="loadingRelationshipTwo"></loading>
+          <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
           <div class="overview__domain-tab">
             <div class="overview__tag domain__tag">
               <span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -107,7 +107,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.networkQuality')}}</div>
     <div class="overview__content overview__content-loading-net">
-      <loading :loading="loadingNetworkQuality"></loading>
+      <loading :loading="loadingNetworkQuality" size="small"></loading>
       <div class="overview__row overview__row--single-value">
         <chart-single-value
             v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -124,14 +124,14 @@
     <div class="overview__content">
       <div class="overview__tags">
         <div class="overview__tag overview__tag-loading">
-          <loading :loading="loadingOut"></loading>
+          <loading :loading="loadingOut" size="small"></loading>
           <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
           <span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
           <span class="tag__desc">{{$t('entities.percentage')}}</span>
           <span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
         </div>
         <div class="overview__tag overview__tag-loading">
-          <loading :loading="loadingIn"></loading>
+          <loading :loading="loadingIn" size="small"></loading>
           <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
           <span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
           <span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -143,7 +143,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.alert')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingAlert"></loading>
+      <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
       <div class="overview__row" v-if="performanceData.length === 0">
         <span  class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
       </div>
@@ -167,7 +167,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('entities.securityEvents')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingSecurityEvents"></loading>
+      <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
       <div class="overview__row" v-if="securityData.length === 0">
         <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
       </div>
@@ -195,6 +195,7 @@
         :entity="entityCopy"
         :query-params="queryParams"
         :hide-header="true"
+        :loading="loadingMap"
         @getCurrentTimeRange="getCurrentTimeRange"
     ></chart>
   </div>
@@ -298,7 +299,8 @@ export default {
         loadingOut: false,
         loadingIn: false,
         loadingAlert: false,
-        loadingSecurityEvents: false
+        loadingSecurityEvents: false,
+        loadingMap: false
       }
     }
   },
@@ -317,10 +319,12 @@ export default {
       this.entityData.ipCount = result.ipCount
     },
     chartGetMap () {
+      this.loadingMap = true
       get((this.trafficUrlMap), this.getQueryParams()).then(response => {
         if (response.code === 200) {
           this.chartData = response.data.result
         }
+        this.loadingMap = false
       })
     },
     queryRelated () {
@@ -330,9 +334,9 @@ export default {
   },
   mounted () {
     this.queryParams = this.getQueryParams()
+    this.chartGetMap()
     this.$nextTick(() => {
       setTimeout(() => {
-        this.chartGetMap()
         this.queryRelated()
       }, 250)
     })
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index 746a4ecf..11d8e4c4 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -31,7 +31,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingTraffic"></loading>
+      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
         <div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -66,7 +66,7 @@
     <div class="overview__content domain__content">
       <div class="overview__tags domain__tags" ref="relationship">
         <div class="overview__domain-tabs overview__domain-tabs-loading">
-          <loading :loading="loadingRelationshipOne"></loading>
+          <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
           <div class="overview__domain-tab">
             <div class="overview__tag domain__tag">
               <span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -86,7 +86,7 @@
           </div>
         </div>
         <div class="overview__domain-tabs overview__domain-tabs-loading">
-          <loading :loading="loadingRelationshipTwo"></loading>
+          <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
           <div class="overview__domain-tab">
             <div class="overview__tag domain__tag">
               <span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -111,7 +111,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.networkQuality')}}</div>
     <div class="overview__content overview__content-loading-net">
-      <loading :loading="loadingNetworkQuality"></loading>
+      <loading :loading="loadingNetworkQuality" size="small"></loading>
       <div class="overview__row overview__row--single-value">
         <chart-single-value
           v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -128,14 +128,14 @@
     <div class="overview__content">
       <div class="overview__tags">
         <div class="overview__tag overview__tag-loading">
-          <loading :loading="loadingOut"></loading>
+          <loading :loading="loadingOut" size="small"></loading>
           <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
           <span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},</span>
           <span class="tag__desc">{{$t('entities.percentage')}}</span>
           <span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
         </div>
         <div class="overview__tag overview__tag-loading">
-          <loading :loading="loadingIn"></loading>
+          <loading :loading="loadingIn" size="small"></loading>
           <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
           <span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},</span>
           <span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -147,7 +147,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.alert')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingAlert"></loading>
+      <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
       <div class="overview__row" v-if="performanceData.length === 0">
         <span  class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
       </div>
@@ -171,7 +171,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('entities.securityEvents')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingSecurityEvents"></loading>
+      <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
       <div class="overview__row" v-if="securityData.length === 0">
         <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
       </div>
@@ -199,6 +199,7 @@
         :entity="entityCopy"
         :query-params="queryParams"
         :hide-header="true"
+        :loading="loadingMap"
         @getCurrentTimeRange="getCurrentTimeRange"
     ></chart>
   </div>
@@ -303,7 +304,8 @@ export default {
         loadingOut: false,
         loadingIn: false,
         loadingAlert: false,
-        loadingSecurityEvents: false
+        loadingSecurityEvents: false,
+        loadingMap: false
       }
     }
   },
@@ -322,10 +324,12 @@ export default {
       this.entityData.ipCount = result.ipCount
     },
     chartGetMap () {
+      this.loadingMap = true
       get(this.trafficUrlMap, this.getQueryParams()).then(response => {
         if (response.code === 200) {
           this.chartData = response.data.result
         }
+        this.loadingMap = false
       })
     },
     getBasicProperties () {
@@ -350,9 +354,9 @@ export default {
   },
   mounted () {
     this.queryParams = this.getQueryParams()
+    this.chartGetMap()
     this.$nextTick(() => {
       setTimeout(() => {
-        this.chartGetMap()
         this.getBasicProperties()
         this.queryRelated()
       }, 250)
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index 2863d311..84d2916e 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -222,6 +222,7 @@
         :entity="entityCopy"
         :query-params="queryParams"
         :hide-header="true"
+        :loading="loadingMap"
         @getCurrentTimeRange="getCurrentTimeRange"
     ></chart>
   </div>
@@ -330,7 +331,8 @@ export default {
       loadingOut: false,
       loadingIn: false,
       loadingAlert: false,
-      loadingSecurityEvents: false
+      loadingSecurityEvents: false,
+      loadingMap: false
     }
   },
   computed: {
@@ -388,10 +390,12 @@ export default {
       this.entityData.domainCount = result.domainCount
     },
     chartGetMap () {
+      this.loadingMap = true
       get((this.trafficUrlMap), this.getQueryParams()).then(response => {
         if (response.code === 200) {
           this.chartData = response.data.result
         }
+        this.loadingMap = false
       })
     },
     queryRelated () {
@@ -401,9 +405,9 @@ export default {
   },
   mounted () {
     this.queryParams = this.getQueryParams()
+    this.chartGetMap()
     this.$nextTick(() => {
       setTimeout(() => {
-        this.chartGetMap()
         this.queryRelated()
       }, 250)
     })
diff --git a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
index 545ed492..99cbdca2 100644
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -431,7 +431,7 @@ export default {
     setTimeout(() => { this.queryEntityDetail() })
     const _this = this
     this.emitter.on('switch-collapse', function () {
-      setTimeout(() => { _this.queryEntityDetail() }, 400)
+      setTimeout(() => { _this.queryEntityDetail() }, 200)
     })
   },
   beforeUnmount () {