perf: 优化table右侧滚动条区域；页面增加top按钮；

1.优化table右侧滚动条区域(暂时只有asset、endpoint页）
2.所有列表页增加top按钮

nezha-fronted/src/assets/stylus/main.scss

@@ -1174,3 +1174,30 @@ li{
 .el-button--primary:hover{
   background-color: rgba(255, 99, 71, .85);
 }
+
+/*滚动条相关，减小table内滚动条的空间*/
+.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
+  width: 6px;
+}
+.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
+  height: 6px;
+}
+.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
+  background-color: transparent;
+}
+.ps__rail-y {
+  width: 6px;
+}
+.ps__rail-x {
+  height: 6px;
+}
+.el-table__fixed-right {
+  right: 10px !important;
+}
+.el-table__fixed-right-patch {
+  width: 10px !important;
+  background-color: #fcfcfc;
+}
+.el-table__fixed-body-wrapper {
+  height: calc(100% - 42px) !important;
+}

nezha-fronted/src/components/page/alert/config.vue

@@ -33,6 +33,7 @@
         class="nz-table"
         :data="tableData"
         border
+        ref="alertRuleTable"
         tooltip-effect="light"
         height="calc(100% - 125px)"
         v-scrollBar:el-table
@@ -84,6 +85,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
     </div>
     <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
@@ -105,6 +107,7 @@
     name: "alert-config",
     data() {
       return {
+        showTopBtn: false,
         searchMsg: { //给搜索框子组件传递的信息
           zheze_none: true,
           searchLabelList: [{
@@ -405,6 +408,19 @@
     },
     mounted() {
       this.getTableData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 100) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
+      });
       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))
         : this.tableTitle;

nezha-fronted/src/components/page/alert/list.vue

@@ -25,6 +25,7 @@
         class="nz-table"
         :data="tableData"
         border
+        ref="alertListTable"
         tooltip-effect="light"
         height="calc(100% - 125px)"
         v-scrollBar:el-table
@@ -91,6 +92,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop()">TOP</button>
     </div>
     <alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
     <project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
@@ -112,6 +114,7 @@
     name: "alertList",
     data() {
       return {
+        showTopBtn: false,
         pageObj: {
           pageNo: 1,
           pageSize: 20,
@@ -353,6 +356,19 @@
     },
     mounted() {
       this.getAlertList();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 100) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
+      });
       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))
         : this.tableTitle;

nezha-fronted/src/components/page/asset/asset.vue

@@ -56,6 +56,7 @@
         v-scrollBar:el-table
         border
         tooltip-effect="light"
+        ref="assetTable"
       >
         <el-table-column
           :resizable="false"
@@ -179,7 +180,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
-      <!--<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light">TOP</button>-->
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
     </div>
 
     <!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
@@ -249,6 +250,7 @@
             disabled: false
           }],
         },
+        showTopBtn: false,
         searchLabel: {}, //搜索参数
         checkList: [],
         tablelable: [],
@@ -503,6 +505,10 @@
         });
         window.open(routeData.href);
       },
+      /*toTop() {
+        let el = document.querySelector(".el-table__body-wrapper");
+        el.scrollTop = 0;
+      },*/
       cli(id,host,accounts){
         let port = '';
         let accountId = '';
@@ -764,6 +770,17 @@
           this.checkList = [];
           this.checkList = this.$store.state.assetData.selectedData;
         }
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 100) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
       });
       let localStorageTitle=localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
       this.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;

nezha-fronted/src/components/page/config/account.vue

@@ -34,6 +34,7 @@
         class="nz-table"
         :data="tableData"
         border
+        ref="accountTable"
         height="calc(100% - 125px)"
         v-scrollBar:el-table
         style="width: 100%;">
@@ -83,6 +84,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
     </div>
 
     <transition name="right-box">
@@ -172,6 +174,7 @@
     name: "account",
     data() {
       return {
+        showTopBtn: false,
         rightBox: { //弹出框相关
           show: false,
           isEdit: false, //false查看，true编辑
@@ -509,6 +512,19 @@
     mounted() {
       this.getTableData();
       this.initReceiverData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 100) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
+      });
       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))
         : this.tableTitle;

nezha-fronted/src/components/page/config/dc.vue

@@ -66,7 +66,8 @@
           :data="tableData"
           border
           v-scrollBar:el-table
-          height="calc(100% - 160px)"
+          height="calc(100% - 125px)"
+          ref="dcTable"
           style="width: 100%;">
           <el-table-column
             :resizable="false"
@@ -125,6 +126,7 @@
           </el-table-column>
         </el-table>
         <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+        <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn1" @click="toTop">TOP</button>
         <!--dc table end-->
       <element-set
         v-clickoutside="elementsetHide"
@@ -160,6 +162,7 @@
           class="nz-table"
           :data="cabinetDatas"
           border
+          ref="cabTable"
           v-scrollBar:el-table
           height="calc(100% - 125px)"
           style="width: 100%;">
@@ -214,6 +217,7 @@
       </div>
       <!--cabinet table end-->
       <cabinet-box :cur-cabinet="curCabinet" :cur-idc="currentShowDc" ref="cabinetEditBox" @after="getCabinetDatas"></cabinet-box>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn2" @click="toTop">TOP</button>
     </div>
 </template>
 <script>
@@ -225,6 +229,8 @@
     },
     data() {
       return {
+        showTopBtn1: false,
+        showTopBtn2: false,
         currentDc: {
           id: '',
           name: '',
@@ -556,7 +562,28 @@
     mounted() {
       this.getTableData();
       this.$nextTick(function(){
-        this.getUserData();
+        this.getUserData();//绑定滚动条事件，控制top按钮
+        let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 100) {
+              this.showTopBtn1 = true;
+            } else {
+              this.showTopBtn1 = false;
+            }
+          });
+        }
+        let el2 = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
+        if (el2._ps_) {
+          el2.addEventListener("ps-scroll-y", () => {
+            if (el2._ps_.scrollbarYTop > 100) {
+              this.showTopBtn2 = true;
+            } else {
+              this.showTopBtn2 = false;
+            }
+          });
+        }
+
       });
       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))

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%;" class="nz-table" v-scrollBar:el-table>
+      <el-table :data="tableData" border height="calc(100% - 125px)" 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">
@@ -75,6 +75,7 @@
         </el-table-column>
       </el-table>
       <Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
     </div>
 
     <transition name="right-box">
@@ -194,6 +195,7 @@
     name: "prom",
     data() {
       return {
+        showTopBtn: false,
         rightBox: { //弹出框相关
           show: false,
           isEdit: false, //false查看，true编辑
@@ -640,6 +642,19 @@
     mounted: function () {
       this.getIdcData();
       this.getUserData();
+      this.$nextTick(() => {
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 100) {
+              this.showTopBtn = true;
+            } else {
+              this.showTopBtn = false;
+            }
+          });
+        }
+      });
       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))
         : this.tableTitle;

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -85,6 +85,7 @@
           </div>
         </el-scrollbar>
        </div>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop('el', $refs.dashboardScrollbar.wrap)">TOP</button>
     </div>
 
     <panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
@@ -101,6 +102,7 @@
     name: "panel",
     data() {
       return {
+        showTopBtn: false, //top按钮
         visible: false,
         rightBox: { //面板弹出框相关
           show: false,
@@ -550,6 +552,11 @@
         let _self = this;
         let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
         scrollbarWrap.onscroll = function() {
+          if (scrollbarWrap.scrollTop > 100) {
+            _self.showTopBtn = true;
+          } else {
+            _self.showTopBtn = false;
+          }
           if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
             _self.$refs.chartList.pageDataList(true, _self.showPanel.id);
           }

nezha-fronted/src/components/page/project/project.vue

@@ -118,9 +118,10 @@
       <el-table
         :data="endpointTableData"
         border
-        class="nz-table"
+        class="nz-table endpoint-table"
         height="calc(100% - 125px)"
         v-scrollBar:el-table
+        ref="endpointTable"
         style="width: 100%;">
         <el-table-column
           :resizable="false"
@@ -164,6 +165,7 @@
         </el-table-column>
       </el-table>
       <Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn1" @click="toTop">TOP</button>
     </div>
 
     <!--endpoint query-->
@@ -213,7 +215,7 @@
         :data="showTableData"
         border
         v-scrollBar:el-table
-        class="nz-table"
+        class="nz-table endpoint-query-table"
         :header-cell-class-name="cellClass"
         height="calc(100% - 92px)"
         @selection-change="selectChange"
@@ -251,6 +253,7 @@
           width="180">
         </el-table-column>
       </el-table>
+      <button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn2" @click="toTop">TOP</button>
     </div>
 
     <element-set
@@ -324,6 +327,8 @@
       let temp=this;
       return {
         tableShow: 1, // 1.endpoint; 2.metrics
+        showTopBtn1: false,
+        showTopBtn2: false,
         editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
         endpointTableTitle: [
           {
@@ -794,7 +799,7 @@
                   response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
                 }
               } catch (err) {
-                console.error(response.data.list[i], err);
+                //console.error(response.data.list[i], err);
               }
             }
             this.endpointTableData = response.data.list;
@@ -845,7 +850,7 @@
                     this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
                   }
                 } catch (err) {
-                  console.info(response.data.list[i], err);
+                  //console.error(response.data.list[i], err);
                 }
               }
               if (this.moduleList.length > 0) {
@@ -1049,12 +1054,28 @@
               this.showTableDataCopy=JSON.stringify(this.showTableData);
               this.tableShow=3;
               this.queryEdpLoading=false;
+              this.gutterHandler(".endpoint-query-table"); //控制table右边距
+              this.showTopBtn2 = false;
+              this.$nextTick(() => {
+                //绑定滚动条事件，控制top按钮
+                let el = this.$refs.metricInfoTab.$el.querySelector(".el-table__body-wrapper");
+                if (el._ps_) {
+                  el.addEventListener("ps-scroll-y", () => {
+                    if (el._ps_.scrollbarYTop > 20) {
+                      this.showTopBtn2 = true;
+                    } else {
+                      this.showTopBtn2 = false;
+                    }
+                  });
+                }
+              });
             }
         })
       },
       backToEdpTab:function(){
         this.tableShow=1;
         this.selectedEndpoints=[];
+        this.showTopBtn1 = false;
       },
       changeTime:function(size,unit){
         let time=this.getTime(size,unit);
@@ -1353,10 +1374,18 @@
           if(response.data.msg==='success'){
             this.elementMetricDatas=response.data.data.list;
           }
-
         }
-
+      },
+      /*gutterHandler() {
+        setTimeout(() => {
+          let gutterCol = document.querySelector(".endpoint-table col[name='gutter']");
+          if (gutterCol.attributes['width'].value != '0') {
+            gutterCol.attributes['width'].value = '10';
+            let bb = document.querySelector('.el-table__body');
+            document.querySelector('.endpoint-table .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
           }
+        }, 10)
+      }*/
     },
     created() {
       this.currentProject = this.$store.state.currentProject;
@@ -1368,6 +1397,21 @@
       setTimeout(()=>{
         this.getEndpointTableData();
       }, 200);
+      this.$nextTick(() => {
+        this.gutterHandler(".endpoint-table");
+        //绑定滚动条事件，控制top按钮
+        let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
+        if (el._ps_) {
+          el.addEventListener("ps-scroll-y", () => {
+            if (el._ps_.scrollbarYTop > 100) {
+              this.showTopBtn1 = true;
+            } else {
+              this.showTopBtn1 = false;
+            }
+          });
+        }
+      });
+
       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))
         : this.endpointTableTitle;

nezha-fronted/src/main.js

@@ -63,6 +63,27 @@ Vue.prototype.$post = post;
 Vue.prototype.$get = get;
 Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
+Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
+  if (type == 'el') {
+    wrap.scrollTop = 0;
+  } else {
+    let els = document.querySelectorAll(".el-table__body-wrapper");
+    for (let i = 0; i < els.length; i++) {
+      els[i].scrollTop = 0;
+    }
+  }
+};
+Vue.prototype.gutterHandler = (tableClass) => {
+  setTimeout(() => {
+    let gutterCol = document.querySelector(tableClass + " col[name='gutter']");
+    //console.info(gutterCol.attributes['width'].value)
+    if (gutterCol.attributes['width'].value != '0') {
+      //console.info(gutterCol)
+      gutterCol.attributes['width'].value = '10';
+      document.querySelector(tableClass + ' .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
+    }
+  }, 1000)
+}
 
 Vue.config.productionTip = false;
 Vue.use(ElementUI);
@@ -86,7 +107,7 @@ Vue.directive("scrollBar", {
       !el && console.warn("未发现className为el-table__body-wrapper的dom");
 
       // 启用x轴后不让原生滚动条出来作乱
-      /*vnode.context.$nextTick(() => {
+      vnode.context.$nextTick(() => {
         el.classList.add("ps");
         el.addEventListener("ps-scroll-y", () =>
           el.classList.add("ps")
@@ -94,7 +115,7 @@ Vue.directive("scrollBar", {
         el.addEventListener("ps-scroll-x", () =>
           el.classList.add("ps")
         );
-      });*/
+      });
     }
     const rules = ["fixed", "absolute", "relative"];
     if (!rules.includes(window.getComputedStyle(el, null).position)) {
@@ -188,7 +209,7 @@ window.vm = new Vue({
   template: '<App/>'
 })
 
-export default vm
+export default vm;
 /*router.beforeEach((to, from, next) => {
   if (to.path === '/login') {
     next()