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

perf: 补上loading、统一table的滚动条尺寸

Browse Source
This commit is contained in:
陈劲松
2020-04-19 21:48:03 +08:00
parent ac72c455c7
commit eaf40a03db
22 changed files with 96 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
nezha-fronted/src/assets/css/main.css
View File

@@ -2,3 +2,18 @@
font-family: 'NotoSans'; /*字体名称*/
src: url('font/NotoSansSC-6.ttf');
}
.el-loading-spinner .circular{
width: 42px;
height: 42px;
animation: loading-rotate 2s linear infinite;
display: none;
}
.el-loading-mask .el-loading-spinner{
background: url(../img/loading.gif) no-repeat;
background-size: 48px 48px;
width: 200px;
height: 200px;
position: relative;
top: 50%;
left: 48.5%;
}

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

@@ -1777,3 +1777,4 @@ li{
.transparent-pop{ //防止popover的提示框挡住页面元素无法操作
pointer-events: none;
}

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

@@ -1197,8 +1197,8 @@
this.dropdownMenuShow=false;
this.clearChart();
this.$refs['localLoading'+this.chartIndex].startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
/*this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);*/
},
initDialog(){
//此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表

3
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -28,7 +28,6 @@
<el-table
class="nz-table"
:data="tableData"
element-loading-background="rgba(0, 0, 0, 0)"
border
v-loading="loading"
ref="alertMessageSubList"
@@ -399,8 +398,8 @@
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/message', this.searchLabel).then(response => {
this.loading = false;
if (response.code == 200) {
this.loading = false;
this.tableData = response.data.list;
this.tableData.forEach((item) => {
item.labels = JSON.parse(item.labels);

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

@@ -187,8 +187,8 @@
this.$set(this.searchLabel, "pageNo", 1);
this.$set(this.searchLabel, "pageSize", -1);
this.$get("/cabinet", this.searchLabel).then(response => {
this.loading = false;
if (response.code == 200) {
this.loading = false;
this.tableData = response.data.list;
}
});

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

@@ -21,7 +21,7 @@
</div>
<div class="margin-r-20 nz-btn-group nz-btn-group-size-small nz-btn-group-light">
<button @click="changeTime(-10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-prepend"><i class="el-icon-d-arrow-left"></i></button><el-date-picker
v-model="formatTime"loading
v-model="formatTime"
type="datetime"
size="mini"
class="project-calendar nz-input-group-middle"
@@ -51,11 +51,10 @@
<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>
<el-table
:data="tableData"
v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0)"
border
v-scrollBar:el-table
v-scrollBar:el-table="'normal'"
class="nz-table endpoint-query-table"
v-loading="loading"
:header-cell-class-name="cellClass"
:height="$tableHeight.noPagination"
@selection-change="selectChange"
@@ -162,6 +161,7 @@
data() {
let temp = this;
return {
loading: false,
showTopBtn: false, //主列表top按钮
currentEndpoint: {},
queryData: [],//endpoint 查询列表数据
@@ -176,7 +176,6 @@
graphChart:null,//图标对象
graphShow:false,
searchTime:[],
loading:false,
pickerOptions: {
shortcuts: [
{
@@ -566,6 +565,7 @@
this.tableData = [];
this.tableDataCopy = '';
this.$get("/prom/api/v1/query?query={endpoint='" + this.currentEndpoint.id + "'}&time=" + this.formatTime).then(response=>{
this.loading = false;
if(response.status==="success"){
let results = response.data.result;
this.queryData=JSON.parse(JSON.stringify(results));
@@ -634,7 +634,6 @@
this.tableData.push(edpQueryData);
}
this.tableDataCopy = JSON.stringify(this.tableData);
this.loading = false;
}
});
},

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

@@ -195,7 +195,9 @@
this.$emit('changeTab', tab);
},
getTableData() {
this.loading = true;
this.$get('/endpoint?assetId=' + this.asset.id + 'pageSize=-1').then(response => {
this.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.$emit("reload");

4
nezha-fronted/src/components/common/loading.vue
View File

@@ -6,8 +6,8 @@
<template>
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
<div class="el-loading-spinner">
<img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p>
<!--<img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p>-->
</div>
</div>
</template>

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

@@ -37,7 +37,8 @@
ref="alertRuleTable"
tooltip-effect="light"
:height="mainTableHeight"
v-scrollBar:el-table
v-scrollBar:el-table="'large'"
v-loading="loading"
:cell-class-name="messageStyle"
style="width: 100%;">
<el-table-column
@@ -121,6 +122,7 @@
data() {
vm = this;
return {
loading: false,
/*二级列表相关*/
ruleDetail: {},
targetTab: '', //展示二级列表中的哪个页签
@@ -363,7 +365,9 @@
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('alert/rule', this.searchLabel).then(response => {
this.loading = false;
if (response.code == 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total;

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

@@ -42,7 +42,8 @@
ref="alertListTable"
tooltip-effect="light"
:height="mainTableHeight"
v-scrollBar:el-table
v-scrollBar:el-table="'large'"
v-loading="loading"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
style="width: 100%;">
@@ -187,6 +188,7 @@
data() {
vm = this;
return {
loading: false,
/*二级列表相关*/
tabList: [], //二级列表的标签
tabDetailList: [], //多个详情
@@ -392,7 +394,9 @@
getAlertList: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('alert/message', this.searchLabel).then(response => {
this.loading = false;
if (response.code == 200) {
this.tableData = response.data.list;
this.tableData.forEach((item) => {

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

@@ -115,9 +115,10 @@
:height="mainTableHeight"
style="width: 100%;"
:data="tableData"
v-scrollBar:el-table
v-scrollBar:el-table="'large'"
v-show="mainResizeShow"
border
v-loading="loading"
tooltip-effect="light"
ref="assetTable"
>
@@ -283,6 +284,7 @@
data() {
vm = this;
return {
loading: false,
/*二级页面相关*/
assetDetail: [], //asset详情
alertMsgAsset: {}, //告警信息对应的asset对象
@@ -630,7 +632,9 @@
},
getAssetData(data, flushRightBoxDc) {
this.searchLabel = Object.assign(this.searchLabel, this.pageObj);
this.loading = true;
this.$get('asset', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total

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

@@ -57,7 +57,8 @@
v-show="mainResizeShow"
ref="accountTable"
:height="mainTableHeight"
v-scrollBar:el-table
v-loading="loading"
v-scrollBar:el-table="'large'"
style="width: 100%;">
<el-table-column
:resizable="false"
@@ -199,6 +200,7 @@
data() {
vm = this;
return {
loading: false,
//底部上滑框相关
mainListHeight: '', //主列表高度
mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -419,7 +421,9 @@
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('sys/user/list', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + "";

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

@@ -56,9 +56,10 @@
border
tooltip-effect="light"
v-show="mainResizeShow"
v-scrollBar:el-table
v-scrollBar:el-table="'large'"
:height="mainTableHeight"
ref="dcTable"
v-loading="loading"
:cell-class-name="assetStatClassName"
style="width: 100%;">
<el-table-column
@@ -160,6 +161,7 @@
tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
mainTableHeight: this.$tableHeight.normal, //主列表table高度
loading: false,
currentDc: {
id: '',
name: '',
@@ -366,7 +368,9 @@
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('idc', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total

5
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -54,7 +54,7 @@
</button>
</div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="mibTable" class="nz-table mib-table" v-scrollBar:el-table="'large'" v-loading="loading">
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width" :class-name="item.prop == 'modelsDetail'?'detail-column':''"
:key="`col-${index}`" :label="item.label">
<template slot-scope="scope" :column="item">
@@ -139,6 +139,7 @@
data() {
return {
showTab: 'file', //file/browser
loading: false,
tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
@@ -292,7 +293,9 @@
this.tableData = [];
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('mib', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total

11
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -135,7 +135,7 @@
<div class="mib-browser-left">
<div class="mib-browser-tree-title">
<span>SNMP MIBs</span>
<el-dropdown trigger="click" v-scrollBar:el-dropdown :hide-on-click="false" @command="selectModel">
<el-dropdown trigger="click" v-scrollBar:el-dropdown="'small'" :hide-on-click="false" @command="selectModel">
<span class="mib-browser-table-op">{{$t("config.model.model") + " "}}<i class="nz-icon nz-icon-funnel"></i></span>
<el-dropdown-menu slot="dropdown" class="mib-browser-model-dropdown">
<el-dropdown-item :class="{'mib-browser-model-dropdown-item-active': walkParam.models.indexOf(item.id) > -1}" :command="item" v-for="item, index in modelData" :key="index">{{item.name}}</el-dropdown-item>
@@ -154,6 +154,7 @@
check-on-click-node
check-strictly
@node-click="showDetail"
v-loading="treeLoading"
>
<div slot-scope="{node, data}" class="walk-tree-item">
<span v-if="!data.type"><i class="el-icon-reading"></i></span>
@@ -268,6 +269,7 @@
data() {
return {
loading: false,
treeLoading: false,
snmpSetFormVisible: false, //snmp set表单
searchParam: {
host: '',
@@ -353,13 +355,18 @@
/*获取tree的数据*/
getWalkData() {
this.treeLoading = true;
this.$get('mib/tree', {models: this.walkParam.models.join(",")}).then(response => {
this.treeLoading = false;
if (response.code === 200) {
let obj = JSON.parse(response.data);
this.walkData = [];
for (let item in obj) {
this.walkData.push({name: item, subTree: obj[item]});
}
this.$nextTick(() => {
this.$refs.treeScrollbar.update();
});
}
});
},
@@ -658,7 +665,7 @@
height: 31%;
width: 100%;
}
.mib-browser-detail .el-scrollbar__wrap .el-scrollbar__view, .mib-browser-detail .el-scrollbar__wrap {
.el-scrollbar__wrap .el-scrollbar__view, .el-scrollbar__wrap, .el-tree {
height: 100%;
}
.tree-detail-resize {

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

@@ -45,7 +45,8 @@
</button>
</div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table :cell-class-name="assetStatClassName">
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="modelTable" class="nz-table" v-scrollBar:el-table="'large'"
v-loading="loading" :cell-class-name="assetStatClassName">
<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">
@@ -119,6 +120,7 @@
pageSize: 20,
total: 0
},
loading: false,
tableTitle: [
{
label: 'ID',
@@ -256,7 +258,9 @@
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$set(this.searchLabel, "stat", 1);
this.loading = true;
this.$get('model', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total

6
nezha-fronted/src/components/page/config/operationlog.vue
View File

@@ -50,7 +50,8 @@
border
ref="operationLogTable"
:height="$tableHeight.normal"
v-scrollBar:el-table
v-loading="loading"
v-scrollBar:el-table="'large'"
style="width: 100%;">
<el-table-column
:resizable="false"
@@ -96,6 +97,7 @@
name: "oparetionlog",
data() {
return {
loading: false,
tableId: 'operationLogTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
rightBox: { //弹出框相关
@@ -244,7 +246,9 @@
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('sys/log/list', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
// for (let i = 0; i < response.data.list.length; i++) {
// response.data.list[i].status = response.data.list[i].status + "";

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

@@ -58,7 +58,8 @@
</button>
</div>
</div>-->
<el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
<el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;"
v-loading="loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'">
<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">
@@ -223,6 +224,7 @@
isEdit: false, //false查看，true编辑
title: ''
},
loading: false,
promServer: {
id: '',
host: '',
@@ -584,7 +586,9 @@
this.tableData = [];
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('promServer', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
for (var i = 0; i < response.data.list.length; i++) {
for (var j = 0; j < this.idcData.length; j++) {

6
nezha-fronted/src/components/page/config/terminallog.vue
View File

@@ -50,7 +50,8 @@
border
ref="terminalLogTable"
:height="$tableHeight.normal"
v-scrollBar:el-table
v-scrollBar:el-table="'large'"
v-loading="loading"
style="width: 100%;">
<el-table-column
:resizable="false"
@@ -105,6 +106,7 @@
name: "terminallog",
data() {
return {
loading: false,
tableId: 'terminalLogTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
rightBox: { //弹出框相关
@@ -273,7 +275,9 @@
getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.loading = true;
this.$get('terminal/log', this.searchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + "";

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

@@ -84,7 +84,7 @@
</div>
</div>
<div class="table-list" id="tableList">
<el-scrollbar style="height: 100%" ref="dashboardScrollbar">
<el-scrollbar class="el-scrollbar-large" style="height: 100%" ref="dashboardScrollbar">
<div class="box-content">
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData"
ref="chartList"></chart-list>

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

@@ -103,9 +103,10 @@
border
class="nz-table endpoint-table"
:height="mainTableHeight"
v-scrollBar:el-table="'normal'"
v-scrollBar:el-table="'large'"
v-show="mainResizeShow"
ref="endpointTable"
v-loading="loading"
style="width: 100%;">
<el-table-column
:resizable="false"
@@ -204,6 +205,8 @@
vm = this;
let temp = this;
return {
loading: false,
assetDetail: [], //asset详情
endpointDetail: [],
targetTab: '',
@@ -347,7 +350,9 @@
this.endpointSearchLabel.moduleId = this.currentModule.id;
this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
this.loading = true;
this.$get('endpoint', this.endpointSearchLabel).then(response => {
this.loading = false;
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
try {

4
nezha-fronted/src/tools.js
View File

@@ -104,7 +104,7 @@ export const scrollBar = {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
el = document.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
} else if (arg == "legend") {
el = el.querySelector(".legend-container");
@@ -152,7 +152,7 @@ export const scrollBar = {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
el = document.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
}else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");