perf: 滚动条替换和toTop替换

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

@@ -9,6 +9,27 @@ html {
   height: 100%;
   overflow: hidden;
 }
+/*---滚动条默认显示样式--*/
+::-webkit-scrollbar-thumb {
+  background-color: #ddd;
+  border-radius: 6px;
+  border: 2px solid #fff;
+}
+/*---鼠标点击滚动条显示样式--*/
+::-webkit-scrollbar-thumb:hover {
+  background-color: #c8c8c8;
+  border-radius: 6px;
+}
+/*---滚动条大小--*/
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+/*---滚动框背景样式--*/
+::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+}
+
 li{
   list-style-type:none ;
 }
@@ -867,12 +888,12 @@ li{
   border-right: none;
   background: #f9f9f9;
 }
-.nz-table .el-table__body {
+/*.nz-table .el-table__body {
   width: 100% !important;
 }
 .nz-table .el-table__virtual-wrapper {
   width: 100% !important;
-}
+}*/
 .chart-table .nz-table td, .chart-alert-info .nz-table td {
   background-color: white;
 }
@@ -912,7 +933,7 @@ li{
 }
 .nz-table .el-table__body-wrapper {
   background-color: $content-right-background-color;
-  overflow: hidden;
+  /*overflow: hidden;*/
 }
 .chart-table .nz-table th:last-of-type {
   background-color: white;
@@ -1283,6 +1304,7 @@ li{
 .right-box-form-box {
   height: calc(100% - 132px);
   width: 100%;
+  overflow: auto;
 }
 
 .el-scrollbar__wrap {
@@ -1897,9 +1919,6 @@ li{
 .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;
 }
-.el-table__fixed-right {
-  right: 0 !important;
-}
 .asset .ps__rail-y {
   z-index: 29;
 }

nezha-fronted/src/components/charts/chart-detail.vue

@@ -23,7 +23,7 @@
           <span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
         </div>
         <div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
-          <el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
+          <div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
             <div v-for="(item, index) in detail" :key="index" class="chart-sub">
               <div class="chart-sub-title" @click="hideElement(index)">
                 <span><i :class="{'nz-icon nz-icon-caret-right': show.indexOf(index) == -1,'nz-icon nz-icon-caret-bottom': show.indexOf(index) > -1}"></i></span>
@@ -91,7 +91,6 @@
                               tooltip-effect="light"
                               height="100%"
                               ref="dataTable"
-                              v-scrollBar:el-table="'small'"
                             >
                               <el-table-column
                                 :resizable="true"
@@ -248,7 +247,7 @@
                 </div>
               </el-collapse-transition>
             </div>
-          </el-scrollbar>
+          </div>
         </div>
       </div>
       <span v-if="data.resizable" class="vue-resizable-handle" @mousedown="startResize"></span>
@@ -479,9 +478,6 @@
             this.initChart(this.detail[0].data.stateSeries);
           });
         }
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
         this.endLoading();
       },
       initChart(series) {
@@ -565,9 +561,6 @@
     },
     mounted() {
       this.firstLoad = false;
-      this.$nextTick(() => {
-        this.$refs.scrollbar.update();
-      });
       setTimeout(() => {
         this.ready = true;
       }, 300);

nezha-fronted/src/components/charts/chart-table.vue

@@ -51,7 +51,7 @@
         </div>
         <div class="mt-10 table-container" v-cloak v-show="firstShow">
           <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
-                    :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
+                    :data="seriesItem" border tooltip-effect="light" v-cloak
                     @sort-change="tableDataSort" >
             <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
@@ -84,7 +84,7 @@
             <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
           </div>
           <el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
-                    tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
+                    @sort-change="tableDataSortScreen" tooltip-effect="light">
             <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
             <el-table-column sortable prop="element" :show-overflow-tooltip="true"
@@ -210,7 +210,6 @@
           }],
         searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
         oldSearchTime: [],
-        ps: null,
         mapping:{},
       };
     },
@@ -284,12 +283,6 @@
         let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
         container.style.height = `calc(100% - ${deHeight * 2}px)`;
         this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
-        this.$nextTick(() => {
-          this.$nextTick(() => {
-            this.ps = container.querySelector(".el-table__body-wrapper")._ps_;
-            this.ps.update();
-          });
-        });
       },
       showLoad(chartItem) {
         //设置高度 chart-table
@@ -501,9 +494,6 @@
     },
     beforeDestroy() {
       this.clearChart();
-      if (this.ps) {
-        this.ps.destroy();
-      }
     },
   };
 </script>

nezha-fronted/src/components/charts/chart-url.vue

@@ -32,7 +32,7 @@
         <div :id="'chartUrl'+chartIndex" class="mt-10 url-container"  v-show="firstShow" >
           <iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
                   style="z-index:5000;padding-bottom:6px;"
-          ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
+          ></iframe>
         </div>
         <div style="position: absolute;width: 100%; top:calc(50% - 50px);text-align: center;" v-if="showStatic">
           <div  :id="'staticContainer'+chartIndex" class="center-content"></div>
@@ -41,11 +41,10 @@
         <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%" @opened="initDialog"  @close="screenModal = false" >
           <div slot="title">
             <span class="nz-dialog-title">{{chartData.title}}</span>
-            <!--<span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
           <iframe :id="'urlContainerFull'+chartIndex"  frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
                   style="z-index:5000;padding-bottom:6px;"
-          ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
+          ></iframe>
           <div style="position: absolute;width: 100%; top:calc(50% - 100px);text-align: center;" v-if="showStatic">
             <div  :id="'staticContainerFull'+chartIndex" class="center-content"></div>
           </div>

nezha-fronted/src/components/charts/chartPreview.vue

@@ -81,7 +81,7 @@
           <div class="chart-no-data" v-show="noData">No Data</div>
 
           <template v-if="!hasLegendOptions">
-            <div class="legend-container legend-container-screen" ref="screenLegendArea"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+            <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"  class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
               <div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
                 <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
                 <br/><!--bgColorList[index]-->
@@ -89,7 +89,7 @@
             </div>
           </template>
           <template v-else>
-            <div class="legend-container legend-container-screen" ref="screenLegendArea" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+            <div @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" ref="screenLegendArea" v-show="showLegend">
               <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
                 <th style="width: 100%"></th>
                 <template v-for="legendOption in screenLegendOptions">
@@ -132,7 +132,7 @@
 
       <template  v-if="chart.type==='table'">
         <div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}" >
-        <el-table id="tableContainer" style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border  tooltip-effect="light" v-scrollBar:el-table >
+        <el-table :data="seriesItemScreen" border class="nz-table" height="95%" id="tableContainer" style="margin-top: 10px;"  tooltip-effect="light">
           <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>-->
           <!--                    <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>-->
           <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -155,7 +155,7 @@
         <div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview">
           <iframe id="chartUrlFrame" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
                   style="z-index:5000;"
-          ></iframe><!--  style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;"  :src="chart.url" v-scrollBar:char-url-preview-->
+          ></iframe>
         </div>
       </template>
 
@@ -163,9 +163,9 @@
 
       <template v-if="chart.type==='text'">
           <div  id="chartTextPreview" class="chart-text-preview">
-            <el-scrollbar style="height: 100%;" class="el-scrollbar-normal">
+            <div style="height: 100%; overflow: auto;">
               <div style="height: 100%;" v-html="chart.param.text" ></div>
-            </el-scrollbar>
+            </div>
           </div>
       </template>
 
@@ -773,14 +773,9 @@
               return [x,y];
             },
             formatter:function(params){
-              //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
               let str = `<div>`;
               let sum = 0;
-              //let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
               params.forEach((item, i) => {
-                //let tip=legend.find((element)=>{
-                  //return element.name == item.seriesName;
-                //});
                 let tip=legend[item.seriesIndex];
                 let color = self.bgColorList[item.seriesIndex];
                 if(i===0){
@@ -1381,7 +1376,7 @@
 
               item['total'] = sum;
             }
-          })
+          });
           resolve();
         })
       },
@@ -1402,20 +1397,14 @@
           option.sort = 'asc'
         }
       }
-    },
-    mounted() {
-
     },
     beforeDestroy() {
       this.clearChart();
-      //const addChartBox = document.querySelector('.right-box-add-chart');
-      //addChartBox.style.cssText =   this.oldChartBoxCss;
       try {
         if(this.echartModalStore){
           this.echartModalStore.off('magictypechanged');
         }
-      } finally {}
+      } finally{}
-        this.$refs.screenLegendArea && this.$refs.screenLegendArea._ps_.destroy();
     },
   };
 

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -57,14 +57,14 @@
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
         <div class="chart-no-data" v-show="noData">No Data</div>
         <template v-if="!hasLegendOptions">
-          <div class='legend-container'  ref="legendArea" v-show="firstShow" v-scrollBar:legend>
+          <div class='legend-container'  ref="legendArea" v-show="firstShow">
             <div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
               <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
             </div>
           </div>
         </template>
         <template v-else>
-          <div class='legend-container'  ref="legendArea" v-show="firstShow" v-scrollBar:legend>
+          <div class='legend-container'  ref="legendArea" v-show="firstShow">
             <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
               <th style="width: 100%"></th>
               <template v-for="legendOption in legendOptions">
@@ -138,7 +138,7 @@
           <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
           <div class="chart-no-data" v-show="noData">No Data</div>
           <template v-if="!hasLegendOptions">
-            <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+            <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
               <div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
                 <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
                 <br/><!--bgColorList[index]-->
@@ -146,7 +146,7 @@
             </div>
           </template>
           <template v-else>
-            <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+            <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
               <table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
                 <th style="width: 100%"></th>
                 <template v-for="legendOption in screenLegendOptions">
@@ -1459,14 +1459,6 @@
                         // 将秒改为毫秒
                         //alert('table=='+JSON.stringify(queryItem))
                         seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
-                          /*曲线汇总暂不需要
-                          if (sumData.data[dpsIndex]) {
-                            const sumNum = sumData.data[dpsIndex][1] || 0;
-                            sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                          } else {
-                            sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                          }
-                          */
                           return [dpsItem[0] * 1000, dpsItem[1]];
                         });
                         series.push(seriesItem.theData);
@@ -1846,7 +1838,6 @@
       }
       setChart(this.chartIndex, null);
       window.removeEventListener('resize', this.chartResize);
-      this.$refs.legendArea._ps_.destroy();
     },
   };
 

nezha-fronted/src/components/cli/console.vue

@@ -7,7 +7,7 @@
   }
 </style>
 <template>
-    <div class="console" :id="'ternimalContainer'+idIndex"  v-scrollBar:xterm>
+    <div :id="'ternimalContainer'+idIndex" class="console">
         <div :id="'terminal'+idIndex" ></div>
     </div>
 </template>

nezha-fronted/src/components/common/alert/alertMessageTable.vue

@@ -23,7 +23,6 @@
       ref="alertListTable"
       tooltip-effect="light"
       :height="tableHeight"
-      v-scrollBar:el-table="'large'"
       v-loading="tools.loading"
       :cell-class-name="labelsClassName"
       @selection-change="selectChange"
@@ -162,7 +161,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow &&showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+    <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow &&showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
     <!--<弹窗>-->
     <!--导出-->
     <div class="export-xlsx">
@@ -367,6 +366,8 @@
         viewProjectData: {id: '', name: '', remark: ''},
         viewModuleData: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []},
         viewAssetState: false,
+
+        scrollWrap: null,
       }
     },
     computed: {
@@ -566,8 +567,13 @@
       dialogClose() {
         this.graphShow = false;
       },
-      getAlertList: function () {
+      getAlertList() {
-
+        if (!this.scrollWrap) {
+          this.$nextTick(() => {
+            this.scrollWrap = this.$refs.alertListTable.bodyWrapper;
+            this.toTopBtnHandler(this.scrollWrap);
+          });
+        }
       },
       promQueryParamConvert(obj){
         let r = "(" + obj.alertRule.expr + ")";
@@ -862,7 +868,7 @@
       returnSeverityLabel(key){
         return this.$CONSTANTS.alertMessage.severityData.find(s => {return s.value == key}).label
       },
-      plpsscrolly(el,self){
+      /*plpsscrolly(el,self){
         if (el._ps_.scrollbarYTop > 50) {
           self.tools.showTopBtn = true;
           self.tools.tableHover = true;
@@ -870,14 +876,9 @@
           self.tools.showTopBtn = false;
           self.tools.tableHover = false;
         }
-      },
+      },*/
     },
     watch: {
-      /*tableData(){
-        if(this.$refs.alertListTable&&this.$refs.alertListTable.bodyWrapper){
-          this.$refs.alertListTable.bodyWrapper.scrollTop = 0;
-        }
-      },*/
       showSubList(n) {
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
@@ -901,13 +902,6 @@
       }
 
       this.getAlertList();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
       /*if(this.from=='alertMessage'){
         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))
@@ -927,11 +921,7 @@
     */
     },
     beforeDestroy(){
-      let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
     }
   }
 

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -85,29 +85,10 @@
         this.$emit('update:targetTab', tab);
       },
       afterResize() {
-        let vm = this;
-
         if (this.from == 'endpoint' && this.targetTab == 'endpointQuery') {
           this.$refs.endpointQuery.tableReload();
         }
-
-        //刷新滚动条
-        let intervalFunc = setInterval(function(){
-          if (!window.resizing) {
-            let pss = document.querySelectorAll(".el-table__body-wrapper");
-            if (pss) {
-              pss.forEach(ps => {
-                ps._ps_ && ps._ps_.update();
-              });
-            }
-            vm.$refs.panelTab && vm.$refs.panelTab.$refs.dashboardScrollbar.update();
-            clearInterval(intervalFunc);
-          }
-        }, 500);
       }
     },
-    beforeDestroy(){
-
-    }
   }
 </script>

nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue

@@ -22,7 +22,6 @@
       border
       v-loading="loading"
       ref="cabTable"
-      v-scrollBar:el-table="'large'"
       :cell-class-name="assetStatClassName"
       :height="$tableHeight.noPagination"
       style="width: 100%;"
@@ -251,13 +250,6 @@
           })
         })
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.showTopBtn = true;
-        } else {
-          self.showTopBtn = false;
-        }
-      },
     },
     watch: {
       obj: {
@@ -272,21 +264,6 @@
         }
       },
     },
-    mounted() {
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
-    },
-    beforeDestroy(){
-      let el = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-      }
-    }
   }
 </script>
 

nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue

@@ -60,7 +60,7 @@
     </div>
     <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
      <pl-table :row-height="28" use-virtual :datas="tableData" border :empty-text="$t('config.mib.noData')" :header-cell-class-name="cellClass" :style="{height: $tableHeight.noPagination}"
-               class="nz-table endpoint-query-table" style="width: 100%;" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false" ref="endpointQueryTable"
+               :pagination-show="false" class="nz-table endpoint-query-table" ref="endpointQueryTable" style="width: 100%;" v-loading="loading"
                @selection-change="selectChange" v-if="tableShow && plTableSHow" :border="true" :tooltip-effect="'light'">
       <pl-table-column
         type="selection"
@@ -653,32 +653,6 @@
           }
         }
       },
-      plpsscrolly(self){
-        let el = self.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
-        self.scrollTop=el.scrollTop;
-        if (el._ps_.scrollbarYTop > 50) {
-          self.showTopBtn = true;
-          self.tableHover = true;
-        } else {
-          self.showTopBtn = false;
-          self.tableHover = false;
-        }
-      },
-      tableResize(){
-        let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
-        this.plTableSHow=false;
-        this.$nextTick(()=>{
-          this.plTableSHow=true;
-          this.$nextTick(()=>{
-            el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
-            el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
-            setTimeout(()=>{
-              el.scrollTop = this.scrollTop;
-            },100)
-          });
-        });
-      }
     },
     watch: {
       obj: {
@@ -700,26 +674,7 @@
     },
     mounted() {
       this.getPanelData();
-      //this.$nextTick(() => {
       setTimeout(() => {this.$refs.endpointQueryTable.setHeight();}, 700);
-      setTimeout(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
-        }
-      }, 300);
-
-      //});
-      window.addEventListener('resize', this.tableResize);
     },
-    beforeDestroy(){
-      window.removeEventListener('resize', this.tableResize);
-      let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly);
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue

@@ -46,7 +46,6 @@
       v-loading="tools.loading"
       class="nz-table endpoint-table"
       :height="$tableHeight.noPagination"
-      v-scrollBar:el-table="'large'"
       :cell-class-name="messageStyle"
       ref="endpointTable"
       style="width: 100%;"
@@ -514,25 +513,6 @@
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-/projectBottom"))
         : this.tableTitle;
 
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", () => {
-            if (el._ps_.scrollbarYTop > 50) {
-              this.tools.showTopBtn = true;
-            } else {
-              this.tools.showTopBtn = false;
-            }
-          });
-          el.addEventListener("mouseenter", () => {
-            this.tools.tableHover = true;
-          });
-          el.addEventListener("mouseleave", () => {
-            this.tools.tableHover = false;
-          });
-        }
-      });
       this.initEvent();
     },
     beforeDestroy(){

nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue

@@ -81,14 +81,14 @@
 
     <!--图表-->
     <div class="table-list" id="tableList">
-      <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
+      <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
         <div class="box-content">
           <chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
                       @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
         </div>
-      </el-scrollbar>
+      </div>
     </div>
-    <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
+    <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
     <transition name="right-box">
       <chart-box :chart="chart" :from="from" :panel-data="panelData" :show-panel="showPanel" @close="closeRightBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" ref="addChartModal" v-if="rightBox.show"></chart-box>
     </transition>
@@ -172,6 +172,7 @@
         //removeModal: false, // 删除弹出
         //deleteObj: {}, // 删除对象
         //---图表相关参数--end
+        scrollbarWrap: null,
       }
     },
     components: {
@@ -211,27 +212,6 @@
           this.refresh();
         }
       },
-      scrollbarHeightHandler() {
-        setTimeout(() => {
-          let top = '';
-          let top2 = '';
-          document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", this.psYReachEnd);
-        }, 100);
-      },
-      psYReachEnd(){
-        let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
-        let yDom2 = document.querySelector("body>.el-dropdown-menu>.ps__rail-y>.ps__thumb-y");
-        if (top) {
-          yDom.style.top = top;
-        } else {
-          top = yDom.style.top;
-        }
-        if (top2) {
-          yDom2.style.top = top2;
-        } else {
-          top2 = yDom2.style.top;
-        }
-      },
       // 编辑图表信息,打开编辑弹窗
       editChart(data) {
         if (!data.param) {
@@ -420,18 +400,10 @@
       // 滚动事件触发下拉加载
       onScroll() {
         let _self = this;
-        let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
+        this.scrollbarWrap.addEventListener('scroll', bus.debounce(function() {
-        scrollbarWrap.onscroll = function() {
+          _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50;
-          if (scrollbarWrap.scrollTop > 50) {
+          _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop);
-            _self.showTopBtn = true;
+        }, 300));
-          } else {
-            _self.showTopBtn = false;
-          }
-          _self.$refs.chartList.loadChartData(scrollbarWrap.scrollTop);
-          /*if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
-            _self.$refs.chartList.pageDataList(true, _self.panelId);
-          }*/
-        }
       },
       focusInput:function(){
         let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
@@ -476,17 +448,18 @@
           })
         }
       },
-      tableListEnter(self){
+      tableListEnter(){
-        self.tableHover = true;
+        this.tableHover = true;
       },
-      tableListLaeve(self){
+      tableListLeave(){
-        self.tableHover = false;
+        this.tableHover = false;
       },
     },
     mounted: function () {
+      this.scrollbarWrap = this.$refs.dashboardScrollbar;
       this.onScroll();
-      document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter.bind('',this));
+      document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter);
-      document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLaeve.bind('',this));
+      document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave);
     },
     watch: {
       'filter.searchName':function(n,o){
@@ -507,11 +480,8 @@
       }
     },
     beforeDestroy(){
-      if(document.querySelector("#tableList")){
+      document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
-        document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
+      document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLeave);
-        document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLaeve);
-        document.querySelector("body>.el-dropdown-menu").removeEventListener("ps-y-reach-end", this.psYReachEnd);
-      }
     }
   }
 </script>

nezha-fronted/src/components/common/elementSet.vue

@@ -2,7 +2,7 @@
   <div class="pop-custom" v-clickoutside="esc">
     <div class="pop-title">{{$t('overall.select')}}</div>
     <div class="pop-box custom-labels">
-      <el-scrollbar style="height: 100%;">
+      <div style="height: 100%; overflow: auto;">
         <!--NotSet 为true不可设置-->
         <div
           v-for="(item,index) in custom"
@@ -19,7 +19,7 @@
 
 
 
-      </el-scrollbar>
+      </div>
     </div>
     <div class="custom-bottom-btns">
       <button v-if="isCancel" type="button" @click="batchHandler(false)" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new is-cancel">

nezha-fronted/src/components/common/exportXLSX.vue

@@ -65,7 +65,7 @@
             <div>
               <div class="result-title">{{$t('overall.result.failedDetail')}}:</div>
                 <div class="result-detail" v-if="importResult&&importResult.failDetail">
-                  <el-scrollbar style="height: 100%">
+                  <div style="height: 100%; overflow: auto;">
                    <!-- <ul>
                       <li v-for="(item,index) in importResult.failDetail"><span>{{item.lineNo}}</span>:<span>{{item.errorMsg}}</span> </li>
                     </ul>-->
@@ -77,7 +77,7 @@
                         </div>
                       </div>
                     </template>
-                  </el-scrollbar>
+                  </div>
                 </div>
             </div>
           </div>

nezha-fronted/src/components/common/header.vue

@@ -47,7 +47,7 @@
         <div class="vertical-line" ></div>
       </el-menu-item>
 
-      <el-submenu :index="`${index}`" :key="index" popper-class="nz-submenu" v-for="(menu, index) in getMenuList" v-if="menu.code != 'header'">
+      <el-submenu :index="`${index}`" :key="index" popper-class="nz-submenu" v-for="(menu, index) in getMenuList" v-if="menu.code != 'header' && menu.code != 'menu'">
         <template v-if="menu.code == 'asset'">
           <template slot="title">
             <div @click="jumpToAsset()" v-if="assetData.length == 0">{{$t(menu.i18n)}}</div>
@@ -56,13 +56,13 @@
           <template>
             <el-menu-item index="3-0" v-if="assetData.length == 0"><div @click="createBox({type: 6})" v-has="'asset_toAdd'"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
             <template v-else>
-              <el-scrollbar style= 'height: 360px' v-if="assetData.length>10">
+              <div style='height: 360px; overflow: auto;' v-if="assetData.length>10">
                 <el-menu-item :index="'3-' + index" :key="index" v-for="(item, index) in assetData">
                   <div :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}" @click="jumpToAsset(item)" @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''">
                     <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
                   </div>
                 </el-menu-item>
-              </el-scrollbar>
+              </div>
               <el-menu-item :index="'3-' + index" :key="index" v-else v-for="(item, index) in assetData">
                 <div :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}" @click="jumpToAsset(item)" @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''">
                   <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
@@ -79,14 +79,14 @@
           <template>
             <el-menu-item index="2-0" v-if="projectData.length == 0"><div @click="createBox({type: 1})" v-has="'project_toAdd'"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
             <template v-else>
-              <el-scrollbar style="height:360px" v-if="projectData.length>10">
+              <div style="height: 360px; overflow: auto;" v-if="projectData.length>10">
                 <el-menu-item :index="'2-' + index" :key="index" v-for="(item, index) in projectData">
                   <div :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}" @click="jumpToProject(item)" @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''">
                     <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
                     <div @click.stop="toEditProject(item)" class="menu-edit" v-has="'project_toEdit'" v-show="hoverItemIndex == '2-' + index && item.buildIn != 1"><i class="nz-icon nz-icon-edit"></i></div>
                   </div>
                 </el-menu-item>
-              </el-scrollbar>
+              </div>
               <el-menu-item :index="'2-' + index" :key="index" v-else v-for="(item, index) in projectData">
                 <div :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}" @click="jumpToProject(item)" @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''">
                   <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
@@ -108,117 +108,6 @@
         </template>
       </el-submenu>
 
-
-      <!--<el-submenu index="1" popper-class="nz-submenu">
-        <template slot="title">
-          <div @click="jumpTo('/overview')" :class ="(route == '/overview' ||route == '/panel' || route == '/explore') ? 'menu-active' :'' " >
-            {{$t('overall.dashboard')}}
-          </div>
-        </template>
-        <el-menu-item index="1-0">
-          <div @click="jumpTo('/overview')" :class="{'menu-item-active' :route == '/overview'}" >{{$t('dashboard.overview.title')}}</div>
-        </el-menu-item>
-        <el-menu-item index="1-1">
-          <div @click="jumpTo('/panel')" :class="{'menu-item-active' :route == '/panel'}" >{{$t('dashboard.panel.title')}}</div>
-        </el-menu-item>
-        <el-menu-item index="1-2">
-          <div @click="jumpTo('/explore')" :class="{'menu-item-active' :route == '/explore'}">{{$t('dashboard.metricPreview.title')}}</div>
-        </el-menu-item>
-      </el-submenu>
-      <el-submenu index="3" popper-class="nz-submenu">
-        <template slot="title">
-          <div v-if="assetData.length == 0" @click="jumpToAsset()">{{$t('overall.asset')}}</div>
-          <div v-else @click="jumpToAsset()" :class="{'menu-active' : route == '/asset'}">{{$t('overall.asset')}}</div>
-        </template>
-        <template>
-          <el-menu-item v-if="assetData.length == 0" index="3-0"><div @click="createBox({type: 6})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createDatacenter")}}</div></el-menu-item>
-          <template v-else>
-            <el-scrollbar v-if="assetData.length>10" style= 'height: 360px'>
-              <el-menu-item :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
-                <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}">
-                  <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-                </div>
-              </el-menu-item>
-            </el-scrollbar>
-            <el-menu-item v-else :index="'3-' + index" v-for="(item, index) in assetData" :key="index">
-              <div @mouseenter="hoverItemIndex = '3-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToAsset(item)" :class="{'menu-item-active': route == '/asset' && activeItemIndex == item.id}">
-                <span class="too-long-split" style="width: 130px;">{{item.name}}</span>
-              </div>
-            </el-menu-item>
-          </template>
-        </template>
-      </el-submenu>
-      <el-submenu index="2" popper-class="nz-submenu">
-        <template slot="title">
-          <div v-if="projectData.length == 0">{{$t('overall.project')}}</div>
-          <div v-else @click="jumpToProject(projectData[0])" :class ="route == '/project' ? 'menu-active' :''" >{{$t('overall.project')}}</div>
-        </template>
-        <template>
-          <el-menu-item v-if="projectData.length == 0" index="2-0"><div @click="createBox({type: 1})"><i class="nz-icon nz-icon-create-square header-dropdown-add"></i>&nbsp;&nbsp;{{$t("overall.createProject")}}</div></el-menu-item>
-          <template v-else>
-            <el-scrollbar v-if="projectData.length>10" style="height:360px">
-              <el-menu-item :index="'2-' + index" v-for="(item, index) in projectData" :key="index">
-                <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}">
-                  <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
-                  <div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i class="nz-icon nz-icon-edit"></i></div>
-                </div>
-              </el-menu-item>
-            </el-scrollbar>
-            <el-menu-item v-else :index="'2-' + index" v-for="(item, index) in projectData" :key="index">
-              <div @mouseenter="hoverItemIndex = '2-' + index" @mouseleave="hoverItemIndex = ''" @click="jumpToProject(item)" :class="{'menu-item-active': route == '/project' && activeItemIndex == item.id}">
-                <span class="too-long-split" style="width: 135px;">{{item.name}}</span>
-                <div v-show="hoverItemIndex == '2-' + index && item.buildIn != 1" @click.stop="toEditProject(item)" class="menu-edit"><i class="nz-icon nz-icon-edit"></i></div>
-              </div>
-            </el-menu-item>
-          </template>
-        </template>
-      </el-submenu>
-      <el-submenu index="4" popper-class="nz-submenu">
-        <template slot="title">
-          <div @click="jumpTo('/alertList')" :class ="route == '/alertList' || route == '/alertConfig' ? 'menu-active' : ''">{{$t('overall.alert')}}</div>
-        </template>
-        <el-menu-item index="4-1">
-          <div @click="jumpTo('/alertList')" :class ="route == '/alertList' ? 'menu-item-active' : ''">{{$t('alert.message')}}</div>
-        </el-menu-item>
-        <el-menu-item index="4-2">
-          <div @click="jumpTo('/alertConfig')" :class ="route == '/alertConfig' ? 'menu-item-active' : ''">{{$t('alert.rule')}}</div>
-        </el-menu-item>
-      </el-submenu>
-      <el-submenu index="5" popper-class="nz-submenu">
-        <template slot="title">
-          <div @click="jumpTo('/account')" :class ="route == '/account' || route == '/promServer' || route == '/dc' || route == '/model' || route == '/mib' || route == '/system' || route == '/terminallog' || route == '/operationlog' || route == '/about' ? 'menu-active' : ''">{{$t('overall.config')}}</div>
-        </template>
-        <el-menu-item index="5-0">
-          <div @click="jumpTo('/account')" :class="{'menu-item-active' :(route == '/account' )}">{{$t('config.account.account')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-9">
-          <div @click="jumpTo('/roles')" :class="{'menu-item-active' :(route == '/roles' )}">{{$t('config.roles.roles')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-1">
-          <div @click="jumpTo('/promServer')" :class="{'menu-item-active' :(route == '/promServer' )}">{{$t('config.promServer.promServerList')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-2">
-          <div @click="jumpTo('/dc')" :class="{'menu-item-active' :(route == '/dc' )}">{{$t('config.dc.dc')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-3">
-          <div @click="jumpTo('/model')" :class="{'menu-item-active' :(route == '/model' )}">{{$t('config.model.model')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-4">
-          <div @click="jumpTo('/mib')" :class="{'menu-item-active' :(route == '/mib' )}">{{$t('config.mib.mib')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-5">
-          <div @click="jumpTo('/system')" :class="{'menu-item-active' :(route == '/system' )}">{{$t('config.system.system')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-6">
-          <div @click="jumpTo('/terminallog')" :class="{'menu-item-active' :(route == '/terminallog' )}">{{$t('config.terminallog.terminallog')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-7">
-          <div @click="jumpTo('/operationlog')" :class="{'menu-item-active' :(route == '/operationlog' )}">{{$t('config.operationlog.operationlog')}}</div>
-        </el-menu-item>
-        <el-menu-item index="5-8">
-          <div @click="jumpTo('/about')" :class="{'menu-item-active' :(route == '/about' )}">{{$t('overall.about')}}</div>
-        </el-menu-item>
-      </el-submenu>-->
       <el-submenu index="101" popper-class="nz-submenu">
         <template slot="title">
           <div class='nz-user'>{{username}}<i class="nz-icon nz-icon-arrow-down"></i></div>

nezha-fronted/src/components/common/home.vue

@@ -26,7 +26,6 @@ export default {
   },
   computed:{
     isMenuPage:function(){
-      console.log(this.$route.path )
       return this.$route.path == '/menu'
     }
   }

nezha-fronted/src/components/common/js/tools.js

@@ -1,47 +1,5 @@
 import PerfectScrollbar from "perfect-scrollbar";
 import {getChart} from "./common";
-//top置顶按钮公共方法
-export function toTop(type, wrap) {
-  if (type == 'el') {
-    let currentTop = wrap.scrollTop;
-    let interval = currentTop/10;
-    let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
-      if (currentTop == 0) {
-        clearInterval(intervalFunc);
-      } else {
-        currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
-        wrap.scrollTop = currentTop;
-      }
-    }, 20);
-  } else {
-    let els = document.querySelectorAll(".el-table__body-wrapper");
-    if (wrap || wrap == 0) { //指定index的table__body
-      let currentTop = els[wrap].scrollTop;
-      let interval = currentTop/10;
-      let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
-        if (currentTop == 0) {
-          clearInterval(intervalFunc);
-        } else {
-          currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
-          els[wrap].scrollTop = currentTop;
-        }
-      }, 20);
-    } else { //所有table__body
-      for (let i = 0; i < els.length; i++) {
-        let currentTop = els[i].scrollTop;
-        let interval = currentTop/10;
-        let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
-          if (currentTop == 0) {
-            clearInterval(intervalFunc);
-          } else {
-            currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
-            els[i].scrollTop = currentTop;
-          }
-        }, 20);
-      }
-    }
-  }
-}
 
 /*弹窗点击外部后关闭*/
 const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box','nz-dashboard-dropdown', "el-autocomplete-suggestion"]; //clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
@@ -91,97 +49,6 @@ export const clickoutside = {
   },
 };
 
-/*el-table自定义滚动条*/
-const el_scrollBar = el => {
-  if (el._ps_ instanceof PerfectScrollbar) {
-    el._ps_.update();
-  } else {
-    //el上挂一份属性
-    el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
-  }
-};
-export const scrollBar = {
-  inserted(el, binding, vnode) {
-    const { arg } = binding;
-    if (arg === "el-table") {
-      el = el.querySelector(".el-table__body-wrapper");
-      //!el && console.warn("未发现className为el-table__body-wrapper的dom");
-    } else if (arg === "el-dropdown") {
-      el = document.querySelector(".el-dropdown-menu");
-      //!el && console.warn("未发现className为el-dropdown-menu的dom");
-    } else if (arg == "legend") {
-      el = el.querySelector(".legend-container");
-      //!el && console.warn("未发现className为legend-container的dom");
-    }
-
-    // 启用x轴后不让原生滚动条出来作乱
-    if (el) {
-      vnode.context.$nextTick(() => {
-        if (arg === "xterm") {
-          el = el.querySelector(".xterm-viewport");
-          //!el && console.warn("未发现className为xterm-viewport的dom");
-        }
-        if(arg==="metric-label-cascader"){
-          el = el.querySelector(".el-cascader__tags");
-          //!el && console.warn("未发现className为el-cascader__tags的dom");
-        }
-        el.classList.add("ps");
-        el.addEventListener("ps-scroll-y", () => {
-          el.classList.add("ps");
-        });
-        el.addEventListener("ps-scroll-x", () => {
-          el.classList.add("ps");
-        });
-        //el上挂一份属性
-        el_scrollBar(el);
-      });
-
-      /*const rules = ["fixed", "absolute", "relative"];
-      if (!rules.includes(window.getComputedStyle(el, null).position)) {
-        console.error(
-          `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
-            "、"
-          )}`
-        );
-      }*/
-    }
-  },
-  componentUpdated(el, binding, vnode, oldVnode) {
-    const { arg, value } = binding;
-    if (arg === "el-table") {
-      el = el.querySelector(".el-table__body-wrapper");
-      //!el && console.warn("未发现className为el-table__body-wrapper的dom");
-    } else if (arg === "el-dropdown") {
-      el = document.querySelector(".el-dropdown-menu");
-      //!el && console.warn("未发现className为el-dropdown-menu的dom");
-    }else if (arg === "xterm") {
-      el = el.querySelector(".xterm-viewport");
-      //!el && console.warn("未发现className为xterm-viewport的dom");
-    }else if(arg==="metric-label-cascader"){
-      el = el.querySelector(".el-cascader__tags");
-      //!el && console.warn("未发现className为el-cascader__tags的dom");
-    }
-    setTimeout(() => {
-      el.classList.add("ps");
-      el.classList.add("ps--active-y");
-      el._ps_.update();
-    }, 1500)
-
-    try {
-      vnode.context.$nextTick(() => {
-        el_scrollBar(el);
-        if (value) {
-          el.querySelector(".ps__rail-x").classList.add("ps-scroll-" + value);
-          el.querySelector(".ps__rail-y").classList.add("ps-scroll-" + value);
-        }
-      });
-    } catch (error) {
-      console.error(error);
-      el_scrollBar(el);
-    }
-  },
-};
-
 // 底部上滑框窗口控制
 export const bottomBoxWindow = {
   // 鼠标拖动二级列表

nezha-fronted/src/components/common/leftMenu.vue

@@ -2,120 +2,118 @@
   <div class="content">
     <div class="content-left left-slot" :class="{'left-slot-shrink': isShrink}">
       <div class="sidebar-title too-long-split">{{$t(parentMenu.i18n)}}</div>
-      <div class="sidebar-info" style="height: 90%">
+      <div class="sidebar-info" style="height: 90%; overflow: auto;">
-        <el-scrollbar style="height: 100%;">
+        <template v-if="parentMenu == '/project'">
-          <template v-if="parentMenu == '/project'">
+          <el-collapse accordion class="left-menu-bg" ref="projectLeft" style="padding-top: 0;">
-            <el-collapse class="left-menu-bg" accordion style="padding-top: 0;" ref="projectLeft">
+            <el-collapse-item :key="item.id" :name="item.id + ''" v-for="(item, index) in projectList">
-              <el-collapse-item v-for="(item, index) in projectList" :key="item.id" :name="item.id + ''">
+              <template slot="title">
-                <template slot="title">
+                <div :class="{'sidebar-info-item-active': item.id == currentProject.id}" :id="'project-module-'+item.id" @click="detailProject(item)" class="sidebar-info-item-project sidebar-info-item">
-                  <div class="sidebar-info-item-project sidebar-info-item" :class="{'sidebar-info-item-active': item.id == currentProject.id}" @click="detailProject(item)" :id="'project-module-'+item.id">
+                  <div class="sidebar-info-item-txt">
-                    <div class="sidebar-info-item-txt">
+                    <el-popover :content="item.name" placement="top-start" popper-class="transparent-pop" trigger="hover" v-if="item.name.length > 14">
-                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
+                    <span class="" slot="reference">
-                      <span slot="reference" class="">
+                      {{item.name}}
-                        {{item.name}}
+                    </span>
-                      </span>
+                    </el-popover>
-                      </el-popover>
+                    <span v-else>{{item.name}}</span>
-                      <span v-else>{{item.name}}</span>
+                  </div>
+                </div>
+              </template>
+              <div class="sidebar-info sub-sidebar-info" >
+                <div :title="$t('overall.createModule')" @click="addModule(item)" class="sidebar-info-item  sidebar-info-item-project-add" v-if="getProjectModule(item.id).length == 0">
+                  <span><i class="nz-icon nz-icon-create-square"></i>&nbsp;{{$t("overall.addProject")}}</span>
+                </div>
+                <template v-else>
+                  <div :class="{'sidebar-info-item-active': module.id == currentModule.id}" :id="'project-module-'+module.id" @click="changeModule(item, module)" class="sidebar-info-sub-item" v-for="module in getProjectModule(item.id)">
+                    <div :id="`module-${module.id}`" class="item-tip">
+                      <div :class="itemTip(module.id, module.name, ready)" class="item-tip-hide item-tip-key el-popover">{{module.name}}</div>
+                      <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
+                      <div :id="'project-module-edit-'+module.id" @click.stop="editModule(module)" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" v-has="'project_module_toEdit'" v-show="module.buildIn != 1" ><i class="nz-icon nz-icon-edit"></i></div>
                     </div>
                   </div>
                 </template>
-                <div class="sidebar-info sub-sidebar-info" >
+              </div>
-                  <div v-if="getProjectModule(item.id).length == 0" class="sidebar-info-item  sidebar-info-item-project-add" @click="addModule(item)" :title="$t('overall.createModule')">
+            </el-collapse-item>
-                    <span><i class="nz-icon nz-icon-create-square"></i>&nbsp;{{$t("overall.addProject")}}</span>
+          </el-collapse>
+        </template>
+        <template v-else-if="parentMenu == '/asset'">
+          <el-collapse class="left-menu-bg" v-model="activeType">
+            <el-collapse-item :title="$t('asset.left.dataCenter')" name="dataCenter">
+              <el-checkbox-group size="small" v-model="dcCheckList">
+                <el-checkbox :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}" :key="key"
+                             :label=item.id class="sidebar-info-item sidebar-info-item-asset" v-for="(item,key) in dcData">
+                  <div class="sidebar-info-item-txt">
+                    <el-popover :content="item.name" placement="top-start" trigger="hover" v-if="item.name.length > 14" >
+                      <span slot="reference">{{item.name}}</span>
+                    </el-popover>
+                    <span v-else>{{item.name}}</span>
                   </div>
-                  <template v-else>
+                  <el-badge :value="item.total" class="mark" type="primary"/>
-                    <div v-for="module in getProjectModule(item.id)" class="sidebar-info-sub-item" :class="{'sidebar-info-item-active': module.id == currentModule.id}" @click="changeModule(item, module)" :id="'project-module-'+module.id">
+                </el-checkbox>
-                      <div :id="`module-${module.id}`" class="item-tip">
+              </el-checkbox-group>
-                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip(module.id, module.name, ready)">{{module.name}}</div>
+            </el-collapse-item>
-                        <span class="too-long-split" style="width: 120px;">{{module.name}}</span>
+            <el-collapse-item :title="$t('asset.assetType')" name="assetType">
-                        <div :id="'project-module-edit-'+module.id" @click.stop="editModule(module)" class="hid-div side-bar-menu-edit sub-side-bar-menu-edit" v-has="'project_module_toEdit'" v-show="module.buildIn != 1" ><i class="nz-icon nz-icon-edit"></i></div>
+              <el-checkbox-group @change="changeAssetTypeCheckBox" size="small" v-model="assetTypeCheckList">
-                      </div>
+                <el-checkbox :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" :key="key" :label=item.id class="sidebar-info-item" v-for="(item, key) in assetTypeData">
-                    </div>
+                  <div class="sidebar-info-item-txt">
-                  </template>
+                    <el-popover :content="item.name" placement="top-start" trigger="hover" v-if="item.name.length > 14" >
-                </div>
+                      <span slot="reference">{{item.name}}</span>
-              </el-collapse-item>
+                    </el-popover>
-            </el-collapse>
+                    <span v-else>{{item.name}}</span>
-          </template>
+                  </div>
-          <template v-else-if="parentMenu == '/asset'">
+                  <el-badge :value="item.total" class="mark" type="primary"/>
-            <el-collapse v-model="activeType" class="left-menu-bg">
+                </el-checkbox>
-              <el-collapse-item name="dataCenter" :title="$t('asset.left.dataCenter')">
+              </el-checkbox-group>
-                <el-checkbox-group v-model="dcCheckList" size="small">
+            </el-collapse-item>
-                  <el-checkbox class="sidebar-info-item sidebar-info-item-asset" :class="{'sidebar-info-item-active': indOf(dcCheckList, item.id)}"
+            <el-collapse-item :title="$t('asset.left.vendor')" name="vendor">
-                               v-for="(item,key) in dcData" :key="key" :label=item.id>
+              <el-checkbox-group @change="changeVendorCheckBox" size="small" v-model="vendorCheckList">
-                    <div class="sidebar-info-item-txt">
+                <el-checkbox :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" :key="key" :label=item.id class="sidebar-info-item" v-for="(item, key) in vendorData">
-                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
+                  <div class="sidebar-info-item-txt">
-                        <span slot="reference">{{item.name}}</span>
+                    <el-popover :content="item.name" placement="top-start" trigger="hover" v-if="item.name.length > 14" >
-                      </el-popover>
+                      <span slot="reference">{{item.name}}</span>
-                      <span v-else>{{item.name}}</span>
+                    </el-popover>
-                    </div>
+                    <span v-else>{{item.name}}</span>
-                    <el-badge :value="item.total" class="mark" type="primary"/>
+                  </div>
-                  </el-checkbox>
+                  <el-badge :value="item.total" class="mark" type="primary"/>
-                </el-checkbox-group>
+                </el-checkbox>
-              </el-collapse-item>
+              </el-checkbox-group>
-              <el-collapse-item name="assetType" :title="$t('asset.assetType')">
+            </el-collapse-item>
-                <el-checkbox-group v-model="assetTypeCheckList" size="small" @change="changeAssetTypeCheckBox">
+            <el-collapse-item :title="$t('asset.left.ping')" name="ping" v-if="assetPingSwitch">
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(assetTypeCheckList, item.id)}" v-for="(item, key) in assetTypeData" :key="key" :label=item.id>
+              <el-checkbox-group @change="changePingCheckBox" size="small" v-model="pingCheckList">
-                    <div class="sidebar-info-item-txt">
+                <el-checkbox :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" :key="index" :label="item.value" class="sidebar-info-item" v-for="(item, index) in pingData">
-                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
+                  <div class="sidebar-info-item-txt">
-                        <span slot="reference">{{item.name}}</span>
+                    <span>{{item.label}}</span>
-                      </el-popover>
+                  </div>
-                      <span v-else>{{item.name}}</span>
+                  <el-badge :value="item.total" class="mark" type="primary"/>
-                    </div>
+                </el-checkbox>
-                    <el-badge :value="item.total" class="mark" type="primary"/>
+              </el-checkbox-group>
-                  </el-checkbox>
+            </el-collapse-item>
-                </el-checkbox-group>
+          </el-collapse>
-              </el-collapse-item>
+          <!--tag 过滤-->
-              <el-collapse-item name="vendor" :title="$t('asset.left.vendor')">
+          <div class="sidebar-title too-long-split orange-font">
-                <el-checkbox-group v-model="vendorCheckList" size="small" @change="changeVendorCheckBox">
+            Tag
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(vendorCheckList, item.id)}" v-for="(item, key) in vendorData" :key="key" :label=item.id>
+          </div>
-                    <div class="sidebar-info-item-txt">
+          <el-collapse class="left-menu-bg" v-model="activeTag">
-                      <el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" >
+            <el-collapse-item :key="item.key" :name="item.key" :title="item.key" v-for="item in tagData">
-                        <span slot="reference">{{item.name}}</span>
+              <el-checkbox-group size="small" v-model="tagCheckList" >
-                      </el-popover>
+                <el-checkbox :key="item.key+'-'+tag.value"  :label="item.key+'-'+tag.value" @change="changeTagCheckBox(item,tag.value)" class="sidebar-info-item" v-for="tag in item.values">
-                      <span v-else>{{item.name}}</span>
+                  <div class="sidebar-info-item-txt">
-                    </div>
+                    <el-popover :content="tag.value" placement="top-start" trigger="hover" v-if="tag.value.length > 14" >
-                    <el-badge :value="item.total" class="mark" type="primary"/>
+                      <span slot="reference">{{tag.value}}</span>
-                  </el-checkbox>
+                    </el-popover>
-                </el-checkbox-group>
+                    <span v-else>{{tag.value}}</span>
-              </el-collapse-item>
+                  </div>
-              <el-collapse-item name="ping" :title="$t('asset.left.ping')" v-if="assetPingSwitch">
+                  <el-badge :max="99" :value="tag.total" class="mark" type="primary"/>
-                <el-checkbox-group v-model="pingCheckList" size="small" @change="changePingCheckBox">
+                </el-checkbox>
-                  <el-checkbox class="sidebar-info-item" :class="{'sidebar-info-item-active': indOf(pingCheckList, item.key)}" v-for="(item, index) in pingData" :key="index" :label="item.value">
+              </el-checkbox-group>
-                    <div class="sidebar-info-item-txt">
+            </el-collapse-item>
-                      <span>{{item.label}}</span>
+          </el-collapse>
-                    </div>
-                    <el-badge :value="item.total" class="mark" type="primary"/>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </el-collapse-item>
-            </el-collapse>
-            <!--tag 过滤-->
-            <div class="sidebar-title too-long-split orange-font">
-              Tag
-            </div>
-            <el-collapse v-model="activeTag" class="left-menu-bg">
-              <el-collapse-item :name="item.key" :title="item.key" v-for="item in tagData" :key="item.key">
-                <el-checkbox-group v-model="tagCheckList" size="small" >
-                  <el-checkbox class="sidebar-info-item"  v-for="tag in item.values" :key="item.key+'-'+tag.value" :label="item.key+'-'+tag.value" @change="changeTagCheckBox(item,tag.value)">
-                    <div class="sidebar-info-item-txt">
-                      <el-popover v-if="tag.value.length > 14" trigger="hover" placement="top-start" :content="tag.value" >
-                        <span slot="reference">{{tag.value}}</span>
-                      </el-popover>
-                      <span v-else>{{tag.value}}</span>
-                    </div>
-                    <el-badge :max="99" :value="tag.total" class="mark" type="primary"/>
-                  </el-checkbox>
-                </el-checkbox-group>
-              </el-collapse-item>
-            </el-collapse>
 
-          </template>
+        </template>
-          <template v-else>
+        <template v-else>
-            <div :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)" class="sidebar-info-item" v-for="menu in parentMenu.children">
+          <div :class="{'sidebar-info-item-active': menu.route == route}" @click="jumpTo(menu.route)" class="sidebar-info-item" v-for="menu in parentMenu.children">
-              {{$t(menu.i18n)}}
+            {{$t(menu.i18n)}}
-            </div>
+          </div>
-          </template>
+        </template>
-        </el-scrollbar>
       </div>
       <div @click="toggleStat" class="bottom-icon">
         <div class="bottom-divider"></div>
@@ -664,7 +662,7 @@
 <style scoped lang="scss">
   .content{
     position: relative;
-    height: calc(100% - 50px);
+    height: calc(100% - 54px);
   }
   .slot-content{
     height: 100%;

nezha-fronted/src/components/common/popBox/selectArea.vue

@@ -2,7 +2,7 @@
   <el-popover :placement="placement" width="698" ref="selectAreaPopBox" v-model="popBox.show" popper-class="nz-pop nz-pop-select-area" transition="slide">
     <div>
       <div class="pop-item-wider">
-        <el-scrollbar class="select-area-tree">
+        <div class="select-area-tree">
           <el-tree
             ref="areaTree"
             node-key="id"
@@ -16,7 +16,7 @@
             @node-click="selectArea"
             @check-change="clearOthers">
           </el-tree>
-        </el-scrollbar>
+        </div>
       </div>
     </div>
     <div slot="reference">

nezha-fronted/src/components/common/popBox/selectWalk.vue

@@ -6,7 +6,7 @@
         <p><span class="metirc-tip-list">OID&nbsp;:&nbsp;</span><span>{{tempWalk.objectID}}</span></p>
         <p><span class="metirc-tip-list">MIB&nbsp;:&nbsp;</span><span>{{mibName(tempWalk.objectID)}}</span></p>
       </div>
-      <el-scrollbar class="select-walk-tree" ref="scrollbar">
+      <div class="select-walk-tree" ref="scrollbar">
         <el-tree
           ref="walkTree"
           node-key="objectID"
@@ -36,7 +36,7 @@
             {{data.name}}
           </div>
         </el-tree>
-      </el-scrollbar>
+      </div>
     </div>
     <div slot="reference">
       <slot name="trigger">

nezha-fronted/src/components/common/project/addLine.vue

@@ -20,7 +20,7 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box" ref="scrollbar">
+      <div class="right-box-form-box">
         <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="120px" :rules="rules">
           <el-form-item :label="$t('project.topology.lineName')" prop="lineName" class="line-name">
             <el-input v-model="form.lineName"  size="small"></el-input>
@@ -243,7 +243,7 @@
             </el-row>
           </el-row>
         </el-form>
-      </el-scrollbar>
+      </div>
 
       <!-- end--表单-->
 
@@ -403,9 +403,6 @@
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
         this.promqlCount++;
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       removeExpression(index) {
         if (this.promqlCount >= 1) {
@@ -424,9 +421,6 @@
             });
           });
         }
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       /*关闭弹框*/
       esc(refresh) {

nezha-fronted/src/components/common/project/addNode.vue

@@ -20,7 +20,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box" ref="scrollbar">
+    <div class="right-box-form-box" ref="scrollbar">
       <el-form class="right-box-form  right-box-form-left" ref="form" :model="form" label-width="160px" :rules="rules">
         <el-form-item label="Module Name" prop="moduleId">
           <el-select v-model="form.moduleId" placeholder=""  popper-class="asset-dropdown" size="small">
@@ -126,7 +126,7 @@
           </el-row>
         </el-row>
       </el-form>
-    </el-scrollbar>
+    </div>
     <!-- end--表单-->
 
     <!--底部按钮-->
@@ -308,9 +308,6 @@
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
         this.promqlCount++;
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       removeExpression(index) {
         if (this.promqlCount >= 1) {
@@ -329,9 +326,6 @@
             });
           });
         }
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       /*关闭弹框*/
       esc(refresh) {

nezha-fronted/src/components/common/project/popData/alertTable.vue

@@ -31,7 +31,7 @@
       <!-- end搜素框-->
 
       <!-- begin--表格-->
-      <el-scrollbar class="right-box-form-box">
+      <div class="right-box-form-box">
         <el-table
           class="nz-table tabelH100"
           :data="tableData"
@@ -39,7 +39,6 @@
           ref="alertListTable"
           tooltip-effect="light"
           :height="tableHeight"
-          v-scrollBar:el-table="'large'"
           v-loading="loading"
           :cell-class-name="labelsClassName"
           @selection-change="selectChange"
@@ -160,19 +159,8 @@
               <template v-else>-</template>
             </template>
           </el-table-column>
-
-          <!--<el-table-column width="28" :resizable="false">-->
-            <!--<template slot="header" slot-scope="scope">-->
-          <!--<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">-->
-            <!--<i class="nz-icon nz-icon-gear"></i>-->
-          <!--</span>-->
-            <!--</template>-->
-            <!--<template v-slot="scope">-->
-              <!--<button v-if="scope.$index == 0" class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && tools.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>-->
-            <!--</template>-->
-          <!--</el-table-column>-->
         </el-table>
-      </el-scrollbar>
+      </div>
       <!-- end--表格-->
 
       <!--底部分頁-->

nezha-fronted/src/components/common/project/popData/assetTable.vue

@@ -30,13 +30,12 @@
       <!-- end搜素框-->
 
       <!-- begin--表格-->
-      <el-scrollbar class="right-box-form-box">
+      <div class="right-box-form-box">
         <el-table
           class="nz-table"
           :height="mainTableHeight"
           style="width: 100%;"
           :data="tableData"
-          v-scrollBar:el-table="'large'"
           border
           v-loading="loading"
           tooltip-effect="light"
@@ -95,7 +94,7 @@
             </template>
           </el-table-column>
         </el-table>
-      </el-scrollbar>
+      </div>
       <!-- end--表格-->
 
       <!--底部分頁-->

nezha-fronted/src/components/common/project/popData/endpointTable.vue

@@ -26,13 +26,12 @@
       <!-- end搜素框-->
 
       <!-- begin--表格-->
-      <el-scrollbar class="right-box-form-box">
+      <div class="right-box-form-box">
         <el-table
           :data="tableData"
           border
           class="nz-table endpoint-table"
           :height="mainTableHeight"
-          v-scrollBar:el-table="'large'"
           ref="endpointTable"
           v-loading="loading"
           style="width: 100%;"
@@ -83,7 +82,7 @@
             </template>
           </el-table-column>
         </el-table>
-      </el-scrollbar>
+      </div>
       <!-- end--表格-->
 
       <!--底部分頁-->

nezha-fronted/src/components/common/project/popData/lineChart.vue

@@ -65,7 +65,7 @@
         <!--<div  v-if="seriesItem.length!==seriesItemArr.length" class="more"><i class="el-icon-warning"></i> {{$t('dashboard.panel.moreFirstTitle')}} {{seriesLength}}{{$t('dashboard.panel.moreSecondTitle')}}<span @click="loadMore" class="moreClick">{{$t('dashboard.panel.moreThirdTitle')}}{{seriesItem.length}}</span></div>-->
         <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="height:calc(100% - 60px)"></div>
         <div class="chart-no-data" v-show="noData">No Data</div>
-        <div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
+        <div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow">
           <div v-for="(item, index) in legendListMore" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
             <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
           </div>
@@ -117,7 +117,7 @@
           </div>
           <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
           <div class="chart-no-data" v-show="noData">No Data</div>
-          <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+          <div :id="'screenLegendArea'+chartIndex"  @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" class="legend-container legend-container-screen" v-show="showLegend">
             <div v-for="(item, index) in screenLegendListMore" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
               <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
               <br/><!--bgColorList[index]-->
@@ -1655,7 +1655,6 @@
       }
       setChart(this.chartIndex, null);
       window.removeEventListener('resize', this.chartResize);
-      this.$refs.legendArea._ps_.destroy();
     },
   };
 

nezha-fronted/src/components/common/project/popData/totalChart.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div class="chart-box">
-      v-scrollBar
-      class="chart-box"
-    >
       <div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title"  v-show="!item.isHide" class="chart">
         <lineChars
           v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4"
@@ -212,19 +209,9 @@
                           // 将秒改为毫秒
                           //alert('table=='+JSON.stringify(queryItem))
                           seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                            /*曲线汇总暂不需要
-                            if (sumData.data[dpsIndex]) {
-                              const sumNum = sumData.data[dpsIndex][1] || 0;
-                              sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                            } else {
-                              sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                            }
-                            */
                             let t_date = new Date(dpsItem[0] * 1000);
                             let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
                             tableData.push({//表格数据
-                              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
-                              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
                               element: {element: host, alias: alias},
                               time: timeTmp,//采集时间
                               value: dpsItem[1],//数值
@@ -232,18 +219,6 @@
                             return [dpsItem[0] * 1000, dpsItem[1]];
                           });
                           series.push(seriesItem.theData);
-
-                        } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                          // 无数据提示
-                          /*
-                          const currentInfo = chartItem.elements[innerPos];
-                          const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                          this.$message.warning({
-                            duration: 15,
-                            content: errorMsg,
-                            closable: true,
-                          });
-                          */
                         }
                       });
                     }
@@ -570,14 +545,6 @@
                               // 将秒改为毫秒
                               //alert('table=='+JSON.stringify(queryItem))
                               seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
-                                /*曲线汇总暂不需要
-                                if (sumData.data[dpsIndex]) {
-                                  const sumNum = sumData.data[dpsIndex][1] || 0;
-                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
-                                } else {
-                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
-                                }
-                                */
                                 let t_date = new Date(dpsItem[0] * 1000);
                                 let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
                                 tableData.push({//表格数据
@@ -591,17 +558,6 @@
                               });
                               series.push(seriesItem.theData);
 
-                            } else if (chartItem.elements && chartItem.elements[innerPos]) {
-                              // 无数据提示
-                              /*
-                              const currentInfo = chartItem.elements[innerPos];
-                              const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
-                              this.$message.warning({
-                                duration: 15,
-                                content: errorMsg,
-                                closable: true,
-                              });
-                              */
                             }
                           });
                         }

nezha-fronted/src/components/common/rightBox/accountBox.vue

@@ -16,7 +16,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form right-box-form-left" :model="editUser" :rules="rules" ref="accountForm" label-position="right" label-width="120px">
         <!--username-->
         <el-form-item :label="$t('config.account.account')" prop="username">
@@ -66,7 +66,7 @@
           <span @click="removeNotification(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -9,7 +9,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box" style="overflow: hidden">
+    <div class="right-box-form-box" style="overflow: hidden">
       <el-form class="right-box-form right-box-form-left" label-position="right" ref="addEndpoint" :model="endpoint" :rules="rules">
         <!--project-->
         <el-form-item :label='$t("project.project.project")' prop="projectId" class="select-warp">
@@ -71,7 +71,7 @@
 
             <!-- begin--table-->
             <div class="endpoint-sub-table" v-loading="assetLoading">
-              <el-scrollbar style="height: 100%; width: 100%;" ref="assetScrollbar">
+              <div ref="assetScrollbar" style="overflow: auto; height: 100%; width: 100%;">
                 <div class="endpoint-sub-table-head">
                   <div @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
                   <div class="endpoint-sub-table-col" style="width: 15px;position: relative">
@@ -123,7 +123,7 @@
                     </el-popover>
                   </div>
                 </div>
-              </el-scrollbar>
+              </div>
             </div>
             <div class="line-100" style="border-color:#dcdfe6"></div>
             <div>
@@ -173,7 +173,6 @@
                 :data="endpointList"
                 ref="endpointTable"
                 style="width: 100%;border-radius: 4px;"
-                v-scrollBar:el-table
                 height="calc(100% - 36px)"
                 :row-class-name="setRowIndex"
                 empty-text=" ">
@@ -288,7 +287,7 @@
         </div>
       </el-form>
 
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
@@ -580,7 +579,6 @@
             break;
           }
         }
-        this.$refs.assetScrollbar.update();
       },
 
       /*获取project列表*/
@@ -672,9 +670,6 @@
               }
             }
             this.assetList = response.data.list;
-            this.$nextTick(() => {
-              this.$refs.assetScrollbar.update();
-            });
           }
         }).finally(() => {
           setTimeout(() => {
@@ -790,7 +785,6 @@
           return !flag
         });
         this.endpointList=this.endpointList.concat(arr);
-        this.$refs.assetScrollbar.update();
       },
       //全选的checkbox的事件
       assetListSelAll(flag){

nezha-fronted/src/components/common/rightBox/alertConfigBox.vue

@@ -14,7 +14,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form right-box-form-left" :model="editAlertRule" label-position="right" label-width="120px" :rules="rules" ref="alertRuleForm">
         <!--alertName-->
         <el-form-item :label='$t("alert.config.name")' prop="alertName">
@@ -103,7 +103,7 @@
           <el-input maxlength="512" rows="4" show-word-limit type="textarea" placeholder="" v-model="editAlertRule.description" size="small"></el-input>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
     <!-- end--表单-->
 
     <!--底部按钮-->

nezha-fronted/src/components/common/rightBox/assetBox.vue

@@ -11,7 +11,7 @@
 
     <div class="right-box-title">{{editAsset.id ? ($t("asset.editAsset") + "  ID：" + editAsset.id) : $t("asset.createAsset")}}</div>
 
-    <el-scrollbar class="right-box-form-box" ref="scrollbar">
+    <div class="right-box-form-box">
       <el-form ref="assetEditForm" :model="editAsset" label-width="120px" class="right-box-form right-box-form-left" :rules="rules">
         <el-form-item :label="$t('asset.sn')" prop="sn">
           <el-input size="small" v-model="editAsset.sn"/>
@@ -99,7 +99,7 @@
               <div>Value</div>
               <div>Action</div>
             </div>
-            <el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
+            <div style="height: calc(100% - 32px); overflow: auto">
               <div class="tag-edit-box-body" v-for="(item, index) in editAsset.tags">
                 <el-form-item class="tag-edit tag-edit-tag" :rules="{required: true, message: $t('validate.required'), trigger: 'change'}" :prop="'tags.' + index + '.tag'">
                   <el-autocomplete placeholder="tag" size="mini" v-model="item.tag" :fetch-suggestions="filterKey" @blur="loadValues(item)" @select="loadValues" popper-class="no-style-class"></el-autocomplete>
@@ -109,7 +109,7 @@
                 </el-form-item>
                 <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></div>
               </div>
-            </el-scrollbar>
+            </div>
           </div>
         </el-form-item>
 
@@ -147,7 +147,7 @@
           </el-form-item>
         </template>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
@@ -386,9 +386,6 @@
       addTag() {
         !this.editAsset.tags && (this.$set(this.editAsset, "tags", []));
         this.editAsset.tags.push({tag: "", value: ""});
-        this.$nextTick(() => {
-          this.$refs.tagEditBoxScrollbar.update();
-        });
       },
       addAccount(type) {
         if (type == "SSH") {
@@ -435,10 +432,6 @@
         }
         this.accountType = type;
         this.showAccountOp = false;
-        this.$nextTick(() => {
-          let sbWrap = this.$refs.scrollbar.$refs.wrap;
-          sbWrap.scrollTop = sbWrap.scrollHeight;
-        });
       },
       removeAccount(index) {
         this.editAsset.accounts.splice(index, 1);
@@ -450,9 +443,6 @@
       },
       removeTag(index) {
         this.editAsset.tags.splice(index, 1);
-        this.$nextTick(() => {
-          this.$refs.tagEditBoxScrollbar.update();
-        });
       },
       setLocationData(data) {
         this.locationInfo = data;
@@ -562,10 +552,6 @@
       },
       changeProtocolType(type) {
         this.accountType = type;
-        this.$nextTick(() => {
-          let sbWrap = this.$refs.scrollbar.$refs.wrap;
-          sbWrap.scrollTop = sbWrap.scrollHeight;
-        });
       },
       save() {
         if(this.locationInfo) {

nezha-fronted/src/components/common/rightBox/batchEditAsset.vue

@@ -11,7 +11,7 @@
 
     <div class="right-box-title">{{$t("asset.batchEditAsset")}}</div>
 
-    <el-scrollbar class="right-box-form-box" ref="scrollbar">
+    <div class="right-box-form-box" ref="scrollbar">
       <el-form ref="assetEditForm" :model="editAsset" label-width="120px" class="right-box-form right-box-form-left"
                :rules="rules">
         <!--assets-->
@@ -21,7 +21,7 @@
             <div class="right-child-box-title">{{$t('asset.asset')}}</div>
             <!--end--标题-->
             <!--begin--搜索框-->
-            <div style="float: right;padding: 9px 9px 0px 0px;">
+            <div style="float: right;padding: 9px 9px 0 0;">
               <div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light endpoint-asset-search"
                    style="margin: 0">
                 <button id="search-asset-drop" type="button"
@@ -65,7 +65,7 @@
               </div>
               <div class="line-100"></div>
               <div class="endpoint-sub-table-body">
-                <el-scrollbar style="height: 100%" ref="assetScrollbar">
+                <div ref="assetScrollbar" style="height: 100%; overflow: auto;">
                   <div :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row"
                        :id="'select-asset-'+item.id">
                     <div class="endpoint-sub-table-col" style="width: 15px;">
@@ -77,7 +77,7 @@
                       </div>
                     </el-popover>
                   </div>
-                </el-scrollbar>
+                </div>
               </div>
             </div>
             <div class="line-100" style="border-color:#dcdfe6"></div>
@@ -102,7 +102,6 @@
                 :data="assetSelList"
                 ref="endpointTable"
                 style="width: 100%;border-radius: 4px;"
-                v-scrollBar:el-table
                 height="calc(100% - 36px)"
                 :row-class-name="setRowIndex"
                 empty-text=" ">
@@ -183,7 +182,7 @@
               <div>Value</div>
               <div>Action</div>
             </div>
-            <el-scrollbar ref="tagEditBoxScrollbar" style="height: calc(100% - 32px);">
+            <div ref="tagEditBoxScrollbar" style="height: calc(100% - 32px); overflow: auto;">
               <div class="tag-edit-box-body" v-for="(item, index) in editAsset.tags">
                 <el-form-item class="tag-edit tag-edit-tag"
                               :rules="{required: true, message: $t('validate.required'), trigger: 'change'}"
@@ -201,7 +200,7 @@
                 <div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i
                   class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></div>
               </div>
-            </el-scrollbar>
+            </div>
           </div>
         </el-form-item>
 
@@ -244,7 +243,7 @@
                             @setValidateResult="setAccountValidResult"
                             @protocol-type-change="protocolTypeChange"></account-config-box>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
@@ -495,7 +494,6 @@
           return !flag
         });
         this.assetSelList=this.assetSelList.concat(arr);
-        this.$refs.assetScrollbar.update();
       },
       assetListSelAll(flag){
         if(flag){
@@ -538,15 +536,11 @@
             break;
           }
         }
-        this.$refs.assetScrollbar.update();
       },
       //组织符合cascader的数据格式
       addTag(){
         !this.editAsset.tags&&(this.$set(this.editAsset,"tags",[]));
         this.editAsset.tags.push({tag:"",value:""});
-        this.$nextTick(()=>{
-          this.$refs.tagEditBoxScrollbar.update();
-        });
       },
       addAccount(type){
         if(type=="SSH"){
@@ -608,9 +602,6 @@
       },
       removeTag(index){
         this.editAsset.tags.splice(index,1);
-        this.$nextTick(()=>{
-          this.$refs.tagEditBoxScrollbar.update();
-        });
       },
       getUserData(){
         return new Promise(resolve=>{

nezha-fronted/src/components/common/rightBox/cabinetBox.vue

@@ -14,7 +14,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form right-box-form-left" label-width="120px" label-position="right" :model="editCabinet" ref="cabinetForm" :rules="rules">
         <el-form-item :label="$t('overall.name')" prop="name">
           <el-input size='mini' v-model="editCabinet.name"/>
@@ -29,7 +29,7 @@
           <el-input size='mini' v-model="editCabinet.remark" type="textarea" :rows="2"/>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/dcBox.vue

@@ -14,7 +14,7 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
+      <div class="right-box-form-box">
         <el-form class="right-box-form right-box-form-left" label-width="120px" :model="editDc" label-position="right" :rules="rules" ref="dcForm">
           <el-form-item :label='$t("overall.name")' prop="name">
             <el-input placeholder="" maxlength="64" show-word-limit v-model="editDc.name" size="small"></el-input>
@@ -75,7 +75,7 @@
             />
           </el-form-item>
         </el-form>
-      </el-scrollbar>
+      </div>
 
       <!--底部按钮-->
       <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/editEndpointBox.vue

@@ -14,7 +14,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form  right-box-form-left" :model="editEndpoint" label-position="right" label-width="120px" :rules="rules" ref="endpointForm">
         <!--project-->
         <el-form-item :label="$t('project.project.project')" prop="project.id">
@@ -71,7 +71,7 @@
             </span>
           </div>
           <div class="param-box param-box-module">
-            <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
+            <div style="height: 100%; overflow: auto">
               <div class="param-box-row" v-for="(item, index) in editEndpoint.paramObj">
                 <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -82,7 +82,7 @@
                 </el-form-item>
                 <span class="param-box-row-symbol" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color: #666666"></i></span>
               </div>
-            </el-scrollbar>
+            </div>
           </div>
         </el-form-item>
         <!--label-->
@@ -99,7 +99,7 @@
           </div>
 
           <div class="param-box param-box-module">
-            <el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
+            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
               <div class="param-box-row" v-for="(item, index) in editEndpoint.labelModule">
                 <el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -110,7 +110,7 @@
                 </el-form-item>
                 <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
               </div>
-            </el-scrollbar>
+            </div>
           </div>
         </el-form-item>
         <!--enable-->
@@ -118,7 +118,7 @@
           <el-switch v-model.number="editEndpoint.enabled" active-color="#ee9d3f" :active-value="1" :inactive-value="0"></el-switch>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!-- end--表单-->
 
@@ -192,25 +192,16 @@
       // 清除param
       clearAllParam() {
         this.editEndpoint.paramObj = [];
-        this.$nextTick(() => {
-          this.$refs.paramBoxScrollbar.update();
-        });
       },
 
       // 新增param
       addParam() {
         this.editEndpoint.paramObj.push({key: '', value: ''});
-        this.$nextTick(() => {
-          this.$refs.paramBoxScrollbar.update();
-        });
       },
 
       // 移除单个param
       removeParam(index) {
         this.editEndpoint.paramObj.splice(index, 1);
-        this.$nextTick(() => {
-          this.$refs.paramBoxScrollbar.update();
-        });
       },
 
       //将param转为json字符串格式
@@ -230,16 +221,10 @@
       // 新增label
       addLabel() {
         this.editEndpoint.labelModule.push({key: '', value: ''});
-        this.$nextTick(() => {
-          this.$refs.labelBoxScrollbar.update();
-        });
       },
       // 移除单个Label
       removeLabel(index) {
         this.editEndpoint.labelModule.splice(index, 1);
-        this.$nextTick(() => {
-          this.$refs.labelBoxScrollbar.update();
-        });
       },
 
       //将labels转为json字符串格式

nezha-fronted/src/components/common/rightBox/locationCascader.vue

@@ -8,7 +8,7 @@
     <div class="dropdown" :class="{'dropdown-active':dropDownVisible == true}" >
       <div class="container">
         <div class="container-item">
-          <el-scrollbar style="height: 100%;">
+          <div style="height: 100%; overflow: auto;">
             <ul v-if="idcInfos&& idcInfos.length>0">
               <li v-for="(item,index) in idcInfos" :key="item.id+'-'+index" @click="loadCabinetInfos(item)">
                 <div class="container-item-content">
@@ -18,10 +18,10 @@
               </li>
             </ul>
             <div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
-          </el-scrollbar>
+          </div>
         </div>
         <div class="container-item" v-show="isShowCabinet || selectedData.cabinet">
-          <el-scrollbar style="height: 100%;">
+          <div style="height: 100%; overflow: auto;">
             <ul v-if="showCabinetInfos&& showCabinetInfos.length>0">
               <li v-for="(item,index) in showCabinetInfos" :key="item.id+'-'+index" @click="loadCabinetUInfos(item)">
                 <div class="container-item-content">
@@ -31,14 +31,14 @@
               </li>
             </ul>
             <div v-else class="dropdown-empty">{{$t('overall.noData')}}</div>
-          </el-scrollbar>
+          </div>
         </div>
         <div class="container-item" v-show="isShowCabinetU || uChecked.length>0" style="border-right: unset">
-          <el-scrollbar style="height: 100%">
+          <div style="height: 100%; overflow: auto;">
             <el-checkbox-group v-model="uChecked" v-if="refresh" @change="uChange">
               <el-checkbox v-for="(item,index) in showUInfos" :key="index" :label="item.label" :value="item.value" :disabled="item.occupy==true" :checked="item.occupy==true||item.checked==true" :ref="'u-'+selectedData.idc.id+'-'+selectedData.cabinet.id+'-'+item.value" style="width: 50%"></el-checkbox>
             </el-checkbox-group>
-          </el-scrollbar>
+          </div>
         </div>
       </div>
     </div>

nezha-fronted/src/components/common/rightBox/menuBox.vue

@@ -16,7 +16,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form :model="editMenu" :rules="rules" class="right-box-form right-box-form-left" label-position="right" label-width="130px" ref="menuForm" size="small">
         <el-form-item :label="$t('config.menus.parent')" prop="parentId">
           <tree-select :multiple="false" :options="menus" label="id" noChildrenText="" noOptionsText="" placeholder="" v-model="editMenu.parentId"></tree-select>
@@ -60,7 +60,7 @@
           <span @click="removePermission(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/mibBox.vue

@@ -14,7 +14,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form  right-box-form-left" :model="editMib" label-position="right" label-width="120px" :rules="rules" ref="mibForm">
         <el-form-item :label='$t("config.mib.models")' prop="models" :rules="[{validator:checkModels,trigger:'change'}]" >
           <el-cascader
@@ -44,7 +44,7 @@
           </el-upload>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/modelBox.vue

@@ -14,7 +14,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form right-box-form-left" :model="editModel" label-position="right" label-width="120px"  :rules="rules" ref="modelForm">
         <!--model名称-->
         <el-form-item :label='$t("overall.name")' prop="name">
@@ -69,7 +69,7 @@
           <el-input v-model.number="editModel.usize" :max="47" size="small"></el-input>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/moduleBox.vue

@@ -14,7 +14,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box" ref="scrollbar">
+    <div class="right-box-form-box" ref="scrollbar">
       <el-form class="right-box-form right-box-form-left" :model="editModule" label-position="right" label-width="120px" :rules="rules" ref="moduleForm">
         <el-form-item :label='$t("project.project.project")' prop="project">
           <el-select value-key="id" popper-class="config-dropdown" v-model="editModule.project" placeholder="" size="small">
@@ -52,14 +52,14 @@
                         <input type="text" readonly="readonly" autocomplete="off" class="el-input__inner" aria-expanded="false">
                       </div>
                       <div class="el-cascader__tags">
-                        <el-scrollbar style="height: 100%;" ref="walkScrollbar">
+                        <div ref="walkScrollbar" style="height: 100%; overflow: auto;">
                           <span class="el-tag el-tag--info el-tag--small el-tag--light" v-for="item in editModule.walk">
                             <span v-html="mibName(item)"></span>
                             <div class="walk-close-box" @click.stop="removeWalk(item)">
                               <i class="el-tag__close nz-icon nz-icon-close walk-close"></i>
                             </div>
                           </span>
-                        </el-scrollbar>
+                        </div>
                       </div>
                     </div>
                   </template>
@@ -154,7 +154,7 @@
               </el-col>
               <el-col :span="18">
                 <el-form-item prop="security_level">
-                  <el-radio-group v-model="editModule.security_level" size="small" @change="updateScrollbar">
+                  <el-radio-group size="small" v-model="editModule.security_level">
                     <el-radio-button label="noAuthNoPriv"></el-radio-button>
                     <el-radio-button label="authNoPriv"></el-radio-button>
                     <el-radio-button label="authPriv"></el-radio-button>
@@ -253,7 +253,7 @@
           </div>
 
           <div class="param-box param-box-module">
-            <el-scrollbar ref="paramBoxScrollbar" style="height: 100%">
+            <div style="height: 100%; overflow: auto;">
               <div class="param-box-row" v-for="(item, index) in editModule.paramObj">
                 <el-form-item class="param-box-row-key" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'paramObj.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -264,7 +264,7 @@
                 </el-form-item>
                 <span class="param-box-row-symbol" :id="'moduel-remove-param-'+index" @click="removeParam(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
               </div>
-            </el-scrollbar>
+            </div>
           </div>
         </el-form-item>
 
@@ -281,7 +281,7 @@
           </div>
 
           <div class="param-box param-box-module">
-            <el-scrollbar ref="labelBoxScrollbar" style="height: 100%">
+            <div ref="labelBoxScrollbar" style="height: 100%; overflow: auto;">
               <div class="param-box-row" v-for="(item, index) in editModule.labelModule">
                 <el-form-item class="param-box-row-key" :rules="[{required: true, message: $t('validate.required'), trigger: 'blur'},{ pattern: /[a-zA-Z_:][a-zA-Z0-9_:]*/, message: $t('validate.key') ,trigger: 'blur'}]" :prop="'labelModule.' + index + '.key'">
                   <el-input placeholder="key" size="mini" v-model="item.key"></el-input>
@@ -292,7 +292,7 @@
                 </el-form-item>
                 <span class="param-box-row-symbol" :id="'moduel-remove-label-'+index" @click="removeLabel(index)"><i class="nz-icon nz-icon-shanchu1" style="color:#666;"></i></span>
               </div>
-            </el-scrollbar>
+            </div>
           </div>
         </el-form-item>
 
@@ -301,7 +301,7 @@
         </el-form-item>
 
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
@@ -373,8 +373,6 @@
         } else {
           this.editModule.walk.push(walk);
         }
-
-        this.$refs.walkScrollbar.update();
       },
       //从mibData里取得oid对应的mib名称
       getMibName(walkData, walk) {
@@ -476,7 +474,6 @@
           })
           this.editModule.port= 161;
         }
-        this.updateScrollbar();
       },
       //转化snmpParam属性
       parseSnmpParam(module) {
@@ -605,38 +602,23 @@
       // 清除param
       clearAllParam() {
         this.editModule.paramObj = [];
-        this.$nextTick(() => {
-          this.$refs.paramBoxScrollbar.update();
-        });
       },
 
       // 新增param
       addParam() {
         this.editModule.paramObj.push({key: '', value: ''});
-        this.$nextTick(() => {
-          this.$refs.paramBoxScrollbar.update();
-        });
       },
       // 移除单个param
       removeParam(index) {
         this.editModule.paramObj.splice(index, 1);
-        this.$nextTick(() => {
-          this.$refs.paramBoxScrollbar.update();
-        });
       },
       // 新增label
       addLabel() {
         this.editModule.labelModule.push({key: '', value: ''});
-        this.$nextTick(() => {
-          this.$refs.labelBoxScrollbar.update();
-        });
       },
       // 移除单个Label
       removeLabel(index) {
         this.editModule.labelModule.splice(index, 1);
-        this.$nextTick(() => {
-          this.$refs.labelBoxScrollbar.update();
-        });
       },
       //将param转为json字符串格式
       paramToJson(param) {
@@ -664,9 +646,6 @@
           return jsonString;
         }
       },
-      updateScrollbar() {
-        this.$refs.scrollbar.update();
-      }
     },
     mounted() {
       this.getWalkData();

nezha-fronted/src/components/common/rightBox/panelBox.vue

@@ -15,13 +15,13 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box">
+      <div class="right-box-form-box">
         <el-form class="right-box-form right-box-form-left" label-width="120px"  :model="panel" label-position="right" ref="panelForm">
           <el-form-item :label='$t("overall.name")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
             <el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small" ></el-input>
           </el-form-item>
         </el-form>
-      </el-scrollbar>
+      </div>
       <!-- end--表单-->
 
       <!-- begin--底部按钮-->

nezha-fronted/src/components/common/rightBox/projectBox.vue

@@ -12,7 +12,7 @@
     <!-- begin--标题-->
     <div class="right-box-title">{{editProject.id ? $t("project.project.editProject") + "  ID：" + editProject.id : $t("overall.createProject")}}</div>
     <!-- end--标题-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form right-box-form-left" :model="editProject" label-position="right" label-width="120px" :rules="rules" ref="projectForm">
         <el-form-item :label='$t("project.project.projectName")' prop="name">
           <el-input size="mini" maxlength="64" show-word-limit v-model="editProject.name"></el-input>
@@ -21,7 +21,7 @@
           <el-input size="mini" type="textarea" maxlength="1024" show-word-limit v-model="editProject.remark"></el-input>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/promServerBox.vue

@@ -16,7 +16,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form right-box-form-left" :model="editPromServer" label-position="right" label-width="120px" :rules="rules" ref="promServerForm">
         <!--DC-->
         <el-form-item :label="$t('config.dc.dc')" prop="idc.name">
@@ -49,7 +49,7 @@
             clearable></el-cascader>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/roleBox.vue

@@ -3,7 +3,7 @@
     <!-- begin--顶部按钮-->
     <div class="right-box-top-btns right-box-form-delete">
       <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien" id="roles-edit-del"
-              type="button" v-has="'rule_delete'"
+              type="button" v-has="'role_delete'"
               v-if="editRole.id && !detail">
         <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
         <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
@@ -16,7 +16,7 @@
     <!-- end--标题-->
 
     <!-- begin--表单-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form :disabled="detail" :model="editRole" :rules="rules" class="right-box-form right-box-form-left" label-position="right" label-width="120px" ref="roleForm">
         <!--name-->
         <el-form-item :label="$t('config.roles.name')" prop="name">
@@ -43,7 +43,7 @@
           </el-tree>
         </el-form-item>
       </el-form>
-    </el-scrollbar>
+    </div>
     <!-- end--表单-->
     <!--底部按钮-->
     <div class="right-box-bottom-btns" v-if="!detail">
@@ -51,7 +51,7 @@
               id="roles-esc">
         <span>{{$t('overall.cancel')}}</span>
       </button>
-      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-has="'rule_save'"
+      <button @click="save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-has="'role_save'"
               id="roles-save">
         <span>{{$t('overall.save')}}</span>
       </button>

nezha-fronted/src/components/common/rightBox/trafficSetting/subBox.vue

@@ -2,7 +2,7 @@
   <transition name="right-sub-box">
     <div class="right-sub-box sub-box" v-if="editTagsBox.show" :style="'top: ' + editTagsBox.top + 'px; left: ' + editTagsBox.left + 'px;'" >
       <div class="param-box" style="height: calc(100% - 25px)">
-        <el-scrollbar style="height: 100%">
+        <div style="height: 100%; overflow: auto;">
           <div class="param-box-row" v-for="(item, index) in tempTagsObj" :key="index">
             <el-input placeholder="key" class="param-box-row-key input-x-mini-22" v-model="item.key" @input="validateInput(item.key,index)" :class="{'input-error':inputKeyErr[index]}"></el-input>
             <span class="param-box-row-eq">=</span>
@@ -10,7 +10,7 @@
             <span class="param-box-row-symbol" :id="'remove-param-'+index" @click="removeTags(index)"><i class="nz-icon nz-icon-shanchu1"></i></span>
             <span style="color: #F56C6C;font-size: 12px;" v-if="inputKeyErr[index]">{{$t('validate.key')}}</span>
           </div>
-        </el-scrollbar>
+        </div>
       </div>
       <div class="add-btn">
         <el-button @click="addTags" id="add-param" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="nz-icon nz-icon-plus"></i></el-button>

nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingBox.vue

@@ -4,7 +4,7 @@
     <!-- begin--标题-->
     <div class="right-box-title">{{$t('config.dc.traffic.title')}}</div>
     <!-- end--标题-->
-    <el-scrollbar class="right-box-form-box">
+    <div class="right-box-form-box">
       <el-form class="right-box-form" :model="traffic" label-width="100px" label-position="left" ref="trafficForm">
         <el-form-item :label="$t('config.dc.dc')" size="small">
           <el-input :disabled="true" v-model="dc.name"></el-input>
@@ -12,7 +12,7 @@
         <traffic-setting-tab ref="trafficSetting" :post-asset-list="assetList" v-for="(item,index) in traffic.setting" :index="index" :asset-setting="item" :key="uuids[index]" :id="uuids[index]" @delSelf="delAssetSetting" :validate-repeat-func="valiateRepeatFunc"></traffic-setting-tab>
         <button type="button" @click="addAssetSetting" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" style="margin:5px 1px 5px 70px">{{$t('config.dc.traffic.add')}}</button>
       </el-form>
-    </el-scrollbar>
+    </div>
 
     <!--底部按钮-->
     <div class="right-box-bottom-btns">

nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue

@@ -122,7 +122,6 @@
       <div class="endpoints-box-endpoints" style="border: 1px solid #E7EAED;border-radius: 2px;padding-bottom: 10px">
         <el-table :data="assetSetting.configs"
                   tooltip-effect="light"
-                  v-scrollBar:el-table="'large'"
                   max-height="300"
                   height="200"
                   :row-class-name="assetSetting.host == null?'not-allowed':''"

nezha-fronted/src/components/common/searchInput.vue

@@ -163,7 +163,7 @@
             <div v-show="clearSearchShow" class="clear-search" @click="clear_input">
                 <i class="nz-icon nz-icon-circle-close"></i>
             </div>
-            <div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top" @click="stop_click" id="input_list" v-scroll-bar>
+            <div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top" @click="stop_click" id="input_list">
                 <ul>
                     <li v-for="(val,ind) in searchLabelList" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled,val.readonly,$event)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
                         <span>{{val.name}}</span>

nezha-fronted/src/components/common/timePicker.vue

@@ -79,7 +79,7 @@
             class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
       <i style="font-size: 12px" class="el-icon-arrow-right"></i>
     </button>-->
-    <el-dropdown @command="timeChange" ref="timePickerDropdown"   class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
+    <el-dropdown @command="timeChange" @visible-change="popoverClick"   class="calendar-dropdown-title" ref="timePickerDropdown" trigger="click">
       <el-popover
         placement="bottom-end"
         min-width="120px"
@@ -117,11 +117,6 @@
 
       </el-dropdown-menu>
     </el-dropdown>
-    <!--
-    <button type="button" style="border-radius: 1px 1px 1px 1px" @click="left()" v-show="isCustom"
-            class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-left-button" >
-      <i style="font-size: 12px" class="el-icon-arrow-left"></i>
-    </button>-->
   </div>
 </template>
 

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

@@ -71,7 +71,6 @@
         ref="alertRuleTable"
         tooltip-effect="light"
         :height="mainTableHeight"
-        v-scrollBar:el-table="'large'"
         v-loading="tools.loading"
         :cell-class-name="messageStyle"
         style="width: 100%;"
@@ -131,7 +130,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
       <div class="pagination-bottom" v-show="!bottomBox.showSubList">
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
@@ -290,6 +289,7 @@
         viewModuleData: {},
         viewAsset: false,
         searchTime: bus.getTimezontDateRange(),
+        scrollWrap: null,
       }
     },
     methods: {
@@ -372,6 +372,12 @@
             });
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.alertRuleTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -518,15 +524,6 @@
           this.getTableData();
         })
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
     },
     watch: {
       'bottomBox.showSubList': function(n) {
@@ -540,10 +537,11 @@
         }
       },
     },
-    destroyed() {
+    beforeDestroy() {
       bus.$off("alert-rule-list-change");
       bus.$off("dc-list-change");
-      bus.$off('alert-message-change')
+      bus.$off('alert-message-change');
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
     },
     created(){
       //是否存在分页缓存
@@ -561,20 +559,6 @@
       this.initEvent();
 
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
-    beforeDestroy(){
-      let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

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

@@ -758,25 +758,6 @@
       }
 
       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 > 50) {
-      //         this.tools.showTopBtn = true;
-      //       } else {
-      //         this.tools.showTopBtn = false;
-      //       }
-      //     });
-      //     el.addEventListener("mouseenter", () => {
-      //       this.tools.tableHover = true;
-      //     });
-      //     el.addEventListener("mouseleave", () => {
-      //       this.tools.tableHover = false;
-      //     });
-      //   }
-      // });
     }
   }
 </script>

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

@@ -40,7 +40,6 @@
         :height="mainTableHeight"
         style="width: 100%;position: relative;z-index: 99"
         :data="tableData"
-        v-scrollBar:el-table="'large'"
         v-show="bottomBox.mainResizeShow"
         border
         v-loading="tools.loading"
@@ -49,7 +48,6 @@
         @sort-change="tableDataSort"
         @row-dblclick="detail"
         @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
-        @scroll="plpsscrolly"
       >
         <el-table-column
           :resizable="false"
@@ -175,7 +173,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
       <div class="pagination-bottom" v-show="!bottomBox.showSubList">
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
@@ -393,6 +391,8 @@
 
         assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
         tagKeys:[],
+
+        scrollWrap: null
       }
     },
     computed:{
@@ -482,6 +482,13 @@
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total;
             bus.$emit('asset-property-change');
+
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.assetTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         });
 
@@ -713,7 +720,7 @@
         });
         bus.$on('alert-message-change',()=>{
           this.getTableData()
-        })
+        });
       },
       dispatchEvent(event,param){
         this.$nextTick(()=>{
@@ -759,27 +766,6 @@
           }
         }
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
-      domResize(){
-        let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
-        el._ps_.update();
-      },
-      // plmouseenter(el,self){
-      //   console.log(123123123123)
-      //   self.tools.tableHover = true;
-      // },
-      // plmouseleave(el,self){
-      //   console.log(123123123123)
-      //   self.tools.tableHover = false;
-      // }
     },
     created(){
       //是否存在分页缓存
@@ -820,8 +806,6 @@
 
       this.loadKeys();
 
-      //console.log('load end')
-
       //初始化数据
       this.getUserData();
 
@@ -834,30 +818,11 @@
         this.pageObj.pageSize = pageSize
       }
       this.initEvent();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-          // el.addEventListener("mouseenter",  this.plmouseenter.bind('',el,this));
-          // el.addEventListener("mouseleave", this.plmouseleave.bind('',el,this));
-        }
-        //resize时刷新左侧列表滚动条
-        let vm = this;
-        window.addEventListener('resize', this.domResize);
-      });
     },
-    beforeDestroy(){
+    beforeDestroy() {
-      window.removeEventListener('resize', this.domResize);
-      let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    },
-    destroyed() {
       bus.$off("asset-filter-change");
       bus.$off('alert-message-change');
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
     }
   }
 </script>

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

@@ -54,7 +54,6 @@
         ref="accountTable"
         :height="mainTableHeight"
         v-loading="tools.loading"
-        v-scrollBar:el-table="'large'"
         style="width: 100%;"
         @sort-change="tableDataSort"
         @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
@@ -128,7 +127,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
       <div class="pagination-bottom" v-show="!bottomBox.showSubList">
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
@@ -146,6 +145,7 @@
 <script>
   import deleteButton from "../../common/deleteButton";
   import accountBox from '../../common/rightBox/accountBox';
+  import bus from "../../../libs/bus";
 
   export default {
     name: "account",
@@ -248,6 +248,7 @@
           }],
         },
         searchLabel: {}, //搜索参数
+        scrollWrap: null,
       }
     },
     methods: {
@@ -315,16 +316,15 @@
           if (response.code === 200) {
             for (let i = 0; i < response.data.list.length; i++) {
               response.data.list[i].status = response.data.list[i].status + "";
-              /*response.data.list[i].notifications = [
-                {scriptId: 1, account: "杀死比尔"},
-                {scriptId: 2, account: "虎虎虎"},
-                {scriptId: 3, account: "红海行动"},
-                {scriptId: 4, account: "十面埋伏"},
-                {scriptId: 5, account: "哪吒"},
-              ];*/
             }
             this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.accountTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -383,16 +383,6 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = true;
-        }
-      },
-
       resetTableTitle:function(){
         let title = this.tools.customTableTitle;
         let tableTitle = title.slice(0, this.tableTitle.length);
@@ -432,6 +422,9 @@
         }
       }
     },
+    beforeDestroy() {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+    },
     computed: {
       isCurrentUser() {
         return function(username) {
@@ -467,20 +460,6 @@
 
       this.resetTableTitle();
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
-    beforeDestroy(){
-      let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

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

@@ -37,7 +37,6 @@
         border
         tooltip-effect="light"
         v-show="bottomBox.mainResizeShow"
-        v-scrollBar:el-table="'large'"
         :height="mainTableHeight"
         ref="dcTable"
         v-loading="tools.loading"
@@ -125,7 +124,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
       <div class="pagination-bottom" v-show="!bottomBox.showSubList">
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
@@ -268,6 +267,7 @@
         },
         searchLabel: {}, //搜索参数
         tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
+        scrollWrap: null,
       }
     },
     methods: {
@@ -403,7 +403,13 @@
           this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.dcTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -477,19 +483,6 @@
           this.getTableData();
         });
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 100) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
-      domResize(){
-        let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
-        el._ps_.update();
-      },
     },
     watch: {
       'bottomBox.dc': {
@@ -507,6 +500,7 @@
     },
     beforeDestroy(){
       bus.$off("dc-list-change");
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
     },
     created(){
       //是否存在分页缓存
@@ -525,23 +519,7 @@
         : this.tableTitle;
       this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
       this.getTableData();
-      this.$nextTick(function(){
-        this.getUserData();//绑定滚动条事件，控制top按钮
-        let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-          window.addEventListener('resize', this.domResize);
-        }
-      });
     },
-    beforeDestroy(){
-      let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        window.removeEventListener('resize', this.domResize);
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    }
   }
 </script>
 <style scoped>

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

@@ -46,7 +46,6 @@
         row-key="id"
         style="width: 100%;"
         v-loading="tools.loading"
-        v-scrollBar:el-table="'large'"
       >
         <el-table-column
           :resizable="false"
@@ -297,20 +296,6 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = true;
-        }
-      },
-
-    },
-    computed: {
-    },
-    watch: {
     },
     created(){
       //是否存在分页缓存
@@ -325,20 +310,6 @@
         ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
         : this.tableTitle;
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
-    beforeDestroy(){
-      let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

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

@@ -35,7 +35,7 @@
           ref="customTableTitle"
         ></element-set>
       </transition>
-      <el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="tools.loading" @sort-change="tableDataSort"
+      <el-table :data="tableData" :height="$tableHeight.normal" @sort-change="tableDataSort" border class="nz-table mib-table" ref="mibTable" style="width: 100%;" v-loading="tools.loading"
                 @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
       >
         <el-table-column
@@ -55,7 +55,7 @@
             </template>
             <template v-else-if="item.prop == 'modelsDetail' && scope.row['modelsDetail'] && scope.row['modelsDetail'].length >0" >
               <div style="height: 100%">
-                <el-scrollbar style="height: 100%">
+                <div style="height: 100%; overflow: auto;">
                   <div v-for="(n,i) in scope.row['modelsDetail']" :key="n.name+'-'+n.id+'-'+i" class="detail-item-content">
                     <el-popover trigger="hover" placement="top" >
                       <div>
@@ -78,7 +78,7 @@
                       </template>
                     </el-popover>
                   </div>
-                </el-scrollbar>
+                </div>
               </div>
             </template>
             <span v-else-if="item.prop == 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
@@ -101,7 +101,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
       <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
     </template>
     <mib-browser :show-tab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
@@ -204,6 +204,7 @@
           }],
         },
         searchLabel: {}, //搜索参数
+        scrollWrap: null,
       }
     },
     methods: {
@@ -261,7 +262,13 @@
           this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.mibTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -330,15 +337,6 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
     },
     created(){
       //是否存在分页缓存
@@ -355,20 +353,9 @@
       this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
 
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.mibTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
-    beforeDestroy(){
+    beforeDestroy() {
-      let el = this.$refs.mibTable.$el.querySelector(".el-table__body-wrapper");
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
     }
   }
 </script>

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

@@ -136,7 +136,7 @@
       <div class="mib-browser-left">
         <div class="mib-browser-tree-title">
           <span>SNMP MIBs</span>
-          <el-dropdown trigger="click" v-scrollBar:el-dropdown="'small'" :hide-on-click="false" @command="selectModel" ref="modelDropdown">
+          <el-dropdown :hide-on-click="false" @command="selectModel" ref="modelDropdown" trigger="click">
             <span class="mib-browser-table-op" @click="scrollbarHeightHandler">{{$t("config.model.model") + " "}}<i class="nz-icon nz-icon-funnel"></i></span>
             <el-dropdown-menu slot="dropdown" class="mib-browser-model-dropdown el-dropdown-multi">
               <el-dropdown-item :class="{'dropdown-item-active': walkParam.models.indexOf(item.id) > -1}" :command="item" v-for="item, index in modelData" :key="index">{{item.name}}</el-dropdown-item>
@@ -144,7 +144,7 @@
           </el-dropdown>
         </div>
         <!--tree-->
-        <el-scrollbar class="el-scrollbar-normal mib-browser-tree" ref="treeScrollbar">
+        <div class="mib-browser-tree" ref="treeScrollbar">
           <el-tree
             ref="walkTree"
             highlight-current
@@ -169,11 +169,11 @@
               {{data.name}}
             </div>
           </el-tree>
-        </el-scrollbar>
+        </div>
         <!--拖拽区-->
         <div class="tree-detail-resize" @mousedown="treeDetailResize"></div>
         <!--detail-->
-        <el-scrollbar class="el-scrollbar-normal mib-browser-detail" ref="detailScrollbar">
+        <div class="mib-browser-detail" ref="detailScrollbar">
           <div class="mib-browser-detail-row">
             <div>Name</div>
             <div>{{currentWalk.name}}</div>
@@ -206,7 +206,7 @@
             <div>Description</div>
             <div>{{currentWalk.description}}</div>
           </div>
-        </el-scrollbar>
+        </div>
       </div>
       <!--拖拽区-->
       <div class="left-right-resize" @mousedown="leftRightResize"></div>
@@ -220,7 +220,7 @@
           </span>
         </div>
         <pl-table :row-height="28" use-virtual :datas="resultData" border :empty-text="$t('config.mib.noData')" ref="resultTable"
-                  class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-if="showTable" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false">
+                  :pagination-show="false" class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-if="showTable" v-loading="loading">
           <pl-table-column label="Name/OID" v-slot="{row}">
             <div class="too-long-split" @click="searchParam.oid = row.oid">{{row.name ? row.name : row.oid}}</div>
           </pl-table-column>
@@ -328,28 +328,12 @@
       }
     },
     methods: {
-      scrollbarHeightHandler() {
-        setTimeout(() => {
-          let top = '';
-          document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", () => {
-            let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
-            if (top) {
-              yDom.style.top = top;
-            } else {
-              top = yDom.style.top;
-            }
-          });
-        }, 100);
-      },
       toFileTab() {
         this.$emit("toFileTab");
       },
       showDetail(data, node) {
         this.currentWalk = data;
         this.searchParam.oid = data.objectID;
-        this.$nextTick(() => {
-          this.$refs.detailScrollbar.update();
-        });
       },
 
       /*根据oid获取对应的根mib名称*/
@@ -379,9 +363,6 @@
             for (let item in obj) {
               this.walkData.push({name: item, subTree: obj[item]});
             }
-            this.$nextTick(() => {
-              this.$refs.treeScrollbar.update();
-            });
           }
         });
       },
@@ -428,10 +409,6 @@
           this.$post('mib/browser', this.searchParam).then(response => {
             this.loading = false;
             if (response.code === 200) {
-              let wrapper = document.querySelector(".el-table__body-wrapper");
-              if (wrapper._ps_) {
-                wrapper.scrollTop = wrapper._ps_.contentHeight;
-              }
               this.resultData = this.resultData.concat(response.data.list);
               if (this.searchParam.operation == 'set') {
                 this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
@@ -439,7 +416,6 @@
               this.showTable=false;
               this.$nextTick(()=>{
                 this.showTable=true;
-                // this.$refs['resultTable'].doLayout();
               })
             } else {
               this.$message.error(response.msg);
@@ -570,7 +546,6 @@
           }
         };
         document.onmouseup = () => {
-          this.$refs.treeScrollbar.update();
           document.onmousemove = null;
         }
       },

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

@@ -33,7 +33,6 @@
                 border style="width: 100%;"
                 ref="modelTable"
                 class="nz-table"
-                v-scrollBar:el-table="'large'"
                 v-loading="tools.loading"
                 :cell-class-name="assetStatClassName"
                 v-show="bottomBox.mainResizeShow"
@@ -89,7 +88,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
       <div class="pagination-bottom" v-show="!bottomBox.showSubList">
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
@@ -204,6 +203,7 @@
           }],
         },
         searchLabel: {}, //搜索参数
+        scrollWrap: null,
       }
     },
     methods: {
@@ -285,7 +285,13 @@
           this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.modelTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -330,15 +336,6 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
     },
     created(){
       //是否存在分页缓存
@@ -355,13 +352,6 @@
       this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
 
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
     watch: {
       'bottomBox.showSubList': function(n) {
@@ -369,12 +359,8 @@
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
     },
-    beforeDestroy(){
+    beforeDestroy() {
-      let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
     }
   }
 </script>

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

@@ -30,7 +30,6 @@
       ref="operationLogTable"
       :height="$tableHeight.normal"
       v-loading="tools.loading"
-      v-scrollBar:el-table="'large'"
       :cell-class-name="messageStyle"
       style="width: 100%;"
       @sort-change="tableDataSort"
@@ -61,7 +60,7 @@
         </template>
       </el-table-column>
     </el-table>
-    <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+    <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
     <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
   </div>
 </template>
@@ -193,6 +192,7 @@
           ],
         },
         searchLabel: {}, //搜索参数
+        scrollWrap: null,
       }
     },
     methods: {
@@ -214,7 +214,13 @@
           this.tools.loading = false;
           if (response.code === 200) {
             this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.operationLogTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -256,15 +262,6 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
     },
     watch:{
       tableData(){
@@ -273,6 +270,9 @@
         }
       },
     },
+    beforeDestroy() {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+    },
     computed: {
       isCurrentUser() {
         return function(username) {
@@ -294,20 +294,6 @@
         : this.tableTitle;
       this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.operationLogTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
-    beforeDestroy(){
-      let el = this.$refs.operationLogTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

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

@@ -31,8 +31,7 @@
         ></element-set>
       </transition>
       <el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
-                v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
+                @sort-change="tableDataSort" class="nz-table" ref="promTable" v-loading="tools.loading"
-                @sort-change="tableDataSort"
                 @selection-change="(selection)=>{this.batchDeleteObjs=selection}"
       >
         <el-table-column
@@ -83,7 +82,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i class="nz-icon nz-icon-top"></i></button>
       <div class="pagination-bottom" v-show="!bottomBox.showSubList">
         <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
       </div>
@@ -224,6 +223,7 @@
         },
         searchLabel: {}, //搜索参数
         promServerType:null,
+        scrollWrap: null,
       }
     },
     methods: {
@@ -326,7 +326,13 @@
               }
             }
             this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.promTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -396,15 +402,6 @@
           return item.value == type
         })
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
     },
     created(){
       //是否存在分页缓存
@@ -428,16 +425,9 @@
       if (pageSize != 'undefined' && pageSize != null) {
         this.pageObj.pageSize = pageSize
       }
-
+    },
-      this.$nextTick(() => {
+    beforeDestroy() {
-        //绑定滚动条事件，控制top按钮
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
-        let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-          /*el.addEventListener("mouseenter",  this.plmouseenter.bind('',el,this));
-          el.addEventListener("mouseleave", this.plmouseleave.bind('',el,this));*/
-        }
-      });
     },
 
     watch: {
@@ -452,14 +442,5 @@
         this.$bottomBoxWindow.showSubListWatch(vm, n);
       },
     },
-    beforeDestroy(){
-      let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-       /* el.removeEventListener("mouseenter",  this.plmouseenter.bind('',el,this));
-        el.removeEventListener("mouseleave", this.plmouseleave.bind('',el,this));*/
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

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

@@ -14,11 +14,11 @@
           <div class="top-tool-search">
             <search-input :searchMsg="searchMsg" @search="search" ref="searchInput" ></search-input>
           </div>
-          <button :title="$t('overall.createRoles')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" v-has="'rule_toAdd'"
+          <button :title="$t('overall.createRoles')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" v-has="'role_toAdd'"
                   id="roles-add" type="button">
             <i class="nz-icon-create-square nz-icon"></i>
           </button>
-          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/role" v-has="'rule_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/role" v-has="'role_delete'"></delete-button>
         </div>
         <!-- 顶部分页组件，当打开底部上滑框时出现 -->
         <div class="pagination-top pagination-top-hide display-none"></div>
@@ -43,7 +43,6 @@
         ref="rolesTable"
         style="width: 100%;"
         v-loading="tools.loading"
-        v-scrollBar:el-table="'large'"
       >
         <el-table-column
           :resizable="false"
@@ -68,9 +67,9 @@
           <template :column="item" slot-scope="scope">
             <div class="content-right-options" v-if="item.prop == 'option'">
               <template v-if="scope.row.buildIn != 1">
-                <span :id="'roles-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'rule_toEdit'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
+                <span :id="'roles-edit-'+scope.row.id" :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" v-has="'role_toEdit'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-edit"></i></span>
                 &nbsp;
-                <span :id="'roles-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'rule_delete'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span>
+                <span :id="'roles-del-'+scope.row.id" :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" v-has="'role_delete'"><i :class="{'gray-filter':scope.row.buildIn == 1}" class="nz-icon nz-icon-delete"></i></span>
               </template>
               <template v-else>
                 <span :id="'roles-detail-'+scope.row.id" :title="$t('overall.view')" @click="detail(scope.row)" class="content-right-option"><i class="nz-icon nz-icon-view"></i></span>
@@ -98,7 +97,7 @@
           </template>
         </el-table-column>
       </el-table>
-      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="$toTop('ps', 0)" class="to-top" v-show="tools.showTopBtn "><i class="nz-icon nz-icon-top"></i></button>
+      <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn "><i class="nz-icon nz-icon-top"></i></button>
     </div>
     <transition name="right-box">
       <role-box :detail="rightBox.detail" :role="role" @close="closeRightBox" v-if="rightBox.show"></role-box>
@@ -108,6 +107,7 @@
 <script>
   import deleteButton from "../../common/deleteButton";
   import roleBox from '../../common/rightBox/roleBox';
+  import bus from "../../../libs/bus";
 
   export default {
     name: "roles",
@@ -178,6 +178,7 @@
           }],
         },
         searchLabel: {}, //搜索参数
+        scrollWrap: null,
       }
     },
     methods: {
@@ -224,6 +225,12 @@
             this.tableData = response.data.list;
             this.pageObj.total = response.data.total
             this.tools.loading = false;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.rolesTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -278,20 +285,6 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = true;
-        }
-      },
-
-    },
-    computed: {
-    },
-    watch: {
     },
     created(){
       //是否存在分页缓存
@@ -300,26 +293,15 @@
         this.pageObj.pageSize = pageSize
       }
     },
+    beforeDestroy() {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
+    },
     mounted() {
       //初始化表头
       this.tools.customTableTitle = 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;
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
-    beforeDestroy(){
-      let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="system" v-scroll-bar>
+  <div class="system">
     <el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" >
       <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
         <div class="system-config-form basicForm">
@@ -196,8 +196,7 @@
             </el-form>
           </div>
           <!--notificationEdit-->
-          <div  class="scrollBox"
+          <div class="scrollBox">
-                v-scrollBar>
             <draggable v-model="notification"
                        :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
                        @change="change"
@@ -264,8 +263,7 @@
             </el-form>
           </div>
           <!--linkEdit-->
-          <div  class="scrollBox"
+          <div class="scrollBox">
-                v-scrollBar>
             <draggable v-model="link"
                        :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chosenClass:'chosenClass',scroll:true,scrollSensitivity:200}"
                        @change="change"

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

@@ -29,7 +29,6 @@
       border
       ref="terminalLogTable"
       :height="$tableHeight.normal"
-      v-scrollBar:el-table="'large'"
       v-loading="tools.loading"
       :cell-class-name="messageStyle"
       style="width: 100%;"
@@ -65,12 +64,12 @@
         </template>
       </el-table-column>
     </el-table>
-    <button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
+    <button :class="{'to-top-is-hover': tools.tableHover}" :style="{top: tools.toTopBtnTop}" @click="toTop(scrollWrap)" class="to-top" v-show="tools.showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
     <Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
   </div>
 </template>
 <script>
-  import bus from '../../../libs/bus';
+  import bus from "../../../libs/bus";
   export default {
     name: "terminallog",
     data() {
@@ -215,6 +214,7 @@
           ],
         },
         searchLabel: {}, //搜索参数
+        scrollWrap: null,
       }
     },
     methods: {
@@ -229,7 +229,13 @@
               response.data.list[i].status = response.data.list[i].status + "";
             }
             this.tableData = response.data.list;
-            this.pageObj.total = response.data.total
+            this.pageObj.total = response.data.total;
+            if (!this.scrollWrap) {
+              this.$nextTick(() => {
+                this.scrollWrap = this.$refs.terminalLogTable.bodyWrapper;
+                this.toTopBtnHandler(this.scrollWrap);
+              });
+            }
           }
         })
       },
@@ -281,17 +287,9 @@
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getTableData();
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
     },
-    watch:{
+    beforeDestroy() {
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
     },
     created(){
       //是否存在分页缓存
@@ -308,20 +306,6 @@
       this.tableTitleReset(this.tableTitle,this.tools.customTableTitle);
 
       this.getTableData();
-      this.$nextTick(() => {
-        //绑定滚动条事件，控制top按钮
-        let el = this.$refs.terminalLogTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        }
-      });
     },
-    beforeDestroy(){
-      let el = this.$refs.terminalLogTable.$el.querySelector(".el-table__body-wrapper");
-      if (el._ps_) {
-        el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-        el._ps_.destroy();
-      }
-    }
   }
 </script>

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

@@ -161,7 +161,7 @@
       <!-- end--标题-->
 
       <!-- begin--表单-->
-      <el-scrollbar class="right-box-form-box" ref="scrollbar">
+      <div class="right-box-form-box" ref="scrollbar">
         <el-form :model="editChart" :rules="rules" class="right-box-form  right-box-form-left" label-position="right" label-width="120px" ref="chartForm">
           <el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'dashboard' && showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model'">
             <el-autocomplete
@@ -458,7 +458,7 @@
         </template>
 
         </el-form>
-      </el-scrollbar>
+      </div>
     <!--底部按钮-->
     <div class="right-box-bottom-btns">
       <button @click="esc(false)" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
@@ -685,9 +685,6 @@
         this.promqlKeys.push(getUUID());
         this.elementIds.push("");
         this.promqlCount++;
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       removeExpression(index) {
         if (this.promqlCount > 1) {
@@ -704,9 +701,6 @@
             });
           });
         }
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       save() {
         this.$refs['chartForm'].validate((valid) => {
@@ -750,9 +744,6 @@
       // 增加指标,tarNum
       addTarget() {
         this.elements.push(1);
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       // 删除指标,第一步, 新方法
       deleteTarget(index) {
@@ -763,9 +754,6 @@
           // 子组件保存内容到bus
           item.subSave();
         });
-        this.$nextTick(() => {
-          this.$refs.scrollbar.update();
-        });
       },
       // subSave保存成功后回调,第二步
       subOk() {

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

@@ -212,7 +212,6 @@
                      v-model="labelValueCascaderVal"
                      :options="labelValueCascaderOptions"
                      :props="labelValueProps"
-                     v-scrollBar:metric-label-cascader
                      @change="changeTag"
                      clearable>
         </el-cascader>
@@ -510,8 +509,6 @@ export default {
       labelValueProps:{ multiple: true },
     };
   },
-  watch: {},
-  beforeDestroy() {},
   methods: {
     // 删除该选项,第一步,传递要删除的参数
     deleteTarget() {
@@ -1392,7 +1389,6 @@ export default {
     bus.$on('clear_history', () => {
       this.clearHistory();
     });
-    //this.metricCascaderList = [...this.metricCascaderListTmp];
   },
   beforeDestroy() {
     bus.$off('clear_history');

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

@@ -240,7 +240,7 @@
 -->
       <el-col :span="24">
         <div class="li-list-part-label-val-list" id="scrollDiv">
-          <el-scrollbar style="height: 100%">
+          <div style="height: 100%; overflow: auto;">
             <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index"  label-width="100" :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
               <el-row :gutter="10" >
                 <el-col :span="4" >
@@ -260,7 +260,7 @@
               -->
                 </el-row>
             </el-form-item>
-          </el-scrollbar>
+          </div>
         </div>
       </el-col>
 

nezha-fronted/src/components/page/dashboard/explore/editor.vue

@@ -4,12 +4,12 @@
     <span class="nz-input-append editor-clear" style="display: none" @click="clearContent"><i class="nz-icon nz-icon-circle-close"></i></span>
     <div class="metric-editor-popper" :style="{left:popperPos.left+'px'}" v-show="false">
       <div class="metric-popper-main" v-show="showType">
-        <el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
+        <div ref="scroll" style="height: 100%;width:100%; overflow: auto;">
           <div v-for="(key, index) in orders" >
             <div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
             <div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
           </div>
-        </el-scrollbar>
+        </div>
       </div>
       <div class="metric-popper-desc" v-if="showType&&Object.keys(showSuggestions).length>0&&showDescription && detailItem && detailItem.documentation">
         <div><b>{{detailItem.insertText}}</b></div>
@@ -562,8 +562,8 @@
           }
         })
 
-        let scroll=this.$refs.scroll.wrap;
+        /*let scroll=this.$refs.scroll.wrap;
-        scroll.scrollTop=0;
+        scroll.scrollTop=0;*/
       },
       storeSuggestions:function(){
           this.$nextTick(()=>{
@@ -624,7 +624,7 @@
         })
       },
       moveScroll:function(){
-        let scroll=this.$refs.scroll.wrap;
+        /*let scroll=this.$refs.scroll.wrap;
         //console.log('scroll',scroll)
         if(scroll){
           let curScroll=scroll.scrollTop;//滚动条当前位置
@@ -648,7 +648,7 @@
               }
             }, 20);
           }
-        }
+        }*/
 
 
       },

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

@@ -15,7 +15,7 @@
           </div>
         </div>
         <div style="height: calc(100% - 50px);width: 100%;" >
-          <el-scrollbar style="height: 100%" class="el-scrollbar-large">
+          <div ref="scrollWrap" style="height: 100%; overflow: auto;">
             <div class="expression-room right-margin" style="padding-top: 5px">
               <!--坑，这个index居然是从1开始-->
               <promql-input
@@ -75,7 +75,6 @@
                         border
                         ref="exploreTable"
                         tooltip-effect="light"
-                        v-scrollBar:el-table="'large'"
                         v-loading="tools.loading"
                         style="width: 100%;">
                 <el-table-column
@@ -196,7 +195,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
               </div>
             </div>
           </div>
-      </el-scrollbar>
+      </div>
         </div>
 
     </div>
@@ -928,10 +927,4 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .explore-table .ps__rail-x:hover{
-    opacity: 0.4 !important;
-  }
-  .explore-table .ps__rail-x:focus{
-    opacity: 0.9 !important;
-  }
 </style>

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

@@ -65,7 +65,7 @@
                     </el-row>
 
                     <el-row class="border-area" v-show="chartCount === 'multiple'">
-                      <el-scrollbar style="height: 100%">
+                      <div style="height: 100%; overflow: auto;">
                         <div class="chartBoxMul" v-for="(item, index) in lineList">
                           <line-chart-block
                             :show-setting="false"
@@ -75,7 +75,7 @@
                             @on-edit-chart-block="editData"
                           ></line-chart-block>
                         </div>
-                      </el-scrollbar>
+                      </div>
                     </el-row>
 
                   </el-col>

nezha-fronted/src/components/page/dashboard/overview/chart.vue

@@ -7,7 +7,7 @@
     <div class="chart-body" ref="chartBody" :id="chartId" ></div>
     <div class="chart-no-data" v-show="noData">No Data</div>
 
-    <div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0" v-scrollBar:legend>
+    <div class="legend-container legend-container-screen" id="legendArea" ref="legendArea" v-show="legend.length>0">
       <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':item.isGray}" :key="'legend_' + item.name+'_'+index">
         <span class="legend-shape" :style="{background:(item.isGray?'#D3D3D3':getBgColor(index))}"></span>{{item.alias?item.alias:item.name}}
       </div>

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

@@ -29,7 +29,7 @@
 
         <!--内容-->
         <div class="overview-content">
-          <el-scrollbar style="height: 100%" ref="overviewScrollbar" class="column-flex">
+          <div class="column-flex" ref="overviewScrollbar" style="height: 100%; overflow: auto;">
               <div class="content-row-box" style="flex: 1;height: 100%;">
                 <div class="content-col-box  " style="flex:3;" >
                   <table-box :pop-data="assetStatData" ref="assetTab" ></table-box>
@@ -84,7 +84,7 @@
                   <table-box :pop-data="alertRuleStatData" ref="alertRuleTab"></table-box>
                 </div>
               </div>
-          </el-scrollbar>
+          </div>
         </div>
       </div>
       </left-menu>

nezha-fronted/src/components/page/dashboard/overview/tableBox.vue

@@ -57,7 +57,6 @@
             <el-table
               class="overview-table"
               :data="showData.table.tableData"
-              v-scrollBar:el-table
               tooltip-effect="light"
               height="100%"
               ref="dataTable"

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

@@ -13,10 +13,10 @@
             </el-row>
             <el-dropdown-menu class="nz-dashboard-dropdown panel-dropdown-title-space" slot="dropdown"  >
               <!--<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>-->
-              <el-scrollbar style="height: 100%;">
+              <div ref="dashboardScrollbar" style="height: 100%; overflow: auto">
                 <el-dropdown-item >
                   <el-row class="panel-list-width" :gutter="10" >
-                    <el-col :span="21"><el-input size="mini" v-model="filterPanel"  @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable :placeholder="$t('overall.search')"></el-input></el-col>
+                    <el-col :span="21"><el-input :placeholder="$t('overall.search')" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable size="mini" v-model="filterPanel"></el-input></el-col>
                     <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span></el-col>
                   </el-row>
                 </el-dropdown-item>
@@ -45,7 +45,7 @@
                     </el-row>
                   </el-dropdown-item>
                 </draggable>
-              </el-scrollbar>
+              </div>
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -79,13 +79,13 @@
       </template>
     </div>
     <div class="table-list" id="tableList">
-      <el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
+      <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
         <div class="box-content">
           <chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
         </div>
-      </el-scrollbar>
+      </div>
     </div>
-    <button class="to-top" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)" style="bottom: 0;"><i class="nz-icon nz-icon-top"></i></button>
+    <button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
 
     <transition name="right-box">
       <chart-box :chart="chart" :from="$CONSTANTS.fromRoute.panel" :panel-data="panelData" :show-panel="showPanel" @close="closeChartBox" @delete-chart="delChart" @on-create-success="createSuccess" @on-delete-success="delChartOk" @reload="panelReload" @reloadOnlyPanel="panelReloadOnlyPanel" ref="addChartModal" v-if="rightBox.chart.show"></chart-box>
@@ -177,6 +177,7 @@
         filterPanel:'',
         showPanelList:[],
         //---图表相关参数--end
+        scrollbarWrap: null,
       }
     },
     components: {
@@ -271,26 +272,6 @@
       newChart() {
         return JSON.parse(JSON.stringify(this.blankChart));
       },
-      scrollbarHeightHandler() {
-        setTimeout(() => {
-          let top = '';
-          let top2 = '';
-          document.querySelector("body>.el-dropdown-menu").addEventListener("ps-y-reach-end", () => {
-            let yDom = document.querySelector("body>.el-dropdown-menu>.ps__rail-y");
-            let yDom2 = document.querySelector("body>.el-dropdown-menu>.ps__rail-y>.ps__thumb-y");
-            if (top) {
-              yDom.style.top = top;
-            } else {
-              top = yDom.style.top;
-            }
-            if (top2) {
-              yDom2.style.top = top2;
-            } else {
-              top2 = yDom2.style.top;
-            }
-          });
-        }, 100);
-      },
       // 编辑图表信息,打开编辑弹窗
       editChart(data) {
         if (!data.param) {
@@ -534,19 +515,10 @@
       // 滚动事件触发下拉加载
       onScroll() {
         let _self = this;
-        let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
+        this.scrollbarWrap.addEventListener('scroll', bus.debounce(function() {
-
+          _self.showTopBtn = _self.scrollbarWrap.scrollTop > 50;
-        scrollbarWrap.onscroll = bus.debounce(function() {
+          _self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop);
-          if (scrollbarWrap.scrollTop > 50) {
+        }, 300));
-            _self.showTopBtn = true;
-          } else {
-            _self.showTopBtn = false;
-          }
-          _self.$refs.chartList.loadChartData(scrollbarWrap.scrollTop);
-          //if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
-            //_self.$refs.chartList.pageDataList(true, _self.showPanel.id);
-          //}
-        },300);
       },
       focusInput() {
         let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
@@ -719,15 +691,12 @@
         }else{
           this.showPanelList = this.panelData;
         }
-        this.$nextTick(()=>{
-          document.querySelector(".panel-dropdown-title-space")._ps_.update()
-        })
       },
-      tableListEnter(self){
+      tableListEnter(){
-        self.tableHover = true;
+        this.tableHover = true;
       },
-      tableListLeave(self){
+      tableListLeave(){
-        self.tableHover = false;
+        this.tableHover = false;
       },
 
     },
@@ -735,9 +704,10 @@
       this.getTableData();
     },
     mounted() {
+      this.scrollbarWrap = this.$refs.dashboardScrollbar;
       this.onScroll();
-      document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter.bind('',this));
+      document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter);
-      document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave.bind('',this));
+      document.querySelector("#tableList").addEventListener("mouseleave", this.tableListLeave);
     },
     watch: {
       'filter.searchName': function(n,o){
@@ -748,7 +718,9 @@
       },
     },
     beforeDestroy(){
-
+      document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
+      document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLeave);
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
     }
   }
 </script>

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

@@ -68,7 +68,6 @@
           border
           class="nz-table endpoint-table"
           :height="mainTableHeight"
-          v-scrollBar:el-table="'large'"
           v-show="bottomBox.mainResizeShow"
           ref="endpointTable"
           :cell-class-name="messageStyle"
@@ -169,7 +168,7 @@
         </el-table>
         <button class="to-top" :style="{top: tools.toTopBtnTop}"
                 :class="{'to-top-is-hover': tools.tableHover}"
-                v-show="tools.showTopBtn && bottomBox.mainResizeShow" @click="$toTop('ps', 0)"><i
+                @click="toTop(scrollWrap)" v-show="tools.showTopBtn && bottomBox.mainResizeShow"><i
           class="nz-icon nz-icon-top"></i></button>
         <div class="pagination-bottom" v-show="!bottomBox.showSubList">
           <Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo'
@@ -380,6 +379,7 @@
             readonly:true,
           }],
         },
+        scrollWrap: null
       }
     },
     methods:{
@@ -428,6 +428,12 @@
               }
               this.endpointTableData=response.data.list;
               this.endpointPageObj.total=response.data.total;
+              if (!this.scrollWrap) {
+                this.$nextTick(() => {
+                  this.scrollWrap = this.$refs.endpointTable.bodyWrapper;
+                  this.toTopBtnHandler(this.scrollWrap);
+                });
+              }
             }
           });
         }
@@ -756,15 +762,6 @@
         }
         return '';
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.tools.showTopBtn = true;
-          self.tools.tableHover = true;
-        } else {
-          self.tools.showTopBtn = false;
-          self.tools.tableHover = false;
-        }
-      },
     },
     created(){
       this.currentProject=this.$store.state.currentProject;
@@ -787,12 +784,6 @@
       },300);
 
       this.initEvent();
-
-      //resize时刷新左侧列表滚动条
-      let vm=this;
-      // window.onresize=function(){
-      //   // vm.$refs.leftScrollbar.update();
-      // };
     },
     computed:{
       itemTip(){
@@ -817,23 +808,6 @@
       },
     },
     watch:{
-      pageType(n){
-        if(n=='endpoint'){
-          setTimeout(()=>{
-            //绑定滚动条事件，控制top按钮
-            let el=this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
-            if(el._ps_){
-              el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-            }
-          },100)
-        }else{
-          let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
-          if (el._ps_) {
-            el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-            el._ps_.destroy();
-          }
-        }
-      },
       currentModule(n,o){
         this.endpointPageObj.pageNo=1;
         if(n&&n.id){
@@ -859,24 +833,16 @@
         }
       },
     },
-    destroyed(){
+    beforeDestroy() {
       bus.$off("project-page-type");
       bus.$off("current-project-change");
       bus.$off("current-module-change");
       bus.$off("project-list-change");
       bus.$off("module-list-change");
       bus.$off("endpoint-list-change");
-      bus.$off('alert-message-change')
+      bus.$off('alert-message-change');
+      this.scrollbarWrap.removeEventListener('scroll', bus.debounce);
     },
-    beforeDestroy(){
-      if(this.$refs.endpointTable){
-        let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
-        if (el._ps_) {
-          el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
-          el._ps_.destroy();
-        }
-      }
-    }
   }
 </script>
 

nezha-fronted/src/main.js

@@ -21,7 +21,7 @@ import plTable from 'pl-table'
 import 'pl-table/themes/index.css'
 
 import {post, get, put, del} from './http.js'
-import {toTop, clickoutside, scrollBar, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet} from './components/common/js/tools.js';
+import {clickoutside, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool, tableSet} from './components/common/js/tools.js';
 import * as tools from './components/common/js/tools.js';
 import * as constants from './components/common/js/constants.js'
 
@@ -42,7 +42,6 @@ import moduleListPop from "./components/page/asset/moduleListPop"; //面板弹
 import cabinetConfigBox from "./components/common/popBox/cabinetConfig"; //面板弹框组件
 import modelBox from "./components/common/rightBox/modelBox"; //model弹框
 import bottomBox from "./components/common/bottomBox/bottomBox"; //上滑框
-import "perfect-scrollbar/css/perfect-scrollbar.css";
 import loading from "./components/common/loading";
 import mibBox from "./components/common/rightBox/mibBox";
 import leftMenu from "./components/common/leftMenu";
@@ -76,7 +75,6 @@ Vue.prototype.$put = put;
 Vue.prototype.$delete = del;
 Vue.prototype.$CONSTANTS = constants;
 Vue.prototype.$TOOLS = tools;
-Vue.prototype.$toTop = toTop; //toTop置顶按钮方法
 Vue.prototype.$bottomBoxWindow = bottomBoxWindow; //底部上滑框控制
 Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix;
 Vue.prototype.$unixTimeParseToString = unixTimeParseToString;
@@ -127,6 +125,25 @@ Vue.mixin({
       },
       hasButton(code) {
         return hasButton(this.$store.getters.buttonList, code);
+      },
+      toTop(wrap) {
+        let currentTop = wrap.scrollTop;
+        let interval = currentTop/10;
+        let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
+          if (currentTop == 0) {
+            clearInterval(intervalFunc);
+          } else {
+            currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
+            wrap.scrollTop = currentTop;
+          }
+        }, 20);
+      },
+      toTopBtnHandler(wrap) {
+        let vm = this;
+        wrap.addEventListener('scroll', bus.debounce(function() {
+          vm.tools.showTopBtn = wrap.scrollTop > 50;
+          vm.tools.tableHover = wrap.scrollTop > 50;
+        }, 100));
       }
     },
     computed: {
@@ -149,7 +166,6 @@ Vue.use(hasPermission);
 
 /*指令*/
 Vue.directive('clickoutside', clickoutside);
-Vue.directive('scrollBar', scrollBar);
 window.resizing = false;
 window.vm = new Vue({
   el: '#app',
@@ -166,8 +182,8 @@ window.vm = new Vue({
 export default vm;
 
 /* 重写组件内容 */
-const elUi = require("element-ui");
+/*const elUi = require("element-ui");
 const pl = require("pl-table");
 //去掉el-table表头右侧的滚动条预留空间
 elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};
-pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;};
+pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;};*/