From 71978e16bf42d4cdef3591c473cd5c36458c5819 Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 6 May 2022 11:16:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?CN-529=20fix:=20=E5=AE=9E=E4=BD=93=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E9=A1=B5=E9=9D=A2=20loading=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/entityExplorer/entity-explorer.scss |  9 ++
 .../views/entityExplorer/entity-filter.scss   |  5 +-
 src/components/entities/EntityTop.vue         | 18 ++--
 src/views/entityExplorer/EntityExplorer.vue   | 84 ++++++++++++++-----
 src/views/entityExplorer/EntityFilter.vue     | 37 ++++----
 5 files changed, 102 insertions(+), 51 deletions(-)

diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index 23a9998f..1a4cc162 100644
--- 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;
diff --git a/src/assets/css/components/views/entityExplorer/entity-filter.scss b/src/assets/css/components/views/entityExplorer/entity-filter.scss
index 13a8264e..b319b3c1 100644
--- 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;
diff --git a/src/components/entities/EntityTop.vue b/src/components/entities/EntityTop.vue
index 047c8713..2ae95eff 100644
--- 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 => {
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index d9c9964f..876e2a90 100644
--- 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) {
diff --git a/src/views/entityExplorer/EntityFilter.vue b/src/views/entityExplorer/EntityFilter.vue
index d449a332..b0e645cb 100644
--- 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>

From 60372b7133ff45220402de6fc4214a9d4cfaa5fa Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Fri, 6 May 2022 11:32:40 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=AE=9E=E4=BD=93=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=20=E6=A3=80=E6=B5=8B=20=3D=E3=80=8B=20?=
 =?UTF-8?q?=E5=AE=89=E5=85=A8=E4=BA=8B=E4=BB=B6=E5=92=8C=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E8=B4=A8=E9=87=8F=E5=88=86=E9=A1=B5=E9=94=99=E8=AF=AF=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/PanelChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index ad0005f6..34d016ba 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -188,7 +188,7 @@ export default {
             pageSize: 9
           }
         }
-        if (this.isDetectionService || this.isDetectionSecurity) {
+        if ((this.isDetectionService || this.isDetectionSecurity) && JSON.stringify(extraParams) === '{}') {
           extraParams = {
             pageNo: 1,
             pageSize: 6