From 08ee1968e930723afc70eb6db3e0937614358831 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Thu, 9 Jun 2022 21:55:28 +0800
Subject: [PATCH] =?UTF-8?q?CN-588=20=E5=AE=9E=E4=BD=93=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E3=80=81detection=E5=88=97=E8=A1=A8=E9=A1=B5=E5=8F=96=E6=B6=88?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E9=99=90=E5=88=B6=EF=BC=8C=E5=8E=BB=E6=8E=89?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detection-list/detection-list.scss        |  4 +-
 .../views/entityExplorer/entity-explorer.scss |  2 +-
 .../entityList/entity-list.scss               |  4 +-
 src/components/layout/Container.vue           | 12 ++++-
 src/utils/constants.js                        |  6 +++
 src/views/detections/DetectionList.vue        | 13 +++++
 src/views/detections/Index.vue                | 26 +++++-----
 src/views/entityExplorer/EntityExplorer.vue   | 14 +----
 .../entityExplorer/entityList/EntityList.vue  | 51 ++++++++++++++++++-
 9 files changed, 98 insertions(+), 34 deletions(-)

diff --git a/src/assets/css/components/views/detections/detection-list/detection-list.scss b/src/assets/css/components/views/detections/detection-list/detection-list.scss
index 9e54aea5..1c17487f 100644
--- a/src/assets/css/components/views/detections/detection-list/detection-list.scss
+++ b/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;
diff --git a/src/assets/css/components/views/entityExplorer/entity-explorer.scss b/src/assets/css/components/views/entityExplorer/entity-explorer.scss
index 1a4cc162..a26e30c5 100644
--- a/src/assets/css/components/views/entityExplorer/entity-explorer.scss
+++ b/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;
   }
diff --git a/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss b/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
index 2b0f3d42..98c2a0c0 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/entity-list.scss
@@ -22,8 +22,8 @@
     .entity-list--list {
       display: flex;
       flex-direction: column;
-      height: 100%;
-      overflow: auto;
+      /*height: 100%;
+      overflow: visible;/*overflow: auto;*/
 
       .cn-entity__shadow {
         position: fixed;
diff --git a/src/components/layout/Container.vue b/src/components/layout/Container.vue
index 0382eaad..912b9267 100644
--- a/src/components/layout/Container.vue
+++ b/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 ""
+      }
     }
   }
 }
diff --git a/src/utils/constants.js b/src/utils/constants.js
index 05c75e2c..9c48d0ff 100644
--- a/src/utils/constants.js
+++ b/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',
diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue
index 41600999..72f24040 100644
--- a/src/views/detections/DetectionList.vue
+++ b/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: {
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index 4a616eab..d844c9c7 100644
--- a/src/views/detections/Index.vue
+++ b/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>
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index d4acddfb..cec63a3a 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/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>
diff --git a/src/views/entityExplorer/entityList/EntityList.vue b/src/views/entityExplorer/entityList/EntityList.vue
index db98742e..23a5f050 100644
--- a/src/views/entityExplorer/entityList/EntityList.vue
+++ b/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,