diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json index 15245a818..88c58f08e 100644 --- a/nezha-fronted/package-lock.json +++ b/nezha-fronted/package-lock.json @@ -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", diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json index 229aaa63d..093b08572 100644 --- a/nezha-fronted/package.json +++ b/nezha-fronted/package.json @@ -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", diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 655d8cea0..65e970f54 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -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; } diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js index 47d8188cc..23d8ae4a6 100644 --- a/nezha-fronted/src/components/common/language/cn.js +++ b/nezha-fronted/src/components/common/language/cn.js @@ -603,7 +603,8 @@ const cn = { requiredMibFile: "必须上传MIB文件", vendor: "厂商", type: "类型", - mibBrowser: "MIB浏览器" + mibBrowser: "MIB浏览器", + noData: "暂无数据" }, system: { system: "系统设置", diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js index 5b61becbf..c657d504c 100644 --- a/nezha-fronted/src/components/common/language/en.js +++ b/nezha-fronted/src/components/common/language/en.js @@ -607,6 +607,7 @@ const en = { vendor:'Vendor', type:'Type', mibBrowser: 'MIB browser', + noData: "No Data" }, system:{ system:'System', diff --git a/nezha-fronted/src/components/page/config/mibBrowser.vue b/nezha-fronted/src/components/page/config/mibBrowser.vue index d872ccb4b..0cd1fba9d 100644 --- a/nezha-fronted/src/components/page/config/mibBrowser.vue +++ b/nezha-fronted/src/components/page/config/mibBrowser.vue @@ -217,20 +217,21 @@ - - -
{{scope.row.name ? scope.row.name : scope.row.oid}}
- - -
{{scope.row.value}}
- - -
{{scope.row.type}}
- - -
{{scope.row.ip + (scope.row.port ? ":" + scope.row.port : "")}}
- - + + +
{{row.name ? row.name : row.oid}}
+ + + + + + + + + + + @@ -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; diff --git a/nezha-fronted/src/main.js b/nezha-fronted/src/main.js index a15255e49..e6ac3d5ff 100644 --- a/nezha-fronted/src/main.js +++ b/nezha-fronted/src/main.js @@ -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;};