fix: 实体列表以及展开详情的loading调整

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>

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>

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>

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>