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

perf: 滚动条替换和toTop替换

Browse Source
This commit is contained in:
陈劲松
2020-12-14 20:25:24 +08:00
committed by chenjinsong
parent 2ea0b88989
commit 0764dcdd56
76 changed files with 480 additions and 1368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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>

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

@@ -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(){

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

@@ -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;
scrollbarWrap.onscroll = function() {
if (scrollbarWrap.scrollTop > 50) {
_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.panelId);
}*/
}
this.scrollbarWrap.addEventListener('scroll', bus.debounce(function() {
_self.showTopBtn = _self.scrollbarWrap.scrollTop > 50;
_self.$refs.chartList.loadChartData(_self.scrollbarWrap.scrollTop);
}, 300));
},
focusInput:function(){
let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
@@ -476,17 +448,18 @@
})
}
},
tableListEnter(self){
self.tableHover = true;
tableListEnter(){
this.tableHover = true;
},
tableListLaeve(self){
self.tableHover = false;
tableListLeave(){
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("mouseleave", this.tableListLaeve.bind('',this));
document.querySelector("#tableList").addEventListener("mouseenter", this.tableListEnter);
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("mouseleave", this.tableListLaeve);
document.querySelector("body>.el-dropdown-menu").removeEventListener("ps-y-reach-end", this.psYReachEnd);
}
document.querySelector("#tableList").removeEventListener("mouseenter", this.tableListEnter);
document.querySelector("#tableList").removeEventListener("mouseleave", this.tableListLeave);
}
}
</script>