CN-588 实体列表、detection列表页取消高度限制，去掉滚动条

src/assets/css/components/views/detections/detection-list/detection-list.scss

@@ -1,6 +1,6 @@
 .detection-list {
   width: 100%;
-  overflow: auto;
+  /*overflow: auto;*/
   flex: 1;
   position: relative;
 
@@ -43,7 +43,7 @@
       .cn-detection__shadow {
         position: fixed;
         height: 100vh;
-        width: 100vw;
+        width:100vw;
         left: 0;
         top: 0;
         z-index: 1;

src/assets/css/components/views/entityExplorer/entity-explorer.scss

@@ -48,7 +48,7 @@
   }
   .explorer-container {
     display: flex;
-    overflow: hidden;
+    overflow: visible; /*overflow: hidden;*/
     height: calc(100% - 120px);
     position: relative;
   }

src/assets/css/components/views/entityExplorer/entityList/entity-list.scss

@@ -22,8 +22,8 @@
     .entity-list--list {
       display: flex;
       flex-direction: column;
-      height: 100%;
+      /*height: 100%;
-      overflow: auto;
+      overflow: visible;/*overflow: auto;*/
 
       .cn-entity__shadow {
         position: fixed;

src/components/layout/Container.vue

@@ -1,10 +1,12 @@
 <template>
-  <div class="cn-container">
+  <div class="cn-container" :style="entityDetectionStyle" id="cnContainer">
     <router-view :key="routerKey"/>
   </div>
 </template>
 
 <script>
+import { listScrollPath } from '@/utils/constants'
+
 export default {
   name: 'Container',
   data () {
@@ -14,6 +16,14 @@ export default {
   computed: {
     routerKey () {
       return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    },
+    entityDetectionStyle () {
+      let route = this.$route.name !== undefined ? this.$route.name : this.$route
+      if(listScrollPath.indexOf(route.path)>-1){
+        return "overflow:auto;"
+      }else {
+        return ""
+      }
     }
   }
 }

src/utils/constants.js

@@ -145,6 +145,12 @@ export const detectionPageType = {
   performanceEvent: 'performanceEvent'
 }
 
+export const listScrollPath = [
+  "/entityExplorer",
+  "/detection/performanceEvent",
+  "/detection/securityEvent"
+]
+
 export const dnsServerRole = {
   RTDNS: 'RTDNS',
   TLDNS: 'TLDNS',

src/views/detections/DetectionList.vue

@@ -49,6 +49,13 @@ export default {
       noData: false
     }
   },
+  mounted () {
+    // 监听⿏标滚动事件
+    window.addEventListener('mousewheel', this.handleScroll)
+  },
+  unmounted () {
+    window.removeEventListener('mousewheel', this.handleScroll)
+  },
   methods: {
     switchCollapse (isCollapse, index) {
       this.isCollapse = isCollapse
@@ -60,6 +67,12 @@ export default {
     collapse () {
       this.isCollapse = true
       this.$refs[`detectionRow${this.collapseIndex}`].collapse()
+    },
+    handleScroll (e) {
+      if(e.target.className==="cn-detection__shadow"){
+        let container = document.getElementById("cnContainer")
+        container.scrollTop += e.deltaY/2
+      }
     }
   },
   watch: {

src/views/detections/Index.vue

@@ -23,7 +23,7 @@
         <div class="detection__event-severity-bar"  :id="`eventSeverityTrendBar${pageType}`">
         </div>
       </template>
-      <div style="display: flex; flex-grow: 1; overflow: hidden;">
+      <div style="display: flex; flex-grow: 1; height: 100%;">
         <detection-filter
             :filter-data="filterData[pageType]"
             :q="q"
@@ -79,20 +79,20 @@
               @pageNo="pageNo"
               :loading="listLoading"
           ></detection-list>
+          <div class="entity__pagination" >
+            <Pagination
+                    ref="pagination"
+                    :page-obj="pageObj"
+                    @pageNo='pageNo'
+                    @pageSize='pageSize'
+                    @size-change="pageSize"
+                    @prev-click="prev"
+                    @next-click="next"
+            >
+            </Pagination>
+          </div>
         </div>
       </div>
-      <div class="entity__pagination">
-        <Pagination
-            ref="pagination"
-            :page-obj="pageObj"
-            @pageNo='pageNo'
-            @pageSize='pageSize'
-            @size-change="pageSize"
-            @prev-click="prev"
-            @next-click="next"
-        >
-        </Pagination>
-      </div>
     </div>
   </div>
 </template>

src/views/entityExplorer/EntityExplorer.vue

@@ -20,7 +20,7 @@
     ></explorer-search>
     <!-- 内容区 -->
     <div class="explorer-container" v-if="showList"  style="height: calc(100% - 20px); flex-direction: column">
-      <div style="display: flex; height: 100%;">
+      <div style="display: flex; height: auto;">
         <entity-filter
             :filter-data="filterData"
             :loading-left="loadingLeft"
@@ -38,18 +38,6 @@
             :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>

src/views/entityExplorer/entityList/EntityList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="entity-list" id="entityList">
     <loading :loading="loading"></loading>
-    <div class="entity-list__content">
+    <div class="entity-list__content" style="height:auto;">
       <!-- 列表式 -->
       <template v-if="listMode === 'list'">
         <div class="entity-list--list">
@@ -33,6 +33,20 @@
           ></entity-card>
         </div>
       </template>
+
+      <div class="entity__pagination" style="position: relative; 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>
 </template>
@@ -41,6 +55,7 @@
 import Card from '@/views/entityExplorer/entityList/Card'
 import Row from '@/views/entityExplorer/entityList/Row'
 import Loading from '@/components/common/Loading'
+import Pagination from '@/components/common/Pagination'
 
 export default {
   name: 'EntityList',
@@ -55,7 +70,8 @@ export default {
   components: {
     'entity-card': Card,
     'entity-row': Row,
-    Loading
+    Loading,
+    Pagination
   },
   data () {
     return {
@@ -80,8 +96,39 @@ export default {
     collapse () {
       this.isCollapse = true
       this.$refs[`entityRow${this.collapseIndex}`].collapse()
+    },
+    pageNo (val) {
+      this.$emit('pageNo', val)
+    },
+    pageSize (val) {
+      this.$emit('pageSize', val)
+    },
+    // 点击上一页箭头
+    prev () {
+      this.$emit('prev')
+    },
+    // 点击下一页箭头
+    next () {
+      this.$emit('next')
+    },
+    // currentPage 改变时会触发
+    current (val) {
+      this.$emit('next', val)
+    },
+    handleScrollEntity (e) {
+      if(e.target.className==="cn-entity__shadow"){
+        let container = document.getElementById("cnContainer")
+        container.scrollTop += e.deltaY/2
+      }
     }
   },
+  mounted () {
+    // 监听⿏标滚动事件
+    window.addEventListener('mousewheel', this.handleScrollEntity)
+  },
+  unmounted () {
+    window.removeEventListener('mousewheel', this.handleScrollEntity)
+  },
   watch: {
     listData: {
       deep: true,