fix: 实体列表左侧筛选条件调整

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

@@ -3,6 +3,8 @@
   flex-direction: column;
   width: 280px;
   margin-right: 10px;
+  overflow: auto;
+  z-index: 1;
 
   .filter-case__header {
     background-color: #E1E6ED;
@@ -31,19 +33,22 @@
     .filter__body {
       padding: 11px 0 21px 0;
       .filter__row {
-        display: flex;
-        justify-content: space-between;
         padding: 0 15px;
         height: 26px;
         align-items: center;
         cursor: pointer;
         transition: all linear .2s;
+        .filter__row-popover {
+          display: flex;
+          line-height: 24px;
+        }
 
         &:hover, &.filter__row--active {
           background-color: #F3F7FA;
         }
         .row__label {
           font-size: 14px;
+          flex: 8;
           i {
             color: #8FA1BE;
           }
@@ -56,6 +61,8 @@
           color: #666;
           position: relative;
           display: inline-block;
+          text-align: center;
+          flex: 1;
           .chart__loading i.el-icon-loading {
             font-size: 18px;
             top: calc(50% - 10px);
@@ -65,63 +72,25 @@
       }
     }
   }
-
+}
+.filter__row-popover {
+  .pop-title {
+    i {
+      margin-right: 6px;
+    }
+  }
   .entity-pop-custom {
-    padding: 0 10px 10px 10px;
-    border: 1px solid #EBEEF5;
-    position: absolute;
-    color: #606266;
-    background: #fff;
-    border-radius: 4px;
-    z-index: 999999;
-    box-shadow: 0 0 10px #CCC;
-    box-sizing: border-box;
-
-    .el-button--mini{
-      padding: 5px 7px;
-    }
-    .pop-title{
-      margin-left: 10px;
-      margin-top:17px;
-      font-family: Roboto-Black;
-      font-size: 16px;
-      color: #333333;
-      letter-spacing: 0;
-      line-height: 16px;
-      font-weight: 400;
-      span {
-        padding-left: 6px;
-        color: #333;
-      }
-    }
     .filter-top-box {
       margin-top: 12px;
-      width: 100%;
+      .top-table-percent{
-      height: fit-content;
+        display:grid;
-      .filter-top-body{
+        grid-template-columns: 50% auto;
-        height: fit-content;
+        grid-template-rows: 100%;
-        overflow: auto;
+        grid-row-gap: 0px;
-        display: flex;
+        grid-column-gap: 0px;
-        flex-direction: column;
+        .top-table-progress{
-        position: relative;
+          align-content: center;
-        .filter-top-type {
+          padding-top: 8px;
-          padding-left: 10px;
-          font-size: 14px;
-          color: #666666;
-          letter-spacing: 0;
-          font-weight: 400;
-        }
-
-        .top-table-percent{
-          display:grid;
-          grid-template-columns: 50% auto;
-          grid-template-rows: 100%;
-          grid-row-gap: 0px;
-          grid-column-gap: 0px;
-          .top-table-progress{
-            align-content: center;
-            padding-top: 8px;
-          }
         }
       }
     }

src/components/entities/EntityTop.vue

@@ -1,18 +1,18 @@
 <template >
-  <div class="entity-pop-custom" style="width: 440px" v-ele-click-outside="esc">
+  <div class="entity-pop-custom" v-ele-click-outside="esc">
-    <div class="pop-title" >
+    <div class="pop-title">
       <div>
-        <i :class="item.icon"></i>
+        <i :class="itemData.icon"></i>
-        <span>{{item.label}}</span>
+        <span>{{itemData.label}}</span>
       </div>
-      <button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>
     </div>
-    <div class="filter-top-box" >
+    <button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>
+    <div class="filter-top-box">
       <div class="filter-top-body">
         <loading :loading="loading"></loading>
-        <div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
+        <div class="filter-top-type">{{itemData.value}}{{$t('overall.operator')}}{{itemData.label}}</div>
         <el-table
-            :data="entityTopTenData"
+            :data="popoverData"
             :header-cell-style="tableHeaderCellStyle"
             :header-row-style="tableHeaderRowStyle"
             :row-style="rowStyle"
@@ -22,17 +22,19 @@
             @row-click="filter"
         >
           <el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
-          <el-table-column prop="name" :label="item.label" width="120">
+          <el-table-column prop="name" :label="itemData.label" width="120">
             <template #default="scope">
-              <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.name">{{scope.row.name}}</div>
+              <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.name">
+                {{valueHandle(scope.row.name, topColumn) || 'unknown'}}
+              </div>
             </template>
           </el-table-column>
             <el-table-column prop="count" :label="$t('overall.number')" width="79" />
             <el-table-column prop="percent" :label="$t('overall.percent')" >
               <template #default="scope">
                 <div class="top-table-percent" >
-                  <div >{{ scope.row.percent }}%</div>
+                  {{(totalCount === 0 ? 0 : parseFloat(scope.row.count / totalCount) * 100).toFixed(2)}}%
-                  <div class="top-table-progress"><el-progress :percentage="scope.row.percent" :show-text="false" color="#23BF9A"></el-progress></div>
+                  <div class="top-table-progress"><el-progress :percentage="(totalCount === 0 ? 0 : parseFloat(scope.row.count / totalCount) * 100).toFixed(2)" :show-text="false" color="#23BF9A"></el-progress></div>
                 </div>
               </template>
             </el-table-column>
@@ -49,46 +51,26 @@ import Loading from '@/components/common/Loading'
 export default {
   components: { Loading },
   props: {
-    loading: Boolean
+    loading: Boolean,
+    popoverData: Array,
+    itemData: Object,
+    totalCount: Number
   },
   data () {
     return {
-      entityTopStyle: {
+      custom: []
-        top: 0,
-        left: 0
-      },
-      custom: [],
-      item: {},
-      entityTopTenData: []
     }
   },
   methods: {
-    // 悬浮点击空白隐藏
-    esc () {
-      this.$emit('close')
-      this.item = {}
-      this.entityTopTenData = []
-    },
-    filter (row) {
-      this.$emit('filter', row.name, this.item)
-    },
-    initEntityTop (itemVal, data, totalCount) {
-      this.item = itemVal
-      if (data.length > 0) {
-        this.entityTopTenData = data.map(d => {
-          return {
-            ...d,
-            name: this.valueHandle(d.name, this.item.topColumn) || 'unknown',
-            percent: (parseFloat(d.count / totalCount) * 100).toFixed(2)
-          }
-        })
-      } else {
-        this.entityTopTenData = []
-      }
-    },
     indexMethod (index) {
       return index + 1
     },
+    esc () {
+      this.$emit('close')
+    },
+    filter (row) {
+      this.$emit('filter', row.name, this.itemData)
+    },
     valueHandle (value, columnName) {
       if (columnName === 'app_risk') {
         const m = riskLevelMapping.find(mapping => {
@@ -111,9 +93,6 @@ export default {
     rowStyle ({ row, rowIndex }) {
       return 'height:21px;font-size: 14px;color: #666666;font-weight: 400;'
     }
-  },
-  computed: {
-
   }
 }
 </script>

src/views/entityExplorer/EntityFilter.vue

@@ -3,37 +3,41 @@
     <div class="filter-case__header">{{$t('entities.filter')}}</div>
     <div
         class="entity-filter"
-        v-for="(filter, index) in filterData"
+        v-for="(filters, index) in filterData"
         :key="index"
     >
-      <div class="filter__header">{{filter.title}}</div>
+      <div class="filter__header">{{filters.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 + filter.type">
+
-          <div class="row__label">
+        <div class="filter__row" v-for="(item, i) in filters.data" :key="i">
-            <i :class="item.icon"></i>
+          <el-popover popper-class="filter__row-popover" placement="right" :width="440" trigger="click">
-              <span>{{item.label}}</span>
+            <template #reference>
-          </div>
+              <div class="filter__row-popover" @click="showTopDialog(i, item, filters)">
-          <div class="row__value">
+                <div class="row__label">
-            <loading :loading="loadingLeft"></loading>
+                  <i :class="item.icon"></i>
-            <span>{{item.value}}</span>
+                  <span>{{item.label}}</span>
-          </div>
+                </div>
+                <div class="row__value">
+                  <loading :loading="loadingLeft"></loading>
+                  <span>{{item.value}}</span>
+                </div>
+              </div>
+            </template>
+            <entity-top
+              ref="entityTopTenPop"
+              :loading="loading"
+              :popover-data="popoverData"
+              :item-data="itemData"
+              :total-count="totalCount"
+              @filter="filter"
+              v-show="showTopTen"
+              @close="showTopTen = false"
+            ></entity-top>
+          </el-popover>
         </div>
       </div>
     </div>
-    <!-- 自定义table列 -->
-    <transition name="el-zoom-in-top">
-      <entity-top
-          :style="location"
-          v-show="showTopTen"
-          ref="entityTopTenPop"
-          :loading="loading"
-          @filter="filter"
-          @close="showTopTen = false"
-      ></entity-top>
-    </transition>
-
   </div>
-
 </template>
 
 <script>
@@ -56,23 +60,19 @@ export default {
     return {
       topList: 'list',
       topData: [],
-      showTopTen: false, // 自定义列弹框是否显示
       entityTopTenData: [],
-      location: {
+      showTopTen: false, // 自定义列弹框是否显示
-        top: 0,
-        left: 0
-      },
       currentColumn: '',
-      loading: false
+      loading: false,
+      popoverData: [],
+      itemData: {},
+      totalCount: 0
     }
   },
   methods: {
     showTopDialog (i, item, filter) {
       this.currentColumn = item.column
       const type = filter.type
-      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,
@@ -83,16 +83,21 @@ export default {
       this.loading = true
       get(api.filterTop, queryParams).then(response => {
         if (response.code === 200) {
-          console.info(this.currentColumn, item.column)
           if (this.currentColumn === item.column) {
-            this.$refs.entityTopTenPop.initEntityTop(item, response.data.result, filter.totalCount)
+            this.popoverData = response.data.result
+            this.itemData = item
+            this.totalCount = filter.totalCount
           }
         } else {
-          this.$refs.entityTopTenPop.initEntityTop(item, [], filter.totalCount)
+          this.popoverData = []
+          this.itemData = item
+          this.totalCount = filter.totalCount
         }
         this.loading = false
       }).catch(e => {
-        this.$refs.entityTopTenPop.initEntityTop(item, [], filter.totalCount)
+        this.popoverData = []
+        this.itemData = item
+        this.totalCount = filter.totalCount
         this.loading = false
       })
     },