CN-563 feat: 实体列表页loading优化

2022-05-18 14:21:39 +08:00
parent 1033eb9ddc
commit c1c6a9760b
7 changed files with 241 additions and 76 deletions
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -40,7 +40,7 @@
        transition: all linear .2s;
        .filter__row-popover {
          display: flex;
-          line-height: 24px;
+          line-height: 26px;
        }

        &:hover, &.filter__row--active {
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -35,6 +35,15 @@
      color: #333;
      font-size: 14px;
    }
+    .overview__content-loading.overview__content {
+      position: relative;
+      .chart__loading i.el-icon-loading {
+        left: calc(50% - 428px);
+      }
+    }
+    .overview__content-loading-net.overview__content {
+      position: relative;
+    }
    .overview__content {
      display: flex;
      flex-direction: column;
@@ -50,8 +59,11 @@
        &.overview__row--small-font {
          font-size: 12px;
        }
-        .show-more {
+        .show-more.show-more-disabled {
          color: #8FA1BE;
+        }
+        .show-more {
+          color: #3976CB;
          cursor: pointer;
        }
        &.overview__row--single-value {
@@ -86,8 +98,20 @@
            border-radius: 2px;
            color: white;

-            &.alert-level-tag--high {
-              background-color: #ED907B;
+            &.alert-level-tag--high.critical {
+              background-color: #D84C4C;
+            }
+            &.alert-level-tag--high.high {
+              background-color: #FF9A79;
+            }
+            &.alert-level-tag--high.info {
+              background-color: #D1BD50;
+            }
+            &.alert-level-tag--high.medium {
+              background-color: #FFB65A;
+            }
+            &.alert-level-tag--high.low {
+              background-color: #FFD82D;
            }
            &.alert-level-tag--middle {
              background-color: #FFAB66;
@@ -143,6 +167,9 @@
      .overview__tags.domain__tags {
        flex-direction: column;
        width: 70%;
+        .overview__domain-tabs-loading.overview__domain-tabs {
+          position: relative;
+        }
        .overview__domain-tabs {
          display: flex;
          margin: 0 0 8px 0;
@@ -226,7 +253,13 @@

    .overview__tags {
      display: flex;
-
+      .overview__tag-loading.overview__tag {
+        position: relative;
+        .chart__loading {
+          top: 0;
+          left: 0;
+        }
+      }
      .overview__tag {
        display: flex;
        padding: 6px 15px;
--- a/src/mixins/relatedServer.js
+++ b/src/mixins/relatedServer.js
@@ -16,21 +16,25 @@ export default {
  methods: {
    // 请求数据 relationshipUrlOne => 路由 refOne => ref
    getRelatedServerDataOne (relationshipUrlOne, refOne) {
+      this.loadingRelationshipOne = true
      get(relationshipUrlOne, this.getQueryParams()).then(response => {
        if (response.code === 200) {
          const relationshipDataOne = response.data.result
          // 将请求数据 传入方法中
          this.relatedServerWidth(relationshipDataOne, refOne, 1)
        }
+        this.loadingRelationshipOne = false
      })
    },
    getRelatedServerDataTwo (relationshipUrlTow, refTow) {
+      this.loadingRelationshipTwo = true
      get(relationshipUrlTow, this.getQueryParams()).then(response => {
        if (response.code === 200) {
          const relationshipDataTwo = response.data.result
          // 将请求数据 传入方法中
          this.relatedServerWidth(relationshipDataTwo, refTow, 2)
        }
+        this.loadingRelationshipTwo = false
      })
    },
    // data => 数据， value => ref
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -26,7 +26,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.traffic')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingTraffic"></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>
@@ -42,7 +43,7 @@
            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
            <!-- 曲线-->
            <div class="row__content-loading">
-              <loading :loading-app="loadingApp"></loading>
+              <loading :loading="loadingApp"></loading>
               <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
            </div>
          </div>
@@ -50,7 +51,7 @@
            <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
            <!-- 曲线-->
            <div class="row__content-loading">
-              <loading :loading-app="loadingApp"></loading>
+              <loading :loading="loadingApp"></loading>
               <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
            </div>
          </div>
@@ -62,7 +63,8 @@
    <div class="overview__title">{{$t('overall.relationship')}}</div>
    <div class="overview__content domain__content">
      <div class="overview__tags domain__tags" ref="relationship">
-        <div class="overview__domain-tabs">
+        <div class="overview__domain-tabs overview__domain-tabs-loading">
+          <loading :loading="loadingRelationshipOne"></loading>
          <div class="overview__domain-tab">
            <div class="overview__tag domain__tag">
              <span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -81,7 +83,8 @@
            </div>
          </div>
        </div>
-        <div class="overview__domain-tabs">
+        <div class="overview__domain-tabs overview__domain-tabs-loading">
+          <loading :loading="loadingRelationshipTwo"></loading>
          <div class="overview__domain-tab">
            <div class="overview__tag domain__tag">
              <span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -105,7 +108,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading-net">
+      <loading :loading="loadingNetworkQuality"></loading>
      <div class="overview__row overview__row--single-value">
        <chart-single-value
            v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -121,13 +125,15 @@
    <div class="overview__title">{{$t('entities.accessLink')}}</div>
    <div class="overview__content">
      <div class="overview__tags">
-        <div class="overview__tag">
+        <div class="overview__tag overview__tag-loading">
+          <loading :loading="loadingOut"></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">
+        <div class="overview__tag overview__tag-loading">
+          <loading :loading="loadingIn"></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>
@@ -138,7 +144,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.alert')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingAlert"></loading>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentAlert')}}</div>
        <div class="row__content">{{entityData.performanceNum}}</div>
@@ -146,19 +153,20 @@
      <div class="overview__row overview__row--small-font"   v-for="(performance, index) in entityData.performanceList" :key="index">
        <div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
        <div class="row__content row__content--width200">
-          <div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
+          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
          <div>{{performance.eventType}}</div>
        </div>
        <div class="row__desc"></div>
      </div>
-      <div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
-        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      <div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
+        <div class="show-more" :class="{'show-more-disabled': performanceData.length === entityData.performanceList.length}" @click="performanceShowMore(10)">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('entities.securityEvents')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingSecurityEvents"></loading>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
        <div class="row__content">{{entityData.securityNum}}</div>
@@ -166,13 +174,13 @@
      <div class="overview__row overview__row--small-font"   v-for="(security, index) in entityData.securityList" :key="index">
        <div class="row__label row__label--width160">{{dateFormatByAppearance(security.startTime) || '-'}}</div>
        <div class="row__content row__content--width200">
-          <div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
+          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
          <div>{{security.securityType}}</div>
        </div>
        <div class="row__desc"></div>
      </div>
-      <div class="overview__row overview__row--small-font" v-if="entityData.securityList && entityData.securityList.length > 3">
-        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      <div class="overview__row overview__row--small-font" v-if="securityData && securityData.length > 5">
+        <div class="show-more" :class="{'show-more-disabled': securityData.length === entityData.securityList.length}" @click="securityShowMore(10)">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
@@ -279,7 +287,15 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null],
-        loadingApp: false
+        loadingApp: false,
+        loadingTraffic: false,
+        loadingRelationshipOne: false,
+        loadingRelationshipTwo: false,
+        loadingNetworkQuality: false,
+        loadingOut: false,
+        loadingIn: false,
+        loadingAlert: false,
+        loadingSecurityEvents: false
      }
    }
  },
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -30,7 +30,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.traffic')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingTraffic"></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>
@@ -46,7 +47,7 @@
            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
            <!-- 曲线-->
            <div class="row__content-loading">
-              <loading :loading-domian="loadingDomain"></loading>
+              <loading :loading="loadingDomain"></loading>
              <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
            </div>
          </div>
@@ -54,7 +55,7 @@
            <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
            <!-- 曲线-->
            <div class="row__content-loading">
-              <loading :loading-domain="loadingDomian"></loading>
+              <loading :loading="loadingDomain"></loading>
              <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
            </div>
          </div>
@@ -64,10 +65,11 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.relationship')}}</div>
-    <div class="overview__content domain__content">
+    <div class="overview__content domain__content overview__content-loading">
      <div class="overview__tags domain__tags" ref="relationship">
        <div class="overview__domain-tabs">
-          <div class="overview__domain-tab">
+          <div class="overview__domain-tab overview__domain-tabs-loading">
+            <loading :loading="loadingRelationshipOne"></loading>
            <div class="overview__tag domain__tag">
              <span class="tag__value">{{relationshipDataOne.length}}</span>
              <span class="tag__desc">{{$t('entities.relatedApp')}}</span>
@@ -86,7 +88,8 @@
          </div>
        </div>
        <div class="overview__domain-tabs">
-          <div class="overview__domain-tab">
+          <div class="overview__domain-tab overview__domain-tabs-loading">
+            <loading :loading="loadingRelationshipTwo"></loading>
            <div class="overview__tag domain__tag">
              <span class="tag__value">{{relationshipDataTwo.length}}</span>
              <span class="tag__desc">{{$t('entities.relatedServerIp')}}</span>
@@ -109,7 +112,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading-net">
+      <loading :loading="loadingNetworkQuality"></loading>
      <div class="overview__row overview__row--single-value">
        <chart-single-value
          v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -125,13 +129,15 @@
    <div class="overview__title">{{$t('entities.accessLink')}}</div>
    <div class="overview__content">
      <div class="overview__tags">
-        <div class="overview__tag">
+        <div class="overview__tag overview__tag-loading">
+          <loading :loading="loadingOut"></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">
+        <div class="overview__tag overview__tag-loading">
+          <loading :loading="loadingIn"></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>
@@ -142,7 +148,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.alert')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingAlert"></loading>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentAlert')}}</div>
        <div class="row__content">{{entityData.performanceNum}}</div>
@@ -150,19 +157,20 @@
      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
        <div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
        <div class="row__content row__content--width200">
-          <div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
+          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
          <div>{{performance.eventType}}</div>
        </div>
        <div class="row__desc"></div>
      </div>
-      <div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
-        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      <div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
+        <div class="show-more" :class="{'show-more-disabled': performanceData.length === entityData.performanceList.length}" @click="performanceShowMore(10)">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('entities.securityEvents')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingSecurityEvents"></loading>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
        <div class="row__content">{{entityData.securityNum}}</div>
@@ -170,13 +178,13 @@
      <div class="overview__row overview__row--small-font" v-for="(security, i) in entityData.securityList" :key="i">
        <div class="row__label row__label--width160">{{dateFormatByAppearance(getMillisecond(security.startTime)) || '-'}}</div>
        <div class="row__content row__content--width200">
-          <div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
+          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
          <div>{{security.securityType}}</div>
        </div>
        <div class="row__desc"></div>
      </div>
-      <div class="overview__row overview__row--small-font" v-if="entityData.securityList && entityData.securityList.length > 3">
-        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      <div class="overview__row overview__row--small-font" v-if="securityData && securityData.length > 5">
+        <div class="show-more" :class="{'show-more-disabled': securityData.length === entityData.securityList.length}" @click="securityShowMore(10)">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
@@ -284,7 +292,15 @@ export default {
          }
        ],
        chartDatas: [null, null, null, null, null],
-        loadingDomain: false
+        loadingDomain: false,
+        loadingTraffic: false,
+        loadingRelationshipOne: false,
+        loadingRelationshipTwo: false,
+        loadingNetworkQuality: false,
+        loadingOut: false,
+        loadingIn: false,
+        loadingAlert: false,
+        loadingSecurityEvents: false
      }
    }
  },
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -14,7 +14,8 @@
  </div>
  <div class="overview-item" v-if="entityData.dnsServerRole">
    <div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingDns"></loading>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
        <div class="row__content">{{$_.get(entityData, 'dnsServerRole') || '-'}}</div>
@@ -52,7 +53,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.traffic')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingTraffic"></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>
@@ -68,7 +70,7 @@
            <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
            <!-- 曲线-->
            <div class="row__content-loading">
-              <loading :loading-ip="loadingIp"></loading>
+              <loading :loading="loadingIp"></loading>
              <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
            </div>
          </div>
@@ -76,7 +78,7 @@
            <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
            <!-- 曲线-->
            <div class="row__content-loading">
-              <loading :loading-ip="loadingIp"></loading>
+              <loading :loading="loadingIp"></loading>
              <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
            </div>
          </div>
@@ -88,7 +90,8 @@
    <div class="overview__title">{{$t('overall.relationship')}}</div>
    <div class="overview__content domain__content">
      <div class="overview__tags domain__tags" ref="relationship">
-        <div class="overview__domain-tabs">
+        <div class="overview__domain-tabs overview__domain-tabs-loading">
+          <loading :loading="loadingRelationshipOne"></loading>
          <div class="overview__domain-tab">
            <div class="overview__tag domain__tag">
              <span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -107,7 +110,8 @@
            </div>
          </div>
        </div>
-        <div class="overview__domain-tabs">
+        <div class="overview__domain-tabs overview__domain-tabs-loading">
+          <loading :loading="loadingRelationshipTwo"></loading>
          <div class="overview__domain-tab">
            <div class="overview__tag domain__tag">
              <span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -131,7 +135,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.networkQuality')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading-net">
+      <loading :loading="loadingNetworkQuality"></loading>
      <div class="overview__row overview__row--single-value">
        <chart-single-value
            v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -147,13 +152,15 @@
    <div class="overview__title">{{$t('entities.accessLink')}}</div>
    <div class="overview__content">
      <div class="overview__tags">
-        <div class="overview__tag">
+        <div class="overview__tag overview__tag-loading">
+          <loading :loading="loadingOut"></loading>
          <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
          <span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},&nbsp;</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">
+        <div class="overview__tag overview__tag-loading">
+          <loading :loading="loadingIn"></loading>
          <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
          <span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},&nbsp;</span>
          <span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -164,7 +171,8 @@
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('overall.alert')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingAlert"></loading>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentAlert')}}</div>
        <div class="row__content">{{entityData.performanceNum}}</div>
@@ -172,19 +180,20 @@
      <div class="overview__row overview__row--small-font" v-for="(performance, index) in entityData.performanceList" :key="index">
        <div class="row__label row__label--width160">{{dateFormatByAppearance(performance.startTime) || '-'}}</div>
        <div class="row__content row__content--width200">
-          <div class="alert-level-tag alert-level-tag--high">{{performance.eventSeverity}}</div>
+          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(performance)">{{performance.eventSeverity}}</div>
          <div>{{performance.eventType}}</div>
        </div>
        <div class="row__desc"></div>
      </div>
-      <div class="overview__row overview__row--small-font" v-if="entityData.performanceList && entityData.performanceList.length > 3">
-        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      <div class="overview__row overview__row--small-font" v-if="performanceData && performanceData.length > 5">
+        <div class="show-more" :class="{'show-more-disabled': performanceData.length === entityData.performanceList.length}" @click="performanceShowMore(10)">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
  <div class="overview-item">
    <div class="overview__title">{{$t('entities.securityEvents')}}</div>
-    <div class="overview__content">
+    <div class="overview__content overview__content-loading">
+      <loading :loading="loadingSecurityEvents"></loading>
      <div class="overview__row">
        <div class="row__label">{{$t('entities.recentSecurity')}}</div>
        <div class="row__content">{{entityData.securityNum}}</div>
@@ -192,13 +201,13 @@
      <div class="overview__row overview__row--small-font" v-for="(security, index) in entityData.securityList" :key="index">
        <div class="row__label row__label--width160">{{dateFormatByAppearance(security.startTime) || '-'}}</div>
        <div class="row__content row__content--width200">
-          <div class="alert-level-tag alert-level-tag--high">{{security.eventSeverity}}</div>
+          <div class="alert-level-tag alert-level-tag--high" :class="iconClass(security)">{{security.eventSeverity}}</div>
          <div>{{security.securityType}}</div>
        </div>
        <div class="row__desc"></div>
      </div>
-      <div class="overview__row overview__row--small-font" v-if="entityData.securityList && entityData.securityList.length > 3">
-        <div class="show-more">{{$t('overall.showMore')}}>></div>
+      <div class="overview__row overview__row--small-font" v-if="securityData && securityData.length > 5">
+        <div class="show-more" :class="{'show-more-disabled': securityData.length === entityData.securityList.length}" @click="securityShowMore(10)">{{$t('overall.showMore')}}>></div>
      </div>
    </div>
  </div>
@@ -308,7 +317,17 @@ export default {
        chartDatas: [null, null, null, null, null]
      },
      timer: null,
-      loadingIp: false
+      loadingIp: false,
+      loadingDns: false,
+      loading: false,
+      loadingTraffic: false,
+      loadingRelationshipOne: false,
+      loadingRelationshipTwo: false,
+      loadingNetworkQuality: false,
+      loadingOut: false,
+      loadingIn: false,
+      loadingAlert: false,
+      loadingSecurityEvents: false
    }
  },
  computed: {
@@ -318,10 +337,10 @@ export default {
        if (entityData.ipLocationCountry) {
          result += `${entityData.ipLocationCountry},`
        }
-        if (entityData.ipLocationCountry) {
+        if (entityData.ipLocationProvince) {
          result += `${entityData.ipLocationProvince},`
        }
-        if (entityData.ipLocationCountry) {
+        if (entityData.ipLocationCity) {
          result += `${entityData.ipLocationCity},`
        }
        result = result.substr(0, result.length - 1)
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -9,10 +9,7 @@ import { shallowRef } from 'vue'
 export default {
  props: {
    entity: Object,
-    timeFilter: Object,
-    loadingIp: Boolean,
-    loadingApp: Boolean,
-    loadingDomain: Boolean
+    timeFilter: Object
  },
  data () {
    return {
@@ -31,7 +28,14 @@ export default {
      },
      chartOption: null,
      queryParams: {},
-      echartsArray: []
+      echartsArray: [],
+      performanceData: [],
+      securityData: [],
+      showMore: {
+        securityPageSize: 5,
+        performancePageSize: 5,
+        pageNo: 1
+      }
    }
  },
  computed: {
@@ -61,6 +65,36 @@ export default {
        })
        return (m && m.name) || level
      }
+    },
+    iconClass () {
+      return function (entityData) {
+        let className
+        switch (entityData.eventSeverity) {
+          case ('critical'): {
+            className = 'critical'
+            break
+          }
+          case ('high'): {
+            className = 'high'
+            break
+          }
+          case ('info'): {
+            className = 'info'
+            break
+          }
+          case ('medium'): {
+            className = 'medium'
+            break
+          }
+          case ('low'): {
+            className = 'low'
+            break
+          }
+          default:
+            break
+        }
+        return className
+      }
    }
  },
  methods: {
@@ -72,12 +106,15 @@ export default {
    queryEntityDetailTraffic () {
      this.sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}`))
      this.receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}`))
-      if (this.entityName === 'app') {
+      if (this.entity.entityType === 'app') {
        this.loadingApp = true
-      } else if (this.entityName === 'ip') {
+        this.loadingTraffic = true
+      } else if (this.entity.entityType === 'ip') {
        this.loadingIp = true
-      } else if (this.entityName === 'domain') {
+        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) {
@@ -136,20 +173,26 @@ export default {
          this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
          this.sentChart.setOption(this.chartOptionSent)
          this.receivedChart.setOption(this.chartOptionReceived)
-          if (this.entityName === 'app') {
+          if (this.entity.entityType === 'app') {
            this.loadingApp = false
-          } else if (this.entityName === 'ip') {
+            this.loadingTraffic = false
+          } else if (this.entity.entityType === 'ip') {
            this.loadingIp = false
-          } else if (this.entityName === 'domain') {
+            this.loadingTraffic = false
+          } else if (this.entity.entityType === 'domain') {
            this.loadingDomain = false
+            this.loadingTraffic = false
          }
        } else {
-          if (this.entityName === 'app') {
+          if (this.entity.entityType === 'app') {
            this.loadingApp = false
-          } else if (this.entityName === 'ip') {
+            this.loadingTraffic = false
+          } else if (this.entity.entityType === 'ip') {
            this.loadingIp = false
-          } else if (this.entityName === 'domain') {
+            this.loadingTraffic = false
+          } else if (this.entity.entityType === 'domain') {
            this.loadingDomain = false
+            this.loadingTraffic = false
          }
        }
      }).finally(() => {
@@ -173,6 +216,7 @@ export default {
    },

    queryEntityDetailNetworkQuantity () {
+      this.loadingNetworkQuality = true
      if (this.networkQuantityUrl) {
        get(this.networkQuantityUrl, this.getQueryParams()).then(response => {
          if (response.code === 200) {
@@ -227,11 +271,13 @@ export default {
            }
            this.singleValues.chartDatas.splice(4, 1, pktRetransPercent)
          }
+          this.loadingNetworkQuality = false
        })
      }
    },

    queryEntityDetailLinkInUrl () {
+      this.loadingIn = true
      if (this.linkInUrl) {
        get(this.linkInUrl, this.getQueryParams()).then(response => {
          if (response.code === 200) {
@@ -252,11 +298,13 @@ export default {
              this.entityData.linkInId = maxId
            }
          }
+          this.loadingIn = false
        })
      }
    },

    queryEntityDetailLinkOutUrl () {
+      this.loadingOut = true
      if (this.linkOutUrl) {
        get(this.linkOutUrl, this.getQueryParams()).then(response => {
          if (response.code === 200) {
@@ -277,28 +325,49 @@ export default {
              this.entityData.linkOutId = maxId
            }
          }
+          this.loadingOut = false
        })
      }
    },

    queryEntityDetailPerformance () {
+      this.loadingAlert = true
      get(this.performanceUrl, this.getQueryParams()).then(response => {
        if (response.code === 200) {
          this.entityData.performanceNum = response.data.result.length
-          this.entityData.performanceList = response.data.result
+          this.performanceData = response.data.result
+          this.entityData.performanceList = this.getTargetPageData(1, this.showMore.performancePageSize, this.performanceData)
        }
+        this.loadingAlert = false
      })
    },

    queryEntityDetailSecurity () {
+      this.loadingSecurityEvents = true
      get(this.securityUrl, this.getQueryParams()).then(response => {
        if (response.code === 200) {
          this.entityData.securityNum = response.data.result.length
-          this.entityData.securityList = response.data.result
+          this.securityData = response.data.result
+          this.entityData.securityList = this.getTargetPageData(1, this.showMore.securityPageSize, this.securityData)
        }
+        this.loadingSecurityEvents = false
      })
    },

+    performanceShowMore (num) {
+      this.showMore.performancePageSize += num
+      this.entityData.performanceList = this.getTargetPageData(this.showMore.pageNo, this.showMore.performancePageSize, this.performanceData)
+    },
+
+    securityShowMore (num) {
+      this.showMore.securityPageSize += num
+      this.entityData.securityList = this.getTargetPageData(this.showMore.pageNo, this.showMore.securityPageSize, this.securityData)
+    },
+
+    getTargetPageData (pageNum, pageSize, data) {
+      return this.$_.slice(data, (pageNum - 1) * pageSize, pageNum * pageSize)
+    },
+
    queryDnsServerInfo () {
      get(this.entityDetectionsIpUrl, this.getQueryParams()).then(response => {
        if (response.code === 200) {
@@ -310,10 +379,14 @@ export default {
          this.entityData.dotSupport = response.data.result.dotSupport
          this.entityData.dnssecSupport = response.data.result.dnssecSupport
        }
+        if (this.entityData.dnsServerRole) {
+          this.loadingDns = false
+        }
      })
    },

    queryDnsServerInfoRate () {
+      this.loading = true
      this.detectionChart = echarts.init(document.getElementById(`entityDnsServerInfo${this.entityName}`))
      get(this.entityDetectionsIpQueryRateUrl, this.getQueryParams()).then(response => {
        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
@@ -343,6 +416,7 @@ export default {
          this.echartsArray.push(shallowRef(this.detectionChart))
          this.detectionChart.setOption(this.chartDetectionQueryRate)
        }
+        this.loading = false
      })
    },

@@ -354,6 +428,9 @@ export default {
      this.queryEntityDetailLinkOutUrl()
      this.queryEntityDetailLinkInUrl()
      if (this.entity.entityType === 'ip') {
+        if (!this.entityData.dnsServerRole) {
+          this.loadingDns = true
+        }
        this.queryDnsServerInfo()
        this.$nextTick(() => {
          setTimeout(() => {