feat: entities列表

src/components/charts/panel.scss

@@ -28,6 +28,9 @@
   &>.cn-chart.cn-chart__echarts--statistics {
     border: none;
     box-shadow: none;
+    .cn-chart__header {
+      border-bottom: none;
+    }
   }
   &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map {
     display: flex;

src/components/entities/EntityList.vue

@@ -33,7 +33,7 @@
               <span class="body__row-value">{{d.region || '-'}}</span>
             </div>
             <div class="body__row">
-              <span class="body__row-label">{{$t('common.asn')}}:</span>
+              <span class="body__row-label">{{$t('entities.asn')}}:</span>
               <span class="body__row-value">{{d.asn || '-'}}</span>
             </div>
             <div class="body__detail">{{$t('common.detail')}}</div>
@@ -71,7 +71,19 @@
         </div>
       </div>
     </div>
-    <div class="entity-list__pagination"></div>
+    <div class="entity-list__pagination">
+      <el-pagination
+          @size-change="size"
+          @prev-click="prev"
+          @next-click="next"
+          @current-change="current"
+          :currentPage="pageObj.pageNo"
+          :page-size="pageObj.pageSize"
+          :total="pageObj.total"
+          :page-sizes="[30, 50, 100]"
+          layout="total, prev, pager, next, sizes"
+      ></el-pagination>
+    </div>
   </div>
 </template>
 
@@ -80,7 +92,8 @@ export default {
   name: 'EntityList',
   props: {
     listData: Array,
-    entityType: String
+    entityType: String,
+    pageObj: Object
   },
   computed: {
     circleColor () {
@@ -121,6 +134,34 @@ export default {
       }
       return className
     }
+  },
+  methods: {
+    size (val) {
+      this.$emit('pageSize', val)
+    },
+    // 点击上一页箭头
+    prev () {
+      this.scrollbarToTop()
+    },
+    // 点击下一页箭头
+    next () {
+      this.scrollbarToTop()
+    },
+    // currentPage 改变时会触发
+    current (val) {
+      this.$emit('pageNo', val)
+      this.scrollbarToTop()
+    },
+    scrollbarToTop () {
+      this.$nextTick(() => {
+        const wraps = document.querySelectorAll('.el-table__body-wrapper')
+        wraps.forEach(wrap => {
+          if (wrap._ps_) {
+            wrap.scrollTop = 0
+          }
+        })
+      })
+    }
   }
 }
 </script>

src/components/entities/LeftFilter.vue

@@ -47,6 +47,11 @@ export default {
     nodeClick (data, node) {
       this.$emit('select', data)
     }
+  },
+  watch: {
+    filterData (n) {
+      console.info(n)
+    }
   }
 }
 </script>

src/components/entities/entities.scss

@@ -11,6 +11,7 @@
   .entity-list {
     height: 100%;
     width: 100%;
+    overflow: hidden;
 
     .entity-list__content {
       display: grid;
@@ -86,6 +87,9 @@
       }
     }
     .entity-list__pagination {
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
       height: 67px;
     }
   }

src/utils/api.js

@@ -49,15 +49,36 @@ export async function getEntityAppFilterList (params) {
 }
 /* ip类型entity列表 */
 export async function getEntityIpList (params) {
-  return await getData(api.entityIpList, params, true)
+  const request = new Promise(resolve => {
+    get(api.entityIpList, params).then(response => {
+      if (response.code === 200) {
+        resolve(response)
+      }
+    })
+  })
+  return await request
 }
 /* domain类型entity列表 */
 export async function getEntityDomainList (params) {
-  return await getData(api.entityDomainList, params, true)
+  const request = new Promise(resolve => {
+    get(api.entityDomainList, params).then(response => {
+      if (response.code === 200) {
+        resolve(response)
+      }
+    })
+  })
+  return await request
 }
 /* app类型entity列表 */
 export async function getEntityAppList (params) {
-  return await getData(api.entityAppList, params, true)
+  const request = new Promise(resolve => {
+    get(api.entityAppList, params).then(response => {
+      if (response.code === 200) {
+        resolve(response)
+      }
+    })
+  })
+  return await request
 }
 /* 字典 */
 export async function getDictList (params) {

src/utils/constants.js

@@ -50,6 +50,10 @@ export const entityType = {
   app: 'APP'
 }
 
+export const entityTypeMappingKey = {
+  ip: ['country', 'region']
+}
+
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
 export const chartPieTableTopOptions = [{ name: 'Sessions', value: 'sessions' }, { name: 'Packets', value: 'packets' }, { name: 'Bytes', value: 'bytes' }] // table类型图表的TOP-N选项

src/views/entities/EntityExplorer.vue

@@ -27,6 +27,9 @@
       <entity-list
           :list-data="listData"
           :entity-type="filterType"
+          :page-obj="pageObjRight"
+          @pageSize="pageSizeRight"
+          @pageNo="pageNoRight"
       ></entity-list>
     </div>
   </div>
@@ -46,15 +49,18 @@ export default {
       filterData: [],
       pageObjLeftTop: {
         pageNo: 1,
-        pageSize: 10
+        pageSize: 10,
+        total: 0
       },
       pageObjLeftBottom: {
         pageNo: 1,
-        pageSize: 10
+        pageSize: 10,
+        total: 0
       },
       pageObjRight: {
         pageNo: 1,
-        pageSize: 50
+        pageSize: 50,
+        total: 0
       },
       listData: []
     }
@@ -64,30 +70,85 @@ export default {
     EntityList
   },
   methods: {
-    async loadData (filterType, conditionGroup) {
+    async loadData (filterType, key) {
       let data
       switch (filterType) {
         case 'ip': {
-          data = await getEntityIpFilterList({ type: conditionGroup })
+          data = await getEntityIpFilterList({ type: key })
           break
         }
         case 'domain': {
-          data = await getEntityDomainFilterList({ type: conditionGroup })
+          data = await getEntityDomainFilterList({ type: key })
           break
         }
         case 'app': {
-          data = await getEntityAppFilterList({ type: conditionGroup })
+          data = await getEntityAppFilterList({ type: key })
           break
         }
         default: break
       }
       return data
     },
+    handleData (n) {
+      this.listData = []
+      const requests = []
+      const data = []
+      switch (n) {
+        case 'ip': {
+          requests.push(this.loadData(n, 'country'))
+          requests.push(this.loadData(n, 'asn'))
+          data.push({ title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', type: 'country', childrenType: 'region', load })
+          data.push({ title: this.$t('entities.asn'), key: 'asn', type: 'asn', load })
+          getEntityIpList({ ...this.pageObjRight }).then(res => {
+            this.listData = res.data.result
+            this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
+          })
+          break
+        }
+        case 'domain': {
+          requests.push(this.loadData(n, 'categoryGroup'))
+          requests.push(this.loadData(n, 'reputationLevel'))
+          data.push({ title: this.$t('entities.groupAndName'), key: 'categoryGroup', childrenKey: 'categoryName', load })
+          data.push({ title: this.$t('entities.creditLevel'), key: 'reputationLevel', load })
+          getEntityDomainList({ ...this.pageObjRight }).then(res => {
+            this.listData = res.data.result
+            this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
+          })
+          break
+        }
+        case 'app': {
+          requests.push(this.loadData(n, 'appCategory'))
+          requests.push(this.loadData(n, 'appRisk'))
+          data.push({ title: this.$t('entities.categoryAndSub'), key: 'appCategory', childrenKey: 'appSubcategory', load })
+          data.push({ title: this.$t('entities.riskLevel'), key: 'appRisk', load })
+          getEntityAppList({ ...this.pageObjRight }).then(res => {
+            this.listData = res.data.result
+            this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
+          })
+          break
+        }
+        default: break
+      }
+      Promise.all(requests).then(responses => {
+        data.forEach((d, i) => {
+          d.data = responses[i]
+        })
+        this.filterData = data
+      })
+    },
     select (data) {
 
     },
     getEntityData (param) {
 
+    },
+    pageSizeRight (val) {
+      this.pageObjRight.pageSize = val
+      this.handleData(this.filterType)
+    },
+    pageNoRight (val) {
+      this.pageObjRight.pageNo = val
+      this.handleData(this.filterType)
     }
   },
   watch: {
@@ -104,54 +165,15 @@ export default {
         pageNo: 1,
         pageSize: 50
       }
-      this.listData = []
+      this.handleData(n)
-      const requests = []
-      const data = []
-      switch (n) {
-        case 'ip': {
-          requests.push(this.loadData(n, 'country'))
-          requests.push(this.loadData(n, 'asn'))
-          data.push({ title: this.$t('entities.countryOrRegion'), key: 'country', childrenKey: 'region', load })
-          data.push({ title: this.$t('entities.systemNumber'), key: 'asn', load })
-          getEntityIpList({ ...this.pageObjRight }).then(res => {
-            this.listData = res
-          })
-          break
-        }
-        case 'domain': {
-          requests.push(this.loadData(n, 'group'))
-          requests.push(this.loadData(n, 'level'))
-          data.push({ title: this.$t('entities.group'), key: 'group', childrenKey: 'name', load })
-          data.push({ title: this.$t('entities.level'), key: 'level', load })
-          getEntityDomainList({ ...this.pageObjRight }).then(res => {
-            this.listData = res
-          })
-          break
-        }
-        case 'app': {
-          requests.push(this.loadData(n, 'category'))
-          requests.push(this.loadData(n, 'risk'))
-          data.push({ title: this.$t('entities.category'), key: 'category', childrenKey: 'subcategory', load })
-          data.push({ title: this.$t('entities.risk'), key: 'risk', load })
-          getEntityAppList({ ...this.pageObjRight }).then(res => {
-            this.listData = res
-          })
-          break
-        }
-        default: break
-      }
-      Promise.all(requests).then(responses => {
-        data.forEach((d, i) => {
-          d.data = responses[i]
-        })
-        this.filterData = data
-      })
     }
   },
   async mounted () {
     const country = await this.loadData(this.filterType, 'country')
     const asn = await this.loadData(this.filterType, 'asn')
-    this.listData = await getEntityIpList({ ...this.pageObjRight })
+    const res = await getEntityIpList({ ...this.pageObjRight })
+    this.listData = res.data.result
+    this.pageObjRight = { ...this.pageObjRight, total: res.statistics.result_size }
     this.filterData.push({
       title: this.$t('entities.countryOrRegion'),
       key: 'country',
@@ -161,7 +183,7 @@ export default {
       load
     })
     this.filterData.push({
-      title: this.$t('entities.systemNumber'),
+      title: this.$t('entities.asn'),
       key: 'asn',
       data: asn,
       filterType: this.filterType,