CN-544 feat: 实体详情列表增加dns过滤

src/assets/css/components/views/entityExplorer/entity-filter.scss

@@ -81,6 +81,9 @@
   }
   .entity-pop-custom {
     .filter-top-box {
+      .chart__loading {
+        height: calc(100% - 65px);
+      }
       margin-top: 12px;
       .top-table-percent{
         display:grid;

src/views/entityExplorer/EntityExplorer.vue

@@ -201,6 +201,7 @@ export default {
               column: 'countryDistinctCount',
               topColumn: 'ip_location_country', // top弹框查询字段
               icon: 'cn-icon cn-icon-country',
+              showTopTen: false,
               value: 0
             },
             {
@@ -208,6 +209,7 @@ export default {
               column: 'provinceDistinctCount',
               topColumn: 'ip_location_province', // top弹框查询字段
               icon: 'cn-icon cn-icon-position',
+              showTopTen: false,
               value: 0
             },
             {
@@ -215,6 +217,7 @@ export default {
               column: 'cityDistinctCount',
               topColumn: 'ip_location_city', // top弹框查询字段
               icon: 'cn-icon cn-icon-city',
+              showTopTen: false,
               value: 0
             },
             {
@@ -222,6 +225,7 @@ export default {
               column: 'asnDistinctCount',
               topColumn: 'ip_asn', // top弹框查询字段
               icon: 'cn-icon cn-icon-cloud',
+              showTopTen: false,
               value: 0
             }
           ]
@@ -236,6 +240,7 @@ export default {
               column: 'categoryDistinctCount',
               topColumn: 'app_category', // top弹框查询字段
               icon: 'cn-icon cn-icon-category',
+              showTopTen: false,
               value: 0
             },
             {
@@ -243,6 +248,7 @@ export default {
               column: 'subcategoryDistinctCount',
               topColumn: 'app_subcategory', // top弹框查询字段
               icon: 'cn-icon cn-icon-sub-category',
+              showTopTen: false,
               value: 0
             },
             {
@@ -250,6 +256,7 @@ export default {
               column: 'riskDistinctCount',
               topColumn: 'app_risk', // top弹框查询字段
               icon: 'cn-icon cn-icon-risk',
+              showTopTen: false,
               value: 0
             }
           ]
@@ -264,6 +271,7 @@ export default {
               column: 'categoryGroupDistinctCount',
               topColumn: 'domain_category_group', // top弹框查询字段
               icon: 'cn-icon cn-icon-category',
+              showTopTen: false,
               value: 0
             },
             {
@@ -271,6 +279,7 @@ export default {
               column: 'categoryDistinctCount',
               topColumn: 'domain_category', // top弹框查询字段
               icon: 'cn-icon cn-icon-sub-category',
+              showTopTen: false,
               value: 0
             },
             {
@@ -278,13 +287,14 @@ export default {
               column: 'reputationLevelDistinctCount',
               topColumn: 'domain_reputation_level', // top弹框查询字段
               icon: 'cn-icon cn-icon-credit',
+              showTopTen: false,
               value: 0
             }
           ]
         },
         {
           type: 'dns',
-          title: 'DNS',
+          title: this.$t('dns.dnsServer'),
           totalCount: 0,
           data: [
             {
@@ -292,6 +302,7 @@ export default {
               column: 'dnsServerRoleCount',
               topColumn: 'dns_server_role',
               icon: 'cn-icon cn-icon-role',
+              showTopTen: false,
               value: 0
             },
             {
@@ -299,6 +310,7 @@ export default {
               column: 'dnsServerOrgCount',
               topColumn: 'dns_server_org',
               icon: 'cn-icon cn-icon-org',
+              showTopTen: false,
               value: 0
             },
             {
@@ -306,6 +318,7 @@ export default {
               column: 'dnsServerSoftwareCount',
               topColumn: 'dns_server_software',
               icon: 'cn-icon cn-icon-software',
+              showTopTen: false,
               value: 0
             },
             {
@@ -313,6 +326,7 @@ export default {
               column: 'dnsServerOsCount',
               topColumn: 'dns_server_os',
               icon: 'cn-icon cn-icon-os',
+              showTopTen: false,
               value: 0
             }
           ]
@@ -427,6 +441,7 @@ export default {
             this.limitFilterType = false
           }
           this.queryFilter({ entityType: entityType, q: this.q })
+          this.queryFilter({ entityType: 'dns', q: this.q })
           this.queryList({ q: this.q, ...this.pageObj })
           this.queryListTotal({ q: this.q })
         } else {
@@ -434,6 +449,7 @@ export default {
           this.queryFilter({ entityType: 'ip', q: this.q })
           this.queryFilter({ entityType: 'domain', q: this.q })
           this.queryFilter({ entityType: 'app', q: this.q })
+          this.queryFilter({ entityType: 'dns', q: this.q })
           this.queryList({ q: this.q, ...this.pageObj })
           this.queryListTotal({ q: this.q })
         }
@@ -442,6 +458,7 @@ export default {
         this.queryFilter({ entityType: 'ip' })
         this.queryFilter({ entityType: 'app' })
         this.queryFilter({ entityType: 'domain' })
+        this.queryFilter({ entityType: 'dns' })
         this.queryList({ ...this.pageObj })
         this.queryListTotal()
       }
@@ -530,6 +547,17 @@ export default {
               }
               break
             }
+            case 'dns': {
+              this.filterData[3].data.forEach(d => {
+                d.value = response.data.result[d.column]
+              })
+              this.filterData[3].totalCount = response.data.result.count
+              if (this.limitFilterType) {
+                this.cleanFilterData(0)
+                this.cleanFilterData(1)
+              }
+              break
+            }
           }
           this.loadingLeft = false
         } else {

src/views/entityExplorer/EntityFilter.vue

@@ -10,7 +10,7 @@
       <div class="filter__body">
 
         <div class="filter__row" v-for="(item, i) in filters.data" :key="i">
-          <el-popover popper-class="filter__row-popover" placement="right" :width="440" trigger="click">
+          <el-popover popper-class="filter__row-popover" placement="right" :width="440" trigger="click" v-model:visible="item.showTopTen">
             <template #reference>
               <div class="filter__row-popover" @click="showTopDialog(i, item, filters)">
                 <div class="row__label">
@@ -30,8 +30,7 @@
               :item-data="itemData"
               :total-count="totalCount"
               @filter="filter"
-              v-show="showTopTen"
-              @close="showTopTen = false"
+              @close="item.showTopTen = false"
             ></entity-top>
           </el-popover>
         </div>
@@ -72,15 +71,15 @@ export default {
   methods: {
     showTopDialog (i, item, filter) {
       this.currentColumn = item.column
-      const type = filter.type
-      this.showTopTen = true
+      item.showTopTen = true
       const queryParams = {
         q: this.q,
-        entityType: type,
+        entityType: filter.type,
         column: item.topColumn,
         top: 10
       }
       this.loading = true
+      this.popoverData = []
       get(api.filterTop, queryParams).then(response => {
         if (response.code === 200) {
           if (this.currentColumn === item.column) {
@@ -102,7 +101,7 @@ export default {
       })
     },
     filter (name, topData) {
-      this.showTopTen = false
+      topData.showTopTen = false
       this.$emit('filter', name, topData)
     }
   }