From d7b6a4f735537553971ac60e6494e0d192dc0b0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?=
 <https://liuhonghong@git.meslab.cn>
Date: Mon, 10 Jul 2023 18:54:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=9E=E4=BD=93=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E5=B1=95=E5=BC=80=E8=AF=A6=E6=83=85=E7=9A=84?=
 =?UTF-8?q?loading=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/entityExplorer/EntityExplorer.vue   |  6 ++--
 .../entityList/detailOverview/App.vue         | 29 ++++++++++++-------
 .../entityList/detailOverview/Domain.vue      | 26 ++++++++++-------
 .../entityList/detailOverview/Ip.vue          | 27 ++++++++++-------
 4 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index d7c3f726..40d8149c 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -34,9 +34,9 @@
         ></explorer-search>
 
         <div style="display: flex;flex-direction: column;height: calc(100% - 42px);">
-          <div class="explorer-result" v-if="showList">
-            <loading :loading="loadingCount"></loading>
-            <span>{{ summaryCount.total }}</span>results，IP
+          <div class="explorer-result" v-if="showList" style="position: relative;">
+            <loading :loading="loadingCount" style="width: 240px"></loading>
+            <span>{{ summaryCount.total }}&nbsp;</span>results，IP
             <span>{{ summaryCount.ipCount }}</span>，Domain
             <span>{{ summaryCount.fqdnCount }}</span>，APP
             <span>{{ summaryCount.appCount }}</span>
diff --git a/src/views/entityExplorer/entityList/detailOverview/App.vue b/src/views/entityExplorer/entityList/detailOverview/App.vue
index fa2d4d54..f7209715 100644
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -58,12 +58,16 @@
 
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
-        <loading :loading="loadingNetworkQuality" size="small" inner-style="left: 1rem;"></loading>
-        <div class="entity-score" v-if="!loadingNetworkQuality">
-          <div class="circle-icon"  v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
-          <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
-          <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
-          Score:{{score}}
+
+        <div style="position: relative;">
+          <div class="entity-score" v-if="!loadingNetworkQuality">
+            <div class="circle-icon"  v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
+            <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
+            <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
+            Score:{{score}}
+          </div>
+
+          <loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
         </div>
       </div>
     </div>
@@ -74,10 +78,12 @@
     <div class="overview__content domain__content">
       <div class="overview__tags domain__tags" ref="relationship"></div>
       <div class="overview__row">
-        <div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
-
-        <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
+        <div class="row__label row__label--width130">{{$t('entities.tab.relatedDomain')}}</div>
         <div class="row__content overview__row-related">
+          <div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
+            <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
+          </div>
+
           <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
             {{item.value}}
           </div>
@@ -96,8 +102,11 @@
       <div class="overview__row overview__row-related">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
 
-        <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
         <div class="row__content">
+          <div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
+            <loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
+          </div>
+
           <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
             {{item.value}}
           </div>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Domain.vue b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
index fd378fe4..4eddc01c 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -66,12 +66,15 @@
 
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
-        <loading :loading="loadingNetworkQuality" size="small" inner-style="left: 1rem;"></loading>
-        <div class="entity-score" v-if="!loadingNetworkQuality">
-          <div class="circle-icon"  v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
-          <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
-          <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
-          Score:{{score}}
+        <div style="position: relative;">
+          <div class="entity-score" v-if="!loadingNetworkQuality">
+            <div class="circle-icon"  v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
+            <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
+            <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
+            Score:{{score}}
+          </div>
+
+          <loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
         </div>
       </div>
     </div>
@@ -83,9 +86,11 @@
       <div class="overview__tags domain__tags" ref="relationship"></div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
-
-        <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
         <div class="row__content overview__row-related">
+          <div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
+            <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
+          </div>
+
           <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
             {{item.value}}
           </div>
@@ -103,9 +108,10 @@
 
       <div class="overview__row overview__row-related">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedIp')}}</div>
-
-        <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
         <div class="row__content">
+          <div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
+            <loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
+          </div>
           <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
             {{item.value}}
           </div>
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index 6ea1405d..fff89e51 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -88,12 +88,15 @@
       </div>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('entities.networkQualityRating')}}</div>
-        <loading :loading="loadingNetworkQuality" size="small" inner-style="left: 1rem;"></loading>
-        <div class="entity-score" v-if="!loadingNetworkQuality">
-          <div class="circle-icon"  v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
-          <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
-          <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
-          Score:{{score}}
+        <div style="position: relative;">
+          <div class="entity-score" v-if="!loadingNetworkQuality">
+            <div class="circle-icon"  v-if="score <= 2 || score === '-'" :class="{'data-score-red': score <= 2 || score === '-'}" ></div>
+            <div class="circle-icon"  v-else-if="score <= 4" :class="{'data-score-yellow': score <= 4}" ></div>
+            <div class="circle-icon"  v-else-if="score <= 6" :class="{'data-score-green': score <= 6}" ></div>
+            Score:{{score}}
+          </div>
+
+          <loading :loading="loadingNetworkQuality" size="small" style="left: 1rem;width: 50%;"></loading>
         </div>
       </div>
     </div>
@@ -105,9 +108,11 @@
       <div class="overview__tags domain__tags" ref="relationship"></div>
       <div class="overview__row overview__row-related">
         <div class="row__label row__label--width130">{{$t('entities.tab.relatedApp')}}</div>
-
-        <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
         <div class="row__content">
+          <div v-if="loadingRelationshipOne" style="position: relative;width: 450px;">
+            <loading :loading="loadingRelationshipOne" size="small" style="left: 1rem;"></loading>
+          </div>
+
           <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataOne" :key="index">
             {{item.value}}
           </div>
@@ -125,9 +130,11 @@
 
       <div class="overview__row overview__row-related">
         <div class="row__label row__label--width130">{{$t('entities.relatedDomain')}}</div>
-
-        <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
         <div class="row__content">
+          <div v-if="loadingRelationshipTwo" style="position: relative;width: 450px;">
+            <loading :loading="loadingRelationshipTwo" size="small" style="left: 1rem;"></loading>
+          </div>
+
           <div class="data-item" v-show="item.show" v-for="(item, index) in relationshipDataTwo" :key="index">
             {{item.value}}
           </div>