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

perf: 优化table过长的悬浮提示

Browse Source
This commit is contained in:
chenjinsong
2020-01-17 17:08:10 +08:00
parent f80c67b383
commit 08fe4a2f7c
3 changed files with 408 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -180,6 +180,13 @@ html {
} }
/* end--按钮组件*/ /* end--按钮组件*/
/*table提示样式*/
.el-tooltip__popper.is-light {
border: 1px solid #EBEEF5;
color: #606266;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
/* begin--el-input扩展 */ /* begin--el-input扩展 */
.input-x-mini-22 .el-input__inner { .input-x-mini-22 .el-input__inner {
height: 22px; height: 22px;

10
nezha-fronted/src/components/common/pagination.vue
View File

@@ -7,7 +7,7 @@
@next-click="next" @next-click="next"
@current-change="current" @current-change="current"
:current-page="pageObj.pageNo" :current-page="pageObj.pageNo"
:page-sizes="[20, 50, 100, 300]" :page-sizes="[20, 50, 100]"
:page-size="20" :page-size="20"
layout="total, prev, pager, next,sizes,jumper" layout="total, prev, pager, next,sizes,jumper"
:total="this.pageObj.total" :total="this.pageObj.total"
@@ -65,7 +65,7 @@ export default {
} }
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev { .el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
margin:5px 10px 0px 10px; margin:5px 5px 0px 5px;
padding: 0 4px; padding: 0 4px;
font-size: 13px; font-size: 13px;
min-width: 20px; min-width: 20px;
@@ -78,6 +78,12 @@ export default {
border-radius: 2px; border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.el-pagination .el-pager li.btn-quicknext, .el-pager li.btn-quickprev {
line-height: 20px;
}
.el-pagination .el-pager .more::before {
line-height: 20px;
}
.el-pager li.number{ .el-pager li.number{
font-family: NotoSansSC-Regular; font-family: NotoSansSC-Regular;
color: #666666; color: #666666;

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

@@ -2,10 +2,11 @@
.config { .config {
height: 100%; height: 100%;
} }
.top-tools #alert-add .top-tool-btn-txt .nz-icon{
.top-tools #alert-add .top-tool-btn-txt .nz-icon {
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
margin-right:6px; margin-right: 6px;
} }
</style> </style>
<template> <template>
@@ -13,22 +14,28 @@
<div class="content-left"> <div class="content-left">
<div class="sidebar-title">{{$t('alert.alert')}}</div> <div class="sidebar-title">{{$t('alert.alert')}}</div>
<div class="sidebar-info"> <div class="sidebar-info">
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">{{$t('alert.alertList')}}</div> <div class="sidebar-info-item sidebar-info-top" @click="jumpTo('alertList')" id="alert-jump-alertlist">
{{$t('alert.alertList')}}
</div>
<div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div> <div class="sidebar-info-item sidebar-info-item-active">{{$t('alert.alertConfig')}}</div>
</div> </div>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<button id="alert-add" @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82"> <button id="alert-add" @click="toAdd"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right nz-btn-min-width-82">
<span class="top-tool-btn-txt"> <span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span> {{$t('overall.add')}}</span>
</button> </button>
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div> <div class="top-tool-search float-right">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
</div> </div>
<el-table <el-table
:data="tableData" :data="tableData"
border border
tooltip-effect="light"
height="calc(100% - 65px)" height="calc(100% - 65px)"
style="width: 100%;"> style="width: 100%;">
<el-table-column <el-table-column
@@ -41,7 +48,7 @@
show-overflow-tooltip show-overflow-tooltip
> >
<template slot="header" slot-scope="scope"> <template slot="header" slot-scope="scope">
<span v-if="index==0" class='nav-tabel-header' > <span v-if="index==0" class='nav-tabel-header'>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear"> <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i> <i class="nz-icon nz-icon-gear"></i>
</span> </span>
@@ -70,12 +77,17 @@
<span v-else-if="item.prop == 'type'"> <span v-else-if="item.prop == 'type'">
<template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template> <template v-for="type in typeData" v-if="type.key == scope.row[item.prop]">{{type.value}}</template>
</span> </span>
<!-- <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>--> <!-- <span v-else-if="item.prop == 'linkObject' && scope.row[item.prop]">{{scope.row.type != 3 && scope.row.linkObject ? scope.row[item.prop].name : scope.row[item.prop].host}}</span>-->
<div v-else-if="item.prop == 'linkObject'"> <div v-else-if="item.prop == 'linkObject'">
<span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span> <span v-if="(scope.row['type'] == 1 || scope.row['type'] == 2) && scope.row[item.prop]" class="link"
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link" @click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span> @click="viewAlertType(scope.row['type'],scope.row[item.prop])">{{scope.row[item.prop].name}}</span>
<span v-else-if="scope.row['type'] == 3 && scope.row[item.prop]" class="link"
@click="viewAlertType(scope.row['type'],scope.row[item.prop].id)">{{scope.row[item.prop].host}}</span>
<span v-else>-</span> <span v-else>-</span>
</div> </div>
<div v-else-if="item.prop == 'alertName'">
<div class="too-long-split" style="max-width: 100px;">{{scope.row.alertName}}</div>
</div>
<span v-else>{{scope.row[item.prop]}}</span> <span v-else>{{scope.row[item.prop]}}</span>
</template> </template>
</el-table-column> </el-table-column>
@@ -85,7 +97,8 @@
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box> <alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box> <project-box :project="viewProjectData" ref="projectBox" @reload="getTableData"></project-box>
<module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box> <module-box :module="viewModuleData" @reload="getTableData" ref="moduleBox"></module-box>
<asset-edit-unit :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl" ref="assetEditUnit"></asset-edit-unit> <asset-edit-unit :edit-unit-show='viewAsset' @refreshData="getTableData" @sendStateData="tabControl"
ref="assetEditUnit"></asset-edit-unit>
<element-set <element-set
v-clickoutside="elementsetHide" v-clickoutside="elementsetHide"
:table-title="tableTitle" :table-title="tableTitle"
@@ -97,7 +110,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "alert-config", name: "alert-config",
data() { data() {
return { return {
@@ -109,19 +122,19 @@ export default {
type: 'input', type: 'input',
label: 'id', label: 'id',
disabled: false disabled: false
},{ }, {
id: 2, id: 2,
name: this.$t('alert.alertName'), name: this.$t('alert.alertName'),
type: 'input', type: 'input',
label: 'alertName', label: 'alertName',
disabled: false disabled: false
},{ }, {
id: 3, id: 3,
name: this.$t('alert.list.type'), name: this.$t('alert.list.type'),
type: 'select', type: 'select',
label: 'alertType', label: 'alertType',
disabled: false disabled: false
},{ }, {
id: 4, id: 4,
name: this.$t('alert.severity'), name: this.$t('alert.severity'),
type: 'selectString', type: 'selectString',
@@ -151,7 +164,7 @@ export default {
pageObj: { pageObj: {
pageNo: 1, pageNo: 1,
pageSize: 20, pageSize: 20,
total:0 total: 0
}, },
severityData: [ severityData: [
{ {
@@ -191,6 +204,7 @@ export default {
label: this.$t("alert.alertName"), label: this.$t("alert.alertName"),
prop: 'alertName', prop: 'alertName',
show: true, show: true,
width: 120
}, { }, {
label: this.$t("alert.config.expr"), label: this.$t("alert.config.expr"),
prop: 'expr', prop: 'expr',
@@ -252,7 +266,7 @@ export default {
e.clientY + dh <= h - 10 e.clientY + dh <= h - 10
? e.clientY - 70 ? e.clientY - 70
: e.clientY - 70 - (e.clientY + dh - h); : e.clientY - 70 - (e.clientY + dh - h);
this.$store.commit('setPosition', { positionx, positiony }); this.$store.commit('setPosition', {positionx, positiony});
}, },
elementsetHide() { elementsetHide() {
//悬浮点击空白隐藏 //悬浮点击空白隐藏
@@ -263,11 +277,11 @@ export default {
this.$store.commit('setHeaderTable', data); this.$store.commit('setHeaderTable', data);
this.tablelable = data; this.tablelable = data;
}, },
toEdit: function(u) { toEdit: function (u) {
this.alertRule = Object.assign({}, u); this.alertRule = Object.assign({}, u);
this.$refs.alertConfigBox.show(true, true); this.$refs.alertConfigBox.show(true, true);
}, },
del: function(u) { del: function (u) {
this.$confirm(this.$t("tip.confirmDelete"), { this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"), confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"), cancelButtonText: this.$t("tip.no"),
@@ -290,16 +304,16 @@ export default {
this.$refs['assetEditUnit'].tabView = false this.$refs['assetEditUnit'].tabView = false
} }
}, },
toAdd: function() { toAdd: function () {
this.cleanAlertRule(); this.cleanAlertRule();
this.$refs.alertConfigBox.show(true, true); this.$refs.alertConfigBox.show(true, true);
}, },
detail: function(u) { detail: function (u) {
this.alertRule = Object.assign({}, u); this.alertRule = Object.assign({}, u);
this.$refs.alertConfigBox.show(true, false); this.$refs.alertConfigBox.show(true, false);
}, },
getTableData: function() { getTableData: function () {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/rule', this.searchLabel).then(response => { this.$get('alert/rule', this.searchLabel).then(response => {
@@ -309,7 +323,7 @@ export default {
} }
}) })
}, },
updateReceiverName: function(item) { updateReceiverName: function (item) {
//TODO 请求接口改名 //TODO 请求接口改名
var code = 200; var code = 200;
//this.$set(item, 'errorMessage', 'err'); //this.$set(item, 'errorMessage', 'err');
@@ -317,7 +331,7 @@ export default {
item.oldName = item.name; item.oldName = item.name;
return code; return code;
}, },
cleanAlertRule: function() { cleanAlertRule: function () {
this.alertRule = { this.alertRule = {
id: '', id: '',
alertName: '', alertName: '',
@@ -332,7 +346,7 @@ export default {
receiver: '', receiver: '',
} }
}, },
jumpTo(data,id) { jumpTo(data, id) {
this.$router.push({ this.$router.push({
path: "/" + data, path: "/" + data,
query: { query: {
@@ -348,7 +362,7 @@ export default {
this.pageObj.pageSize = val; this.pageObj.pageSize = val;
this.getTableData(); this.getTableData();
}, },
search: function(searchObj) { search: function (searchObj) {
this.searchLabel = {}; this.searchLabel = {};
this.pageObj.pageNo = 1; this.pageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {
@@ -358,7 +372,7 @@ export default {
} }
this.getTableData(); this.getTableData();
}, },
viewAlertType: function(type, typeObj){ viewAlertType: function (type, typeObj) {
this.closeViews(); this.closeViews();
switch (type) { switch (type) {
case 1: case 1:
@@ -383,18 +397,18 @@ export default {
break; break;
} }
}, },
fillProject:function(module){ fillProject: function (module) {
this.$get('project', {"id":module.projectId}).then(response => { this.$get('project', {"id": module.projectId}).then(response => {
if (response.code == 200) { if (response.code == 200) {
module.project = response.data.list[0]; module.project = response.data.list[0];
} }
}) })
}, },
closeViews:function(){ closeViews: function () {
this.$refs.alertConfigBox.show(false,false); this.$refs.alertConfigBox.show(false, false);
this.$refs.projectBox.show(false,false); this.$refs.projectBox.show(false, false);
this.$refs.moduleBox.show(false,false); this.$refs.moduleBox.show(false, false);
this.viewAsset=false; this.viewAsset = false;
} }
}, },
mounted() { mounted() {
@@ -406,5 +420,5 @@ export default {
? JSON.parse(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; : this.tableTitle;
} }
} }
</script> </script>