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;

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

@@ -2,6 +2,7 @@
.config {
height: 100%;
}
.top-tools #alert-add .top-tool-btn-txt .nz-icon {
display: inline-block;
font-size: 12px;
@@ -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
@@ -72,10 +79,15 @@
</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"
@@ -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',