diff --git a/src/assets/css/components/views/entityExplorer/entityExplorer.scss b/src/assets/css/components/views/entityExplorer/entityExplorer.scss index dc0bff66..9f9b7280 100644 --- a/src/assets/css/components/views/entityExplorer/entityExplorer.scss +++ b/src/assets/css/components/views/entityExplorer/entityExplorer.scss @@ -34,8 +34,8 @@ } .explorer-container { display: flex; - height: 100%; overflow: hidden auto; + height: calc(100% - 120px); } .explorer-foot { display: flex; diff --git a/src/assets/css/components/views/entityExplorer/entityList/entityList.scss b/src/assets/css/components/views/entityExplorer/entityList/entityList.scss index 5e2c2a42..8b5eda71 100644 --- a/src/assets/css/components/views/entityExplorer/entityList/entityList.scss +++ b/src/assets/css/components/views/entityExplorer/entityList/entityList.scss @@ -5,6 +5,7 @@ .entity-list__content { height: 100%; width: 100%; + overflow: inherit; .entity-list--block { display: flex; @@ -13,12 +14,14 @@ justify-content: flex-start; border-radius: 2px; width: calc(100% - 10px); - overflow: hidden auto; + height: calc(100% - 40px); + overflow: inherit; } .entity-list--list { display: flex; flex-direction: column; - overflow: hidden auto; + height: calc(100% - 40px); + overflow: inherit; .cn-entity__shadow { position: fixed; @@ -30,4 +33,12 @@ } } } + + + .entity__pagination{ + position: absolute; + bottom: 9px; + height: 40px; + width: calc(100% - 538px); + } } diff --git a/src/utils/api.js b/src/utils/api.js index 6d7836ee..7c387495 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -22,6 +22,7 @@ export const api = { panel: '/visual/panel', chart: '/visual/chart', entityList: '/interface/entity/list/basic', + entityListTotal: '/interface/entity/list/total', entityCount: '/interface/entity/total', entityFilter: '/interface/entity/filter/count', entityFilterTop: '/interface/entity/filter/top', diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue index 7df70d85..bec25c86 100644 --- a/src/views/entityExplorer/EntityExplorer.vue +++ b/src/views/entityExplorer/EntityExplorer.vue @@ -19,7 +19,7 @@ @search="search" > -
+
@@ -102,11 +106,11 @@ import DateTimeRange from '@/components/common/TimeRange/DateTimeRange' import TimeRefresh from '@/components/common/TimeRange/TimeRefresh' import EntityFilter from '@/views/entityExplorer/EntityFilter' import EntityList from '@/views/entityExplorer/entityList/EntityList' -import { entityType, entityFilterType } from '@/utils/constants' +import { entityType, entityFilterType, defaultPageSize } from '@/utils/constants' import { get } from '@/utils/http' import { api } from '@/utils/api' -import {getNowTime} from "@/utils/date-util"; -import {ref} from "vue"; +import { getNowTime } from '@/utils/date-util' +import { ref } from 'vue' export default { name: 'entity-explorer', @@ -138,8 +142,10 @@ export default { showFilter: ['ip', 'app', 'domain'], // ip,domain,app pageObj: { pageNo: 1, - pageSize: 20 + pageSize: defaultPageSize, + total: 0 }, + timeFilter: {}, filterData: [ { type: 'ip', @@ -234,7 +240,7 @@ export default { } ], listData: [] - /*listData: JSON.parse(`[ + /* listData: JSON.parse(`[ { "entityType": "app", "appName": "360cn", @@ -395,7 +401,7 @@ export default { "appRisk": "1", "appSubcategory": "infrastructure" } - ]`)*/ + ]`) */ } }, methods: { @@ -425,13 +431,23 @@ export default { this.queryFilter({ entityType: 'app', q: this.handleQ(this.searchParams), ...this.timeFilter }) this.queryFilter({ entityType: 'domain', q: this.handleQ(this.searchParams), ...this.timeFilter }) this.queryList({ q: this.handleQ(this.searchParams), ...this.timeFilter, ...this.pageObj }) + this.queryListTotal({ q: this.handleQ(this.searchParams), ...this.timeFilter }) } else { this.queryFilter({ entityType: 'ip', ...this.timeFilter }) this.queryFilter({ entityType: 'app', ...this.timeFilter }) this.queryFilter({ entityType: 'domain', ...this.timeFilter }) this.queryList({ ...this.timeFilter, ...this.pageObj }) + this.queryListTotal({ ...this.timeFilter }) } }, + pageSize (val) { + this.pageObj.pageSize = val + this.search() + }, + pageNo (val) { + this.pageObj.pageNo = val + this.search() + }, /* filter组件内点击后查询 */ filter (name, topData) { const params = {} @@ -480,7 +496,22 @@ export default { endTime: parseInt(params.endTime / 1000) } get(api.entityList, queryParams).then(response => { - this.listData = response.data.result + if (response.code === 200) { + this.listData = response.data.result + } + }) + }, + + queryListTotal (params) { + const queryParams = { + ...params, + startTime: parseInt(params.startTime / 1000), + endTime: parseInt(params.endTime / 1000) + } + get(api.entityListTotal, queryParams).then(response => { + if (response.code === 200) { + this.pageObj.total = response.data.result + } }) }, handleQ (params) { diff --git a/src/views/entityExplorer/entityList/EntityList.vue b/src/views/entityExplorer/entityList/EntityList.vue index 34c27898..44df8348 100644 --- a/src/views/entityExplorer/entityList/EntityList.vue +++ b/src/views/entityExplorer/entityList/EntityList.vue @@ -34,17 +34,8 @@
-
- +
+
@@ -52,6 +43,7 @@