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

perf: 引入pl-table，解决table数据过多卡顿问题

Browse Source
This commit is contained in:
陈劲松
2020-04-15 22:01:56 +08:00
parent 75d1f38eb4
commit dae339346b
7 changed files with 75 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
nezha-fronted/package-lock.json generated
View File

@@ -7438,6 +7438,25 @@
"find-up": "^2.1.0"
}
},
"pl-table": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/pl-table/-/pl-table-2.5.8.tgz",
"integrity": "sha512-XFTxK3tXhZO3hR7l40qZkYI2RsOPiwUlTrJ8ZdEzYXXeuVmO/JW5I+2xKNBqXK0QkZJ6sjbTWsCMdm6KC7UjXw==",
"requires": {
"deepmerge": "^1.2.0",
"normalize-wheel": "^1.0.1",
"plxy-grid": "^2.8.1",
"resize-observer-polyfill": "^1.5.0",
"throttle-debounce": "^1.0.1",
"vuedraggable": "^2.20.0",
"xe-utils": "2.3.0"
}
},
"plxy-grid": {
"version": "2.8.3",
"resolved": "https://registry.npmjs.org/plxy-grid/-/plxy-grid-2.8.3.tgz",
"integrity": "sha512-udl+J0sCjTyLJScMVnAfSTvyqyd9VbNlZ76ywMTqaKZKLnGykuOaUr77YLKH6OMgfBoX30MftjRticvjNca98g=="
},
"portfinder": {
"version": "1.0.25",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
@@ -12736,6 +12755,11 @@
"safe-buffer": "~5.1.0"
}
},
"xe-utils": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/xe-utils/-/xe-utils-2.3.0.tgz",
"integrity": "sha512-AGb3oZxoktHHk1i1TD/v6aQyUbJUqMNuBp1zMFuNBCT8HjP7OD+C1X/8m14jzxOC1YeXfoHwwYmGDUMgqZnsFg=="
},
"xlsx": {
"version": "0.15.6",
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.15.6.tgz",

1
nezha-fronted/package.json
View File

@@ -15,6 +15,7 @@
"element-ui": "^2.13.0",
"file-saver": "^2.0.2",
"node-sass": "^4.13.1",
"pl-table": "^2.5.8",
"vue": "^2.5.2",
"vue-i18n": "^8.15.1",
"vue-resource": "^1.5.1",

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

@@ -660,11 +660,15 @@ li{
/* end--二级顶部工具栏*/
/* start--内容*/
.nz-table.el-table{
.nz-table {
border: none;
font-size: 12px;
}
.nz-table.el-table::before {
.nz-table .el-table {
border: none;
font-size: 12px;
}
.nz-table::before {
height: 0;
}
.nz-table .el-table__fixed-right::before, .nz-table .el-table__fixed::before {
@@ -676,17 +680,17 @@ li{
.nz-table .el-table__header {
line-height: 36px;
}
.nz-table.el-table .el-table__header th {
.nz-table .el-table__header th {
color: #666666;
font-weight: normal;
font-size: 14px;
border-left: 1px solid white;
border-bottom: 1px solid #d4d4d4;
}
.nz-table.el-table .el-table__header th:first-of-type {
.nz-table .el-table__header th:first-of-type {
border-left: none;
}
.nz-table.el-table .el-table__header th:nth-last-child(2) {
.nz-table .el-table__header th:nth-last-child(2) {
border-right: none;
}
.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 {
@@ -695,37 +699,40 @@ li{
.nz-table .el-table__body {
width: 100% !important;
}
.chart-table .nz-table.el-table td {
.nz-table .el-table__virtual-wrapper {
width: 100% !important;
}
.chart-table .nz-table td {
background-color: white;
}
.nz-table.el-table td {
.nz-table td {
padding: 0;
background-color: $content-right-background-color;
}
.nz-table.el-table td.has-message .cell {
.nz-table td.has-message .cell {
background-color: #f8d7da;
}
.nz-table.el-table td.has-no-message .cell {
.nz-table td.has-no-message .cell {
background-color: #d4edda;
}
.nz-table.el-table th {
.nz-table th {
padding: 0;
}
.nz-table.el-table th:last-of-type {
.nz-table th:last-of-type {
background-color: $content-right-background-color;
}
.nz-table .el-table__body-wrapper {
background-color: $content-right-background-color;
overflow: hidden;
}
.chart-table .nz-table.el-table th:last-of-type {
.chart-table .nz-table th:last-of-type {
background-color: white;
}
.chart-table .nz-table .el-table__body-wrapper {
background-color: white;
}
//小信息栏边框
.nz-table.el-table th .cell{
.nz-table th .cell{
height: 32px;
line-height: 32px;
display:flex;
@@ -733,11 +740,11 @@ li{
border-right: 1px solid #d4d4d4;
/*box-shadow: inset -1px -2px 1px 0 rgba(0,0,0,0.11), inset 2px 2px 1px 0 rgba(255,255,255,0.50);*/
}
.nz-table.el-table td .cell{
.nz-table td .cell{
min-height: 38px;
line-height: 38px;
}
.nz-table.el-table td.alert-message-list-labels .cell{
.nz-table td.alert-message-list-labels .cell{
line-height: unset;
padding: 3px;
}

3
nezha-fronted/src/components/common/language/cn.js
View File

@@ -603,7 +603,8 @@ const cn = {
requiredMibFile: "必须上传MIB文件",
vendor: "厂商",
type: "类型",
mibBrowser: "MIB浏览器"
mibBrowser: "MIB浏览器",
noData: "暂无数据"
},
system: {
system: "系统设置",

1
nezha-fronted/src/components/common/language/en.js
View File

@@ -607,6 +607,7 @@ const en = {
vendor:'Vendor',
type:'Type',
mibBrowser: 'MIB browser',
noData: "No Data"
},
system:{
system:'System',

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

@@ -217,20 +217,21 @@
<span @click="clearResult" class="mib-browser-table-op" :title="$t('overall.clear')"><i class="el-icon-close"></i></span>
</span>
</div>
<el-table :data="resultData" border class="mib-browser-table nz-table" v-scrollBar:el-table height="calc(100% - 31px)" style="width: 100%;" v-loading="loading">
<el-table-column label="Name/OID">
<div slot-scope="scope" class="too-long-split" @click="searchParam.oid = scope.row.oid">{{scope.row.name ? scope.row.name : scope.row.oid}}</div>
</el-table-column>
<el-table-column label="Value">
<div slot-scope="scope" @click="searchParam.oid = scope.row.oid">{{scope.row.value}}</div>
</el-table-column>
<el-table-column label="Type">
<div slot-scope="scope" @click="searchParam.oid = scope.row.oid">{{scope.row.type}}</div>
</el-table-column>
<el-table-column label="IP:Port">
<div slot-scope="scope" @click="searchParam.oid = scope.row.oid">{{scope.row.ip + (scope.row.port ? ":" + scope.row.port : "")}}</div>
</el-table-column>
</el-table>
<pl-table :row-height="28" use-virtual :datas="resultData" border :empty-text="$t('config.mib.noData')"
class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-loading="loading" v-scrollBar:el-table :pagination-show="false">
<pl-table-column label="Name/OID" v-slot="{row}">
<div class="too-long-split" @click="searchParam.oid = row.oid">{{row.name ? row.name : row.oid}}</div>
</pl-table-column>
<pl-table-column label="Value" v-slot="{row}">
<template><div @click="searchParam.oid = row.oid">{{row.value}}</div></template>
</pl-table-column>
<pl-table-column label="Type" v-slot="{row}">
<template><div @click="searchParam.oid = row.oid">{{row.type}}</div></template>
</pl-table-column>
<pl-table-column label="IP:Port" v-slot="{row}">
<template><div @click="searchParam.oid = row.oid">{{row.ip + (row.port ? ":" + row.port : "")}}</div></template>
</pl-table-column>
</pl-table>
</div>
</div>
@@ -749,11 +750,11 @@
}
}
.mib-browser-table.nz-table.el-table th .cell {
.mib-browser-table.nz-table th .cell {
height: 28px;
line-height: 28px;
}
.mib-browser-table.nz-table.el-table td .cell {
.mib-browser-table.nz-table td .cell {
height: 28px;
min-height: 28px;
line-height: 28px;

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

@@ -14,9 +14,14 @@ import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import axios from 'axios';
import plTable from 'pl-table'
import 'pl-table/themes/index.css'
import {post, get, put, del} from './http.js'
import {toTop, clickoutside, scrollBar, bottomBoxWindow} from './tools.js'
import Pagination from "./components/common/pagination"; //引入全局分页组件
import searchInput from "./components/common/searchInput"; //搜索框组件
import elementSet from "./components/common/elementSet"; //自定义表头组件
@@ -85,6 +90,7 @@ Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(Vuex);
Vue.use(VueResource);
Vue.use(plTable);
/*指令*/
Vue.directive('clickoutside', clickoutside);
@@ -103,5 +109,7 @@ export default vm;
/* 重写组件内容 */
const elUi = require("element-ui");
const pl = require("pl-table");
//去掉el-table表头右侧的滚动条预留空间
elUi.Table.components.TableHeader.computed.hasGutter = () => {return false;};
pl.PlTable.components.ElTable.components.TableHeader.computed.hasGutter = () => {return false;};