fix: 修复实体详情下拉loading动画加载错误问题

src/views/detections/DetectionList.vue

@@ -53,6 +53,9 @@ export default {
     switchCollapse (isCollapse, index) {
       this.isCollapse = isCollapse
       this.collapseIndex = index
+      if (isCollapse) {
+        this.emitter.emit('switch-collapse')
+      }
     },
     collapse () {
       this.isCollapse = true

src/views/entityExplorer/entityList/detailOverview/App.vue

@@ -43,7 +43,6 @@
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <loading :loading="loadingApp"></loading>
                <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
             </div>
           </div>
@@ -51,7 +50,6 @@
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <loading :loading="loadingApp"></loading>
                <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
             </div>
           </div>
@@ -287,7 +285,6 @@ export default {
           }
         ],
         chartDatas: [null, null, null, null, null],
-        loadingApp: false,
         loadingTraffic: false,
         loadingRelationshipOne: false,
         loadingRelationshipTwo: false,

src/views/entityExplorer/entityList/detailOverview/Domain.vue

@@ -47,7 +47,6 @@
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <loading :loading="loadingDomain"></loading>
               <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
             </div>
           </div>
@@ -55,7 +54,6 @@
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <loading :loading="loadingDomain"></loading>
               <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
             </div>
           </div>
@@ -292,7 +290,6 @@ export default {
           }
         ],
         chartDatas: [null, null, null, null, null],
-        loadingDomain: false,
         loadingTraffic: false,
         loadingRelationshipOne: false,
         loadingRelationshipTwo: false,

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -70,7 +70,6 @@
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <loading :loading="loadingIp"></loading>
               <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
             </div>
           </div>
@@ -78,7 +77,6 @@
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <loading :loading="loadingIp"></loading>
               <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
             </div>
           </div>
@@ -317,7 +315,6 @@ export default {
         chartDatas: [null, null, null, null, null]
       },
       timer: null,
-      loadingIp: false,
       loadingDns: false,
       loading: false,
       loadingTraffic: false,

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -106,16 +106,7 @@ export default {
     queryEntityDetailTraffic () {
       this.sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}`))
       this.receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}`))
-      if (this.entity.entityType === 'app') {
+      this.loadingTraffic = true
-        this.loadingApp = true
-        this.loadingTraffic = true
-      } else if (this.entity.entityType === 'ip') {
-        this.loadingIp = true
-        this.loadingTraffic = true
-      } else if (this.entity.entityType === 'domain') {
-        this.loadingDomain = true
-        this.loadingTraffic = true
-      }
       get(this.trafficUrl, this.getQueryParams()).then(response => {
         if (response.code === 200 && response.data.result && response.data.result.length > 0) {
           response.data.result.forEach(t => {
@@ -173,27 +164,9 @@ export default {
           this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
           this.sentChart.setOption(this.chartOptionSent)
           this.receivedChart.setOption(this.chartOptionReceived)
-          if (this.entity.entityType === 'app') {
+          this.loadingTraffic = false
-            this.loadingApp = false
-            this.loadingTraffic = false
-          } else if (this.entity.entityType === 'ip') {
-            this.loadingIp = false
-            this.loadingTraffic = false
-          } else if (this.entity.entityType === 'domain') {
-            this.loadingDomain = false
-            this.loadingTraffic = false
-          }
         } else {
-          if (this.entity.entityType === 'app') {
+          this.loadingTraffic = false
-            this.loadingApp = false
-            this.loadingTraffic = false
-          } else if (this.entity.entityType === 'ip') {
-            this.loadingIp = false
-            this.loadingTraffic = false
-          } else if (this.entity.entityType === 'domain') {
-            this.loadingDomain = false
-            this.loadingTraffic = false
-          }
         }
       }).finally(() => {
         setTimeout(() => {
@@ -456,6 +429,10 @@ export default {
     window.addEventListener('resize', this.debounceFunc)
     this.chartOption = _.cloneDeep(entityListLineOption)
     setTimeout(() => { this.queryEntityDetail() })
+    const _this = this
+    this.emitter.on('switch-collapse', function () {
+      setTimeout(() => { _this.queryEntityDetail() }, 400)
+    })
   },
   beforeUnmount () {
     window.removeEventListener('resize', this.debounceFunc)

src/views/entityExplorer/entityList/entityListMixin.js

@@ -12,8 +12,7 @@ export default {
   props: {
     entity: Object,
     timeFilter: Object,
-    listMode: String,
+    listMode: String
-    loading: Boolean
   },
   data () {
     return {