From 6bd9e46fad05cb80b4493ca648d27c27d592be96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <chenjinsong@zdjizhi.com>
Date: Mon, 30 Mar 2020 14:14:09 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BA=8C=E7=BA=A7?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=8B=96=E5=8A=A8=E6=95=88=E6=9E=9C=E3=80=81?=
 =?UTF-8?q?=E6=8F=90=E5=8F=96=E5=85=AC=E5=85=B1=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/assets/stylus/main.scss     |   6 +-
 .../components/common/bottomBox/bottomBox.vue |   2 +-
 .../src/components/page/alert/config.vue      | 148 ++---------------
 .../src/components/page/asset/asset.vue       | 149 ++---------------
 .../src/components/page/config/account.vue    | 146 ++---------------
 .../src/components/page/config/dc.vue         | 152 ++----------------
 .../src/components/page/config/promServer.vue | 147 ++---------------
 .../src/components/page/project/project.vue   | 147 ++---------------
 nezha-fronted/src/main.js                     |   3 +-
 nezha-fronted/src/tools.js                    | 144 +++++++++++++++++
 10 files changed, 233 insertions(+), 811 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 022fd75d0..81ad1155b 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -588,18 +588,18 @@ li{
 }
 .main-list {
   height: 100%;
-  transition: .4s height, .4s transform;
   position: relative;
 }
 .main-list.main-list-with-sub {
-  transform: translate3d(0,0,0);
   height: calc(50% - 4px);
 }
 .sub-list {
   height: calc(50% - 4px);
-  transition: .4s height;
   position: relative;
 }
+.main-and-sub-transition {
+  transition: .4s height;
+}
 .sub-list-resize {
   margin: 0 -6px;
   border-top: 1px solid #aaa;
diff --git a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
index 315d5263c..575f7c77c 100644
--- a/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
+++ b/nezha-fronted/src/components/common/bottomBox/bottomBox.vue
@@ -2,7 +2,7 @@
   <span>
     <!-- 副列表 -->
     <div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
-    <div class="sub-list" v-if="showSubList">
+    <div class="sub-list sub-list-transition" v-if="showSubList">
       <!--窗口大小控制-->
       <div class="sub-list-window-control">
         <!--退出全屏-->
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 93e442416..efd9ae5ae 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="content-right">
-      <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
             <div class="top-tool-search float-right">
@@ -113,9 +113,11 @@
 
 </template>
 <script>
+  var vm;
   export default {
     name: "alert-config",
     data() {
+      vm = this;
       return {
         /*二级列表相关*/
         ruleDetail: {},
@@ -275,73 +277,6 @@
         this.showSubList = true;
         this.targetTab = 'alertMessage';
       },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
-        let subListDom = document.querySelector(".sub-list"); //副列表
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //得到点击时俩dom的初始高度：
-        let mainInitialHeight = mainListDom.offsetHeight;
-        let subInitialHeight = subListDom.offsetHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
-
-        let _this = this;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
-
-          //往上方拖动：
-          if (e.clientY < mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
-          }
-
-          // 主、副列表最小高度限制为15px
-          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
-            mainListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(mainListDom.style.height) <= 15){
-            mainListDom.style.height = 15+'px';
-          }
-          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
-            subListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(subListDom.style.height) <= 15){
-            subListDom.style.height = 15+'px';
-          }
-          //当主副列表可视区域小于一定值时，不展示内容
-          if(parseInt(mainListDom.style.height) <= 100){
-            if (_this.mainResizeShow) {
-              _this.mainResizeShow = false;
-            }
-          } else {
-            if (!_this.mainResizeShow) {
-              _this.mainResizeShow = true;
-            }
-          }
-          if(parseInt(subListDom.offsetHeight) <= 100){
-            if (_this.subResizeShow) {
-              _this.subResizeShow = false;
-            }
-          } else {
-            if (!_this.subResizeShow) {
-              _this.subResizeShow = true;
-            }
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
-      },
       elementsetShow(s, e) {
         this.showElementSet = true;
         this.$nextTick(() => {
@@ -483,34 +418,17 @@
         }
         this.getTableData();
       },
-      exitFullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //主列表
-        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
-
-        //副列表
-        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
-        setTimeout(() => {
-          this.isFullScreen = false;
-          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
-            this.mainResizeShow = true;
-          }
-          if (document.querySelector(".sub-list").offsetHeight >= 100) {
-            this.subResizeShow = true;
-          }
-        }, 210);
-      },
+      // 全屏
       fullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        this.isFullScreen = true;
-        //主列表
-        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
-        document.querySelector(".main-list-with-sub").style.height = '0';
-        this.mainResizeShow = false;
-        //副列表
-        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+        this.$bottomBoxWindow.fullScreen(vm);
+      },
+      // 退出全屏
+      exitFullScreen() {
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },
+      // 鼠标拖动二级列表
+      listResize(e) {
+        this.$bottomBoxWindow.listResize(vm, e);
       },
       viewAlertType: function (type, typeObj) {
         this.closeViews();
@@ -582,45 +500,7 @@
     },
     watch: {
       showSubList(n) {
-        this.inTransform = n;
-        if (!n) {
-          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
-          this.isFullScreen = false;
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          let paginationBottom = document.querySelector(".pagination-bottom");
-          paginationTop.classList.remove("display-none");
-          if (paginationTop.classList.contains("pagination-top-show")) {
-            paginationTop.classList.remove("pagination-top-show");
-          }
-          if (!paginationTop.classList.contains("pagination-top-hide")) {
-            paginationTop.classList.add("pagination-top-hide");
-          }
-          setTimeout(() => {
-            paginationTop.classList.add("display-none");
-            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
-          }, 210);
-
-          // 主列表恢复全屏
-          this.mainResizeShow = this.subResizeShow = true;
-          document.querySelector('.main-list').style.height = "";
-          //副列表高度清空
-          document.querySelector(".sub-list").style.height = '';
-        } else {
-          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
-          paginationTop.classList.remove("display-none");
-          setTimeout(() => {
-            if (paginationTop.classList.contains("pagination-top-hide")) {
-              paginationTop.classList.remove("pagination-top-hide");
-            }
-            if (!paginationTop.classList.contains("pagination-top-show")) {
-              paginationTop.classList.add("pagination-top-show");
-            }
-          }, 210);
-        }
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
       alertRuleForMessage: {
         deep: true,
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 3f6d60283..e0e314794 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -32,7 +32,7 @@
     </div>
 
     <div class="content-right">
-      <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
             <div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input></div>
@@ -188,7 +188,10 @@
         <button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
       </div>
       <bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab="targetTab" :detail="assetDetail"
-                  @closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
+                  @closeSubList="showSubList = false"
+                  @fullScreen="fullScreen"
+                  @exitFullScreen="exitFullScreen"
+                  @listResize="listResize" ></bottom-box>
     </div>
 
     <asset-box :edit-unit-show='editUnitShow' @refreshData="flushData" @sendStateData="tabControl"
@@ -210,7 +213,7 @@
   import bus from "../../../libs/bus";
   import exportXLSX from "../../common/exportXLSX";
   import endpointStatusPop from "./endpointStatusPop";
-
+  var vm;
   export default {
     name: "asset",
     components:{
@@ -218,6 +221,7 @@
       'endpoint-status-pop':endpointStatusPop,
     },
     data() {
+      vm = this;
       return {
         /*二级页面相关*/
         assetDetail: [], //asset详情
@@ -448,45 +452,7 @@
         }, 50);
       },
       showSubList(n) {
-        this.inTransform = n;
-        if (!n) {
-          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
-          this.isFullScreen = false;
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          let paginationBottom = document.querySelector(".pagination-bottom");
-          paginationTop.classList.remove("display-none");
-          if (paginationTop.classList.contains("pagination-top-show")) {
-            paginationTop.classList.remove("pagination-top-show");
-          }
-          if (!paginationTop.classList.contains("pagination-top-hide")) {
-            paginationTop.classList.add("pagination-top-hide");
-          }
-          setTimeout(() => {
-            paginationTop.classList.add("display-none");
-            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
-          }, 210);
-
-          // 主列表恢复全屏
-          this.mainResizeShow = this.subResizeShow = true;
-          document.querySelector('.main-list').style.height = "";
-          //副列表高度清空
-          document.querySelector(".sub-list").style.height = '';
-        } else {
-          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
-          paginationTop.classList.remove("display-none");
-          setTimeout(() => {
-            if (paginationTop.classList.contains("pagination-top-hide")) {
-              paginationTop.classList.remove("pagination-top-hide");
-            }
-            if (!paginationTop.classList.contains("pagination-top-show")) {
-              paginationTop.classList.add("pagination-top-show");
-            }
-          }, 210);
-        }
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
       alertMsgAsset: {
         deep: true,
@@ -496,101 +462,14 @@
       },
     },
     methods: {
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
-        let subListDom = document.querySelector(".sub-list"); //副列表
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //得到点击时俩dom的初始高度：
-        let mainInitialHeight = mainListDom.offsetHeight;
-        let subInitialHeight = subListDom.offsetHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
-
-        let _this = this;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
-
-          //往上方拖动：
-          if (e.clientY < mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
-          }
-
-          // 主、副列表最小高度限制为15px
-          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
-            mainListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(mainListDom.style.height) <= 15){
-            mainListDom.style.height = 15+'px';
-          }
-          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
-            subListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(subListDom.style.height) <= 15){
-            subListDom.style.height = 15+'px';
-          }
-          //当主副列表可视区域小于一定值时，不展示内容
-          if(parseInt(mainListDom.style.height) <= 100){
-            if (_this.mainResizeShow) {
-              _this.mainResizeShow = false;
-            }
-          } else {
-            if (!_this.mainResizeShow) {
-              _this.mainResizeShow = true;
-            }
-          }
-          if(parseInt(subListDom.offsetHeight) <= 100){
-            if (_this.subResizeShow) {
-              _this.subResizeShow = false;
-            }
-          } else {
-            if (!_this.subResizeShow) {
-              _this.subResizeShow = true;
-            }
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
+      fullScreen() {
+        this.$bottomBoxWindow.fullScreen(vm);
       },
       exitFullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //主列表
-        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
-
-        //副列表
-        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
-        setTimeout(() => {
-          this.isFullScreen = false;
-          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
-            this.mainResizeShow = true;
-          }
-          if (document.querySelector(".sub-list").offsetHeight >= 100) {
-            this.subResizeShow = true;
-          }
-        }, 210);
+        this.$bottomBoxWindow.exitFullScreen(vm);
       },
-      fullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        this.isFullScreen = true;
-        //主列表
-        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
-        document.querySelector(".main-list-with-sub").style.height = '0';
-        this.mainResizeShow = false;
-        //副列表
-        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+      listResize(e) {
+        this.$bottomBoxWindow.listResize(vm, e);
       },
       dcSelectAll(val) { //DC全选
         if (this.checkListData.length > 0) {
@@ -618,7 +497,6 @@
           }
         }
         this.module = module;
-        console.info(this.module);
         this.$refs.moduleBox.show(true);
       },
       getAssetModuleList(id) {
@@ -965,7 +843,6 @@
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
-      console.log('pageSize:'+this.pageObj.pageSize)
       this.$nextTick(() => {
         //左侧dc列表初始选中状态
         if (this.$store.state.assetData.selectedData.length > 0) {
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 5cee95af7..8fff3105a 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -25,7 +25,7 @@
     </div>
     <div class="content-right">
       <!-- 主页面 -->
-      <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <!-- 顶部工具栏 -->
         <div class="top-tools" v-show="mainResizeShow">
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -182,9 +182,11 @@
   </div>
 </template>
 <script>
+  var vm;
   export default {
     name: "account",
     data() {
+      vm = this;
       return {
         //底部上滑框相关
         mainListHeight: '', //主列表高度
@@ -308,101 +310,17 @@
       }
     },
     methods: {
+      // 全屏
+      fullScreen() {
+        this.$bottomBoxWindow.fullScreen(vm);
+      },
+      // 退出全屏
+      exitFullScreen() {
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },
       // 鼠标拖动二级列表
       listResize(e) {
-        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
-        let subListDom = document.querySelector(".sub-list"); //副列表
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //得到点击时俩dom的初始高度：
-        let mainInitialHeight = mainListDom.offsetHeight;
-        let subInitialHeight = subListDom.offsetHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
-
-        let _this = this;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
-
-          //往上方拖动：
-          if (e.clientY < mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
-          }
-
-          // 主、副列表最小高度限制为15px
-          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
-            mainListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(mainListDom.style.height) <= 15){
-            mainListDom.style.height = 15+'px';
-          }
-          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
-            subListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(subListDom.style.height) <= 15){
-            subListDom.style.height = 15+'px';
-          }
-          //当主副列表可视区域小于一定值时，不展示内容
-          if(parseInt(mainListDom.style.height) <= 100){
-            if (_this.mainResizeShow) {
-              _this.mainResizeShow = false;
-            }
-          } else {
-            if (!_this.mainResizeShow) {
-              _this.mainResizeShow = true;
-            }
-          }
-          if(parseInt(subListDom.offsetHeight) <= 100){
-            if (_this.subResizeShow) {
-              _this.subResizeShow = false;
-            }
-          } else {
-            if (!_this.subResizeShow) {
-              _this.subResizeShow = true;
-            }
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
-      },
-      exitFullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //主列表
-        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
-
-        //副列表
-        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
-        setTimeout(() => {
-          this.isFullScreen = false;
-          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
-            this.mainResizeShow = true;
-          }
-          if (document.querySelector(".sub-list").offsetHeight >= 100) {
-            this.subResizeShow = true;
-          }
-        }, 210);
-      },
-      fullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        this.isFullScreen = true;
-        //主列表
-        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
-        document.querySelector(".main-list-with-sub").style.height = '0';
-        this.mainResizeShow = false;
-        //副列表
-        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+        this.$bottomBoxWindow.listResize(vm, e);
       },
       jumpTo(data, id) {
         this.$router.push({
@@ -659,45 +577,7 @@
         }
       },
       showSubList(n) {
-        this.inTransform = n;
-        if (!n) {
-          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
-          this.isFullScreen = false;
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          let paginationBottom = document.querySelector(".pagination-bottom");
-          paginationTop.classList.remove("display-none");
-          if (paginationTop.classList.contains("pagination-top-show")) {
-            paginationTop.classList.remove("pagination-top-show");
-          }
-          if (!paginationTop.classList.contains("pagination-top-hide")) {
-            paginationTop.classList.add("pagination-top-hide");
-          }
-          setTimeout(() => {
-            paginationTop.classList.add("display-none");
-            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
-          }, 210);
-
-          // 主列表恢复全屏
-          this.mainResizeShow = this.subResizeShow = true;
-          document.querySelector('.main-list').style.height = "";
-          //副列表高度清空
-          document.querySelector(".sub-list").style.height = '';
-        } else {
-          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
-          paginationTop.classList.remove("display-none");
-          setTimeout(() => {
-            if (paginationTop.classList.contains("pagination-top-hide")) {
-              paginationTop.classList.remove("pagination-top-hide");
-            }
-            if (!paginationTop.classList.contains("pagination-top-show")) {
-              paginationTop.classList.add("pagination-top-show");
-            }
-          }, 210);
-        }
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
       }
     },
     mounted() {
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index 13419de0f..4d70abcbc 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -55,7 +55,7 @@
       </div>
       <!--dc table start-->
       <div class="content-right">
-        <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+        <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
           <div class="top-tools" v-show="mainResizeShow">
             <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
               <div class="top-tool-search">
@@ -153,9 +153,11 @@
     </div>
 </template>
 <script>
+  var vm;
   export default {
     name: "dc",
     data() {
+      vm = this;
       return {
         /*二级列表相关*/
         targetTab: '', //展示二级列表中的哪个页签
@@ -279,102 +281,6 @@
         this.$store.commit('setHeaderTable', data);
         this.tablelable = data;
       },
-      // 鼠标拖动二级列表
-      listResize(e) {
-        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
-        let subListDom = document.querySelector(".sub-list"); //副列表
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //得到点击时俩dom的初始高度：
-        let mainInitialHeight = mainListDom.offsetHeight;
-        let subInitialHeight = subListDom.offsetHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
-
-        let _this = this;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
-
-          //往上方拖动：
-          if (e.clientY < mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
-          }
-
-          // 主、副列表最小高度限制为15px
-          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
-            mainListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(mainListDom.style.height) <= 15){
-            mainListDom.style.height = 15+'px';
-          }
-          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
-            subListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(subListDom.style.height) <= 15){
-            subListDom.style.height = 15+'px';
-          }
-          //当主副列表可视区域小于一定值时，不展示内容
-          if(parseInt(mainListDom.style.height) <= 100){
-            if (_this.mainResizeShow) {
-              _this.mainResizeShow = false;
-            }
-          } else {
-            if (!_this.mainResizeShow) {
-              _this.mainResizeShow = true;
-            }
-          }
-          if(parseInt(subListDom.offsetHeight) <= 100){
-            if (_this.subResizeShow) {
-              _this.subResizeShow = false;
-            }
-          } else {
-            if (!_this.subResizeShow) {
-              _this.subResizeShow = true;
-            }
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
-      },
-      exitFullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //主列表
-        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
-
-        //副列表
-        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
-        setTimeout(() => {
-          this.isFullScreen = false;
-          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
-            this.mainResizeShow = true;
-          }
-          if (document.querySelector(".sub-list").offsetHeight >= 100) {
-            this.subResizeShow = true;
-          }
-        }, 210);
-      },
-      fullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        this.isFullScreen = true;
-        //主列表
-        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
-        document.querySelector(".main-list-with-sub").style.height = '0';
-        this.mainResizeShow = false;
-        //副列表
-        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
-      },
       jumpTo(data, id) {
         this.$router.push({
           path: "/" + data,
@@ -402,6 +308,18 @@
         this.targetTab = "detail";
         this.showSubList = true;
       },
+      // 全屏
+      fullScreen() {
+        this.$bottomBoxWindow.fullScreen(vm);
+      },
+      // 退出全屏
+      exitFullScreen() {
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },
+      // 鼠标拖动二级列表
+      listResize(e) {
+        this.$bottomBoxWindow.listResize(vm, e);
+      },
       convertToDetail(obj) {
         let detail = [];
         detail.push({label: this.$t("overall.name"), value: obj.name});
@@ -507,45 +425,7 @@
         }
       },
       showSubList(n) {
-        this.inTransform = n;
-        if (!n) {
-          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
-          this.isFullScreen = false;
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          let paginationBottom = document.querySelector(".pagination-bottom");
-          paginationTop.classList.remove("display-none");
-          if (paginationTop.classList.contains("pagination-top-show")) {
-            paginationTop.classList.remove("pagination-top-show");
-          }
-          if (!paginationTop.classList.contains("pagination-top-hide")) {
-            paginationTop.classList.add("pagination-top-hide");
-          }
-          setTimeout(() => {
-            paginationTop.classList.add("display-none");
-            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
-          }, 210);
-
-          // 主列表恢复全屏
-          this.mainResizeShow = this.subResizeShow = true;
-          document.querySelector('.main-list').style.height = "";
-          //副列表高度清空
-          document.querySelector(".sub-list").style.height = '';
-        } else {
-          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
-          paginationTop.classList.remove("display-none");
-          setTimeout(() => {
-            if (paginationTop.classList.contains("pagination-top-hide")) {
-              paginationTop.classList.remove("pagination-top-hide");
-            }
-            if (!paginationTop.classList.contains("pagination-top-show")) {
-              paginationTop.classList.add("pagination-top-show");
-            }
-          }, 210);
-        }
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
       }
     },
     destroyed() {
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index e7e2276ef..a08788bf5 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -24,7 +24,7 @@
       </div>
     </div>
     <div class="content-right">
-      <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
             <div class="top-tool-search">
@@ -188,10 +188,11 @@
   import {host} from '../../common/js/validate';
   import {port} from '../../common/js/validate';
 
+  var vm;
   export default {
-
     name: "prom",
     data() {
+      vm = this;
       return {
         //底部上滑框相关
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -349,101 +350,17 @@
       }
     },
     methods: {
+      // 全屏
+      fullScreen() {
+        this.$bottomBoxWindow.fullScreen(vm);
+      },
+      // 退出全屏
+      exitFullScreen() {
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },
       // 鼠标拖动二级列表
       listResize(e) {
-        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
-        let subListDom = document.querySelector(".sub-list"); //副列表
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //得到点击时俩dom的初始高度：
-        let mainInitialHeight = mainListDom.offsetHeight;
-        let subInitialHeight = subListDom.offsetHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
-
-        let _this = this;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
-
-          //往上方拖动：
-          if (e.clientY < mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
-          }
-
-          // 主、副列表最小高度限制为15px
-          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
-            mainListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(mainListDom.style.height) <= 15){
-            mainListDom.style.height = 15+'px';
-          }
-          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
-            subListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(subListDom.style.height) <= 15){
-            subListDom.style.height = 15+'px';
-          }
-          //当主副列表可视区域小于一定值时，不展示内容
-          if(parseInt(mainListDom.style.height) <= 100){
-            if (_this.mainResizeShow) {
-              _this.mainResizeShow = false;
-            }
-          } else {
-            if (!_this.mainResizeShow) {
-              _this.mainResizeShow = true;
-            }
-          }
-          if(parseInt(subListDom.offsetHeight) <= 100){
-            if (_this.subResizeShow) {
-              _this.subResizeShow = false;
-            }
-          } else {
-            if (!_this.subResizeShow) {
-              _this.subResizeShow = true;
-            }
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
-      },
-      exitFullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //主列表
-        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
-
-        //副列表
-        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
-        setTimeout(() => {
-          this.isFullScreen = false;
-          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
-            this.mainResizeShow = true;
-          }
-          if (document.querySelector(".sub-list").offsetHeight >= 100) {
-            this.subResizeShow = true;
-          }
-        }, 210);
-      },
-      fullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        this.isFullScreen = true;
-        //主列表
-        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
-        document.querySelector(".main-list-with-sub").style.height = '0';
-        this.mainResizeShow = false;
-        //副列表
-        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+        this.$bottomBoxWindow.listResize(vm, e);
       },
       convertToDetail(obj) {
         let detail = [];
@@ -811,45 +728,7 @@
         }
       },
       showSubList(n) {
-        this.inTransform = n;
-        if (!n) {
-          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
-          this.isFullScreen = false;
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          let paginationBottom = document.querySelector(".pagination-bottom");
-          paginationTop.classList.remove("display-none");
-          if (paginationTop.classList.contains("pagination-top-show")) {
-            paginationTop.classList.remove("pagination-top-show");
-          }
-          if (!paginationTop.classList.contains("pagination-top-hide")) {
-            paginationTop.classList.add("pagination-top-hide");
-          }
-          setTimeout(() => {
-            paginationTop.classList.add("display-none");
-            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
-          }, 210);
-
-          // 主列表恢复全屏
-          this.mainResizeShow = this.subResizeShow = true;
-          document.querySelector('.main-list').style.height = "";
-          //副列表高度清空
-          document.querySelector(".sub-list").style.height = '';
-        } else {
-          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
-          paginationTop.classList.remove("display-none");
-          setTimeout(() => {
-            if (paginationTop.classList.contains("pagination-top-hide")) {
-              paginationTop.classList.remove("pagination-top-hide");
-            }
-            if (!paginationTop.classList.contains("pagination-top-show")) {
-              paginationTop.classList.add("pagination-top-show");
-            }
-          }, 210);
-        }
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
       }
     }
   }
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 8aae057c5..40d16dddd 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -47,7 +47,7 @@
     <!--endpoint-->
     <div class="content-right">
       <!-- 主列表 -->
-      <div class="main-list" :class="{'main-list-with-sub': showSubList}">
+      <div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
         <div class="top-tools" v-show="mainResizeShow">
           <!--<div class="pagination-top"></div>-->
           <div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -149,6 +149,8 @@
   import exportXLSX from "../../common/exportXLSX";
   import loading from "../../common/loading";
   import chartDataFormat from "../../charts/chartDataFormat";
+
+  var vm;
   export default {
     name: "project2",
     components: {
@@ -156,6 +158,7 @@
       'loading': loading,
     },
     data() {
+      vm = this;
       let temp = this;
       return {
         endpointDetail: [],
@@ -519,101 +522,17 @@
       }
     },
     methods: {
+      // 全屏
+      fullScreen() {
+        this.$bottomBoxWindow.fullScreen(vm);
+      },
+      // 退出全屏
+      exitFullScreen() {
+        this.$bottomBoxWindow.exitFullScreen(vm);
+      },
       // 鼠标拖动二级列表
       listResize(e) {
-        let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
-        let subListDom = document.querySelector(".sub-list"); //副列表
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //得到点击时俩dom的初始高度：
-        let mainInitialHeight = mainListDom.offsetHeight;
-        let subInitialHeight = subListDom.offsetHeight;
-        //点击时鼠标的Y轴位置
-        let mouseInitialY = e.clientY;
-
-        let _this = this;
-
-        document.onmousemove = (e) => {
-          e.preventDefault();
-          //得到鼠标拖动的距离
-          let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
-
-          //往上方拖动：
-          if (e.clientY < mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight+mouseMoveY+'px';
-          }
-          //往下方拖动：
-          if (e.clientY > mouseInitialY) {
-            mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
-            subListDom.style.height = subInitialHeight-mouseMoveY+'px';
-          }
-
-          // 主、副列表最小高度限制为15px
-          if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
-            mainListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(mainListDom.style.height) <= 15){
-            mainListDom.style.height = 15+'px';
-          }
-          if(parseInt(subListDom.style.height) >= contentRightHeight-15){
-            subListDom.style.height = contentRightHeight-15+'px';
-          }
-          if(parseInt(subListDom.style.height) <= 15){
-            subListDom.style.height = 15+'px';
-          }
-          //当主副列表可视区域小于一定值时，不展示内容
-          if(parseInt(mainListDom.offsetHeight) <= 100){
-            if (_this.mainResizeShow) {
-              _this.mainResizeShow = false;
-            }
-          } else {
-            if (!_this.mainResizeShow) {
-              _this.mainResizeShow = true;
-            }
-          }
-          if(parseInt(subListDom.offsetHeight) <= 100){
-            if (_this.subResizeShow) {
-              _this.subResizeShow = false;
-            }
-          } else {
-            if (!_this.subResizeShow) {
-              _this.subResizeShow = true;
-            }
-          }
-        };
-        document.onmouseup = () => {
-          document.onmousemove = null;
-        }
-      },
-      exitFullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        //主列表
-        document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
-
-        //副列表
-        document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
-        setTimeout(() => {
-          this.isFullScreen = false;
-          if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
-            this.mainResizeShow = true;
-          }
-          if (document.querySelector(".sub-list").offsetHeight >= 100) {
-            this.subResizeShow = true;
-          }
-        }, 210);
-      },
-      fullScreen() {
-        let contentRightDom = document.querySelector(".content-right"); //右侧内容区
-        let contentRightHeight = contentRightDom.offsetHeight;//可视高度
-        this.isFullScreen = true;
-        //主列表
-        this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
-        document.querySelector(".main-list-with-sub").style.height = '0';
-        this.mainResizeShow = false;
-        //副列表
-        document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+        this.$bottomBoxWindow.listResize(vm, e);
       },
       elementsetShow(s, e) {
         var eventfixed = {
@@ -952,45 +871,7 @@
         this.getModuleList(this.currentProject.id);
       },
       showSubList(n) {
-        this.inTransform = n;
-        if (!n) {
-          this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
-          this.isFullScreen = false;
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          let paginationBottom = document.querySelector(".pagination-bottom");
-          paginationTop.classList.remove("display-none");
-          if (paginationTop.classList.contains("pagination-top-show")) {
-            paginationTop.classList.remove("pagination-top-show");
-          }
-          if (!paginationTop.classList.contains("pagination-top-hide")) {
-            paginationTop.classList.add("pagination-top-hide");
-          }
-          setTimeout(() => {
-            paginationTop.classList.add("display-none");
-            paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
-          }, 210);
-
-          // 主列表恢复全屏
-          this.mainResizeShow = this.subResizeShow = true;
-          document.querySelector('.main-list').style.height = "";
-          //副列表高度清空
-          document.querySelector(".sub-list").style.height = '';
-        } else {
-          this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
-          //移动分页组件的位置
-          let paginationTop = document.querySelector(".pagination-top");
-          paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
-          paginationTop.classList.remove("display-none");
-          setTimeout(() => {
-            if (paginationTop.classList.contains("pagination-top-hide")) {
-              paginationTop.classList.remove("pagination-top-hide");
-            }
-            if (!paginationTop.classList.contains("pagination-top-show")) {
-              paginationTop.classList.add("pagination-top-show");
-            }
-          }, 210);
-        }
+        this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
       curEndpoint: {
         deep: true,
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index 6dc29e55d..30162ea42 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -15,7 +15,7 @@ import router from './router'
 import VueResource from 'vue-resource'
 import axios from 'axios';
 import {post, get, put, del} from './http.js'
-import {toTop, clickoutside, scrollBar} from './tools.js'
+import {toTop, clickoutside, scrollBar, bottomBoxWindow} from './tools.js'
 
 import Pagination from "./components/common/pagination"; //引入全局分页组件
 import searchInput from "./components/common/searchInput"; //搜索框组件
@@ -69,6 +69,7 @@ Vue.prototype.$get = get;
 Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
 Vue.prototype.$toTop = toTop; //toTop置顶按钮方法
+Vue.prototype.$bottomBoxWindow = bottomBoxWindow; //底部上滑框控制
 Vue.prototype.$tableHeight = { //列表页表格的高度
   normal: 'calc(100% - 100px)',  //常规高度，特例在下方定义
   openSubList: { //打开二级列表后的高度
diff --git a/nezha-fronted/src/tools.js b/nezha-fronted/src/tools.js
index 7c0c542cf..c08074db9 100644
--- a/nezha-fronted/src/tools.js
+++ b/nezha-fronted/src/tools.js
@@ -167,3 +167,147 @@ export const scrollBar = {
     }
   },
 };
+
+export const bottomBoxWindow = {
+  // 鼠标拖动二级列表
+  listResize(vm, e) {
+    console.info(vm);
+    console.info(e);
+    let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
+    let subListDom = document.querySelector(".sub-list"); //副列表
+    let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+    let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+    //得到点击时俩dom的初始高度：
+    let mainInitialHeight = mainListDom.offsetHeight;
+    let subInitialHeight = subListDom.offsetHeight;
+    //点击时鼠标的Y轴位置
+    let mouseInitialY = e.clientY;
+
+    document.onmousemove = (e) => {
+      mainListDom.classList.remove('main-and-sub-transition');
+      subListDom.classList.remove('main-and-sub-transition');
+      e.preventDefault();
+      //得到鼠标拖动的距离
+      let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
+
+      //往上方拖动：
+      if (e.clientY < mouseInitialY) {
+        mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
+        subListDom.style.height = subInitialHeight+mouseMoveY+'px';
+      }
+      //往下方拖动：
+      if (e.clientY > mouseInitialY) {
+        mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
+        subListDom.style.height = subInitialHeight-mouseMoveY+'px';
+      }
+
+      // 主、副列表最小高度限制为15px
+      if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
+        mainListDom.style.height = contentRightHeight-15+'px';
+      }
+      if(parseInt(mainListDom.style.height) <= 15){
+        mainListDom.style.height = 15+'px';
+      }
+      if(parseInt(subListDom.style.height) >= contentRightHeight-15){
+        subListDom.style.height = contentRightHeight-15+'px';
+      }
+      if(parseInt(subListDom.style.height) <= 15){
+        subListDom.style.height = 15+'px';
+      }
+      //当主副列表可视区域小于一定值时，不展示内容
+      if(parseInt(mainListDom.style.height) <= 100){
+        if (vm.mainResizeShow) {
+          vm.mainResizeShow = false;
+        }
+      } else {
+        if (!vm.mainResizeShow) {
+          vm.mainResizeShow = true;
+        }
+      }
+      if(parseInt(subListDom.offsetHeight) <= 100){
+        if (vm.subResizeShow) {
+          vm.subResizeShow = false;
+        }
+      } else {
+        if (!vm.subResizeShow) {
+          vm.subResizeShow = true;
+        }
+      }
+    };
+    document.onmouseup = () => {
+      mainListDom.classList.add('main-and-sub-transition');
+      subListDom.classList.add('main-and-sub-transition');
+      document.onmousemove = null;
+    }
+  },
+  exitFullScreen(vm) {
+    let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+    let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+    //主列表
+    document.querySelector(".main-list-with-sub").style.height = vm.mainListHeight ? vm.mainListHeight + 'px' : 'calc(50% - 4px)';
+
+    //副列表
+    document.querySelector(".sub-list").style.height = vm.mainListHeight ? contentRightHeight-vm.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
+    setTimeout(() => {
+      vm.isFullScreen = false;
+      if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
+        vm.mainResizeShow = true;
+      }
+      if (document.querySelector(".sub-list").offsetHeight >= 100) {
+        vm.subResizeShow = true;
+      }
+    }, 210);
+  },
+  fullScreen(vm) {
+    let contentRightDom = document.querySelector(".content-right"); //右侧内容区
+    let contentRightHeight = contentRightDom.offsetHeight;//可视高度
+    vm.isFullScreen = true;
+    //主列表
+    vm.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
+    document.querySelector(".main-list-with-sub").style.height = '0';
+    vm.mainResizeShow = false;
+    //副列表
+    document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
+  },
+  showSubListWatch(vm, n) {
+    vm.inTransform = n;
+    if (!n) {
+      vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度
+      vm.isFullScreen = false;
+      //移动分页组件的位置
+      let paginationTop = document.querySelector(".pagination-top");
+      let paginationBottom = document.querySelector(".pagination-bottom");
+      paginationTop.classList.remove("display-none");
+      if (paginationTop.classList.contains("pagination-top-show")) {
+        paginationTop.classList.remove("pagination-top-show");
+      }
+      if (!paginationTop.classList.contains("pagination-top-hide")) {
+        paginationTop.classList.add("pagination-top-hide");
+      }
+      setTimeout(() => {
+        paginationTop.classList.add("display-none");
+        paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
+      }, 210);
+
+      // 主列表恢复全屏
+      vm.mainResizeShow = vm.subResizeShow = true;
+      document.querySelector('.main-list').style.height = "";
+      //副列表高度清空
+      document.querySelector(".sub-list").style.height = '';
+    } else {
+      vm.mainTableHeight = vm.$tableHeight.openSubList.mainList; //重置table高度
+      //移动分页组件的位置
+      let paginationTop = document.querySelector(".pagination-top");
+      paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
+      paginationTop.classList.remove("display-none");
+      setTimeout(() => {
+        if (paginationTop.classList.contains("pagination-top-hide")) {
+          paginationTop.classList.remove("pagination-top-hide");
+        }
+        if (!paginationTop.classList.contains("pagination-top-show")) {
+          paginationTop.classList.add("pagination-top-show");
+        }
+      }, 210);
+    }
+  }
+};