feat: entities列表

2021-07-09 17:24:22 +08:00
parent 8e18660edc
commit abf887b7fa
7 changed files with 157 additions and 57 deletions
--- a/src/components/charts/panel.scss
+++ b/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;
--- a/src/components/entities/EntityList.vue
+++ b/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>
--- a/src/components/entities/LeftFilter.vue
+++ b/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>
--- a/src/components/entities/entities.scss
+++ b/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;
    }
  }
--- a/src/utils/api.js
+++ b/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) {
--- a/src/utils/constants.js
+++ b/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选项
--- a/src/views/entities/EntityExplorer.vue
+++ b/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 = []
-      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
-      })
+      this.handleData(n)
    }
  },
  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,