From 1b77d2061b526d37315cf093ef3d3b3e5bf249a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=8A=B2=E6=9D=BE?= <523037378@qq.com>
Date: Mon, 2 Mar 2020 17:34:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20dashboard=E7=9A=84=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=BB=9A=E5=8A=A8=E6=9D=A1=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.dashboard的表格增加自定义滚动条
2.修复asset侧滑里vendor点击会关闭侧滑的问题
---
 nezha-fronted/src/assets/stylus/main.scss                 | 3 ++-
 nezha-fronted/src/components/charts/chart-table.vue       | 4 ++--
 nezha-fronted/src/components/common/rightBox/assetBox.vue | 8 ++++----
 nezha-fronted/src/main.js                                 | 6 ++----
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index d55d0c25b..b939763bc 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -507,6 +507,7 @@ li{
 }
 .nz-table .el-table__body-wrapper {
   background-color: $content-right-background-color;
+  overflow: hidden;
 }
 .chart-table .nz-table.el-table th:last-of-type {
   background-color: white;
@@ -628,7 +629,7 @@ li{
   width: 520px;
 }
 .right-box-add-asset, .right-box-add-chart {
-  width: 550px;
+  width: 520px;
 }
 .right-box-chart .el-input__inner, .right-box-chart input {
   background-color: white;
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index 314a7d098..1047a4684 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -25,7 +25,7 @@
 
         </div>
         <div class="mt-10" v-cloak  v-show="firstShow">
-            <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border  tooltip-effect="light" v-cloak>
+            <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border  tooltip-effect="light" v-cloak v-scrollBar:el-table>
                 <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>
@@ -42,7 +42,7 @@
                 <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
               </div>
             </div>
-                <el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border  tooltip-effect="light">
+                <el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border  tooltip-effect="light" v-scrollBar:el-table>
                     <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>
diff --git a/nezha-fronted/src/components/common/rightBox/assetBox.vue b/nezha-fronted/src/components/common/rightBox/assetBox.vue
index e3b0d8204..e39a8e391 100644
--- a/nezha-fronted/src/components/common/rightBox/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetBox.vue
@@ -90,7 +90,7 @@
                 </div>
               </el-option>
             </el-select>
-            <div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
+            <div class="right-box-row-btn " v-if="!tabView">
               <el-popover
                 placement="left"
                 trigger="click"
@@ -172,7 +172,7 @@
                 class="right-box-row-with-btn"
               >
               </el-cascader>
-              <div class="right-box-row-btn right-box-row-btn-small" v-if="!tabView">
+              <div class="right-box-row-btn " v-if="!tabView">
                 <el-popover
                   placement="left"
                   trigger="click"
@@ -323,7 +323,7 @@
 <!--                  </div>-->
                 </el-option>
               </el-select>
-<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <div class="right-box-row-btn ">-->
 <!--                <idc-config-box placement="left" @after="getIDCOptionData"></idc-config-box>-->
 <!--              </div>-->
             </template>
@@ -368,7 +368,7 @@
                 </el-option>
               </el-select>
 
-<!--              <div class="right-box-row-btn right-box-row-btn-small">-->
+<!--              <div class="right-box-row-btn ">-->
 <!--                <cabinet-config-box placement="left" :post-cabinet="addCabinetData"  @after="getCabinetOptionData"></cabinet-config-box>-->
 <!--              </div>-->
             </template>
diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js
index aecd213db..e6df1c1ed 100644
--- a/nezha-fronted/src/main.js
+++ b/nezha-fronted/src/main.js
@@ -75,12 +75,11 @@ const el_scrollBar = el => {
     el._ps_.update();
   } else {
     //el上挂一份属性
-    el._ps_ = new PerfectScrollbar(el, {});
+    el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 20});
   }
 };
 Vue.directive("scrollBar", {
   inserted(el, binding, vnode) {
-    console.info(1)
     const { arg } = binding;
     if (arg === "el-table") {
       el = el.querySelector(".el-table__body-wrapper");
@@ -109,7 +108,6 @@ Vue.directive("scrollBar", {
     el_scrollBar(el);
   },
   componentUpdated(el, binding, vnode, oldVnode) {
-    console.info(2)
     const { arg } = binding;
     if (arg === "el-table") {
       el = el.querySelector(".el-table__body-wrapper");
@@ -127,7 +125,7 @@ Vue.directive("scrollBar", {
   },
 });
 
-const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown']; //clickoutside排除的class(白名单)
+const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown']; //clickoutside排除的class(白名单)
 const clickoutside = {
   // 初始化指令
   bind(el, binding, vnode) {