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

perf: 优化table右侧滚动条区域；页面增加top按钮；

Browse Source 
1.优化table右侧滚动条区域(暂时只有asset、endpoint页）
2.所有列表页增加top按钮
This commit is contained in:
陈劲松
2020-03-05 21:30:45 +08:00
parent 19bda65ad7
commit 2543b2cb48
10 changed files with 220 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1174,3 +1174,30 @@ li{
.el-button--primary:hover{
background-color: rgba(255, 99, 71, .85);
}
/*滚动条相关，减小table内滚动条的空间*/
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
width: 6px;
}
.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
height: 6px;
}
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
background-color: transparent;
}
.ps__rail-y {
width: 6px;
}
.ps__rail-x {
height: 6px;
}
.el-table__fixed-right {
right: 10px !important;
}
.el-table__fixed-right-patch {
width: 10px !important;
background-color: #fcfcfc;
}
.el-table__fixed-body-wrapper {
height: calc(100% - 42px) !important;
}

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

@@ -33,6 +33,7 @@
class="nz-table"
:data="tableData"
border
ref="alertRuleTable"
tooltip-effect="light"
height="calc(100% - 125px)"
v-scrollBar:el-table
@@ -84,6 +85,7 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
</div>
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
@@ -105,6 +107,7 @@
name: "alert-config",
data() {
return {
showTopBtn: false,
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
@@ -405,6 +408,19 @@
},
mounted() {
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn = true;
} else {
this.showTopBtn = false;
}
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;

16
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -25,6 +25,7 @@
class="nz-table"
:data="tableData"
border
ref="alertListTable"
tooltip-effect="light"
height="calc(100% - 125px)"
v-scrollBar:el-table
@@ -91,6 +92,7 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop()">TOP</button>
</div>
<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
@@ -112,6 +114,7 @@
name: "alertList",
data() {
return {
showTopBtn: false,
pageObj: {
pageNo: 1,
pageSize: 20,
@@ -353,6 +356,19 @@
},
mounted() {
this.getAlertList();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn = true;
} else {
this.showTopBtn = false;
}
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;

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

@@ -56,6 +56,7 @@
v-scrollBar:el-table
border
tooltip-effect="light"
ref="assetTable"
>
<el-table-column
:resizable="false"
@@ -179,7 +180,7 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<!--<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light">TOP</button>-->
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
</div>
<!--<asset-add-unit :add-unit-show='addUnitShow' @refreshData="flushData" ref="assetAddUnit"
@@ -249,6 +250,7 @@
disabled: false
}],
},
showTopBtn: false,
searchLabel: {}, //搜索参数
checkList: [],
tablelable: [],
@@ -503,6 +505,10 @@
});
window.open(routeData.href);
},
/*toTop() {
let el = document.querySelector(".el-table__body-wrapper");
el.scrollTop = 0;
},*/
cli(id,host,accounts){
let port = '';
let accountId = '';
@@ -764,6 +770,17 @@
this.checkList = [];
this.checkList = this.$store.state.assetData.selectedData;
}
//绑定滚动条事件，控制top按钮
let el = this.$refs.assetTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn = true;
} else {
this.showTopBtn = false;
}
});
}
});
let localStorageTitle=localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path);
this.tablelable = localStorageTitle ? JSON.parse(localStorageTitle) : this.tableTitle;

16
nezha-fronted/src/components/page/config/account.vue
View File

@@ -34,6 +34,7 @@
class="nz-table"
:data="tableData"
border
ref="accountTable"
height="calc(100% - 125px)"
v-scrollBar:el-table
style="width: 100%;">
@@ -83,6 +84,7 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
</div>
<transition name="right-box">
@@ -172,6 +174,7 @@
name: "account",
data() {
return {
showTopBtn: false,
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
@@ -509,6 +512,19 @@
mounted() {
this.getTableData();
this.initReceiverData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn = true;
} else {
this.showTopBtn = false;
}
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;

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

@@ -66,7 +66,8 @@
:data="tableData"
border
v-scrollBar:el-table
height="calc(100% - 160px)"
height="calc(100% - 125px)"
ref="dcTable"
style="width: 100%;">
<el-table-column
:resizable="false"
@@ -125,6 +126,7 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn1" @click="toTop">TOP</button>
<!--dc table end-->
<element-set
v-clickoutside="elementsetHide"
@@ -160,6 +162,7 @@
class="nz-table"
:data="cabinetDatas"
border
ref="cabTable"
v-scrollBar:el-table
height="calc(100% - 125px)"
style="width: 100%;">
@@ -214,6 +217,7 @@
</div>
<!--cabinet table end-->
<cabinet-box :cur-cabinet="curCabinet" :cur-idc="currentShowDc" ref="cabinetEditBox" @after="getCabinetDatas"></cabinet-box>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn2" @click="toTop">TOP</button>
</div>
</template>
<script>
@@ -225,6 +229,8 @@
},
data() {
return {
showTopBtn1: false,
showTopBtn2: false,
currentDc: {
id: '',
name: '',
@@ -556,7 +562,28 @@
mounted() {
this.getTableData();
this.$nextTick(function(){
this.getUserData();
this.getUserData();//绑定滚动条事件，控制top按钮
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn1 = true;
} else {
this.showTopBtn1 = false;
}
});
}
let el2 = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
if (el2._ps_) {
el2.addEventListener("ps-scroll-y", () => {
if (el2._ps_.scrollbarYTop > 100) {
this.showTopBtn2 = true;
} else {
this.showTopBtn2 = false;
}
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))

17
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -30,7 +30,7 @@
</div>
</div>
</div>
<el-table :data="tableData" border height="calc(100% - 125px)" style="width: 100%;" class="nz-table" v-scrollBar:el-table>
<el-table :data="tableData" border height="calc(100% - 125px)" style="width: 100%;" ref="promTable" 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">
@@ -75,6 +75,7 @@
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop">TOP</button>
</div>
<transition name="right-box">
@@ -194,6 +195,7 @@
name: "prom",
data() {
return {
showTopBtn: false,
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
@@ -640,6 +642,19 @@
mounted: function () {
this.getIdcData();
this.getUserData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn = true;
} else {
this.showTopBtn = false;
}
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;

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

@@ -85,6 +85,7 @@
</div>
</el-scrollbar>
</div>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn" @click="toTop('el', $refs.dashboardScrollbar.wrap)">TOP</button>
</div>
<panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
@@ -101,6 +102,7 @@
name: "panel",
data() {
return {
showTopBtn: false, //top按钮
visible: false,
rightBox: { //面板弹出框相关
show: false,
@@ -550,6 +552,11 @@
let _self = this;
let scrollbarWrap = this.$refs.dashboardScrollbar.wrap;
scrollbarWrap.onscroll = function() {
if (scrollbarWrap.scrollTop > 100) {
_self.showTopBtn = true;
} else {
_self.showTopBtn = false;
}
if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
_self.$refs.chartList.pageDataList(true, _self.showPanel.id);
}

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

@@ -118,9 +118,10 @@
<el-table
:data="endpointTableData"
border
class="nz-table"
class="nz-table endpoint-table"
height="calc(100% - 125px)"
v-scrollBar:el-table
ref="endpointTable"
style="width: 100%;">
<el-table-column
:resizable="false"
@@ -164,6 +165,7 @@
</el-table-column>
</el-table>
<Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn1" @click="toTop">TOP</button>
</div>
<!--endpoint query-->
@@ -213,7 +215,7 @@
:data="showTableData"
border
v-scrollBar:el-table
class="nz-table"
class="nz-table endpoint-query-table"
:header-cell-class-name="cellClass"
height="calc(100% - 92px)"
@selection-change="selectChange"
@@ -251,6 +253,7 @@
width="180">
</el-table-column>
</el-table>
<button class="to-top nz-btn nz-btn-size-normal nz-btn-style-light" v-show="showTopBtn2" @click="toTop">TOP</button>
</div>
<element-set
@@ -324,6 +327,8 @@
let temp=this;
return {
tableShow: 1, // 1.endpoint; 2.metrics
showTopBtn1: false,
showTopBtn2: false,
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpointTableTitle: [
{
@@ -794,7 +799,7 @@
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
}
} catch (err) {
console.error(response.data.list[i], err);
//console.error(response.data.list[i], err);
}
}
this.endpointTableData = response.data.list;
@@ -845,7 +850,7 @@
this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
}
} catch (err) {
console.info(response.data.list[i], err);
//console.error(response.data.list[i], err);
}
}
if (this.moduleList.length > 0) {
@@ -1049,12 +1054,28 @@
this.showTableDataCopy=JSON.stringify(this.showTableData);
this.tableShow=3;
this.queryEdpLoading=false;
this.gutterHandler(".endpoint-query-table"); //控制table右边距
this.showTopBtn2 = false;
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.metricInfoTab.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 20) {
this.showTopBtn2 = true;
} else {
this.showTopBtn2 = false;
}
});
}
});
}
})
},
backToEdpTab:function(){
this.tableShow=1;
this.selectedEndpoints=[];
this.showTopBtn1 = false;
},
changeTime:function(size,unit){
let time=this.getTime(size,unit);
@@ -1353,10 +1374,18 @@
if(response.data.msg==='success'){
this.elementMetricDatas=response.data.data.list;
}
}
},
/*gutterHandler() {
setTimeout(() => {
let gutterCol = document.querySelector(".endpoint-table col[name='gutter']");
if (gutterCol.attributes['width'].value != '0') {
gutterCol.attributes['width'].value = '10';
let bb = document.querySelector('.el-table__body');
document.querySelector('.endpoint-table .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
}
}, 10)
}*/
},
created() {
this.currentProject = this.$store.state.currentProject;
@@ -1368,6 +1397,21 @@
setTimeout(()=>{
this.getEndpointTableData();
}, 200);
this.$nextTick(() => {
this.gutterHandler(".endpoint-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 100) {
this.showTopBtn1 = true;
} else {
this.showTopBtn1 = false;
}
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.endpointTableTitle;

27
nezha-fronted/src/main.js
View File

@@ -63,6 +63,27 @@ Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$put = put;
Vue.prototype.$delete = del;
Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
if (type == 'el') {
wrap.scrollTop = 0;
} else {
let els = document.querySelectorAll(".el-table__body-wrapper");
for (let i = 0; i < els.length; i++) {
els[i].scrollTop = 0;
}
}
};
Vue.prototype.gutterHandler = (tableClass) => {
setTimeout(() => {
let gutterCol = document.querySelector(tableClass + " col[name='gutter']");
//console.info(gutterCol.attributes['width'].value)
if (gutterCol.attributes['width'].value != '0') {
//console.info(gutterCol)
gutterCol.attributes['width'].value = '10';
document.querySelector(tableClass + ' .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
}
}, 1000)
}
Vue.config.productionTip = false;
Vue.use(ElementUI);
@@ -86,7 +107,7 @@ Vue.directive("scrollBar", {
!el && console.warn("未发现className为el-table__body-wrapper的dom");
// 启用x轴后不让原生滚动条出来作乱
/*vnode.context.$nextTick(() => {
vnode.context.$nextTick(() => {
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
@@ -94,7 +115,7 @@ Vue.directive("scrollBar", {
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
});*/
});
}
const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) {
@@ -188,7 +209,7 @@ window.vm = new Vue({
template: '<App/>'
})
export default vm
export default vm;
/*router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()