CN-263 实体列表分页功能

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;

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);
+  }
 }

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',

src/views/entityExplorer/EntityExplorer.vue

@@ -19,7 +19,7 @@
         @search="search"
     ></explorer-search>
     <!-- 内容区 -->
-    <div class="explorer-container" v-if="showList">
+    <div class="explorer-container" v-if="showList"  style="height: calc(100% - 120px);">
       <entity-filter
         :filter-data="filterData"
         :search-params="searchParams"
@@ -29,6 +29,10 @@
       <entity-list
         :list-data="listData"
         :list-mode="listMode"
+        :pageObj="pageObj"
+        :time-filter="timeFilter"
+        @pageSize="pageSize"
+        @pageNo="pageNo"
       ></entity-list>
     </div>
     <div class="explorer-foot" v-else>
@@ -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 => {
+        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) {

src/views/entityExplorer/entityList/EntityList.vue

@@ -34,17 +34,8 @@
         </div>
       </template>
     </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"
-              layout="total, prev, pager, next"
-      ></el-pagination>-->
+    <div class="entity__pagination" >
+      <pagination ref="pagination"  :table-id="tableId"  :page-obj="pageObj"  @pageNo='current' @pageSize='size'></pagination><!-- :table-id="entityList" -->
     </div>
   </div>
 </template>
@@ -52,6 +43,7 @@
 <script>
 import Card from '@/views/entityExplorer/entityList/Card'
 import Row from '@/views/entityExplorer/entityList/Row'
+import pagination from '@/components/common/Pagination'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import * as echarts from 'echarts'
@@ -72,7 +64,8 @@ export default {
   },
   components: {
     'entity-card': Card,
-    'entity-row': Row
+    'entity-row': Row,
+    pagination: pagination
   },
   data () {
     return {
@@ -80,7 +73,8 @@ export default {
       typeName: '',
       entityList: [],
       isCollapse: true,
-      collapseIndex: 0
+      collapseIndex: 0,
+      tableId: 'entityList'
     }
   },
   methods: {