CN-251 Entity-explorer 左侧筛选TOP10弹框开发

src/assets/css/components/views/entityExplorer/entityFilter.scss

@@ -59,4 +59,67 @@
       }
     }
   }
+
+  .entity-pop-custom {
+    padding: 0 10px 10px 10px;
+    border: 1px solid #EBEEF5;
+    position: absolute;
+    top: 210px;
+    left: 580px;
+    width: 420px;
+    height:370px;
+    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%;
+      height: 350px;
+      .filter-top-body{
+        height: 305px;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        .filter-top-type {
+          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

@@ -0,0 +1,145 @@
+<template >
+    <div class="entity-pop-custom" v-ele-click-outside="esc"  v-bind:style="entityTopStyle">
+        <div class="pop-title" >
+            <div>
+                <i :class="item.icon"></i>
+                <span>{{item.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" >
+            <div class="filter-top-body">
+                <div class="filter-top-type">{{item.value}}{{$t('overall.operator')}}{{item.label}}</div>
+                <el-table :data="entityTopTenData" style="width: 100%"
+                          :header-cell-style="tableHeaderCellStyle"
+                          :header-row-style="tableHeaderRowStyle"
+                          :row-style="rowStyle"
+                          class="customer-no-border-table"
+                          :cell-style="{'text-align':'left','padding': '1px 0','border':'0px'}">
+                    <el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
+                    <el-table-column prop="name" :label="$t('overall.country')" width="100" />
+                    <el-table-column prop="value" :label="$t('overall.number')" width="79" />
+                    <el-table-column prop="rate" :label="$t('overall.percent')" >
+                        <template #default="scope">
+                            <div class="top-table-percent">
+                                <div >{{ scope.row.percent }}%</div>
+                                <div class="top-table-progress"><el-progress :percentage="scope.row.percent" :show-text="false" color="#23BF9A" ></el-progress></div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  data () {
+    return {
+      entityTopStyle: {
+        // top:'300px',
+        left: '580px'
+      },
+      custom: [],
+      item: {},
+      entityTopTenData: [
+        {
+          name: '中国',
+          value: '376',
+          percent: 20
+        },
+        {
+          name: '美国',
+          value: '298',
+          percent: 18
+        },
+        {
+          name: '英国',
+          value: '268',
+          percent: 16
+        }, {
+          name: '意大利',
+          value: '230',
+          percent: 15
+        },
+        {
+          name: '泰国',
+          value: '210',
+          percent: 13
+        },
+        {
+          name: '越南',
+          value: '190',
+          percent: 10
+        }, {
+          name: '马尔代夫',
+          value: '172',
+          percent: 9
+        }, {
+          name: '马来西亚',
+          value: '156',
+          percent: 6
+        },
+        {
+          name: '新加坡',
+          value: '140',
+          percent: 5
+        },
+        {
+          name: '缅甸',
+          value: '120',
+          percent: 4
+        }
+      ]
+    }
+  },
+  created () {
+
+  },
+  watch: {
+  },
+  methods: {
+    // 悬浮点击空白隐藏
+    esc () {
+      this.$emit('close')
+    },
+    initEntityTop (leftVal, itemVal, data) {
+      // this.entityTopStyle.top = topVal+'px'
+      this.entityTopStyle.left = leftVal + 'px'
+      this.item = itemVal
+      if (data.length > 0) {
+        this.entityTopTenData = data
+      }
+    },
+    indexMethod (index) {
+      return index + 1
+    },
+    tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return 'padding-bottom:5px;padding-top:14px;'
+      }
+    },
+    tableHeaderRowStyle ({ row, rowIndex }) {
+      if (rowIndex === 0) {
+        return 'color: #333333;font-weight: 500;font-size: 14px;'
+      }
+    },
+    rowStyle ({ row, rowIndex }) {
+      return 'height:21px;font-size: 14px;color: #666666;font-weight: 400;'
+    }
+  },
+  computed: {
+
+  }
+}
+</script>
+<style>
+    .entity-pop-custom .el-table::before {
+        height: 0px;
+    }
+
+</style>

src/utils/api.js

@@ -26,7 +26,8 @@ export const api = {
   entityFilter: '/interface/entity/filter',
   ipThroughput: '/interface/entity/ip/detail/throughput',
   domainThroughput: '/interface/entity/domain/detail/throughput',
-  appThroughput: '/interface/entity/app/detail/throughput'
+  appThroughput: '/interface/entity/app/detail/throughput',
+  filterTop: '/interface/entity/filter/top'
 }
 
 /* panel */

src/views/entityExplorer/EntityFilter.vue

@@ -1,30 +1,95 @@
-<template>
+<template >
-  <div class="entity-filter-case">
+    <div class="entity-filter-case " >
-    <div class="filter-case__header">{{$t('entities.filter')}}</div>
+      <div class="filter-case__header">{{$t('entities.filter')}}</div>
-    <div
+      <div
-        class="entity-filter"
+          class="entity-filter"
-        v-for="(filter, index) in filterData"
+          v-for="(filter, index) in filterData"
-        :key="index"
+          :key="index"
-    >
+      >
-      <div class="filter__header">{{filter.title}}</div>
+        <div class="filter__header">{{filter.title}}</div>
-      <div class="filter__body">
+        <div class="filter__body">
-        <div class="filter__row" v-for="(item, i) in filter.data" :key="i">
+          <div class="filter__row" v-for="(item, i) in filter.data" :key="i"  @click="showTopDailog(i,item,filter.type)"  :ref="`entityTopTen`+i">
-          <div class="row__label">
+            <div class="row__label">
-            <i :class="item.icon"></i>
+              <i :class="item.icon"></i>
-            <span>{{item.label}}</span>
+              <span>{{item.label}}</span>
+            </div>
+            <div class="row__value">{{item.value}}</div>
           </div>
-          <div class="row__value">{{item.value}}</div>
         </div>
       </div>
+        <!-- 自定义table列 -->
+        <transition name="el-zoom-in-top">
+            <entity-top
+                    v-show="showTopTen"
+                    ref="entityTopTenPop"
+                    @close="showTopTen = false"
+            ></entity-top>
+        </transition>
+
     </div>
-  </div>
+
 </template>
 
 <script>
+import EntityTop from '@/components/entities/EntityTop'
+import { get } from '@/utils/http'
+import { api } from '@/utils/api'
+
 export default {
   name: 'EntityFilter',
+  components: {
+    EntityTop
+  },
   props: {
     filterData: Array
+  },
+  data () {
+    return {
+      topList: 'list',
+      topData: [],
+      showTopTen: false, // 自定义列弹框是否显示
+      entityTopTenData: []
+    }
+  },
+  methods: {
+    showTopDailog (i, item, type) {
+      const width = this.$refs['entityTopTen' + i].offsetWidth
+      const offsetLeft = this.$refs['entityTopTen' + i].offsetLeft
+      const leftVal = offsetLeft + width
+
+      get(api.filterTop, { entityType: type, column: item.column, top: 10 }).then(response => {
+        if (response.code === 200) {
+          const rlt = response.data.result
+
+          let sum = 0
+          rlt.forEach(item => {
+            sum = sum + item.value
+          })
+
+          let curSumPercent = 0
+          rlt.forEach((item, i) => {
+            const per = Number(item.value * 100 / sum).toFixed(0)
+            if ((i + 1) === rlt.length) {
+              item.percent = 100 - curSumPercent
+            } else {
+              item.percent = per
+              curSumPercent = Number(curSumPercent) + Number(per)
+            }
+          })
+          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, rlt)
+        } else {
+          this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [])
+        }
+      }).catch(e => {
+        this.$refs.entityTopTenPop.initEntityTop(leftVal, item, [])
+      }).finally(() => {
+        this.showTopTen = true
+      })
+    }
+  },
+  mounted () {
+
   }
+
 }
 </script>