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

2022-06-09 21:55:28 +08:00
parent 3335345165
commit 08ee1968e9
9 changed files with 98 additions and 34 deletions
--- 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;
--- 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;
  }
--- 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;
--- 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 ""
+      }
    }
  }
 }
--- 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',
--- 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: {
--- 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,9 +79,7 @@
              @pageNo="pageNo"
              :loading="listLoading"
          ></detection-list>
-        </div>
-      </div>
-      <div class="entity__pagination">
+          <div class="entity__pagination" >
            <Pagination
                    ref="pagination"
                    :page-obj="pageObj"
@@ -95,6 +93,8 @@
          </div>
        </div>
      </div>
+    </div>
+  </div>
 </template>

 <script>
--- 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>
--- 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,7 +96,38 @@ 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: {