From 4e9556a1eb892ef621a96bef7ea7d4ce2b04b241 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 24 Nov 2020 14:32:51 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9endpoint=20query?=
 =?UTF-8?q?=20=E6=94=B9=E5=8F=98=E7=AA=97=E5=8F=A3=E5=A4=A7=E5=B0=8F?=
 =?UTF-8?q?=E5=90=8E=20=E8=A1=A8=E6=A0=BC=E6=B2=A1=E6=9C=89=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E5=A4=A7=E5=B0=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E5=8F=8Awindow=E3=80=82onresize=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAaddEventListener?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bottomBox/tabs/endpointQueryTab.vue       | 84 ++++++++++++-------
 .../src/components/page/alert/config.vue      |  1 -
 .../src/components/page/asset/asset.vue       | 13 ++-
 .../src/components/page/config/dc.vue         | 13 +--
 .../src/components/page/project/project.vue   |  7 +-
 5 files changed, 73 insertions(+), 45 deletions(-)

diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
index 94c82cb2d..5c3ec9f47 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
@@ -3,6 +3,10 @@
     text-align: center;
     margin-top: 16px;
   }
+  .nz-table /deep/  .el-table{
+    display: block !important;
+  }
+
 </style>
 <style>
   .endpoint-dialog .el-dialog__body{
@@ -55,19 +59,21 @@
       </div>
     </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"
-              @selection-change="selectChange" v-if="tableShow" :border="true">
+     <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"
+               @selection-change="selectChange" v-if="tableShow && plTableSHow" :border="true">
       <pl-table-column
         type="selection"
         width="39"
         align="center"
+        column-key="sel"
         :selectable="selectable">
       </pl-table-column>
       <pl-table-column
         prop="element"
         :resizable="true"
-        min-width="1800"
+        :min-width="1000"
+        column-key="element"
         :label="$t('project.endpoint.element')">
         <template v-slot="scope">
           <el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
@@ -81,12 +87,13 @@
             </div>
             <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
           </el-popover>
-          <span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
+          <span style="word-break: break-all;" v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
         </template>
       </pl-table-column>
       <pl-table-column
         :resizable="false"
         prop="value"
+        column-key="value"
         :label="$t('project.endpoint.value')"
         min-width="180">
       </pl-table-column>
@@ -161,7 +168,9 @@
         hideSameLabels: true,
         sameLabels:['instance','module','project','asset','endpoint','datacenter'],
         chartUnit:5,
-        rightBox: {show: false}
+        rightBox: {show: false},
+        plTableSHow:true,
+        scrollTop:0,
       }
     },
     methods: {
@@ -479,17 +488,19 @@
             }
           });
           this.$nextTick(()=>{
-            this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
-            this.$refs.endpointChart.setLegend(this.legend)
-            this.$refs.endpointChart.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
-            this.$refs.endpointChart.modifyOption("tooltip", "textStyle", {color: "#000"});
-            this.$refs.endpointChart.modifyOption("grid", "top", 30);
-            this.$refs.endpointChart.modifyOption("grid", "left", 0);
-            this.$refs.endpointChart.modifyOption("grid", "right", 30);
-            this.$refs.endpointChart.modifyOption("grid", "bottom", 8);
-            this.$refs.endpointChart.modifyOption("grid", "containLabel", true);
-            this.$refs.endpointChart.setSeries(this.chartDatas);
-            this.$refs.endpointChart.endLoading();
+           if( this.$refs.endpointChart){
+             this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
+             this.$refs.endpointChart.setLegend(this.legend)
+             this.$refs.endpointChart.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
+             this.$refs.endpointChart.modifyOption("tooltip", "textStyle", {color: "#000"});
+             this.$refs.endpointChart.modifyOption("grid", "top", 30);
+             this.$refs.endpointChart.modifyOption("grid", "left", 0);
+             this.$refs.endpointChart.modifyOption("grid", "right", 30);
+             this.$refs.endpointChart.modifyOption("grid", "bottom", 8);
+             this.$refs.endpointChart.modifyOption("grid", "containLabel", true);
+             this.$refs.endpointChart.setSeries(this.chartDatas);
+             this.$refs.endpointChart.endLoading();
+           }
           });
 
         })
@@ -640,6 +651,30 @@
             }
           }
         }
+      },
+      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(self){
+        let el = self.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
+        el.removeEventListener("ps-scroll-y", this.plpsscrolly);
+        self.plTableSHow=false;
+        self.$nextTick(()=>{
+          self.plTableSHow=true;
+          setTimeout(()=>{
+            el = self.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
+            el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',self));
+            el.scrollTop = self.scrollTop;
+          },100)
+        });
       }
     },
     watch: {
@@ -659,15 +694,6 @@
           temp.tableFilter();
         }, 500)
       },
-      plpsscrolly(el,self){
-        if (el._ps_.scrollbarYTop > 50) {
-          self.showTopBtn = true;
-          self.tableHover = true;
-        } else {
-          self.showTopBtn = false;
-          self.tableHover = false;
-        }
-      },
     },
     mounted() {
       this.getPanelData();
@@ -677,16 +703,18 @@
         //绑定滚动条事件，控制top按钮
         let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
         if (el._ps_) {
-          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
+          el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
         }
       }, 300);
 
       //});
+      window.addEventListener('resize', this.tableResize.bind('',this));
     },
     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.bind('',el,this));
+        el.removeEventListener("ps-scroll-y", this.plpsscrolly);
         el._ps_.destroy();
       }
     }
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 72e2969e6..98484c671 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -539,7 +539,6 @@
       },
     },
     destroyed() {
-      window.onresize = null;
       bus.$off("alert-rule-list-change");
       bus.$off("dc-list-change");
       bus.$off('alert-message-change')
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index 814633213..81fc9ad46 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -767,6 +767,10 @@
           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;
@@ -839,23 +843,18 @@
         }
         //resize时刷新左侧列表滚动条
         let vm = this;
-        window.onresize = function () {
-          // vm.$refs.leftScrollbar.update();
-          el._ps_.update();
-        };
+        window.addEventListener('resize', this.domResize);
       });
     },
     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.removeEventListener("mouseenter",  this.plmouseenter.bind('',el,this));
-        // el.removeEventListener("mouseleave", this.plmouseleave.bind('',el,this));
         el._ps_.destroy();
       }
     },
     destroyed() {
-      window.onresize = null;
       bus.$off("asset-filter-change");
       bus.$off('alert-message-change');
     }
diff --git a/nezha-fronted/src/components/page/config/dc.vue b/nezha-fronted/src/components/page/config/dc.vue
index f84112fdf..8da53c217 100644
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -484,7 +484,11 @@
           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': {
@@ -511,7 +515,7 @@
       }
     },
     destroyed() {
-      window.onresize = null;
+
     },
     mounted() {
       //初始化表头
@@ -525,15 +529,14 @@
         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.onresize = function() {
-            el._ps_.update();
-          };
+          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();
       }
diff --git a/nezha-fronted/src/components/page/project/project.vue b/nezha-fronted/src/components/page/project/project.vue
index 57e4303dd..b77c85dbb 100644
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -789,9 +789,9 @@
 
       //resize时刷新左侧列表滚动条
       let vm=this;
-      window.onresize=function(){
-        // vm.$refs.leftScrollbar.update();
-      };
+      // window.onresize=function(){
+      //   // vm.$refs.leftScrollbar.update();
+      // };
     },
     computed:{
       itemTip(){
@@ -859,7 +859,6 @@
       },
     },
     destroyed(){
-      window.onresize=null;
       bus.$off("project-page-type");
       bus.$off("current-project-change");
       bus.$off("current-module-change");