gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改endpoint query 改变窗口大小后 表格没有自适应大小的问题，以及window。onresize改为addEventListener

Browse Source
This commit is contained in:
zhangyu
2020-11-24 14:32:51 +08:00
parent a38daf798a
commit 4e9556a1eb
5 changed files with 73 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,10 @@
text-align: center; text-align: center;
margin-top: 16px; margin-top: 16px;
} }
.nz-table /deep/ .el-table{
display: block !important;
}
</style> </style>
<style> <style>
.endpoint-dialog .el-dialog__body{ .endpoint-dialog .el-dialog__body{
@@ -55,19 +59,21 @@
</div> </div>
</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> <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}" <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" 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"> @selection-change="selectChange" v-if="tableShow && plTableSHow" :border="true">
<pl-table-column <pl-table-column
type="selection" type="selection"
width="39" width="39"
align="center" align="center"
column-key="sel"
:selectable="selectable"> :selectable="selectable">
</pl-table-column> </pl-table-column>
<pl-table-column <pl-table-column
prop="element" prop="element"
:resizable="true" :resizable="true"
min-width="1800" :min-width="1000"
column-key="element"
:label="$t('project.endpoint.element')"> :label="$t('project.endpoint.element')">
<template v-slot="scope"> <template v-slot="scope">
<el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null"> <el-popover trigger="click" placement="right" v-if="typeof scope.row.metricTip != 'undefined' && scope.row.metricTip != null">
@@ -81,12 +87,13 @@
</div> </div>
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span> <span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover> </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> </template>
</pl-table-column> </pl-table-column>
<pl-table-column <pl-table-column
:resizable="false" :resizable="false"
prop="value" prop="value"
column-key="value"
:label="$t('project.endpoint.value')" :label="$t('project.endpoint.value')"
min-width="180"> min-width="180">
</pl-table-column> </pl-table-column>
@@ -161,7 +168,9 @@
hideSameLabels: true, hideSameLabels: true,
sameLabels:['instance','module','project','asset','endpoint','datacenter'], sameLabels:['instance','module','project','asset','endpoint','datacenter'],
chartUnit:5, chartUnit:5,
rightBox: {show: false} rightBox: {show: false},
plTableSHow:true,
scrollTop:0,
} }
}, },
methods: { methods: {
@@ -479,17 +488,19 @@
} }
}); });
this.$nextTick(()=>{ this.$nextTick(()=>{
this.$refs.endpointChart.setRandomColors(this.chartDatas.length) if( this.$refs.endpointChart){
this.$refs.endpointChart.setLegend(this.legend) this.$refs.endpointChart.setRandomColors(this.chartDatas.length)
this.$refs.endpointChart.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)"); this.$refs.endpointChart.setLegend(this.legend)
this.$refs.endpointChart.modifyOption("tooltip", "textStyle", {color: "#000"}); this.$refs.endpointChart.modifyOption("tooltip", "backgroundColor", "rgba(221,228,237,1)");
this.$refs.endpointChart.modifyOption("grid", "top", 30); this.$refs.endpointChart.modifyOption("tooltip", "textStyle", {color: "#000"});
this.$refs.endpointChart.modifyOption("grid", "left", 0); this.$refs.endpointChart.modifyOption("grid", "top", 30);
this.$refs.endpointChart.modifyOption("grid", "right", 30); this.$refs.endpointChart.modifyOption("grid", "left", 0);
this.$refs.endpointChart.modifyOption("grid", "bottom", 8); this.$refs.endpointChart.modifyOption("grid", "right", 30);
this.$refs.endpointChart.modifyOption("grid", "containLabel", true); this.$refs.endpointChart.modifyOption("grid", "bottom", 8);
this.$refs.endpointChart.setSeries(this.chartDatas); this.$refs.endpointChart.modifyOption("grid", "containLabel", true);
this.$refs.endpointChart.endLoading(); 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: { watch: {
@@ -659,15 +694,6 @@
temp.tableFilter(); temp.tableFilter();
}, 500) }, 500)
}, },
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.showTopBtn = true;
self.tableHover = true;
} else {
self.showTopBtn = false;
self.tableHover = false;
}
},
}, },
mounted() { mounted() {
this.getPanelData(); this.getPanelData();
@@ -677,16 +703,18 @@
//绑定滚动条事件，控制top按钮 //绑定滚动条事件，控制top按钮
let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this)); el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',this));
} }
}, 300); }, 300);
//}); //});
window.addEventListener('resize', this.tableResize.bind('',this));
}, },
beforeDestroy(){ beforeDestroy(){
window.removeEventListener('resize', this.tableResize);
let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this)); el.removeEventListener("ps-scroll-y", this.plpsscrolly);
el._ps_.destroy(); el._ps_.destroy();
} }
} }

1
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -539,7 +539,6 @@
}, },
}, },
destroyed() { destroyed() {
window.onresize = null;
bus.$off("alert-rule-list-change"); bus.$off("alert-rule-list-change");
bus.$off("dc-list-change"); bus.$off("dc-list-change");
bus.$off('alert-message-change') bus.$off('alert-message-change')

13
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -767,6 +767,10 @@
self.tools.tableHover = false; self.tools.tableHover = false;
} }
}, },
domResize(){
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
el._ps_.update();
},
// plmouseenter(el,self){ // plmouseenter(el,self){
// console.log(123123123123) // console.log(123123123123)
// self.tools.tableHover = true; // self.tools.tableHover = true;
@@ -839,23 +843,18 @@
} }
//resize时刷新左侧列表滚动条 //resize时刷新左侧列表滚动条
let vm = this; let vm = this;
window.onresize = function () { window.addEventListener('resize', this.domResize);
// vm.$refs.leftScrollbar.update();
el._ps_.update();
};
}); });
}, },
beforeDestroy(){ beforeDestroy(){
window.removeEventListener('resize', this.domResize);
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this)); 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(); el._ps_.destroy();
} }
}, },
destroyed() { destroyed() {
window.onresize = null;
bus.$off("asset-filter-change"); bus.$off("asset-filter-change");
bus.$off('alert-message-change'); bus.$off('alert-message-change');
} }

13
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -484,7 +484,11 @@
self.tools.showTopBtn = false; self.tools.showTopBtn = false;
self.tools.tableHover = false; self.tools.tableHover = false;
} }
} },
domResize(){
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
el._ps_.update();
},
}, },
watch: { watch: {
'bottomBox.dc': { 'bottomBox.dc': {
@@ -511,7 +515,7 @@
} }
}, },
destroyed() { destroyed() {
window.onresize = null;
}, },
mounted() { mounted() {
//初始化表头 //初始化表头
@@ -525,15 +529,14 @@
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this)); el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
window.onresize = function() { window.addEventListener('resize', this.domResize);
el._ps_.update();
};
} }
}); });
}, },
beforeDestroy(){ beforeDestroy(){
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) { if (el._ps_) {
window.removeEventListener('resize', this.domResize);
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this)); el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy(); el._ps_.destroy();
} }

7
nezha-fronted/src/components/page/project/project.vue
View File

@@ -789,9 +789,9 @@
//resize时刷新左侧列表滚动条 //resize时刷新左侧列表滚动条
let vm=this; let vm=this;
window.onresize=function(){ // window.onresize=function(){
// vm.$refs.leftScrollbar.update(); // // vm.$refs.leftScrollbar.update();
}; // };
}, },
computed:{ computed:{
itemTip(){ itemTip(){
@@ -859,7 +859,6 @@
}, },
}, },
destroyed(){ destroyed(){
window.onresize=null;
bus.$off("project-page-type"); bus.$off("project-page-type");
bus.$off("current-project-change"); bus.$off("current-project-change");
bus.$off("current-module-change"); bus.$off("current-module-change");