CN-240 feat: 实体列表、详情细节完善

src/assets/css/components/views/entityExplorer/entityExplorer.scss

@@ -50,6 +50,7 @@
     display: flex;
     overflow: hidden auto;
     height: calc(100% - 120px);
+    position: relative;
   }
   .explorer-foot {
     display: flex;

src/assets/css/components/views/entityExplorer/entityList/entityList.scss

@@ -1,5 +1,6 @@
 .entity-list {
   width: calc(100% - 290px);
+  height: calc(100% - 42px);
   flex: 1;
   position: relative;
 
@@ -21,8 +22,8 @@
     .entity-list--list {
       display: flex;
       flex-direction: column;
-      height: calc(100% - 40px);
-      overflow: inherit;
+      height: 100%;
+      overflow: auto;
 
       .cn-entity__shadow {
         position: fixed;

src/views/entityExplorer/EntityExplorer.vue

@@ -19,22 +19,36 @@
         @search="search"
     ></explorer-search>
     <!-- 内容区 -->
-    <div class="explorer-container" v-if="showList"  style="height: calc(100% - 120px);">
-      <entity-filter
-        :filter-data="filterData"
-        :search-params="searchParams"
-        :time-filter="timeFilter"
-        @filter="filter"
-      ></entity-filter>
-      <entity-list
-        :list-data="listData"
-        :list-mode="listMode"
-        :pageObj="pageObj"
-        :time-filter="timeFilter"
-        @pageSize="pageSize"
-        @pageNo="pageNo"
-        :loading="listLoading"
-      ></entity-list>
+    <div class="explorer-container" v-if="showList"  style="height: calc(100% - 20px); flex-direction: column">
+      <div style="display: flex; height: 100%;">
+        <entity-filter
+            :filter-data="filterData"
+            :search-params="searchParams"
+            :time-filter="timeFilter"
+            @filter="filter"
+        ></entity-filter>
+        <entity-list
+            :list-data="listData"
+            :list-mode="listMode"
+            :pageObj="pageObj"
+            :time-filter="timeFilter"
+            @pageSize="pageSize"
+            @pageNo="pageNo"
+            :loading="listLoading"
+        ></entity-list>
+      </div>
+      <div class="entity__pagination" style="position: absolute; bottom: 0; width: 100%;">
+        <pagination
+            ref="pagination"
+            :page-obj="pageObj"
+            @pageNo='pageNo'
+            @pageSize='pageSize'
+            @size-change="pageSize"
+            @prev-click="prev"
+            @next-click="next"
+        >
+        </pagination>
+      </div>
     </div>
     <div class="explorer-foot" v-else>
       <div>
@@ -112,6 +126,7 @@ import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
+import pagination from '@/components/common/Pagination'
 
 export default {
   name: 'entity-explorer',
@@ -120,7 +135,8 @@ export default {
     DateTimeRange,
     TimeRefresh,
     EntityFilter,
-    EntityList
+    EntityList,
+    pagination: pagination
   },
   data () {
     return {
@@ -449,6 +465,25 @@ export default {
       this.pageObj.pageNo = val
       this.search()
     },
+    // 点击上一页箭头
+    prev () {
+      this.scrollbarToTop()
+    },
+    // 点击下一页箭头
+    next () {
+      this.scrollbarToTop()
+    },
+    // currentPage 改变时会触发
+    current (val) {
+      this.$emit('pageNo', val)
+      this.scrollbarToTop()
+    },
+    scrollbarToTop () {
+      this.$nextTick(() => {
+        const wraps = document.querySelector('#entityList')
+        wraps.scrollTop = 0
+      })
+    },
     /* filter组件内点击后查询 */
     filter (name, topData) {
       const params = {}

src/views/entityExplorer/entityList/EntityList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="entity-list">
+  <div class="entity-list" id="entityList">
     <div class="entity__loading" v-show="loading">
       <i class="el-icon-loading"></i>
     </div>
@@ -34,9 +34,6 @@
         </div>
       </template>
     </div>
-    <div class="entity__pagination" >
-      <pagination ref="pagination"  :table-id="tableId"  :page-obj="pageObj"  @pageNo='current' @pageSize='size'></pagination><!-- :table-id="entityList" -->
-    </div>
   </div>
 </template>
 
@@ -78,28 +75,6 @@ export default {
     }
   },
   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.scrollTop = 0
-      })
-    },
     entityDetail (params) {
       this.$emit('showDetail', { ...params, icon: this.iconClass })
     },

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -156,6 +156,7 @@ export default {
           unitType: 'number',
           valueColumn: 'sessions'
         },
+        id: props.entity.ipAddr,
         type: 2
       },
       entityCopy,