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--按钮组件*/
/*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扩展 */
.input-x-mini-22 .el-input__inner {
height: 22px;

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

@@ -7,7 +7,7 @@
@next-click="next"
@current-change="current"
:current-page="pageObj.pageNo"
:page-sizes="[20, 50, 100, 300]"
:page-sizes="[20, 50, 100]"
:page-size="20"
layout="total, prev, pager, next,sizes,jumper"
:total="this.pageObj.total"
@@ -65,7 +65,7 @@ export default {
}
.el-pager li, .el-pagination .btn-next, .el-pagination .btn-prev {
margin:5px 10px 0px 10px;
margin:5px 5px 0px 5px;
padding: 0 4px;
font-size: 13px;
min-width: 20px;
@@ -78,6 +78,12 @@ export default {
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{
font-family: NotoSansSC-Regular;
color: #666666;

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

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