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,