CN-529 fix: 实体列表页面 loading 优化

2022-05-06 11:16:25 +08:00
parent 9af61333bc
commit 71978e16bf
5 changed files with 102 additions and 51 deletions
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
@@ -106,6 +106,15 @@
          height: 30px;
          align-items: center;

+          .right-label-loading {
+            position: relative;
+            .chart__loading i.el-icon-loading {
+              padding: 0;
+              top: calc(50% - 8px);
+              left: calc(50% - 9px);
+            }
+          }
+
          .right-label {
            width: 55px;
            font-size: 14px;
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -30,7 +30,6 @@
    }
    .filter__body {
      padding: 11px 0 21px 0;
-
      .filter__row {
        display: flex;
        justify-content: space-between;
@@ -71,9 +70,6 @@
    padding: 0 10px 10px 10px;
    border: 1px solid #EBEEF5;
    position: absolute;
-    top: 210px;
-    left: 580px;
-    width: 440px;
    color: #606266;
    background: #fff;
    border-radius: 4px;
@@ -107,6 +103,7 @@
        overflow: auto;
        display: flex;
        flex-direction: column;
+        position: relative;
        .filter-top-type {
          padding-left: 10px;
          font-size: 14px;
--- a/src/components/entities/EntityTop.vue
+++ b/src/components/entities/EntityTop.vue
@@ -1,5 +1,5 @@
 <template >
-  <div class="entity-pop-custom" v-ele-click-outside="esc"  v-bind:style="entityTopStyle">
+  <div class="entity-pop-custom" style="width: 440px" v-ele-click-outside="esc">
    <div class="pop-title" >
      <div>
        <i :class="item.icon"></i>
@@ -9,9 +9,7 @@
    </div>
    <div class="filter-top-box" >
      <div class="filter-top-body">
-        <div class="entity__loading" v-show="loading">
-          <i class="el-icon-loading"></i>
-        </div>
+        <loading :loading="loading"></loading>
        <div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
        <el-table
            :data="entityTopTenData"
@@ -46,16 +44,18 @@

 <script>
 import { riskLevelMapping } from '@/utils/constants'
+import Loading from '@/components/common/Loading'

 export default {
+  components: { Loading },
  props: {
    loading: Boolean
  },
  data () {
    return {
      entityTopStyle: {
-        // top:'300px',
-        left: '580px'
+        top: 0,
+        left: 0
      },
      custom: [],
      item: {},
@@ -66,13 +66,13 @@ export default {
    // 悬浮点击空白隐藏
    esc () {
      this.$emit('close')
+      this.item = {}
+      this.entityTopTenData = []
    },
    filter (row) {
      this.$emit('filter', row.name, this.item)
    },
-    initEntityTop (leftVal, itemVal, data, totalCount) {
-      // this.entityTopStyle.top = topVal+'px'
-      this.entityTopStyle.left = leftVal + 'px'
+    initEntityTop (itemVal, data, totalCount) {
      this.item = itemVal
      if (data.length > 0) {
        this.entityTopTenData = data.map(d => {
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -57,7 +57,7 @@
        <div class="entity-overview">
          <div class="overview-left">
            <span class="overview-left-loading">
-              <loading :loading="loading"></loading>
+              <loading :loading="loadingApp"></loading>
              <span class="overview-left-loading-span">{{entityAppTotal}}</span>
            </span>
            <span class="overview-left-span">APP</span>
@@ -66,12 +66,18 @@
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
-              <div class="right-value">{{entityAppNew}}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingAppNew"></loading>
+                <div class="right-value">{{entityAppNew}}</div>
+              </div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
-              <div class="right-value">{{entityAppActive}}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingAppActive"></loading>
+                <div class="right-value">{{entityAppActive}}</div>
+              </div>
            </div>
          </div>
        </div>
@@ -79,7 +85,7 @@
        <div class="entity-overview">
          <div class="overview-left">
            <span class="overview-left-loading">
-              <loading :loading="loading"></loading>
+              <loading :loading="loadingDomain"></loading>
              <span class="overview-left-loading-span">{{entityDomainTotal}}</span>
            </span>
            <span class="overview-left-span">DOMAIN</span>
@@ -88,12 +94,18 @@
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
-              <div class="right-value">{{entityDomainNew}}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingDomainNew"></loading>
+                <div class="right-value">{{entityDomainNew}}</div>
+              </div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
-              <div class="right-value">{{entityDomainActive}}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingDomainActive"></loading>
+                <div class="right-value">{{entityDomainActive}}</div>
+              </div>
            </div>
          </div>
        </div>
@@ -101,7 +113,7 @@
        <div class="entity-overview">
          <div class="overview-left">
            <span class="overview-left-loading">
-              <loading :loading="loading"></loading>
+              <loading :loading="loadingIp"></loading>
              <span class="overview-left-loading-span">{{entityIpTotal}}</span>
            </span>
            <span class="overview-left-span">IP</span>
@@ -110,12 +122,18 @@
            <div class="right-row">
              <i class="cn-icon cn-icon-increase"></i>
              <div class="right-label">New</div>
-              <div class="right-value">{{entityIpNew}}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingIpNew"></loading>
+                <div class="right-value">{{entityIpNew}}</div>
+              </div>
            </div>
            <div class="right-row">
              <i class="cn-icon cn-icon-active"></i>
              <div class="right-label">Active</div>
-              <div class="right-value">{{entityIpActive}}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingIpActive"></loading>
+                <div class="right-value">{{entityIpActive}}</div>
+              </div>
            </div>
          </div>
        </div>
@@ -272,7 +290,20 @@ export default {
      metaList: [],
      limitFilterType: true, // 是否限定了filter的类型
      listLoading: false,
-      loading: false,
+      // 实体详情搜索页面 底部列表
+      loadingApp: false,
+      loadingDomain: false,
+      loadingIp: false,
+      // New
+      loadingAppNew: false,
+      loadingDomainNew: false,
+      loadingIpNew: false,
+      // Active
+      loadingAppActive: false,
+      loadingDomainActive: false,
+      loadingIpActive: false,
+
+      // 实体详情列表页面 左侧筛选条件
      loadingLeft: false
    }
  },
@@ -517,64 +548,73 @@ export default {
        endTime: parseInt(now / 1000)
      }
      // Total
+      this.loadingApp = true
+      this.loadingDomain = true
+      this.loadingIp = true
+      // New
+      this.loadingAppNew = true
+      this.loadingDomainNew = true
+      this.loadingIpNew = true
+      // Active
+      this.loadingAppActive = true
+      this.loadingDomainActive = true
+      this.loadingIpActive = true
+
      get(api.entityTotal, { entityType: 'app' }).then(response => {
-        this.loading = true
        if (response.code === 200) {
          this.entityAppTotal = response.data.result
-          this.loading = false
-        } else {
-          this.loading = false
        }
+        this.loadingApp = false
      })
      get(api.entityTotal, { entityType: 'domain' }).then(response => {
-        this.loading = true
        if (response.code === 200) {
          this.entityDomainTotal = response.data.result
-          this.loading = false
-        } else {
-          this.loading = false
        }
+        this.loadingDomain = false
      })
      get(api.entityTotal, { entityType: 'ip' }).then(response => {
-        this.loading = true
        if (response.code === 200) {
          this.entityIpTotal = response.data.result
-          this.loading = false
-        } else {
-          this.loading = false
        }
+        this.loadingIp = false
      })
      // New
      get(api.entityNew, { entityType: 'app', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityAppNew = response.data.result
        }
+        this.loadingAppNew = false
      })
      get(api.entityNew, { entityType: 'domain', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityDomainNew = response.data.result
        }
+        this.loadingDomainNew = false
      })
      get(api.entityNew, { entityType: 'ip', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityIpNew = response.data.result
        }
+        this.loadingIpNew = false
      })
      // Active
      get(api.entityActive, { entityType: 'app', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityAppActive = response.data.result
        }
+        this.loadingAppActive = false
      })
      get(api.entityActive, { entityType: 'domain', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityDomainActive = response.data.result
        }
+        this.loadingDomainActive = false
      })
      get(api.entityActive, { entityType: 'ip', ...timeFilter }).then(response => {
        if (response.code === 200) {
          this.entityIpActive = response.data.result
        }
+        this.loadingIpActive = false
      })
    },
    cleanFilterData (index) {
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -8,7 +8,7 @@
    >
      <div class="filter__header">{{filter.title}}</div>
      <div class="filter__body">
-        <div class="filter__row" v-for="(item, i) in filter.data" :key="i"  @click="showTopDialog(i, item, filter)"  :ref="`entityTopTen`+i">
+        <div class="filter__row" v-for="(item, i) in filter.data" :key="i"  @click="showTopDialog(i, item, filter)"  :ref="'entityTopTen' + i + filter.type">
          <div class="row__label">
            <i :class="item.icon"></i>
              <span>{{item.label}}</span>
@@ -23,6 +23,7 @@
    <!-- 自定义table列 -->
    <transition name="el-zoom-in-top">
      <entity-top
+          :style="location"
          v-show="showTopTen"
          ref="entityTopTenPop"
          :loading="loading"
@@ -58,15 +59,22 @@ export default {
      topData: [],
      showTopTen: false, // 自定义列弹框是否显示
      entityTopTenData: [],
+      location: {
+        top: 0,
+        left: 0
+      },
+      currentColumn: '',
      loading: false
    }
  },
  methods: {
    showTopDialog (i, item, filter) {
+      this.currentColumn = item.column
      const type = filter.type
-      const width = this.$refs['entityTopTen' + i].offsetWidth
-      const offsetLeft = this.$refs['entityTopTen' + i].offsetLeft
-      const leftVal = offsetLeft + width
+      this.location.left = '17.5rem'
+      const offsetTop = this.$refs['entityTopTen' + i + filter.type].offsetTop
+      this.location.top = offsetTop + 'px'
+      this.showTopTen = true
      const queryParams = {
        q: this.q,
        entityType: type,
@@ -75,29 +83,26 @@ export default {
        startTime: parseInt(this.timeFilter.startTime / 1000),
        endTime: parseInt(this.timeFilter.endTime / 1000)
      }
-      this.timeout = setTimeout(() => {
-        this.loading = true
-      }, 500)
+      this.loading = true
      get(api.filterTop, queryParams).then(response => {
        if (response.code === 200) {
-          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, response.data.result, filter.totalCount)
+          console.info(this.currentColumn, item.column)
+          if (this.currentColumn === item.column) {
+            this.$refs.entityTopTenPop.initEntityTop(item, response.data.result, filter.totalCount)
+          }
        } else {
-          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [], filter.totalCount)
+          this.$refs.entityTopTenPop.initEntityTop(item, [], filter.totalCount)
        }
-      }).catch(e => {
-        this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [], filter.totalCount)
-      }).finally(() => {
-        clearTimeout(this.timeout)
        this.loading = false
-        this.showTopTen = true
+      }).catch(e => {
+        this.$refs.entityTopTenPop.initEntityTop(item, [], filter.totalCount)
+        this.loading = false
      })
    },
    filter (name, topData) {
      this.showTopTen = false
      this.$emit('filter', name, topData)
    }
-  },
-  mounted () {
  }
 }
 </script>