diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss
index 2c0583bc..2261476e 100644
--- 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;
diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue
index 77df8dd8..aea772be 100644
--- a/src/components/entities/EntityList.vue
+++ b/src/components/entities/EntityList.vue
@@ -33,7 +33,7 @@
{{d.region || '-'}}
- {{$t('common.asn')}}:
+ {{$t('entities.asn')}}:
{{d.asn || '-'}}
{{$t('common.detail')}}
@@ -71,7 +71,19 @@
-
+
@@ -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
+ }
+ })
+ })
+ }
}
}
diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue
index 92be8f58..75a4bc41 100644
--- 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)
+ }
}
}
diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss
index 30da4e1b..dac0f542 100644
--- 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;
}
}
diff --git a/src/utils/api.js b/src/utils/api.js
index 3bea93df..652bd715 100644
--- 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) {
diff --git a/src/utils/constants.js b/src/utils/constants.js
index ac76dcd3..ef8c31c3 100644
--- 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选项
diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue
index 957ad18d..25e53701 100644
--- a/src/views/entities/EntityExplorer.vue
+++ b/src/views/entities/EntityExplorer.vue
@@ -27,6 +27,9 @@
@@ -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,