feat: 滚动条统一，除asset列表、dashboard里的table外

nezha-fronted/package-lock.json

@@ -7341,6 +7341,12 @@
         "sha.js": "^2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+      "integrity": "sha512-NrNHJn5mUGupSiheBTy6x+6SXCFbLlm8fVZh9moIzw/LgqElN5q4ncR4pbCBCYuCJ8Kcl9mYM0NgDxvW+b4LxA==",
+      "dev": true
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",

nezha-fronted/package.json

@@ -42,6 +42,7 @@
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
+    "perfect-scrollbar": "^1.5.0",
     "portfinder": "^1.0.13",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",

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

@@ -20,9 +20,9 @@
 }
 .legend-container{
   width: calc(100% - 30px);
-  max-height:80px;
-  min-height:40px;
-  overflow-y: auto;
+  /*max-height:80px;
+  min-height:40px;*/
+  height: 80px;
   font-size:12px;
   text-align:left;
   margin:0 auto;

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

@@ -36,10 +36,12 @@
     <div class="line-area"  ref="lineChartArea"  id="lineChartArea" v-show="firstShow"></div>
 
     <div class="legend-container"   id="legendArea" ref="legendArea" v-show="firstShow">
+      <el-scrollbar style="height: 100%;">
       <div v-for="(item, index) in legendList" :title="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.name}}
         <br/><!--bgColorList[index]-->
       </div>
+      </el-scrollbar>
     </div>
     <!--
     <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->

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

@@ -35,6 +35,7 @@
         border
         tooltip-effect="light"
         height="calc(100% - 160px)"
+        v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column
           :resizable="false"

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

@@ -27,6 +27,7 @@
         border
         tooltip-effect="light"
         height="calc(100% - 160px)"
+        v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column
           :resizable="false"

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

@@ -35,6 +35,7 @@
         :data="tableData"
         border
         height="calc(100% - 160px)"
+        v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column
           :resizable="false"

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

@@ -61,6 +61,7 @@
         class="nz-table"
         :data="tableData"
         border
+        v-scrollBar:el-table
         height="calc(100% - 160px)"
         style="width: 100%;">
         <el-table-column

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

@@ -30,7 +30,7 @@
           </div>
         </div>
       </div>
-      <el-table :data="tableData" border height="calc(100% - 160px)" style="width: 100%;" class="nz-table">
+      <el-table :data="tableData" border height="calc(100% - 160px)" style="width: 100%;" class="nz-table" v-scrollBar:el-table>
         <el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
                          :key="`col-${index}`" :label="item.label">
           <template slot-scope="scope" :column="item">

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

@@ -72,7 +72,7 @@
         <!-- end--标题-->
 
         <!-- begin--表单-->
-        <el-scrollbar class="right-box-form-box">
+        <el-scrollbar class="right-box-form-box" ref="scrollbar">
           <el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
             <el-form-item :label="$t('dashboard.panel.title')">
               <div class="right-box-form-content">
@@ -378,6 +378,9 @@
       // 增加指标,tarNum
       addTarget() {
         this.elements.push(1);
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       // 删除指标,第一步, 新方法
       deleteTarget(index) {
@@ -388,6 +391,9 @@
           // 子组件保存内容到bus
           item.subSave();
         });
+        this.$nextTick(() => {
+          this.$refs.scrollbar.update();
+        });
       },
       // subSave保存成功后回调,第二步
       subOk() {

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

@@ -167,7 +167,7 @@
 -->
       <el-col :span="24">
         <div class="li-list-part-label-val-list" :id="'scrollDiv'+this.pointer">
-          <el-scrollbar style="height: 100%">
+          <el-scrollbar ref="scrollbar" style="height: 100%">
             <el-form-item style="width:99%;" class="metric-title-position right-box-form-content" v-for="(item, index) in elementInfo.selectedTagList" :key="index"  :ref="'tagItem' + index" :prop="'tagList.' + index + '.value'" >
               <el-row :gutter="10" >
                 <el-col :span="4" >
@@ -315,6 +315,12 @@ export default {
         this.elementInfo.tagList = [];
         this.setLabelDivHeight(0);
       }
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.$refs.scrollbar.update();
+        }, 100);
+      });
+
     },
     // 选择主机
     /*
@@ -367,7 +373,6 @@ export default {
 
     // 编辑已有图表状态时，先填充数据
     setMdata(data) {
-      console.info('metricSetData', JSON.stringify(data));
       this.setDataFlag = true;
       this.target = Object.assign({}, data);
       //this.pointer =
@@ -428,6 +433,9 @@ export default {
           }
         });
       }
+      setTimeout(() => {
+        this.$refs.scrollbar.update();
+      }, 1000);
     },
 
     /*

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

@@ -120,6 +120,7 @@
         border
         class="nz-table"
         height="calc(100% - 160px)"
+        v-scrollBar:el-table
         style="width: 100%;">
         <el-table-column
           :resizable="false"
@@ -211,6 +212,7 @@
         v-loading="queryEdpLoading"
         :data="showTableData"
         border
+        v-scrollBar:el-table
         class="nz-table"
         :header-cell-class-name="cellClass"
         height="calc(100% - 110px)"

nezha-fronted/src/main.js

@@ -37,6 +37,8 @@ import selectArea from "./components/common/popBox/selectArea"; //dc弹框
 /*import 'vue-happy-scroll/docs/happy-scroll.css'
 import {HappyScroll}  from 'vue-happy-scroll'
 Vue.component('happy-scroll', HappyScroll)*/
+import PerfectScrollbar from "perfect-scrollbar";
+import "perfect-scrollbar/css/perfect-scrollbar.css";
 
 Vue.component("Pagination", Pagination);
 Vue.component("searchInput", searchInput);
@@ -67,6 +69,63 @@ Vue.use(ElementUI);
 Vue.use(Vuex);
 Vue.use(VueResource);
 
+const el_scrollBar = el => {
+  //在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_
+  if (el._ps_ instanceof PerfectScrollbar) {
+    el._ps_.update();
+  } else {
+    //el上挂一份属性
+    el._ps_ = new PerfectScrollbar(el, {});
+  }
+};
+Vue.directive("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");
+
+      // 启用x轴后不让原生滚动条出来作乱
+      vnode.context.$nextTick(() => {
+        el.classList.add("ps");
+        el.addEventListener("ps-scroll-y", () =>
+          el.classList.add("ps")
+        );
+        el.addEventListener("ps-scroll-x", () =>
+          el.classList.add("ps")
+        );
+      });
+    } else if (arg === 'metric-set') {
+
+    }
+    const rules = ["fixed", "absolute", "relative"];
+    if (!rules.includes(window.getComputedStyle(el, null).position)) {
+      console.error(
+        `perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
+          "、"
+        )}`
+      );
+    }
+    //el上挂一份属性
+    el_scrollBar(el);
+  },
+  componentUpdated(el, binding, vnode, oldVnode) {
+    const { arg } = binding;
+    if (arg === "el-table") {
+      el = el.querySelector(".el-table__body-wrapper");
+      !el && console.warn("未发现className为el-table__body-wrapper的dom");
+    }
+    try {
+      vnode.context.$nextTick(() => {
+        el_scrollBar(el);
+      });
+    } catch (error) {
+      console.error(error);
+      el_scrollBar(el);
+    }
+  },
+});
+
 const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown']; //clickoutside排除的class(白名单)
 const clickoutside = {
   // 初始化指令