From 8c74be31bb8f7bcd41c6a1010c7306ecd1402469 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 22 May 2023 11:53:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20entity=E8=AF=A6=E6=83=85=E7=9A=84tabs?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0loading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/entityDetail/EntityDetailTabs.vue  | 19 +++++++++++--------
 .../tabs/InformationAggregation.vue           |  9 +++++++++
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
index e96eabe7..88fec9e3 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailTabs.vue
@@ -8,15 +8,15 @@
           :name="tab.name"
           class="tab-pane--border-card">
         <template #label>
-<!--          <div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
+          <!--<div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
           <i :class="tab.icon"></i>{{tab.label}}
         </template>
-        <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation"></information-aggregation>
-        <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.domainNameResolution"></domain-name-resolution>
-        <digital-certificate v-else-if="tab.name === entityDetailTabsName.digitalCertificate" />
-        <security-event v-else-if="tab.name === entityDetailTabsName.securityEvent" :timeFilter="timeFilter" />
-        <performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent" />
-        <open-port v-else-if="tab.name === entityDetailTabsName.openPort"></open-port>
+        <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation && tab.name === activeTab" @toggleLoading="setLoading"></information-aggregation>
+        <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.domainNameResolution && tab.name === activeTab" @toggleLoading="setLoading"></domain-name-resolution>
+        <digital-certificate v-else-if="tab.name === entityDetailTabsName.digitalCertificate && tab.name === activeTab" @toggleLoading="setLoading" />
+        <security-event v-else-if="tab.name === entityDetailTabsName.securityEvent && tab.name === activeTab" @toggleLoading="setLoading" :timeFilter="timeFilter" />
+        <performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent && tab.name === activeTab" @toggleLoading="setLoading" />
+        <open-port v-else-if="tab.name === entityDetailTabsName.openPort && tab.name === activeTab" @toggleLoading="setLoading"></open-port>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -60,7 +60,7 @@ export default {
     }
   },
   mounted () {
-    this.toggleLoading(false)
+    // this.toggleLoading(false)
     this.timer = setTimeout(() => {
       this.handleActiveBar(this.activeTab)
     }, 200)
@@ -108,6 +108,9 @@ export default {
         const activeBar = document.querySelector('.entity-detail-tabs .entity-detail-tabs__active-bar')
         activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + clientLeft - 1}px;`
       }
+    },
+    setLoading (loading) {
+      this.toggleLoading(loading)
     }
   },
   beforeUnmount () {
diff --git a/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue b/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
index 27ed0fc0..3af442cd 100644
--- a/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
+++ b/src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue
@@ -81,6 +81,8 @@
 </template>
 
 <script>
+import chartMixin from '@/views/charts2/chart-mixin'
+
 export default {
   name: 'InformationAggregation',
   data () {
@@ -88,6 +90,7 @@ export default {
       informationAggregationList: []
     }
   },
+  mixins: [chartMixin],
   methods: {
     intelligenceContentClass ({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 2) {
@@ -96,6 +99,12 @@ export default {
     }
   },
   mounted () {
+    this.toggleLoading(true)
+    // 模拟loading，后续添加post请求时记得删除
+    const timer = setTimeout(() => {
+      this.toggleLoading(false)
+      clearTimeout(timer)
+    }, 150)
     this.informationAggregationList = [
       {
         discoveryTime: '2022-04-12',