From de12e1ce6b04dc97b18a1747a7e3550ac34d1a32 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Wed, 11 Aug 2021 22:14:23 +0800 Subject: [PATCH] =?UTF-8?q?CN-64=20feat:=20=E6=90=9C=E7=B4=A2=E6=A1=86?= =?UTF-8?q?=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Login.vue | 7 +- src/components/charts/ChartMap.vue | 7 +- src/components/charts/ChartTable.vue | 5 +- src/components/charts/EchartsFrame.vue | 7 +- src/components/entities/LeftFilter.vue | 72 ++-- src/utils/api.js | 84 ++-- src/utils/constants.js | 18 +- src/views/charts/Chart.vue | 86 ++-- src/views/entities/EntityExplorer.vue | 552 +++++++++++++++---------- 9 files changed, 497 insertions(+), 341 deletions(-) diff --git a/src/Login.vue b/src/Login.vue index b1887222..30c4f4a4 100644 --- a/src/Login.vue +++ b/src/Login.vue @@ -44,13 +44,16 @@ export default { data () { return { loading: false, - username: 'admin', - pin: 'Nezha2021' + username: '', + pin: '' } }, methods: { ...mapActions(['loginSuccess']), login () { + if (!this.username || !this.pin) { + return + } if (!this.blockOperation.query) { this.blockOperation.query = true } else { diff --git a/src/components/charts/ChartMap.vue b/src/components/charts/ChartMap.vue index e7c9967c..d9636488 100644 --- a/src/components/charts/ChartMap.vue +++ b/src/components/charts/ChartMap.vue @@ -8,7 +8,7 @@ -
+
@@ -20,7 +20,10 @@ diff --git a/src/components/charts/ChartTable.vue b/src/components/charts/ChartTable.vue index ec9b9a38..5fe4a279 100644 --- a/src/components/charts/ChartTable.vue +++ b/src/components/charts/ChartTable.vue @@ -8,7 +8,7 @@
-
+
-
+
-
+
@@ -23,7 +23,8 @@ export default { name: 'EchartsFrame', props: { layout: Array, - chartInfo: Object + chartInfo: Object, + loading: Boolean }, setup (props) { return { diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue index 5e5a934d..72245331 100644 --- a/src/components/entities/LeftFilter.vue +++ b/src/components/entities/LeftFilter.vue @@ -4,32 +4,54 @@
-
{{$t('overall.showMore')}}
+
{{$t('overall.showMore')}}
+ + + + + + +
{{$t('overall.showMore')}}
@@ -40,7 +62,8 @@ export default { name: 'LeftFilter', props: { - filterData: Array + topFilterData: Object, + bottomFilterData: Object }, data () { return { @@ -50,8 +73,12 @@ export default { } }, methods: { + async loadLevel2 (node, resolve) { + resolve(await this.$parent.loadLevel2FilterData(node, this.topFilterData.column)) + }, nodeClick (data, node, component, index) { const currentData = index === 0 ? this.currentDataTop : this.currentDataBottom + const column = index === 0 ? this.topFilterData.column : this.bottomFilterData.column if (this.dataEqual(currentData, data)) { node.isCurrent = false } @@ -60,15 +87,14 @@ export default { } else { this.currentDataBottom = this.$_.cloneDeep(data) } - this.$emit('select', data, node, index) + this.$emit('select', data, node, index, column) }, - showMore (key, hasnotMore) { - if (!hasnotMore) { - this.$emit('showMore', key) + showMore (filterData) { + if (!filterData.hasnotMore) { + this.$emit('showMore', filterData.column) } }, loadFilter (node, resolve, f) { - this.$emit('loadFilter', node, resolve, f.filterType, f.childrenKey, f.key) }, dataEqual (obj1, obj2) { if (!obj1 || !obj2) { @@ -82,15 +108,6 @@ export default { }) return equal } - }, - watch: { - filterData: { - deep: true, - immediate: true, - handler (n) { - this.active = ['0', '1'] - } - } } } @@ -155,6 +172,7 @@ export default { } .el-tree-node__content { height: 30px; + padding-right: 10px; } } .filter-item { diff --git a/src/utils/api.js b/src/utils/api.js index b513b101..b0d38979 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -5,7 +5,7 @@ */ import { get, post } from '@/utils/http' import { sortByOrderNum } from '@/permission' -import {storageKey} from "@/utils/constants"; +import { storageKey } from '@/utils/constants' export const api = { // 系统相关 @@ -15,12 +15,9 @@ export const api = { // 业务 panel: '/visual/panel', chart: '/visual/chart', - entityIpFilter: '/interface/entity/ip/filter', - entityDomainFilter: '/interface/entity/domain/filter', - entityAppFilter: '/interface/entity/app/filter', - entityIpList: '/interface/entity/ip/list', - entityDomainList: '/interface/entity/domain/list', - entityAppList: '/interface/entity/app/list' + entityList: '/interface/entity/list', + entityCount: '/interface/entity/total', + entityFilter: '/interface/entity/filter' } /* panel */ export async function getPanelList (params) { @@ -36,50 +33,17 @@ export async function getChartList (params) { export async function getChart (id) { return await getData(`${api.chart}/${id}`) } +/* entity列表 */ +export async function getEntityList (params) { + return await getData(api.entityList, params, true) +} +/* entity总数 */ +export async function getEntityCount (params) { + return await getData(api.entityCount, params) +} /* ip类型entity过滤器数据 */ -export async function getEntityIpFilterList (params) { - return await getData(api.entityIpFilter, params, true) -} -/* domain类型entity过滤器数据 */ -export async function getEntityDomainFilterList (params) { - return await getData(api.entityDomainFilter, params, true) -} -/* app类型entity过滤器数据 */ -export async function getEntityAppFilterList (params) { - return await getData(api.entityAppFilter, params, true) -} -/* ip类型entity列表 */ -export async function getEntityIpList (params) { - 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) { - 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) { - const request = new Promise(resolve => { - get(api.entityAppList, params).then(response => { - if (response.code === 200) { - resolve(response) - } - }) - }) - return await request +export async function getEntityFilter (params) { + return await getData(api.entityFilter, params, true) } /* 字典 */ export async function getDictList (params) { @@ -87,12 +51,20 @@ export async function getDictList (params) { } export async function getData (url, params = {}, isQueryList) { - const request = new Promise(resolve => { - get(url, params).then(response => { - if (response.code === 200) { - resolve(isQueryList ? response.data.list || response.data.result : response.data || response.data.result) - } - }) + const request = new Promise((resolve, reject) => { + try { + get(url, params).then(response => { + if (response.code === 200) { + resolve(isQueryList ? response.data.list || response.data.result : response.data.result || response.data) + } else { + reject(response) + } + }) + } catch (e) { + reject(e) + } + }).catch(response => { + console.error(response) }) return await request } diff --git a/src/utils/constants.js b/src/utils/constants.js index e07682e4..59944d32 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -54,8 +54,22 @@ export const entityType = { app: 'APP' } -export const entityTypeMappingKey = { - ip: ['country', 'region'] +export const entityFilterType = { + ip: { + country: 'locate_country', + region: 'locate_region', + asn: 'asn' + }, + domain: { + categoryGroup: 'category_group', + categoryName: 'category_name', + reputationLevel: 'reputation_level' + }, + app: { + appCategory: 'app_category', + appSubcategory: 'app_subcategory', + appRisk: 'app_risk' + } } export const unitTypes = { diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index 7562c0a4..19201998 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -28,6 +28,7 @@