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

perf: 滚动条调整，table右侧优化等

Browse Source 
1.滚动条加宽、legend限制滚动条滑块最小长度
2.取消table右侧滚动条预留区域
3.调整其他因为布局改变而错乱的样式
This commit is contained in:
陈劲松
2020-03-19 20:44:14 +08:00
parent f07fa1f030
commit 006314cf12
14 changed files with 115 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -389,6 +389,12 @@ li{
height: calc(100% - 2px);
padding-left: 20px;
line-height: 27px;
display: inline-block;
}
.sub-list-tab-txt {
font-size: 14px;
color: #666666;
padding-left: 8px;
}
/* end--二级页面tab*/
@@ -487,10 +493,8 @@ li{
display: flex;
height: 50px;
align-items : center;
/*justify-content: space-between;*/
}
.top-tools-reverse {
/*flex-direction: row-reverse;*/
position: relative;
flex-direction: row-reverse;
}
.top-tools>div {
margin-top: 2px;
@@ -508,6 +512,30 @@ li{
display: flex;
align-content: center;
}
.top-tool-main-right {
position: absolute;
right: 0;
display: flex;
align-items: center;
transition: .4s right, .4s transform;
}
.top-tool-main-left {
position: absolute;
left: 0;
display: flex;
align-items: center;
transition: .4s right, .4s transform;
}
.top-tool-main-left>.panel-dropdown-title {
margin-top: -2px;
}
.top-tool-main-right>.nz-btn, .top-tool-main-right-to-left>.nz-btn, .top-tool-main-right>.nz-btn-group, .top-tool-main-right>.panel-calendar {
margin-top: -2px;
}
.top-tool-main-right-to-left {
right: 100% !important;
transform: translateX(100%);
}
/* end--顶部工具栏*/
/* begin--二级顶部工具栏*/
@@ -575,6 +603,9 @@ li{
.nz-table.el-table--border td, .el-table--border th, .nz-table .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
border-right: none;
}
.nz-table .el-table__body {
width: 100% !important;
}
.chart-table .nz-table.el-table td {
background-color: white;
}
@@ -881,6 +912,7 @@ li{
height: calc(100% - 132px);
width: 100%;
}
.el-scrollbar__wrap {
overflow-x: hidden !important;
}
@@ -888,6 +920,15 @@ li{
background-color: #aaa;
cursor: default;
}
.el-scrollbar__bar.is-vertical {
width: 11px;
}
.app>.el-scrollbar__bar.is-vertical {
width: 5px;
}
.el-scrollbar__bar {
border-radius: 6px;
}
.el-autocomplete-suggestion__wrap.el-scrollbar__wrap, .el-cascader-menu__wrap.el-scrollbar__wrap {
margin-bottom: 0 !important;
}
@@ -1274,9 +1315,12 @@ li{
background-color: rgba(255, 99, 71, .85);
}
/*滚动条相关，减小table内滚动条的空间*/
/*滚动条相关*/
.ps__thumb-y {
width: 11px;
}
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
width: 6px;
width: 11px;
}
.ps__thumb-y {
right: 0px;

6
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -291,9 +291,6 @@ export default {
pageSize(val) {
this.pageObj.pageSize = val;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj)
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
filterShowData(source,pageObj){
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
@@ -305,9 +302,6 @@ export default {
screenPageSize(val) {
this.screenPageObj.pageSize = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
startLoading(area){
if(area==='screen'){

1
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -33,6 +33,7 @@
text-align:left;
margin:0 auto;
line-height: 18px;
position: relative;
}
.legend-container-screen.legend-container {
height: 115px;

16
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -64,13 +64,11 @@
<div class="line-area" ref="lineChartArea" id="lineChartArea" v-show="firstShow"></div>
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow">
<el-scrollbar style="height: 100%;">
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<div v-for="(item, index) in legendList" :title="item.alias?item.alias:item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
</div>
</el-scrollbar>
</div>
<!--
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
@@ -99,13 +97,11 @@
</div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:10px;"></div>
<div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend">
<el-scrollbar style="height: 100%;" ref="screenLegendScrollbar">
<div class="legend-container legend-container-screen" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend" v-scrollBar:legend>
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias:item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
</div>
</el-scrollbar>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
@@ -844,11 +840,11 @@
this.isGreyScreen.push(false);
});
}
this.$nextTick(() => {
/*this.$nextTick(() => {
this.$refs.screenLegendScrollbar.update();
/*let divHeight = this.$refs.screenLegendArea.offsetHeight;
this.echartModalStore.resize({height: '100%'});*/
});
let divHeight = this.$refs.screenLegendArea.offsetHeight;
this.echartModalStore.resize({height: '100%'});
});*/
}
},
handleLineFeed(str,chartWidth){

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

@@ -16,17 +16,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<div>
</div>
<div>
<button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-main-right">
<div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button id="alert-add" @click="toAdd" :title="$t('overall.createAlertRule')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<el-table
@@ -357,9 +354,6 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.searchLabel = {};
@@ -420,7 +414,6 @@
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

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

@@ -16,11 +16,12 @@
</div>
<div class="content-right">
<div class="top-tools">
<div></div>
<div class="top-tool-search float-right">
<div class="top-tool-main-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
</div>
</div>
<el-table
class="nz-table"
:data="tableData"
@@ -298,9 +299,6 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getAlertList();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.searchLabel = {};
@@ -380,9 +378,6 @@
}
});
}
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
});
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))

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

@@ -33,8 +33,8 @@
<div class="content-right">
<div class="top-tools">
<div></div>
<div>
<div class="top-tool-main-right">
<div class="top-tool-search margin-r-20"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
<export-excel
export-file-name="asset"
export-url="/asset/export"
@@ -45,8 +45,6 @@
<i class="nz-icon nz-icon-create-square" @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" ></i>
</template>
</export-excel>
<div class="top-tool-search float-left margin-r-20"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
</div>
</div>
@@ -711,9 +709,6 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getAssetData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
getPrincipalName(data) {
for (let item in this.idcUserData) {
@@ -784,7 +779,6 @@
}
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//左侧dc列表初始选中状态
if (this.$store.state.assetData.selectedData.length > 0) {
this.checkList = [];

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

@@ -22,15 +22,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<div></div>
<div>
<button type="button" @click="toAdd" :title="$t('overall.createAccount')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="account-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
<div class="top-tool-main-right">
<div class="top-tool-search margin-r-20">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button type="button" @click="toAdd" :title="$t('overall.createAccount')"
class="nz-btn nz-btn-size-normal nz-btn-style-light" id="account-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<el-table
@@ -495,9 +494,6 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.searchLabel = {};
@@ -527,7 +523,6 @@
this.getTableData();
this.initReceiverData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.accountTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

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

@@ -53,15 +53,14 @@
<!--dc table start-->
<div class="content-right" v-if="tabShow==1">
<div class="top-tools">
<div></div>
<div>
<button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="dc-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
<div class="top-tool-main-right">
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" v-if="tabShow==1"></search-input>
</div>
<button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<el-table
@@ -496,9 +495,6 @@
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.pageObj.pageSize = val;
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.searchLabel = {};
@@ -576,7 +572,6 @@
this.getTableData();
this.$nextTick(function(){
this.gutterHandler(".nz-table");
this.getUserData();//绑定滚动条事件，控制top按钮
let el = this.$refs.dcTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

15
nezha-fronted/src/components/page/config/model.vue
View File

@@ -22,15 +22,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<div></div>
<div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" :title="$t('overall.createModel')"
<div class="top-tool-main-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createModel')"
id="model-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
</div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table>
@@ -251,9 +250,6 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.pageObj.pageNo = 1;
@@ -287,7 +283,6 @@
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.modelTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

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

@@ -22,15 +22,14 @@
</div>
<div class="content-right">
<div class="top-tools">
<div></div>
<div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" :title="$t('overall.createPrometheusServer')"
<div class="top-tool-main-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" :title="$t('overall.createPrometheusServer')"
id="prom-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
</div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
@@ -563,9 +562,6 @@
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
});
},
search: function (searchObj) {
this.pageObj.pageNo = 1;
@@ -658,7 +654,6 @@
this.getIdcData();
this.getUserData();
this.$nextTick(() => {
this.gutterHandler(".nz-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.promTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

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

@@ -10,7 +10,7 @@
</div>
<div class="content-right">
<div class="top-tools">
<div>
<div class="top-tool-main-left">
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" v-scrollBar:el-dropdown>
<el-row :gutter="10" class="el-dropdown-link" style="">
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
@@ -31,7 +31,7 @@
</el-dropdown-menu>
</el-dropdown>
</div>
<div class="top-tool-right">
<div class="top-tool-main-right">
<div class="top-tool-search relative-position margin-r-20">
<el-input ref="queryPanel" @clear="clearInput" id="queryPanel" @focus="focusInput" @blur="blurInput" v-model="filter.searchName" class="query-input-inactive" size="mini" clearable >
<i slot="suffix" class="el-input__icon el-icon-search" @click="focusInput" style="float: right"></i>

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

@@ -70,10 +70,6 @@
.window-control-btn>i:hover {
color: $global-text-color-active;
}
.abc {
right: 100% !important;
transform: translateX(100%);
}
.pagination-top {
transition: .2s transform;
}
@@ -134,9 +130,9 @@
</export-excel>
</div>-->
<div class="top-tools" style="position: relative;flex-direction:row-reverse;" :class="{'top-tools-reverse': tableShow == 3}" v-show="mainResizeShow">
<div class="top-tools" v-show="mainResizeShow">
<!--<div class="pagination-top"></div>-->
<div style="position: absolute; right: 0; display: flex; align-items: center; transition: .4s right, .4s transform;" :class="{'abc': tableShow == 3}">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': tableShow == 3}">
<div class="top-tool-search"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch" ref="projectSearch"></search-input></div>
<export-excel
export-file-name="endpoint"
@@ -144,7 +140,7 @@
:params="endpointSearchLabel"
@afterImport="getEndpointTableData"
class="margin-l-20"
style="width: 59px;"
style="width: 57px;"
>
<template slot="optionZone">
<i class="nz-icon nz-icon-create-square" @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" ></i>
@@ -218,6 +214,7 @@
<div class="sub-top-tools" v-show="subResizeShow">
<div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
<div class="sub-list-tab">{{$t("overall.query")}}</div>
<span class="sub-list-tab-txt">Endpoint ID: {{curEndpoint ? curEndpoint.id : ''}}</span>
</div>
<!--时间选择器-->
<div class="top-tool-right">
@@ -251,7 +248,6 @@
</el-dropdown-item>
</el-col>
</el-row>
</el-dropdown-menu>
</el-dropdown>
<div class="sub-list-window-control">
@@ -284,9 +280,6 @@
align="center"
:selectable="selectable"
>
<template slot="header" slot-scope="slot">
</template>
</el-table-column>
<el-table-column
@@ -1066,9 +1059,6 @@
this.endpointPageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getEndpointTableData();
this.$nextTick(() => {
this.gutterHandler(".endpoint-table");
});
},
metricsPageNo(val) {
this.metricPageObj.pageNo = val;
@@ -1360,7 +1350,6 @@
}
this.showTableDataCopy=JSON.stringify(this.showTableData);
this.queryEdpLoading=false;
this.gutterHandler(".endpoint-query-table"); //控制table右边距
this.showTopBtn2 = false;
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
@@ -1377,9 +1366,6 @@
});
}
});
this.$nextTick(() => {
this.gutterHandler(".endpoint-table");
});
}, 400);
},
backToEdpTab:function(){
@@ -1402,10 +1388,6 @@
// 主列表恢复全屏
this.mainResizeShow = this.subResizeShow = true;
document.querySelector('.main-list').style.height = "";
this.$nextTick(() => {
this.gutterHandler(".endpoint-table");
});
},
changeTime:function(size,unit){
let time=this.getTime(size,unit);
@@ -1774,7 +1756,6 @@
this.getEndpointTableData();
}, 200);
this.$nextTick(() => {
this.gutterHandler(".endpoint-table");
//绑定滚动条事件，控制top按钮
let el = this.$refs.endpointTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {

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

@@ -113,17 +113,6 @@ Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
}
}
};
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 = '1';
document.querySelector(tableClass + ' .el-table__body').attributes['style'].value = "width: calc(100% - 10px)";
}
}, 1000)
}
Vue.config.productionTip = false;
Vue.use(ElementUI);
@@ -136,7 +125,7 @@ const el_scrollBar = el => {
el._ps_.update();
} else {
//el上挂一份属性
el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 20});
el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
}
};
Vue.directive("scrollBar", {
@@ -148,6 +137,9 @@ Vue.directive("scrollBar", {
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
} else if (arg == "legend") {
el = el.querySelector(".legend-container");
!el && console.warn("未发现className为legend-container的dom");
}
// 启用x轴后不让原生滚动条出来作乱
@@ -277,3 +269,8 @@ export default vm;
}
}
})*/
/* 重写组件内容 */
const elUi = require("element-ui");
//去掉el-table右侧的滚动条预留空间
elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};