From e381419eb557e3022496812a691033d7d4accbe5 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, 9 Mar 2020 18:05:43 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=8F=B3=E4=BE=A7=E5=86=85=E5=AE=B9min?=
 =?UTF-8?q?-width=3D1200=E5=8F=8A=E7=9B=B8=E5=85=B3=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.右侧内容min-width=1200
2.浏览器窗体缩小后增加横向滚动条
3.增加project、asset左侧菜单滚动条
4.将table高度抽取为常量
---
 nezha-fronted/src/App.vue                     | 27 +++++---
 nezha-fronted/src/assets/stylus/main.scss     | 18 +++---
 .../src/components/common/pagination.vue      |  2 +-
 .../common/rightBox/editEndpointBox.vue       | 18 +++---
 .../src/components/page/alert/config.vue      |  2 +-
 .../src/components/page/alert/list.vue        |  2 +-
 .../src/components/page/asset/asset.vue       | 63 +++++++++++--------
 .../src/components/page/config/account.vue    |  2 +-
 .../src/components/page/config/dc.vue         |  2 +-
 .../src/components/page/config/promServer.vue |  2 +-
 .../src/components/page/project/project.vue   | 47 ++++++++------
 nezha-fronted/src/http.js                     |  2 +-
 nezha-fronted/src/main.js                     |  4 ++
 13 files changed, 114 insertions(+), 77 deletions(-)

diff --git a/nezha-fronted/src/App.vue b/nezha-fronted/src/App.vue
index c26526151..dc9087029 100644
--- a/nezha-fronted/src/App.vue
+++ b/nezha-fronted/src/App.vue
@@ -1,9 +1,11 @@
 <template>
-  <div id="app">
-    <keep-alive>
-      <router-view style="height: 100%"/>
-    </keep-alive>
-  </div>
+  <el-scrollbar class="app">
+    <div id="app">
+      <keep-alive>
+        <router-view style="height: 100%"/>
+      </keep-alive>
+    </div>
+  </el-scrollbar>
 </template>
 
 <script>
@@ -20,8 +22,17 @@ export default {
 
 <style scoped>
 #app{
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
+  height: 100%;
+  width: 100%;
+  min-width: 1400px;
 }
 </style>
+<style>
+  .app {
+    height: 100%;
+    overflow-y: hidden;
+  }
+  .app>.el-scrollbar__wrap>.el-scrollbar__view {
+    height: 100%;
+  }
+</style>
diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 20bac3e10..fb23eb504 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -6,14 +6,13 @@ body {
 }
 html {
   height: 100%;
+  overflow: hidden;
 }
 li{
   list-style-type:none ;
 }
 .content-box {
-  height: 100%;
-  min-width: 1430px;
-  overflow-x: scroll;
+  height: calc(100% - 53px);
 }
 
 .nz-icon-gear:before {
@@ -149,8 +148,8 @@ li{
   bottom: 10px;
   right: 23px;
   border-radius: 5px;
-  height: 31px;
-  width: 35px;
+  height: 40px;
+  width: 40px;
   border: none;
   cursor: pointer;
   opacity: 0.5;
@@ -378,7 +377,7 @@ li{
   width: 200px;
   height: 100%;
   border-right: 1px solid #eeeeee;
-  padding: 0 16px 0 15px;
+  padding: 0 0 0 15px;
   box-sizing: border-box;
 }
 .sidebar-title {
@@ -387,7 +386,7 @@ li{
   font-size: 14px;
 }
 .sidebar-info {
-  height: calc(90vh - 55px);
+  height: 100%;
   width: 100%;
   padding-top: 24px;
   font-size: 14px;
@@ -413,6 +412,7 @@ li{
 .side-bar-menu-edit {
   line-height: 20px;
   float: right;
+  margin-right: 12px;
 }
 .side-bar-menu-edit>i, .sidebar-info-item .el-checkbox__label .checkbox-edit i {
   font-size: 12px;
@@ -441,7 +441,6 @@ li{
   margin-left: 201px;
   padding: 0 15px;
   background-color: $content-right-background-color;
-  overflow-x: scroll;
 }
 .content-right-option {
   cursor: pointer;
@@ -494,6 +493,9 @@ li{
 .nz-table.el-table::before {
   height: 0;
 }
+.nz-table .el-table__fixed-right::before, .nz-table .el-table__fixed::before {
+  height: 0;
+}
 .nz-table.el-table--border::after, .nz-table.el-table--group::after {
   width: 0;
 }
diff --git a/nezha-fronted/src/components/common/pagination.vue b/nezha-fronted/src/components/common/pagination.vue
index 01b2044a0..bc5b0be7e 100644
--- a/nezha-fronted/src/components/common/pagination.vue
+++ b/nezha-fronted/src/components/common/pagination.vue
@@ -60,7 +60,7 @@ export default {
     float: left;
   }
   .pagination {
-    padding-top: 14px;
+    padding-top: 8px;
     text-align: center;
   }
 
diff --git a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
index 57d155859..ce67680ba 100644
--- a/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
@@ -552,10 +552,10 @@
 </style>
 
 <style lang="scss">
-  .el-pagination__total {
+  .right-box-edit-endpoint .el-pagination__total {
     float: left;
   }
-  .pagination {
+  right-box-edit-endpoint .pagination {
     padding-top: 12px;
     text-align: center;
   }
@@ -576,19 +576,19 @@
   .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
     color: #666;
   }
-  .el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
+  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
     line-height: 20px;
   }
-  .el-pagination .el-pager .more::before {
+  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
     line-height: 20px;
   }
-  .el-pager li.number{
+  .right-box-edit-endpoint .el-pager li.number{
     font-family: NotoSansSC-Regular;
     color: #666666;
     letter-spacing: 0;
     font-weight:normal;
   }
-  .el-pager li.number.active{
+  .right-box-edit-endpoint .el-pager li.number.active{
     font-family: NotoSansSC-Regular;
     color: #FFFFFF;
     letter-spacing: 0;
@@ -599,17 +599,17 @@
     border-radius: 2px;
     border-radius: 2px;
   }
-  .el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
+  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
     font-family: NotoSansSC-Regular;
     color: #666666;
     letter-spacing: 0;
     font-weight:normal;
   }
-  .el-pagination__sizes .el-input .el-input__inner,.el-pagination__editor.el-input .el-input__inner{
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
     height: 20px;
     border-color: rgba(154,154,154,0.20);
   }
-  .el-pagination__sizes .el-input .el-input__inner:hover{
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
     border-color: rgba(154,154,154,0.20);
   }
 </style>
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 5fe6617ce..cccd4fd50 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -35,7 +35,7 @@
         border
         ref="alertRuleTable"
         tooltip-effect="light"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 7fe5496a9..9a52f1e71 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -27,7 +27,7 @@
         border
         ref="alertListTable"
         tooltip-effect="light"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index ec4d35883..af5b7ed42 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -1,32 +1,34 @@
 <template>
   <div class="asset" ref="asset">
     <div class="content-left">
-      <div class="sidebar-title">{{$t('asset.asset')}}</div>
-      <div class="sidebar-info">
-        <!--<div class="sidebar-info-header">ALL</div>-->
-        <el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" v-model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
-          <div class="sidebar-info-item-txt" style="font-weight: bold;">All</div>
-        </el-checkbox>
-        <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
-          <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
-                       v-for="(item,key) in checkListData" :key="key" :label=item.id>
-            <div class="sidebar-info-item-txt">
-              <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
-                <span slot="reference">{{item.name}}</span>
-              </el-popover>
-              <span v-else>{{item.name}}</span>
-            </div>
-
-<!--            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
-<!--              <template v-slot:optionZone>-->
-<!--                <span @click="closeAllPop">-->
-<!--                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>-->
-<!--                </span>-->
-<!--              </template>-->
-<!--            </idc-config-box>-->
+      <el-scrollbar ref="leftScrollbar" style="height: 100%">
+        <div class="sidebar-title">{{$t('asset.asset')}}</div>
+        <div class="sidebar-info">
+          <!--<div class="sidebar-info-header">ALL</div>-->
+          <el-checkbox :indeterminate="checkAllHandler" class="sidebar-info-item" v-model="checkAllFlag" @change="dcSelectAll" :true-label="1" :false-label="0">
+            <div class="sidebar-info-item-txt" style="font-weight: bold;">All</div>
           </el-checkbox>
-        </el-checkbox-group>
-      </div>
+          <el-checkbox-group v-model="checkList" size="small" @change="changeCheckBox">
+            <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(checkList, item.id)}"
+                         v-for="(item,key) in checkListData" :key="key" :label=item.id>
+              <div class="sidebar-info-item-txt">
+                <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
+                  <span slot="reference">{{item.name}}</span>
+                </el-popover>
+                <span v-else>{{item.name}}</span>
+              </div>
+
+  <!--            <idc-config-box ref="idcConfigBox" :post-idc="item" placement="left" @after="getIDCOptionData" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
+  <!--              <template v-slot:optionZone>-->
+  <!--                <span @click="closeAllPop">-->
+  <!--                  <i class="nz-icon nz-icon-edit" @click="getSingleIDCData(item.id,'edit')"></i>-->
+  <!--                </span>-->
+  <!--              </template>-->
+  <!--            </idc-config-box>-->
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </el-scrollbar>
     </div>
 
     <div class="content-right">
@@ -50,7 +52,7 @@
 
       <el-table
         class="nz-table"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         style="width: 100%;"
         :data="tableData"
         v-scrollBar:el-table
@@ -346,7 +348,6 @@
           idcId: '',
           idcIds: ''
         },
-        tableHeight: document.documentElement.clientHeight - 200,
         tabShow: false,
         tabView: true,
         tagType: 'add',
@@ -782,10 +783,18 @@
             }
           });
         }
+        //resize时刷新左侧列表滚动条
+        let _this = this;
+        window.onresize = function() {
+          _this.$refs.leftScrollbar.update();
+        }
       });
       let localStorageTitle=localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
       this.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
       this.dropCol = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;
+    },
+    destroyed() {
+      window.onresize = null;
     }
   }
 </script>
diff --git a/nezha-fronted/src/components/page/config/account.vue b/nezha-fronted/src/components/page/config/account.vue
index 1b0eb8a90..4e1e73f3d 100644
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -35,7 +35,7 @@
         :data="tableData"
         border
         ref="accountTable"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index c96afdf07..8df810bdc 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -164,7 +164,7 @@
           border
           ref="cabTable"
           v-scrollBar:el-table
-          height="calc(100% - 125px)"
+          :height="$tableHeight.normal"
           style="width: 100%;">
           <el-table-column
             :resizable="false"
diff --git a/nezha-fronted/src/components/page/config/promServer.vue b/nezha-fronted/src/components/page/config/promServer.vue
index 502cda145..c98e4eea6 100644
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -30,7 +30,7 @@
           </div>
         </div>
       </div>
-      <el-table :data="tableData" border height="calc(100% - 125px)" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
+      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
         <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
                          :key="`col-${index}`" :label="item.label">
           <template slot-scope="scope" :column="item">
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 59a565f08..2577d012b 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -31,25 +31,28 @@
 </style>
 <template>
   <div class="project">
+
     <div class="content-left">
-      <div class="sidebar-title too-long-split">{{$t('project.project.project')}}：{{currentProject.name}}</div>
-      <div class="sidebar-info">
-        <div
-          v-for="item in moduleList"
-          class="sidebar-info-item"
-          :class="{'sidebar-info-item-active': item.id == currentModule.id}"
-          @click="changeModule(item)"
-          :id="'project-module-'+item.id"
-        >
-          <div class="sidebar-info-item-txt">
-            <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
-              <span slot="reference">{{item.name}}</span>
-            </el-popover>
-            <span v-else>{{item.name}}</span>
+      <el-scrollbar ref="leftScrollbar" style="height: 100%">
+        <div class="sidebar-title too-long-split">{{$t('project.project.project')}}：{{currentProject.name}}</div>
+        <div class="sidebar-info">
+          <div
+            v-for="item in moduleList"
+            class="sidebar-info-item"
+            :class="{'sidebar-info-item-active': item.id == currentModule.id}"
+            @click="changeModule(item)"
+            :id="'project-module-'+item.id"
+          >
+            <div class="sidebar-info-item-txt">
+              <el-popover v-if="item.name.length > 16" trigger="hover" placement="top-start" :content="item.name" >
+                <span slot="reference">{{item.name}}</span>
+              </el-popover>
+              <span v-else>{{item.name}}</span>
+            </div>
+            <div class="hid-div side-bar-menu-edit " @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id" ><i class="nz-icon nz-icon-edit"></i></div>
           </div>
-          <div class="hid-div side-bar-menu-edit " @click.stop="toEditModule(item)" :id="'project-module-edit-'+item.id" ><i class="nz-icon nz-icon-edit"></i></div>
         </div>
-      </div>
+      </el-scrollbar>
     </div>
 
     <!--metrics-->
@@ -120,7 +123,7 @@
         :data="endpointTableData"
         border
         class="nz-table endpoint-table"
-        height="calc(100% - 125px)"
+        :height="$tableHeight.normal"
         v-scrollBar:el-table
         ref="endpointTable"
         style="width: 100%;">
@@ -230,7 +233,7 @@
         v-scrollBar:el-table
         class="nz-table endpoint-query-table"
         :header-cell-class-name="cellClass"
-        height="calc(100% - 92px)"
+        :height="$tableHeight.endpointQuery"
         @selection-change="selectChange"
         ref="metricInfoTab"
         style="width: 100%;">
@@ -1584,6 +1587,11 @@
           });
         }
       });
+      //resize时刷新左侧列表滚动条
+      let _this = this;
+      window.onresize = function() {
+        _this.$refs.leftScrollbar.update();
+      }
 
       this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
@@ -1631,6 +1639,9 @@
           temp.tableFilter();
         },100)
       },
+    },
+    destroyed() {
+      window.onresize = null;
     }
   }
 </script>
diff --git a/nezha-fronted/src/http.js b/nezha-fronted/src/http.js
index 6af342e7e..9d90a3827 100644
--- a/nezha-fronted/src/http.js
+++ b/nezha-fronted/src/http.js
@@ -23,7 +23,7 @@ axios.interceptors.request.use(config => {
 axios.interceptors.response.use(
     response => {
       if(response.status === 200){
-        if(response.data.code == 101007) {
+        if(response.data.code == 518008) {
           window.location.href = "/";
           /*router.push({
             path: "/login"
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index e08f76981..889d1c3d7 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -63,6 +63,10 @@ Vue.prototype.$post = post;
 Vue.prototype.$get = get;
 Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
+Vue.prototype.$tableHeight = { //列表页表格的高度
+  normal: 'calc(100% - 100px)',  //常规高度，特例在下方定义
+  endpointQuery: 'calc(100% - 60px)', //特例：endpoint query页，没有翻页组件
+};
 Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
   if (type == 'el') {
     let currentTop = wrap.scrollTop;