Merge remote-tracking branch 'origin/codeCheck' into codeCheck
# Conflicts: # nezha-fronted/src/components/common/header.vue
This commit is contained in:
wanghaoyu
@@ -1,22 +1,22 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.content-box {
|
.content-box {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
/*通用*/
|
|
||||||
|
|
||||||
|
/* begin--通用*/
|
||||||
.margin-l-5 {
|
.margin-l-5 {
|
||||||
margin-left: 5px !important;
|
margin-left: 5px !important;
|
||||||
}
|
}
|
||||||
@@ -41,6 +41,12 @@ html {
|
|||||||
.margin-b-10 {
|
.margin-b-10 {
|
||||||
margin-bottom: 10px !important;
|
margin-bottom: 10px !important;
|
||||||
}
|
}
|
||||||
|
.float-left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.float-right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
.line-100 {
|
.line-100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
@@ -51,128 +57,175 @@ html {
|
|||||||
}
|
}
|
||||||
/*侧滑文字*/
|
/*侧滑文字*/
|
||||||
.el-form-item .el-form-item__label{
|
.el-form-item .el-form-item__label{
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
text-align : left;
|
text-align : left;
|
||||||
}
|
}
|
||||||
/*侧滑输入框高度*/
|
/*侧滑输入框高度*/
|
||||||
.el-input .el-input__inner{
|
.el-input .el-input__inner{
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
height: 26px;
|
height: 26px;
|
||||||
}
|
}
|
||||||
/*侧滑输入框宽度*/
|
/*侧滑输入框宽度*/
|
||||||
.el-form-item__content .el-input{
|
.right-menu .el-form-item__content .el-input{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
/* begin--按钮组件*/
|
||||||
|
.nz-btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
line-height: 18px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 4px 14px;
|
||||||
|
text-align: center;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.nz-btn.nz-btn-size-normal {} /* size默认normal，是normal时这个class可不写*/
|
||||||
|
.nz-btn.nz-btn-size-small {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 18px;
|
||||||
|
padding: 2px 12px;
|
||||||
|
}
|
||||||
|
.nz-btn.nz-btn-style-normal {
|
||||||
|
background-color: #16b;
|
||||||
|
background-image: linear-gradient(#2d8cec, #16b);
|
||||||
|
border: 1px solid #0b4075;
|
||||||
|
border-top-color: #16b;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 1px 1px rgba(0,0,0,.75);
|
||||||
|
}
|
||||||
|
.nz-btn.nz-btn-style-light {
|
||||||
|
background-color: #dedede;
|
||||||
|
background-image: linear-gradient(white,#dedede);
|
||||||
|
border: 1px solid #b8b8b8;
|
||||||
|
border-top-color: #dedede;
|
||||||
|
color: #444;
|
||||||
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||||
|
}
|
||||||
|
.nz-btn.nz-btn-style-light:hover:not(.nz-btn-disabled) {
|
||||||
|
background-image: linear-gradient(#dedede,#c5c5c5);
|
||||||
|
}
|
||||||
|
.nz-btn.nz-btn-style-normal:hover:not(.nz-btn-disabled) {
|
||||||
|
background-image: linear-gradient(#16b, #0d4d8c);
|
||||||
|
}
|
||||||
|
.nz-btn:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.nz-btn.nz-btn-disabled {
|
||||||
|
background-image: none;
|
||||||
|
background-color: #666;
|
||||||
|
color: white;
|
||||||
|
text-shadow: none;
|
||||||
|
border-color: #999;
|
||||||
|
}
|
||||||
|
.nz-btn-group .nz-btn:first-child:not(:last-child) {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
.nz-btn-group .nz-btn:last-child:not(:first-child) {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
/* end--按钮组件*/
|
||||||
|
/* end--通用*/
|
||||||
|
|
||||||
/* begin--左侧列表*/
|
/* begin--左侧列表*/
|
||||||
.content-left {
|
.content-left {
|
||||||
float: left;
|
float: left;
|
||||||
width: 322px;
|
width: 270px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #eeeeee;
|
border-right: 1px solid #cccccc;
|
||||||
border-right: 1px solid #dadada;
|
padding: 0 12px 0 30px;
|
||||||
padding: 0 12px 0 11px;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 14px;
|
|
||||||
}
|
}
|
||||||
.sidebar-title {
|
.sidebar-title {
|
||||||
padding: 20px 0 0 15px;
|
padding-top: 20px;
|
||||||
color: #5e5e5e;
|
color: #aaaaaa;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
.sidebar-info {
|
.sidebar-info {
|
||||||
margin-top: 27px;
|
|
||||||
border: 1px solid #cacaca;
|
|
||||||
border-radius: 6px;
|
|
||||||
height: calc(90vh - 55px);
|
height: calc(90vh - 55px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
padding-top: 10px;
|
||||||
.sidebar-info-item:first-of-type {
|
|
||||||
border-radius: 6px 6px 0 0;
|
|
||||||
}
|
}
|
||||||
.sidebar-info-item {
|
.sidebar-info-item {
|
||||||
height: 39px;
|
line-height: 1.5rem;
|
||||||
line-height: 39px;
|
padding: 0 10px 0 10px;
|
||||||
padding: 0 8px 0 32px;
|
|
||||||
border-bottom: 1px solid #cacaca;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #5e5e5e;
|
color: #444444;
|
||||||
|
margin: 0 0 7px;
|
||||||
}
|
}
|
||||||
.side-bar-menu-edit {
|
.side-bar-menu-edit {
|
||||||
line-height: 40px;
|
line-height: 1.5rem;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
.sidebar-info-item-active {
|
.sidebar-info-item-active {
|
||||||
background-color: #5e5e5e;
|
border-left: 3px solid #e07700;
|
||||||
color: white;
|
font-weight: bold;
|
||||||
}
|
|
||||||
.sidebar-info-foot {
|
|
||||||
border-radius: 6px 6px 0 0;
|
|
||||||
}
|
}
|
||||||
/* end--左侧列表*/
|
/* end--左侧列表*/
|
||||||
|
|
||||||
/* begin--右侧内容*/
|
/* begin--右侧内容*/
|
||||||
/* begin--顶部工具栏*/
|
.content-right {
|
||||||
|
height: calc(100% - 131px);
|
||||||
|
margin-left: 270px;
|
||||||
|
padding: 0 15px 0 25px;
|
||||||
|
}
|
||||||
|
/* begin--顶部工具栏*/
|
||||||
.top-tools {
|
.top-tools {
|
||||||
padding: 22px 0 13px 0;
|
padding: 22px 0 13px 0;
|
||||||
}
|
}
|
||||||
.top-tools .el-button--mini {
|
|
||||||
padding-top: 6px;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
}
|
|
||||||
.top-tools .top-tool {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.top-tools .top-tool-right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.top-tools .top-tool-search {
|
.top-tools .top-tool-search {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
.top-tools .el-button-group {
|
/* end--顶部工具栏*/
|
||||||
float: left;
|
/* start--内容*/
|
||||||
}
|
|
||||||
.top-tools .top-tool-btn {
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.top-tools .top-tool-btn:focus, .top-tools .top-tool-btn:hover {
|
|
||||||
color: #606266;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.top-tools .top-tool-btn-active {
|
|
||||||
color: white;
|
|
||||||
border: 1px solid #656565;
|
|
||||||
background-color: #656565;
|
|
||||||
}
|
|
||||||
.top-tools .top-tool-btn-active:focus, .top-tools .top-tool-btn-active:hover {
|
|
||||||
color: white;
|
|
||||||
background-color: #656565;
|
|
||||||
border: 1px solid #656565;
|
|
||||||
}
|
|
||||||
.top-tools .top-tool-btn-txt {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
/* end--顶部工具栏*/
|
|
||||||
/* start--内容*/
|
|
||||||
.content-right>.el-table{
|
.content-right>.el-table{
|
||||||
border-radius: 4px;
|
border: 1px solid #d4d4d4;
|
||||||
border: 1px solid #D7D7D7;
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
.content-right {
|
.content-right .el-table::before {
|
||||||
height: calc(100% - 131px);
|
height: 0;
|
||||||
margin-left: 322px;
|
|
||||||
padding: 0 15px 0 25px;
|
|
||||||
}
|
}
|
||||||
/* end--内容*/
|
.content-right .el-table--border::after, .el-table--group::after {
|
||||||
/* start--分页*/
|
width: 0;
|
||||||
|
}
|
||||||
|
.content-right .el-table__header {
|
||||||
|
line-height: 40px;
|
||||||
|
text-shadow: 1px 1px white;
|
||||||
|
}
|
||||||
|
.content-right .el-table .el-table__header th {
|
||||||
|
background-image: linear-gradient(#eee,#e0e0e0);
|
||||||
|
color: #444444;
|
||||||
|
border-right: 1px solid #d4d4d4;
|
||||||
|
border-left: 1px solid white;
|
||||||
|
border-bottom: 1px solid #d4d4d4;;
|
||||||
|
}
|
||||||
|
.content-right .el-table .el-table__header th:first-of-type {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
.content-right .el-table .el-table__header th:nth-last-child(2) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
.content-right .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
.content-right .el-table td {
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
/* end--内容*/
|
||||||
|
/* start--分页*/
|
||||||
.pagination {
|
.pagination {
|
||||||
padding-top: 18px;
|
padding-top: 18px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
/* end--分页*/
|
/* end--分页*/
|
||||||
|
|
||||||
/* begin--右弹框滑入滑出动画*/
|
/* begin--右弹框滑入滑出动画*/
|
||||||
@keyframes slide-in-from-right {
|
@keyframes slide-in-from-right {
|
||||||
from {right: -800px}
|
from {right: -800px}
|
||||||
to {right: 0}
|
to {right: 0}
|
||||||
@@ -187,9 +240,9 @@ html {
|
|||||||
.right-box-leave-active {
|
.right-box-leave-active {
|
||||||
animation: slide-out-to-right 0.4s;
|
animation: slide-out-to-right 0.4s;
|
||||||
}
|
}
|
||||||
/* end--右弹框滑入滑出动画*/
|
/* end--右弹框滑入滑出动画*/
|
||||||
|
|
||||||
/* begin--右子弹框动画*/
|
/* begin--右子弹框动画*/
|
||||||
@keyframes appear {
|
@keyframes appear {
|
||||||
from {opacity:0}
|
from {opacity:0}
|
||||||
to {opacity:1}
|
to {opacity:1}
|
||||||
@@ -204,7 +257,7 @@ html {
|
|||||||
.right-sub-box-leave-active {
|
.right-sub-box-leave-active {
|
||||||
animation: disappear 0.4s;
|
animation: disappear 0.4s;
|
||||||
}
|
}
|
||||||
/* end--右子弹框动画*/
|
/* end--右子弹框动画*/
|
||||||
/* end--右侧内容*/
|
/* end--右侧内容*/
|
||||||
|
|
||||||
/* begin--右侧弹框*/
|
/* begin--右侧弹框*/
|
||||||
@@ -219,8 +272,8 @@ html {
|
|||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
|
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
|
||||||
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint {
|
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-edit-endpoint, .right-box-panel {
|
||||||
width: 520px;
|
width: 520px;
|
||||||
height: calc(100% - 100px);
|
height: calc(100% - 100px);
|
||||||
}
|
}
|
||||||
@@ -228,7 +281,7 @@ html {
|
|||||||
width: 820px;
|
width: 820px;
|
||||||
height: calc(100% - 100px);
|
height: calc(100% - 100px);
|
||||||
}
|
}
|
||||||
/* begin--右侧弹框--顶部按钮*/
|
/* begin--右侧弹框--顶部按钮*/
|
||||||
.right-box-top-btns {
|
.right-box-top-btns {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@@ -251,9 +304,9 @@ html {
|
|||||||
border-top: none;
|
border-top: none;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
/* end--右侧弹框--顶部按钮*/
|
/* end--右侧弹框--顶部按钮*/
|
||||||
|
|
||||||
/* begin--右侧弹框--内容*/
|
/* begin--右侧弹框--内容*/
|
||||||
.right-box-title {
|
.right-box-title {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
@@ -315,9 +368,9 @@ html {
|
|||||||
.right-box-row-btn-active:hover {
|
.right-box-row-btn-active:hover {
|
||||||
border: 1px solid #656565;
|
border: 1px solid #656565;
|
||||||
}
|
}
|
||||||
/* end--右侧弹框--内容*/
|
/* end--右侧弹框--内容*/
|
||||||
|
|
||||||
/* begin--右侧弹框--底部按钮*/
|
/* begin--右侧弹框--底部按钮*/
|
||||||
.right-box-bottom-btns {
|
.right-box-bottom-btns {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -352,7 +405,7 @@ html {
|
|||||||
.right-box-bottom-btn-50 {
|
.right-box-bottom-btn-50 {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
/* end--右侧弹框--底部按钮*/
|
/* end--右侧弹框--底部按钮*/
|
||||||
/* end--右侧弹框*/
|
/* end--右侧弹框*/
|
||||||
/* begin--endpoint->子弹框asset搜索框前缀和后缀*/
|
/* begin--endpoint->子弹框asset搜索框前缀和后缀*/
|
||||||
.right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend, .assets-box .el-input-group__append, .assets-box .el-input-group__prepend {
|
.right-sub-box .el-input-group__append, .right-sub-box .el-input-group__prepend, .assets-box .el-input-group__append, .assets-box .el-input-group__prepend {
|
||||||
|
|||||||
6
nezha-fronted/src/assets/img/lang-box-active.svg
Normal file
6
nezha-fronted/src/assets/img/lang-box-active.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="27px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1090 -737 )">
|
||||||
|
<path d="M 30 19.5943053208275 C 29.9711583333333 20.9438560308555 28.8528894086021 22.0377313464236 27.4734765591398 22.0377313464236 L 26.2247422311828 22.0377313464236 L 26.2247422311828 24.4810323018934 C 26.2247422311828 25.830374526648 25.1063028225806 26.9242915497896 23.7271030913979 27 L 2.49738341397849 27 C 1.1181410483871 26.9242081609397 0 25.830374526648 0 24.4809489130435 L 0 7.37788393232819 C 0 6.0285 1.11809841397849 4.93466636570827 2.49738341397849 4.93466639200561 L 3.74624561827957 4.93466639200561 L 3.74624561827957 2.4912403401122 C 3.74624561827957 1.14168963008415 4.86438666666667 0.0480227734922861 6.24397 0 L 27.4735191935484 0 C 28.8529320430108 0.0480227734922861 29.9712435752688 1.14168963008415 30 2.4912403401122 L 30 19.5943053208275 Z M 23.7271456989247 6.15621261395512 L 2.49738341397849 6.15621261395512 C 1.8077622311828 6.15621261395512 1.24869169354839 6.70312944424965 1.24869172043011 7.37788393232819 L 1.24869172043011 24.4809489130435 C 1.24869172043011 25.1555783309958 1.80776225806452 25.7026619389902 2.49738341397849 25.7026619389902 L 23.7271456989247 25.7026619389902 C 24.4167668817204 25.7026619389902 24.9758374193548 25.1555783309958 25 24.4809489130435 L 25 7.37788393232819 C 24.9758374193548 6.70312941795231 24.4167668817204 6.15621261395512 23.7271456989247 6.15621261395512 Z M 28.7223387634409 2.4912403401122 C 28.7223387634409 1.81648582573633 28.1632682258065 1.26969409186536 27.4734765591398 1.26969411816269 L 6.24392739247312 1.26969411816269 C 5.55409309139785 1.26969411816269 4.99502258064516 1.81648585203366 4.99502258064516 2.4912403401122 L 4.99502258064516 5 L 23.7271456989247 5 C 25.1064306989247 4.93466639200561 26.2249553494624 6.02850002629734 26 7.37788393232819 L 26 20.8159766392006 L 27.4736470698925 20.8159766392006 C 28.1632682526882 20.8159766392006 28.7223387903226 20.2688930312062 28.7223387634409 19.5943053208275 L 28.7223387634409 2.49107356241234 Z " fill-rule="nonzero" fill="#31759c" stroke="none" transform="matrix(1 0 0 1 1090 737 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
nezha-fronted/src/assets/img/lang-box.svg
Normal file
6
nezha-fronted/src/assets/img/lang-box.svg
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="29px" height="27px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1134 -737 )">
|
||||||
|
<path d="M 29 19.5943053208275 C 28.9721197222222 20.9438560308555 27.8911264283154 22.0377313464236 26.5576940071685 22.0377313464236 L 25.35058415681 22.0377313464236 L 25.35058415681 24.4810323018934 C 25.35058415681 25.830374526648 24.269426061828 26.9242915497896 22.9361996550179 27 L 2.41413730017921 27 C 1.08086968010753 26.9242081609397 0 25.830374526648 0 24.4809489130435 L 0 7.37788393232819 C 0 6.0285 1.08082846684588 4.93466636570827 2.41413730017921 4.93466639200561 L 3.62137076433692 4.93466639200561 L 3.62137076433692 2.4912403401122 C 3.62137076433692 1.14168963008415 4.70224044444445 0.0480227734922861 6.03583766666667 0 L 26.5577352204301 0 C 27.8911676415771 0.0480227734922861 28.9722021227599 1.14168963008415 29 2.4912403401122 L 29 19.5943053208275 Z M 22.9362408422939 6.15621261395512 L 2.41413730017921 6.15621261395512 C 1.74750349014337 6.15621261395512 1.20706863709677 6.70312944424965 1.20706866308244 7.37788393232819 L 1.20706866308244 24.4809489130435 C 1.20706866308244 25.1555783309958 1.74750351612903 25.7026619389902 2.41413730017921 25.7026619389902 L 22.9362408422939 25.7026619389902 C 23.6028746523297 25.7026619389902 24.1433095053763 25.1555783309958 24 24.4809489130435 L 24 7.37788393232819 C 24.1433095053763 6.70312941795231 23.6028746523297 6.15621261395512 22.9362408422939 6.15621261395512 Z M 27.7649274713262 2.4912403401122 C 27.7649274713262 1.81648582573633 27.2244926182796 1.26969409186536 26.5576940071685 1.26969411816269 L 6.03579647939068 1.26969411816269 C 5.36895665501792 1.26969411816269 4.82852182795699 1.81648585203366 4.82852182795699 2.4912403401122 L 4.82852182795699 5 L 22.9362408422939 5 C 24.2695496756272 4.93466639200561 25.350790171147 6.02850002629734 25 7.37788393232819 L 25 20.8159766392006 L 26.5578588342294 20.8159766392006 C 27.2244926442652 20.8159766392006 27.7649274973118 20.2688930312062 27.7649274713262 19.5943053208275 L 27.7649274713262 2.49107356241234 Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.603921568627451" transform="matrix(1 0 0 1 1134 737 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
nezha-fronted/src/assets/img/login-background.png
Normal file
BIN
nezha-fronted/src/assets/img/login-background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
@@ -1,485 +1,440 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="submenu">
|
<div class="submenu">
|
||||||
<el-menu
|
<el-menu
|
||||||
class="el-menu-demo"
|
class="nz-menu"
|
||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
background-color="#ffffff"
|
background-color="#232f3e"
|
||||||
unique-opened
|
text-color="#ffffff"
|
||||||
>
|
unique-opened
|
||||||
<el-submenu index="0">
|
>
|
||||||
<template slot="title">
|
<el-submenu index="0" popper-class="nz-submenu">
|
||||||
<div class="menu-create">
|
<template slot="title">
|
||||||
<i class="el-icon-plus"></i>
|
<div class="menu-create">
|
||||||
<div>{{$t('overall.create')}}</div>
|
<i class="el-icon-plus"></i>
|
||||||
</div>
|
<div>{{$t('overall.create')}}</div>
|
||||||
</template>
|
|
||||||
<template v-for="(item, index) in createMenu">
|
|
||||||
<el-menu-item :index="'0-' + index">
|
|
||||||
<div @click="createBox(item)">
|
|
||||||
<span>{{item.label}}</span>
|
|
||||||
</div>
|
|
||||||
</el-menu-item>
|
|
||||||
</template>
|
|
||||||
</el-submenu>
|
|
||||||
<el-menu-item index="1" @click="jumpTo('dashboard')">
|
|
||||||
<div>
|
|
||||||
{{$t('overall.dashboard')}}
|
|
||||||
</div>
|
|
||||||
</el-menu-item>
|
|
||||||
<el-submenu index="2">
|
|
||||||
<template slot="title">
|
|
||||||
<div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
|
|
||||||
</template>
|
|
||||||
<template v-for="(item, index) in projectData">
|
|
||||||
<el-menu-item :index="'2-' + index">
|
|
||||||
<div @click="jumpToProject(item)">
|
|
||||||
<span>{{item.name}}</span>
|
|
||||||
<div @click.stop="toEditProject(item)" class="menu-edit"><i
|
|
||||||
class="el-icon-edit-outline"></i></div>
|
|
||||||
</div>
|
|
||||||
</el-menu-item>
|
|
||||||
</template>
|
|
||||||
</el-submenu>
|
|
||||||
<el-submenu index="3">
|
|
||||||
<template slot="title">
|
|
||||||
<div @click="jumpTo('asset')">{{$t('overall.asset')}}</div>
|
|
||||||
</template>
|
|
||||||
<template v-for="(item, index) in assetData">
|
|
||||||
<el-menu-item :index="'3-' + index">
|
|
||||||
<div @click="jumpToAsset('asset',item.id)">
|
|
||||||
<span>{{item.name}}</span>
|
|
||||||
<el-popover
|
|
||||||
placement="bottom"
|
|
||||||
v-model="item[item.name]"
|
|
||||||
trigger="click"
|
|
||||||
>
|
|
||||||
<div class="pop-window-assetType-content">
|
|
||||||
<div class="right-box-top-btns">
|
|
||||||
<div class="right-box-top-btn right-box-top-btn-full"
|
|
||||||
@click="item[item.name] = false">
|
|
||||||
<div class="right-box-btn-icon">
|
|
||||||
<i class="el-icon-close"></i>
|
|
||||||
</div>
|
|
||||||
<span>{{$t('overall.esc')}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pop-window">
|
|
||||||
<span style="display: block;padding-bottom: 20px">标题</span>
|
|
||||||
<div style="padding-top: 10px;padding-left: 20px">
|
|
||||||
<div>
|
|
||||||
<label style="font-size: 12px">DN name</label>
|
|
||||||
<input class='sidebar-pop-input' v-model="addIdcData.name"/>
|
|
||||||
</div>
|
|
||||||
<div style="padding-top: 40px">
|
|
||||||
<label style="font-size: 12px">Loaction</label>
|
|
||||||
<input class='sidebar-pop-input' v-model="addIdcData.location"/>
|
|
||||||
</div>
|
|
||||||
<div style="padding-top: 40px">
|
|
||||||
<label style="font-size: 12px;padding-right: 20px">负责人</label>
|
|
||||||
<select class='sidebar-pop-input-select'
|
|
||||||
style="margin-left:-40px "
|
|
||||||
v-model="addIdcData.principal"
|
|
||||||
clearable>
|
|
||||||
<option
|
|
||||||
v-for="item in idcUserData"
|
|
||||||
:key="item.key"
|
|
||||||
:label="item.username"
|
|
||||||
:value="item.userId"
|
|
||||||
>
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div style="padding-top: 40px">
|
|
||||||
<label style="font-size: 12px">Tel</label>
|
|
||||||
<input class='sidebar-pop-input' v-model="addIdcData.tel"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-bottom-btns">
|
|
||||||
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
|
||||||
@click.stop="item[item.name]= false">
|
|
||||||
{{$t('overall.cancel')}}
|
|
||||||
</div>
|
|
||||||
<div class="right-box-bottom-btn right-box-bottom-btn-50"
|
|
||||||
@click="editData('idc',item.id)">
|
|
||||||
{{$t('overall.save')}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div @click.stop="getIDCOptionData(item.id)" slot="reference" class="menu-edit">
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
|
||||||
</el-menu-item>
|
|
||||||
</template>
|
|
||||||
</el-submenu>
|
|
||||||
<el-submenu index="4-0">
|
|
||||||
<template slot="title">
|
|
||||||
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
|
|
||||||
</template>
|
|
||||||
<el-menu-item index="4-1">
|
|
||||||
<div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
|
|
||||||
</el-menu-item>
|
|
||||||
<el-menu-item index="4-2">
|
|
||||||
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
|
|
||||||
</el-menu-item>
|
|
||||||
</el-submenu>
|
|
||||||
<el-submenu index="5">
|
|
||||||
<template slot="title">
|
|
||||||
<div @click="jumpTo('account')">{{$t('overall.config')}}</div>
|
|
||||||
</template>
|
|
||||||
<el-menu-item index="5-0">
|
|
||||||
<div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
|
|
||||||
</el-menu-item>
|
|
||||||
<el-menu-item index="5-1">
|
|
||||||
<div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
|
|
||||||
</el-menu-item>
|
|
||||||
</el-submenu>
|
|
||||||
</el-menu>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<div class="header-user-con">
|
|
||||||
<div class="flagselect">
|
|
||||||
</div>
|
|
||||||
<el-popover
|
|
||||||
placement="bottom"
|
|
||||||
title=""
|
|
||||||
width="200"
|
|
||||||
trigger="hover"
|
|
||||||
>
|
|
||||||
<div class="userout">
|
|
||||||
<div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
|
|
||||||
<p>English</p>
|
|
||||||
</div>
|
|
||||||
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')">
|
|
||||||
<p>简体</p>
|
|
||||||
</div>
|
|
||||||
<div style="cursor:no-drop;color:#a6a6a6">
|
|
||||||
<p>русский</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="SignOut" @click="jumpTo('')">
|
|
||||||
退出登录
|
|
||||||
</div>
|
|
||||||
<div slot="reference" class="user-avator">
|
|
||||||
<span>用户名</span>
|
|
||||||
<i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<!-- <project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>-->
|
<template v-for="(item, index) in createMenu">
|
||||||
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
<el-menu-item :index="'0-' + index">
|
||||||
<!--<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>-->
|
<div @click="createBox(item)">
|
||||||
|
<span>{{item.label}}</span>
|
||||||
|
</div>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="1" popper-class="nz-submenu">
|
||||||
|
<template slot="title">
|
||||||
|
<div @click="jumpTo('dashboard')">{{$t('overall.dashboard')}}</div>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="1-0">
|
||||||
|
<div @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="1-1">
|
||||||
|
<div @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
|
||||||
|
<el-submenu index="2" popper-class="nz-submenu">
|
||||||
|
<template slot="title">
|
||||||
|
<div @click="jumpToProject(projectData[0])">{{$t('overall.project')}}</div>
|
||||||
|
</template>
|
||||||
|
<template v-for="(item, index) in projectData">
|
||||||
|
<el-menu-item :index="'2-' + index">
|
||||||
|
<div @click="jumpToProject(item)">
|
||||||
|
<span>{{item.name}}</span>
|
||||||
|
<div @click.stop="toEditProject(item)" class="menu-edit"><i style="color: inherit" class="el-icon-edit-outline"></i></div>
|
||||||
|
</div>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="3" popper-class="nz-submenu">
|
||||||
|
<template slot="title">
|
||||||
|
<div @click="jumpToAsset('asset')">{{$t('overall.asset')}}</div>
|
||||||
|
</template>
|
||||||
|
<template v-for="(item, index) in assetData">
|
||||||
|
<el-menu-item :index="'3-' + index">
|
||||||
|
<div @click="jumpToAsset('asset',item.id)">{{item.name}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="4-0" popper-class="nz-submenu">
|
||||||
|
<template slot="title">
|
||||||
|
<div @click="jumpTo('alertList')">{{$t('overall.alert')}}</div>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="4-1">
|
||||||
|
<div @click="jumpTo('alertList')">{{$t('alert.alertList')}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="4-2">
|
||||||
|
<div @click="jumpTo('alertConfig')">{{$t('alert.alertConfig')}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="5" popper-class="nz-submenu">
|
||||||
|
<template slot="title">
|
||||||
|
<div @click="jumpTo('account')">{{$t('overall.config')}}</div>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="5-0">
|
||||||
|
<div @click="jumpTo('account')">{{$t('config.account.account')}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="5-1">
|
||||||
|
<div @click="jumpTo('promServer')">{{$t('config.promServer.promServerList')}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
</el-menu>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<el-menu
|
||||||
|
class=""
|
||||||
|
mode="horizontal"
|
||||||
|
background-color="#232f3e"
|
||||||
|
text-color="#ffffff"
|
||||||
|
unique-opened
|
||||||
|
>
|
||||||
|
<el-submenu index="6" popper-class="nz-submenu">
|
||||||
|
<template slot="title">
|
||||||
|
<div>{{username}}</div>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="6-0">
|
||||||
|
<div :style="language=='en'?'color:#f90':''" @click="changeLocal('en')">English</div>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="6-1">
|
||||||
|
<div :style="language=='cn'?'color:#f90':''" @click="changeLocal('cn')">中文</div>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item class="nz-menu-line" @click.stop index="6-2">
|
||||||
|
<div style="height: 1px; width: 100%; background-color: #cccccc;"></div>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item index="6-3">
|
||||||
|
<div @click="logout">{{$t('overall.signOut')}}</div>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
</el-menu>
|
||||||
|
<!--<div class="header-user-con">
|
||||||
|
<div class="flagselect">
|
||||||
|
</div>
|
||||||
|
<el-popover
|
||||||
|
placement="bottom"
|
||||||
|
title=""
|
||||||
|
width="200"
|
||||||
|
trigger="hover"
|
||||||
|
>
|
||||||
|
<div class="userout">
|
||||||
|
<div :style="language!='en'?'color:#a6a6a6':''" @click="changeLocal('en')">
|
||||||
|
<p>English</p>
|
||||||
|
</div>
|
||||||
|
<div :style="language=='cn'?'':'color:#a6a6a6'" @click="changeLocal('cn')">
|
||||||
|
<p>简体</p>
|
||||||
|
</div>
|
||||||
|
<div style="cursor:no-drop;color:#a6a6a6">
|
||||||
|
<p>русский</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sign-out" @click="jumpTo('')">
|
||||||
|
退出登录
|
||||||
|
</div>
|
||||||
|
<div slot="reference" class="user-avator">
|
||||||
|
<span>用户名</span>
|
||||||
|
<i class="el-submenu__icon-arrow el-icon-arrow-down header-name-jiantou"></i>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<project-box :project="editProject" @reload="projectReload" ref="projectBox"></project-box>
|
||||||
|
<module-box :currentProject="currentProject" :module="editModule" @reload="" ref="moduleBox"></module-box>
|
||||||
|
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" @reload="" ref="addEndpointBox"></add-endpoint-box>
|
||||||
|
<alert-config-box :parentAlertRule="alertRule" @reload="" ref="alertConfigBox"></alert-config-box>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "Header",
|
name: "Header",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
addIdcData: {
|
username: sessionStorage.getItem("nz-username"),
|
||||||
id: '',
|
language: localStorage.getItem("nz-language"),
|
||||||
name: '',
|
assetData: [],
|
||||||
location: '',
|
projectData: [], //顶部菜单project列表中的数据
|
||||||
principal: '',
|
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
|
||||||
tel: ''
|
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
|
||||||
},
|
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
|
||||||
idcUserData: '',
|
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
|
||||||
IDCOptionData: [],
|
editEndpoint: { //新增/编辑的endpoint
|
||||||
language: localStorage.getItem("language"),
|
|
||||||
assetData: [],
|
|
||||||
projectData: [], //顶部菜单project列表中的数据
|
|
||||||
editProject: {id: '', name: '', remark: ''}, //新增/编辑的project
|
|
||||||
currentProject: {id: '', name: '', remark: ''}, //module/endpoint弹框用来回显project
|
|
||||||
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //新增/编辑的module
|
|
||||||
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module，此处固定为空对象
|
|
||||||
editEndpoint: { //新增/编辑的endpoint
|
|
||||||
id: '',
|
|
||||||
host: '',
|
|
||||||
port: '',
|
|
||||||
param: '',
|
|
||||||
path: '',
|
|
||||||
asset: {id: '', name: '', host: ''},
|
|
||||||
project: {id: '', name: ''},
|
|
||||||
module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
|
|
||||||
moduleId: '',
|
|
||||||
assetId: ''
|
|
||||||
},
|
|
||||||
createMenu: [ //新增按钮内容
|
|
||||||
{
|
|
||||||
label: this.$t('project.project.createProject'),
|
|
||||||
url: 'project',
|
|
||||||
type: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t('project.module.createModule'),
|
|
||||||
url: 'project',
|
|
||||||
type: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t('project.endpoint.createEndpoint'),
|
|
||||||
url: 'project',
|
|
||||||
type: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t('asset.createAsset'),
|
|
||||||
url: 'asset',
|
|
||||||
type: 4
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t('alert.config.createAlertConfig'),
|
|
||||||
url: 'alertConfig',
|
|
||||||
type: 5
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getUserData() {
|
|
||||||
this.$get('sys/user/list').then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.idcUserData = response.data.list
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getIDCOptionData(data) {
|
|
||||||
this.$get('idc?id=' + data).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.addIdcData = response.data.list[0];
|
|
||||||
this.clickFlush(this.addIdcData)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
editData(data, Id) {
|
|
||||||
let idcData = {
|
|
||||||
id: '',
|
|
||||||
name: '',
|
|
||||||
location: '',
|
|
||||||
principal: '',
|
|
||||||
tel: ''
|
|
||||||
}
|
|
||||||
if (data === 'idc') {
|
|
||||||
idcData.id = Id
|
|
||||||
idcData.name = this.addIdcData.name
|
|
||||||
idcData.location = this.addIdcData.location
|
|
||||||
idcData.principal = this.addIdcData.principal
|
|
||||||
idcData.tel = this.addIdcData.tel
|
|
||||||
}
|
|
||||||
this.$put(data, idcData).then(res => {
|
|
||||||
const h = this.$createElement;
|
|
||||||
if (res.code === 200) {
|
|
||||||
this.$notify({
|
|
||||||
message: h('i', {style: 'color: teal'}, '修改成功'),
|
|
||||||
duration: 2000
|
|
||||||
})
|
|
||||||
this.$store.state.flushDataSign = true
|
|
||||||
}else{
|
|
||||||
this.$notify({
|
|
||||||
message: h('i', {style: 'color: teal'}, res.msg),
|
|
||||||
duration: 2000
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
jumpTo(data) {
|
|
||||||
this.$router.push({
|
|
||||||
path: "/" + data,
|
|
||||||
query: {
|
|
||||||
t: +new Date()
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
clickFlush(itemData) {
|
|
||||||
for (let i = 0; i < this.assetData.length; i++) {
|
|
||||||
const element = this.assetData[i];
|
|
||||||
if (element.id === itemData.id) {
|
|
||||||
setTimeout(() => {
|
|
||||||
element[element.name] = true;
|
|
||||||
}, 100)
|
|
||||||
} else {
|
|
||||||
element[element.name] = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getAssetData() {
|
|
||||||
this.$get('idc', this.pageObj).then(response => {
|
|
||||||
if (response.code == 200) {
|
|
||||||
this.assetData = response.data.list
|
|
||||||
this.assetData.forEach(item => {
|
|
||||||
this.$set(item, item.name, false)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
createBox(item) {
|
|
||||||
if (item.type == 1) {
|
|
||||||
this.$refs.projectBox.show(true);
|
|
||||||
this.editProject = {id: '', name: '', remark: ''};
|
|
||||||
} else if (item.type == 2) {
|
|
||||||
this.$refs.moduleBox.show(true);
|
|
||||||
this.editModule = {
|
|
||||||
id: '',
|
id: '',
|
||||||
name: '',
|
host: '',
|
||||||
project: this.$store.state.currentProject,
|
|
||||||
port: '',
|
port: '',
|
||||||
path: '',
|
|
||||||
param: '',
|
param: '',
|
||||||
paramObj: []
|
path: '',
|
||||||
};
|
asset: {id: '', name: '', host: ''},
|
||||||
} else if (item.type == 3) {
|
project: {id: '', name: ''},
|
||||||
this.$refs.addEndpointBox.show(true);
|
module: {id: '', name: '', param: '', paramObj: {}, projectId: ''},
|
||||||
|
moduleId: '',
|
||||||
|
assetId: ''
|
||||||
|
},
|
||||||
|
alertRule: {
|
||||||
|
id: '',
|
||||||
|
alertName: '',
|
||||||
|
type: '',
|
||||||
|
linkObject: {id: '', name: ''},
|
||||||
|
linkId: '',
|
||||||
|
expr: '',
|
||||||
|
last: '',
|
||||||
|
severity: '',
|
||||||
|
summary: '',
|
||||||
|
description: '',
|
||||||
|
receiver: '',
|
||||||
|
},
|
||||||
|
createMenu: [ //新增按钮内容
|
||||||
|
{
|
||||||
|
label: this.$t('project.project.createProject'),
|
||||||
|
url: 'project',
|
||||||
|
type: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('project.module.createModule'),
|
||||||
|
url: 'project',
|
||||||
|
type: 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('project.endpoint.createEndpoint'),
|
||||||
|
url: 'project',
|
||||||
|
type: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('asset.createAsset'),
|
||||||
|
url: 'asset',
|
||||||
|
type: 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('alert.config.createAlertConfig'),
|
||||||
|
url: 'alertConfig',
|
||||||
|
type: 5
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
jumpToAsset(data, id) {
|
methods: {
|
||||||
this.$store.state.assetData.moduleData = data;
|
jumpTo(data) {
|
||||||
this.$store.state.assetData.selectedData = id;
|
this.$router.push({
|
||||||
this.jumpTo(data);
|
path: "/" + data,
|
||||||
},
|
query: {
|
||||||
jumpToProject(p) {
|
t: +new Date()
|
||||||
this.$store.commit('setProject', p);
|
}
|
||||||
this.jumpTo('project');
|
});
|
||||||
},
|
|
||||||
changeLocal(lang) {
|
|
||||||
localStorage.setItem("language", lang);
|
|
||||||
window.location.reload();
|
|
||||||
},
|
|
||||||
getProjectList() {
|
|
||||||
this.$get('project', {}).then(response => {
|
|
||||||
if (response.code == 200) {
|
|
||||||
this.projectData = response.data.list;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
toEditProject(p) {
|
|
||||||
this.$refs.projectBox.show(true);
|
|
||||||
this.editProject = Object.assign({}, p);
|
|
||||||
},
|
|
||||||
projectReload() {
|
|
||||||
this.getProjectList();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getUserData();
|
|
||||||
this.getAssetData();
|
|
||||||
this.getProjectList();
|
|
||||||
}
|
|
||||||
,
|
|
||||||
computed: {
|
|
||||||
projectListReloadWatch() {
|
|
||||||
return this.$store.state.projectListReload;
|
|
||||||
},
|
|
||||||
getIdcData() {
|
|
||||||
return this.$store.state.assetData.idcData
|
|
||||||
}
|
|
||||||
}
|
|
||||||
,
|
|
||||||
watch: {
|
|
||||||
getIdcData:{
|
|
||||||
handler(newVal, oldVal) {
|
|
||||||
this.getAssetData()
|
|
||||||
},
|
},
|
||||||
deep: true,
|
createBox(item) {
|
||||||
},
|
if (item.type == 1) {
|
||||||
projectListReloadWatch(n, o) {
|
this.$refs.projectBox.show(true);
|
||||||
if (n) {
|
this.editProject = {id: '', name: '', remark: ''};
|
||||||
|
} else if (item.type == 2) {
|
||||||
|
this.$refs.moduleBox.show(true);
|
||||||
|
this.editModule = {id: '', name: '', project: this.$store.state.currentProject, port: '', path: '', param: '', paramObj: []};
|
||||||
|
} else if (item.type == 3) {
|
||||||
|
this.$refs.addEndpointBox.show(true);
|
||||||
|
this.$refs.addEndpointBox.clearEndpoints();
|
||||||
|
} else if (item.type == 5) {
|
||||||
|
this.$refs.alertConfigBox.show(true, true);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
jumpToAsset(data, id) {
|
||||||
|
this.$store.state.assetData.moduleData = data;
|
||||||
|
this.$store.state.assetData.selectedData = id;
|
||||||
|
this.jumpTo(data);
|
||||||
|
},
|
||||||
|
jumpToProject(p) {
|
||||||
|
this.currentProject = p;
|
||||||
|
this.$store.commit('setProject', p);
|
||||||
|
this.jumpTo('project');
|
||||||
|
},
|
||||||
|
changeLocal(lang) {
|
||||||
|
if (lang != localStorage.getItem("nz-language")) {
|
||||||
|
localStorage.setItem("nz-language", lang);
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getAssetData() {
|
||||||
|
this.$get('idc', this.pageObj).then(response => {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.assetData = response.data.list
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getProjectList() {
|
||||||
|
this.$get('project', {}).then(response => {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.projectData = response.data.list;
|
||||||
|
let flag = false;
|
||||||
|
//如果currentProject不在新取到的数据里，说明它被删了
|
||||||
|
for (let i = 0; i < this.projectData.length; i++) {
|
||||||
|
if (this.projectData[i].id == this.currentProject.id) {
|
||||||
|
flag = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!flag && this.projectData.length > 0) {
|
||||||
|
this.currentProject = this.projectData[0];
|
||||||
|
this.$store.commit('setProject', this.currentProject);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toEditProject(p) {
|
||||||
|
this.$refs.projectBox.show(true);
|
||||||
|
this.editProject = Object.assign({}, p);
|
||||||
|
},
|
||||||
|
projectReload() {
|
||||||
this.getProjectList();
|
this.getProjectList();
|
||||||
this.$store.commit('projectListChange', false);
|
},
|
||||||
|
logout() {
|
||||||
|
this.$get('logout');
|
||||||
|
this.jumpTo('login');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (!localStorage.getItem("nz-language")) {
|
||||||
|
localStorage.setItem("nz-language", "en");
|
||||||
|
}
|
||||||
|
this.language = localStorage.getItem("nz-language");
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getAssetData();
|
||||||
|
this.getProjectList();
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
projectListReloadWatch() {
|
||||||
|
return this.$store.state.projectListReload;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
projectListReloadWatch(n, o) {
|
||||||
|
if (n) {
|
||||||
|
this.getProjectList();
|
||||||
|
this.$store.commit('projectListChange', false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.el-menu.el-menu--horizontal {
|
.el-menu.el-menu--horizontal{
|
||||||
border-bottom: 0px
|
border-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
.el-submenu__title .el-submenu__icon-arrow {
|
||||||
.el-submenu__title .el-submenu__icon-arrow {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.el-menu--horizontal>.el-menu-item.is-active{
|
||||||
.el-menu--horizontal > .el-menu-item.is-active {
|
border-bottom: 0px;
|
||||||
border-bottom: 0px
|
}
|
||||||
}
|
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,
|
||||||
|
.el-menu--horizontal>.el-menu-item.is-active,
|
||||||
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
|
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||||
border-bottom: 0px
|
border-bottom: 0px;
|
||||||
}
|
color: white;
|
||||||
|
}
|
||||||
|
.el-menu--horizontal.nz-submenu {
|
||||||
|
border: 1px solid #bbbbbb;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
.nz-submenu .el-menu--popup {
|
||||||
|
background-color: white !important;
|
||||||
|
}
|
||||||
|
.nz-submenu .el-menu--popup .el-menu-item {
|
||||||
|
background-color: white !important;
|
||||||
|
}
|
||||||
|
.nz-submenu .el-menu--popup-bottom-start {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item {
|
||||||
|
padding: 0 20px;
|
||||||
|
color: #444444 !important;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
.nz-submenu.el-menu--horizontal .el-menu .el-menu-item:hover {
|
||||||
|
color: #ff9900 !important;
|
||||||
|
}
|
||||||
|
.el-submenu__title .el-icon-plus {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.el-menu-item>div, .el-menu-item>div>div {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.nz-menu-line {
|
||||||
|
cursor: default;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 18px !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.submenu {
|
.submenu {
|
||||||
padding-left: 50%;
|
padding-left: 50%;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
float: left;
|
float: left;
|
||||||
font-size: 22px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background-color: #ffffff;
|
background-color: #232f3e;
|
||||||
z-index: 510;
|
z-index: 510;
|
||||||
box-shadow: 0px 20px 13px -19px #5E5E5E;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.header-right {
|
.header-right {
|
||||||
float: right;
|
float: right;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-user-con {
|
.header-user-con {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-avator {
|
.user-avator {
|
||||||
padding: 0 5px 3px 0;
|
padding: 0 5px 3px 0;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-avator:hover {
|
.user-avator:hover {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: rgba(255, 255, 255, .3);
|
background: rgba(255, 255, 255, .3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-avator span {
|
.user-avator span {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
.user-avator i.iconfont {
|
.user-avator i.iconfont {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
transform: translateY(2.5px);
|
transform: translateY(2.5px);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.userout {
|
.userout {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.userout > div {
|
.userout > div {
|
||||||
width: 33.3%;
|
width: 33.3%;
|
||||||
color: rgba(51, 137, 185, 1);
|
color: rgba(51, 137, 185, 1);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SignOut {
|
.sign-out {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -488,112 +443,28 @@ export default {
|
|||||||
background: rgba(51, 137, 185, 1);
|
background: rgba(51, 137, 185, 1);
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SignOut:hover {
|
.sign-out:hover {
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-name-jiantou {
|
.nz-menu>li:first-of-type {
|
||||||
position: static !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu-demo > li:first-of-type {
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 40%;
|
left: 40%;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
.menu-create {
|
||||||
.menu-create {
|
|
||||||
line-height: 15px;
|
line-height: 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
}
|
}
|
||||||
|
.menu-create .el-icon-plus {
|
||||||
.menu-create .el-icon-plus {
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
}
|
}
|
||||||
|
.menu-edit {
|
||||||
.menu-edit {
|
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pop-window-assetType-content {
|
|
||||||
padding: 1px 15px 15px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pop-window {
|
|
||||||
height: 370px;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-box-top-btns {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-pop-input {
|
|
||||||
position: absolute;
|
|
||||||
right: 50px;
|
|
||||||
width: 200px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #DCDFE6;
|
|
||||||
color: #606266;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-pop-input-select {
|
|
||||||
position: absolute;
|
|
||||||
right: 83px;
|
|
||||||
width: 200px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #DCDFE6;
|
|
||||||
color: #606266;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-box-top-btn {
|
|
||||||
border-radius: 0 0 9px 9px;
|
|
||||||
float: right;
|
|
||||||
color: #656565;
|
|
||||||
height: 30px;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 3px 8px 1px 8px;
|
|
||||||
border: 1px solid #aaaaaa;
|
|
||||||
border-top: none;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-box-bottom-btns {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-box-bottom-btn-cancel {
|
|
||||||
background-color: #DADADA;
|
|
||||||
color: #656565;
|
|
||||||
width: 50%;
|
|
||||||
border-bottom-left-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-box-top-btn-full {
|
|
||||||
background-color: #656565;
|
|
||||||
border: 1px solid #656565;
|
|
||||||
border-top: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-box-bottom-btn-50 {
|
|
||||||
width: 50%;
|
|
||||||
float: right;
|
|
||||||
border-bottom-right-radius: 8px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@media screen and (max-width: 1600px) {
|
/*@media screen and (max-width: 1600px) {
|
||||||
.content-box {
|
.content-box {
|
||||||
background: #a0eea6;
|
background: #a0eea6;
|
||||||
}
|
}
|
||||||
@@ -26,5 +26,5 @@ export default {
|
|||||||
.content-box {
|
.content-box {
|
||||||
background: #b94b7e;
|
background: #b94b7e;
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,9 +5,9 @@ import messages from './language'
|
|||||||
Vue.use(VueI18n)
|
Vue.use(VueI18n)
|
||||||
//从localStorage获取语言选择。
|
//从localStorage获取语言选择。
|
||||||
const i18n = new VueI18n({
|
const i18n = new VueI18n({
|
||||||
locale: localStorage.language || 'en', //初始未选择默认 en 英文
|
locale: localStorage.getItem('nz-language') || 'en', //初始未选择默认 en 英文
|
||||||
messages,
|
messages,
|
||||||
})
|
})
|
||||||
locale.i18n((key, value) => i18n.t(key, value)) //兼容element
|
locale.i18n((key, value) => i18n.t(key, value)) //兼容element
|
||||||
|
|
||||||
export default i18n
|
export default i18n
|
||||||
|
|||||||
@@ -16,6 +16,23 @@ const cn = {
|
|||||||
add: '新增',
|
add: '新增',
|
||||||
option: "操作"
|
option: "操作"
|
||||||
},
|
},
|
||||||
|
dashboard:{
|
||||||
|
title:'仪表盘',
|
||||||
|
panel:{
|
||||||
|
title:'看板',
|
||||||
|
//侧滑框
|
||||||
|
createPanelTitle: "创建面板",
|
||||||
|
createPanelTitleSec:"创建新面板",
|
||||||
|
editPanelTitle: "编辑面板",
|
||||||
|
panelForm:{
|
||||||
|
panelName:"面板名称" ,
|
||||||
|
panelId:"ID"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
metricPreview:{
|
||||||
|
title:'指标预览',
|
||||||
|
}
|
||||||
|
},
|
||||||
asset: {
|
asset: {
|
||||||
tableTitle: {
|
tableTitle: {
|
||||||
id: 'ID',
|
id: 'ID',
|
||||||
|
|||||||
@@ -18,17 +18,39 @@ const en = {
|
|||||||
clearAll: "Clear All",
|
clearAll: "Clear All",
|
||||||
clear: "Clear",
|
clear: "Clear",
|
||||||
name: 'Name',
|
name: 'Name',
|
||||||
cover: 'Cover'
|
cover: 'Cover',
|
||||||
|
signOut: 'Sign Out'
|
||||||
},
|
},
|
||||||
|
dashboard:{
|
||||||
|
title:'Dashboard',
|
||||||
|
panel:{
|
||||||
|
title:'Panel',
|
||||||
|
//侧滑框
|
||||||
|
createPanelTitle: "Create Panel",
|
||||||
|
createPanelTitleSec:"Create New Panel",
|
||||||
|
editPanelTitle: "Panel",
|
||||||
|
panelForm:{
|
||||||
|
panelName:"Panel Name",
|
||||||
|
panelId:"ID"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
metricPreview:{
|
||||||
|
title:'MetricPreview',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
search: {
|
search: {
|
||||||
searchTip: 'Press Enter or click to search'
|
searchTip: 'Press Enter or click to search',
|
||||||
|
recentSearch: 'Recent Searches',
|
||||||
|
noRecentSearch: 'No Recent Searches'
|
||||||
},
|
},
|
||||||
tip: {
|
tip: {
|
||||||
confirmDelete: "Confirm Delete?",
|
confirmDelete: "Confirm Delete?",
|
||||||
yes: "Yes",
|
yes: "Yes",
|
||||||
no: "No",
|
no: "No",
|
||||||
deleteSuccess: "Successfully Deleted",
|
deleteSuccess: "Successfully Deleted",
|
||||||
saveSuccess: "Successfully Saved"
|
saveSuccess: "Successfully Saved",
|
||||||
|
coverSuccess: 'Successfully Covered'
|
||||||
},
|
},
|
||||||
asset:{
|
asset:{
|
||||||
createAsset: "Create Asset",
|
createAsset: "Create Asset",
|
||||||
@@ -141,7 +163,8 @@ const en = {
|
|||||||
accountId: "Accound ID",
|
accountId: "Accound ID",
|
||||||
createAccount: "Create Account",
|
createAccount: "Create Account",
|
||||||
editAccount: "Edit Account",
|
editAccount: "Edit Account",
|
||||||
notCurrentlySupport: 'Not currently supported'
|
notCurrentlySupport: 'Not currently supported',
|
||||||
|
password: 'Password'
|
||||||
},
|
},
|
||||||
promServer: {
|
promServer: {
|
||||||
promServerList: "Prometheus Server",
|
promServerList: "Prometheus Server",
|
||||||
|
|||||||
@@ -1,27 +1,45 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="login">
|
||||||
<div class='login-right'>
|
<div class="model">
|
||||||
<div class="login-content">
|
<div class='login-right'>
|
||||||
<div class="login-title">
|
<div class="login-content">
|
||||||
<h1>NeZha</h1>
|
<div class="login-title">NEZHA</div>
|
||||||
<div></div>
|
<div class="login-label" style="padding-top: 35px;">User Name</div>
|
||||||
</div>
|
<div class="login-input">
|
||||||
<div class="login-input" style="margin-top: 20px;">
|
<input v-model="loginData.username" class="inputL"></input>
|
||||||
<input v-model="loginData.username" class="inputL" placeholder="username" ></input>
|
</div>
|
||||||
</div>
|
<div class="login-label">Password</div>
|
||||||
|
<div class="login-input">
|
||||||
<div class="login-input">
|
<input v-model="loginData.password" type="password" class="inputL" @keyup.enter="login"></input>
|
||||||
<input v-model="loginData.password" type="password" class="inputL" @keyup.enter="login" placeholder="password" ></input>
|
</div>
|
||||||
</div>
|
<div class="login-button">
|
||||||
<div class="login-button">
|
<button @click="login">Login</button>
|
||||||
<button @click="login">登录</button>
|
</div>
|
||||||
</div>
|
<div class="login-foot">
|
||||||
|
<div class="login-foot-remember"></div>
|
||||||
|
<div class="login-foot-langs">
|
||||||
|
<div @click="changeLang('en')" class="login-foot-lang" :class="{'login-foot-lang-active': lang == 'en'}">
|
||||||
|
<img v-if="lang == 'en'" src="../../assets/img/lang-box-active.svg"/>
|
||||||
|
<img v-if="lang != 'en'" src="../../assets/img/lang-box.svg"/>
|
||||||
|
<span class="lang-name lang-name-en">EN</span>
|
||||||
|
<div v-if="lang == 'en'" class="lang-active-model"></div>
|
||||||
|
</div>
|
||||||
|
<div @click="changeLang('cn')" class="login-foot-lang" :class="{'login-foot-lang-active': lang == 'cn'}">
|
||||||
|
<img v-if="lang == 'cn'" src="../../assets/img/lang-box-active.svg"/>
|
||||||
|
<img v-if="lang != 'cn'" src="../../assets/img/lang-box.svg"/>
|
||||||
|
<span class="lang-name">中</span>
|
||||||
|
<div v-if="lang == 'cn'" class="lang-active-model"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "login",
|
name: "login",
|
||||||
data() {
|
data() {
|
||||||
@@ -29,14 +47,17 @@ export default {
|
|||||||
loginData: {
|
loginData: {
|
||||||
username: '',
|
username: '',
|
||||||
password: '',
|
password: '',
|
||||||
|
remember: false
|
||||||
},
|
},
|
||||||
|
lang: localStorage.getItem("nz-language") ? localStorage.getItem("nz-language") : 'en'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
login() {
|
login() {
|
||||||
this.$post('sys/login', (this.loginData)).then(res => {
|
this.$post('sys/login', (this.loginData)).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
sessionStorage.setItem("token", res.data.token);
|
sessionStorage.setItem("nz-token", res.data.token);
|
||||||
|
sessionStorage.setItem("nz-username", this.loginData.username);
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/dashboard",
|
path: "/dashboard",
|
||||||
query: {
|
query: {
|
||||||
@@ -46,81 +67,130 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
changeLang(lang) {
|
||||||
|
if (this.lang == lang) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
localStorage.setItem("nz-language", lang);
|
||||||
|
this.lang = lang;
|
||||||
|
this.$i18n.locale = lang;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.login {
|
||||||
|
background-image: url("../../assets/img/login-background.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.model {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.737);
|
||||||
|
}
|
||||||
button {
|
button {
|
||||||
width:180px;
|
width: 80%;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
background: #17558e !important;
|
background: #31759c;
|
||||||
border-radius: 5px;
|
border-radius: 270px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #5c9fc4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-right {
|
.login-right {
|
||||||
width: 400px;
|
position: relative;
|
||||||
height: 330px;
|
width: 500px;
|
||||||
position: absolute;
|
height: 475px;
|
||||||
top: 50%;
|
margin: auto;
|
||||||
transform: translateY(-60%);
|
overflow: hidden;
|
||||||
right: 42%;
|
padding: 250px 0 0 0;
|
||||||
background: #356b9d;
|
}
|
||||||
overflow: hidden;
|
.login-title {
|
||||||
padding: 2px;
|
position: absolute;
|
||||||
|
font-size: 90px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: white;
|
||||||
|
top: 60px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.login-label {
|
||||||
|
margin-left: 10%;
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
.login-input {
|
.login-input {
|
||||||
height: 40px;
|
height: 30px;
|
||||||
margin-bottom: 20px;
|
margin: 28px 0 16px 10%;
|
||||||
padding: 0 20px;
|
width: 80%;
|
||||||
|
border-bottom: 2px solid rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
.login-foot {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.login-foot>div {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.login-foot-langs {
|
||||||
|
float: right;
|
||||||
|
padding-right: 10%;
|
||||||
|
}
|
||||||
|
.login-foot-lang {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.lang-active-model {
|
||||||
|
width: 19px;
|
||||||
|
height: 16px;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 2px;
|
||||||
|
background-color: rgba(49, 117, 156, 0.27);
|
||||||
|
top: 8px;
|
||||||
|
left: 9px;
|
||||||
|
}
|
||||||
|
.lang-name {
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
top: 7px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #656565;
|
||||||
|
}
|
||||||
|
.lang-name-en {
|
||||||
|
left: 4px;
|
||||||
|
}
|
||||||
|
.login-foot-lang-active .lang-name {
|
||||||
|
color: #31759c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-input input {
|
.login-input input {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-content {
|
.login-content {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
.login-content .login-title{
|
</style>
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
.login-content .login-title h1{
|
|
||||||
color: rgb(23, 85, 142);
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.login-content .login-title div{
|
|
||||||
width: 260px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 25px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
height: 1px;
|
|
||||||
background: #507faa;
|
|
||||||
}
|
|
||||||
.login-content .login-content{
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
.login-input{
|
|
||||||
border: 2px solid #507faa;
|
|
||||||
width: 70%;
|
|
||||||
margin-left: 10%;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<el-pagination
|
<el-pagination
|
||||||
ref="page"
|
ref="page"
|
||||||
background
|
|
||||||
@size-change="size"
|
@size-change="size"
|
||||||
@prev-click="prev"
|
@prev-click="prev"
|
||||||
@next-click="next"
|
@next-click="next"
|
||||||
@@ -10,7 +9,7 @@
|
|||||||
:current-page="pageObj.pageNo"
|
:current-page="pageObj.pageNo"
|
||||||
:page-sizes="[20, 50, 100, 300]"
|
:page-sizes="[20, 50, 100, 300]"
|
||||||
:page-size="20"
|
:page-size="20"
|
||||||
layout="prev, pager, next, jumper, sizes, total"
|
layout="prev, pager, next, jumper, total"
|
||||||
:total="this.pageObj.total"
|
:total="this.pageObj.total"
|
||||||
></el-pagination>
|
></el-pagination>
|
||||||
</div>
|
</div>
|
||||||
@@ -57,4 +56,11 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.el-pager li.active {
|
||||||
|
color: #f90;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.el-pager li:hover, .el-pagination .btn-next:hover, .el-pagination .btn-prev:hover {
|
||||||
|
color: #f90;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition name="right-box">
|
<transition name="right-box">
|
||||||
<div class="right-box right-box-add-endpoint" v-if="rightBox.show">
|
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
|
||||||
<!-- begin--顶部按钮-->
|
<!-- begin--顶部按钮-->
|
||||||
<div class="right-box-top-btns">
|
<div class="right-box-top-btns">
|
||||||
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
<div class="right-box-form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
|
<div class="right-box-form-label">{{$t("project.project.project")}}</div>
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
<el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" size="small">
|
<el-select @change="((val) => {changeProject(val)})" value-key="id" popper-class="config-dropdown" v-model="currentProject" placeholder="" size="small">
|
||||||
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
|
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
<div class="right-box-form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
|
<div class="right-box-form-label">{{$t("project.module.module")}}</div>
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
<el-select @change="((val) => {})" value-key="id" popper-class="config-dropdown" v-model="currentModule" placeholder="" size="small">
|
<el-select @change="((val) => {changeModule(val)})" value-key="id" popper-class="config-dropdown" v-model="currentModuleCopy" placeholder="" size="small">
|
||||||
<el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
|
<el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
@@ -76,6 +76,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="line-100"></div>
|
<div class="line-100"></div>
|
||||||
<div class="endpoint-sub-table-body">
|
<div class="endpoint-sub-table-body">
|
||||||
|
<div v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
|
||||||
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row">
|
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row">
|
||||||
<div class="endpoint-sub-table-col">{{item.host}}</div>
|
<div class="endpoint-sub-table-col">{{item.host}}</div>
|
||||||
<div class="endpoint-sub-table-col">{{item.sn}}</div>
|
<div class="endpoint-sub-table-col">{{item.sn}}</div>
|
||||||
@@ -84,26 +85,30 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- end--table-->
|
<!-- end--table-->
|
||||||
</div>
|
</div>
|
||||||
|
<!--右侧endpoint列表-->
|
||||||
<div class="right-child-box endpoints-box">
|
<div class="right-child-box endpoints-box">
|
||||||
|
<!--module-->
|
||||||
<div class="endpoints-box-module-info">
|
<div class="endpoints-box-module-info">
|
||||||
<div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
|
<div class="title">{{$t('project.endpoint.moduleParameter')}}:</div>
|
||||||
<el-input class="module-info module-info-port" size="mini" v-model="currentModule.port"></el-input>
|
<el-input class="module-info module-info-port" size="mini" v-model="currentModuleCopy.port"></el-input>
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="top"
|
placement="bottom"
|
||||||
width="200"
|
width="200"
|
||||||
trigger="hover"
|
trigger="hover"
|
||||||
>
|
>
|
||||||
<div class="endpoint-param-pop">
|
<div class="endpoint-param-pop">
|
||||||
<div v-for="item,index in currentModule.paramObj">{{item.key}}={{item.value}}</div>
|
<div v-for="item,index in currentModuleCopy.paramObj">{{item.key}}={{item.value}}</div>
|
||||||
</div>
|
</div>
|
||||||
<el-input slot="reference" disabled class="module-info module-info-param" size="mini" v-model="currentModule.param"></el-input>
|
<el-input @click.native.stop="showEditParamBox(true, currentModuleCopy, 1, $event)" slot="reference" disabled class="module-info module-info-param" size="mini" v-model="currentModuleCopy.param"></el-input>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
<el-input class="module-info module-info-path" size="mini" v-model="currentModule.path"></el-input>
|
<el-input class="module-info module-info-path" size="mini" v-model="currentModuleCopy.path"></el-input>
|
||||||
<el-button class="module-info module-info-cover" size="mini">{{$t('overall.cover')}}</el-button>
|
<el-button class="module-info module-info-cover" size="mini" @click="coverEndpoint">{{$t('overall.cover')}}</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
<!--endpoints-->
|
||||||
<div class="endpoints-box-endpoints">
|
<div class="endpoints-box-endpoints">
|
||||||
<el-table
|
<el-table
|
||||||
:data="endpointList"
|
:data="endpointList"
|
||||||
|
ref="endpointTable"
|
||||||
style="width: 100%;border-radius: 4px;"
|
style="width: 100%;border-radius: 4px;"
|
||||||
height="calc(100% - 40px)"
|
height="calc(100% - 40px)"
|
||||||
empty-text=" ">
|
empty-text=" ">
|
||||||
@@ -114,49 +119,66 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
label-class-name="endpoints-box-endpoints-title"
|
label-class-name="endpoints-box-endpoints-title"
|
||||||
v-for="(item, index) in endpointTableTitle"
|
v-for="(title, index) in endpointTableTitle"
|
||||||
v-if="item.show"
|
v-if="title.show"
|
||||||
:width="item.width"
|
:width="title.width"
|
||||||
:key="`col-${index}`"
|
:key="`col-${index}`"
|
||||||
:label="item.label"
|
:label="title.label"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope" :column="item">
|
<template slot-scope="scope" :column="title">
|
||||||
<span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
|
<span v-if="title.prop == 'asset' && scope.row[title.prop]">{{scope.row[title.prop].host}}</span>
|
||||||
<span v-else-if="item.prop == 'param'">
|
<span v-else-if="title.prop == 'param'">
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="top"
|
placement="bottom"
|
||||||
width="200"
|
width="200"
|
||||||
trigger="hover"
|
trigger="hover"
|
||||||
>
|
>
|
||||||
<div class="endpoint-param-pop">
|
<div class="endpoint-param-pop">
|
||||||
<div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
|
<div v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}</div>
|
||||||
</div>
|
</div>
|
||||||
<span slot="reference">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
|
<span slot="reference">
|
||||||
|
<span @mousedown.stop v-if="!scope.row.isEdit">{{scope.row.param.length > 8 ? scope.row.param.substring(0, 8) + '...' : scope.row.param}}</span>
|
||||||
|
<span @mousedown.stop v-else @click.stop="showEditParamBox(true, scope.row, 2, $event)"><el-input disabled class="endpoint-info endpoint-info-param" size="mini" v-model="scope.row.param"></el-input></span>
|
||||||
|
</span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</span>
|
</span>
|
||||||
<span v-else-if="item.prop == 'path'">
|
<span v-else-if="title.prop == 'path'">
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="top"
|
placement="bottom"
|
||||||
width="100"
|
width="100"
|
||||||
trigger="hover"
|
trigger="hover"
|
||||||
:content="scope.row[item.prop]"
|
:content="scope.row[title.prop]"
|
||||||
>
|
>
|
||||||
<span slot="reference">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
|
<span slot="reference">
|
||||||
|
<span v-if="!scope.row.isEdit">{{scope.row.path.length > 5 ? scope.row.path.substring(0, 5) + '...' : scope.row.path}}</span>
|
||||||
|
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.path"></el-input></span>
|
||||||
|
</span>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</span>
|
</span>
|
||||||
<span v-else>{{scope.row[item.prop]}}</span>
|
<span v-else-if="title.prop == 'port'">
|
||||||
|
<span v-if="!scope.row.isEdit">{{scope.row.port}}</span>
|
||||||
|
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.port"></el-input></span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="title.prop == 'host'">
|
||||||
|
<span v-if="!scope.row.isEdit">{{scope.row.host}}</span>
|
||||||
|
<span @mousedown.stop v-else><el-input size="mini" class="endpoint-info" v-model="scope.row.host"></el-input></span>
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="" width="56">
|
<el-table-column label="" width="56">
|
||||||
<template slot-scope="scope" :column="item">
|
<template slot-scope="scope" :column="title">
|
||||||
<div>
|
<div>
|
||||||
<span class="param-box-row-symbol"><i class="el-icon-edit-outline"></i></span>
|
<span v-if="!scope.row.isEdit" class="endpoint-box-row-symbol" @click="toEditEndpoint(scope.row)"><i class="el-icon-edit-outline"></i></span>
|
||||||
<span class="param-box-row-symbol"><i class="el-icon-minus"></i></span>
|
<span v-else class="endpoint-box-row-symbol" @click="editEndpoint(scope.row)"><i class="el-icon-check"></i></span>
|
||||||
|
<span class="endpoint-box-row-symbol" @click="removeEndpoint(scope.row)"><i class="el-icon-minus"></i></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<div><el-button class="endpoints-clear-btn" size="mini">{{$t('overall.clear')}}</el-button></div>
|
<div>
|
||||||
|
<el-button class="endpoints-clear-btn" size="mini" @click="clearSelection">{{$t('overall.clear')}}</el-button>
|
||||||
|
<span style="display: inline-block; float: right;line-height: 39px;padding-right: 15px;">All: {{this.endpointList.length}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -169,6 +191,23 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- end--底部按钮-->
|
<!-- end--底部按钮-->
|
||||||
|
|
||||||
|
<!--start--param编辑框-->
|
||||||
|
<transition name="right-sub-box">
|
||||||
|
<div @mousedown.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
|
||||||
|
<div class="param-box">
|
||||||
|
<div class="param-box-row" v-for="(item, index) in tempParamObj">
|
||||||
|
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
|
||||||
|
<span class="param-box-row-eq">=</span>
|
||||||
|
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
|
||||||
|
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; text-align: center; height: 25px;">
|
||||||
|
<el-button @click="addParam" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<!--end--param编辑框-->
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
@@ -177,15 +216,16 @@
|
|||||||
export default {
|
export default {
|
||||||
name: "endpointBox",
|
name: "endpointBox",
|
||||||
props: {
|
props: {
|
||||||
endpoint: Object,
|
|
||||||
currentProject: Object,
|
currentProject: Object,
|
||||||
currentModule: Object
|
currentModule: Object
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
currentModuleCopy: {},
|
||||||
|
tempParamObj: [],
|
||||||
|
tempEndpoint: {},
|
||||||
rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
|
rightBox: {show: false, title: this.$t('project.endpoint.createEndpoint'),isEdit: false},
|
||||||
editParamBox: {show: false}, //param编辑弹框
|
editParamBox: {show: false, top: 0, left: 0, type: 0}, //param编辑弹框
|
||||||
viewParamBox: {show: false}, //param查看弹框
|
|
||||||
moduleParamShow: false, //module默认参数param悬浮窗
|
moduleParamShow: false, //module默认参数param悬浮窗
|
||||||
assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
|
assetSearch: {host: '', sn: '', text: '', label: 'IP', dropdownShow: false}, //侧滑框中asset的搜索相关
|
||||||
assetPageObj: {pageNo: 1, pageSize: 9999},
|
assetPageObj: {pageNo: 1, pageSize: 9999},
|
||||||
@@ -227,47 +267,85 @@
|
|||||||
methods: {
|
methods: {
|
||||||
show(show) {
|
show(show) {
|
||||||
this.rightBox.show = show;
|
this.rightBox.show = show;
|
||||||
|
this.currentModuleCopy = JSON.parse(JSON.stringify(this.currentModule)); //打开弹框时将currentModule还原
|
||||||
},
|
},
|
||||||
|
|
||||||
//子弹框控制
|
//子弹框控制 obj: module或endpoint对象 type:1module2endpoint
|
||||||
showEditParamBox(show) {
|
showEditParamBox(show, obj, type, e) {
|
||||||
|
if (show) {
|
||||||
|
let position = e.target.getBoundingClientRect();
|
||||||
|
this.editParamBox.type = type;
|
||||||
|
if (this.editParamBox.type == 2) {
|
||||||
|
this.tempEndpoint = obj;
|
||||||
|
}
|
||||||
|
this.editParamBox.top = position.top - 234;
|
||||||
|
this.editParamBox.left = position.left - 48;
|
||||||
|
if (!obj.param) {
|
||||||
|
this.$set(obj, 'paramObj', []);
|
||||||
|
this.tempParamObj = [];
|
||||||
|
} else {
|
||||||
|
this.tempParamObj = JSON.parse(JSON.stringify(obj.paramObj));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.endpointList.length > 0) {
|
||||||
|
for (let i = 0; i < this.endpointList.length; i++) {
|
||||||
|
this.endpointList[i].isEdit = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!this.editParamBox.show) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.editParamBox.type == 1) {
|
||||||
|
this.currentModuleCopy.paramObj = this.tempParamObj;
|
||||||
|
this.currentModuleCopy.param = this.paramToJson(this.tempParamObj);
|
||||||
|
} else if (this.editParamBox.type == 2) {
|
||||||
|
for (let i = 0; i < this.endpointList.length; i++) {
|
||||||
|
if (this.endpointList[i].asset.id == this.tempEndpoint.asset.id) {
|
||||||
|
this.endpointList[i].param = this.paramToJson(this.tempParamObj);
|
||||||
|
this.endpointList[i].paramObj = this.tempParamObj;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.tempParamObj = [];
|
||||||
|
}
|
||||||
this.editParamBox.show = show;
|
this.editParamBox.show = show;
|
||||||
},
|
},
|
||||||
showViewParamBox(show) {
|
|
||||||
this.viewParamBox.show = show;
|
|
||||||
},
|
|
||||||
|
|
||||||
/*关闭弹框*/
|
/*关闭弹框*/
|
||||||
esc() {
|
esc() {
|
||||||
this.rightBox.show = false;
|
this.rightBox.show = false;
|
||||||
this.editParamBox.show = false;
|
this.editParamBox.show = false;
|
||||||
this.viewParamBox.show = false;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 新增param
|
// 新增param
|
||||||
addParam() {
|
addParam() {
|
||||||
this.endpoint.paramObj.push({key: '', value: ''});
|
this.tempParamObj.push({key: '', value: ''});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 移除单个param
|
// 移除单个param
|
||||||
removeParam(index) {
|
removeParam(index) {
|
||||||
this.endpoint.paramObj.splice(index, 1);
|
this.tempParamObj.splice(index, 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
//将param转为json字符串格式
|
//编辑endpoint
|
||||||
paramToJson(param) {
|
toEditEndpoint(endpoint) {
|
||||||
let tempParam = {};
|
endpoint.isEdit = true;
|
||||||
if (!param) {
|
},
|
||||||
param = [];
|
editEndpoint(endpoint) {
|
||||||
}
|
endpoint.isEdit = false;
|
||||||
for (let i = 0; i < param.length; i++) {
|
},
|
||||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
|
||||||
}
|
//移除endpoint
|
||||||
let jsonString = JSON.stringify(tempParam);
|
removeEndpoint(endpoint) {
|
||||||
if (jsonString == '{}') {
|
endpoint.isEdit = false;
|
||||||
return "";
|
for (let i = 0; i < this.endpointList.length; i++) {
|
||||||
} else {
|
if (this.endpointList[i].assetId == endpoint.assetId) {
|
||||||
return jsonString;
|
this.endpointList.splice(i, 1);
|
||||||
|
this.assetList.unshift(endpoint.asset);
|
||||||
|
i--;
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -276,7 +354,11 @@
|
|||||||
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
|
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.projectList = response.data.list;
|
this.projectList = response.data.list;
|
||||||
|
if (this.moduleList.length == 0) {
|
||||||
|
this.getModuleList(this.currentProject.id);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -284,6 +366,16 @@
|
|||||||
getAssetList() {
|
getAssetList() {
|
||||||
this.$get('asset', this.assetPageObj).then(response => {
|
this.$get('asset', this.assetPageObj).then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
|
let respData = response.data.list;
|
||||||
|
for (let i = 0; i < respData.length; i++) {
|
||||||
|
for (let j = 0; j < this.endpointList.length; j++) {
|
||||||
|
if (respData[i].id == this.endpointList[j].assetId) {
|
||||||
|
respData.splice(i, 1);
|
||||||
|
i--;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
this.assetList = response.data.list;
|
this.assetList = response.data.list;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -302,17 +394,41 @@
|
|||||||
this.getAssetList();
|
this.getAssetList();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
changeProject(project) {
|
||||||
|
this.currentModuleCopy = {};
|
||||||
|
this.editParamBox.show = false;
|
||||||
|
this.tempParamObj = [];
|
||||||
|
this.endpointList = [];
|
||||||
|
this.getAssetList();
|
||||||
|
},
|
||||||
|
|
||||||
|
changeModule(module) {
|
||||||
|
this.editParamBox.show = false;
|
||||||
|
this.tempParamObj = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
//清空勾选的endpoint
|
||||||
|
clearSelection() {
|
||||||
|
let selections = this.$refs.endpointTable.selection;
|
||||||
|
if (selections && selections.length > 0) {
|
||||||
|
for (let i = 0; i < selections.length; i++) {
|
||||||
|
this.removeEndpoint(selections[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// endpoint弹框中的asset子弹框里asset选择事件
|
// endpoint弹框中的asset子弹框里asset选择事件
|
||||||
selectAsset(obj, index) {
|
selectAsset(obj, index) {
|
||||||
this.endpointList.push({
|
this.endpointList.push({
|
||||||
|
isEdit: false,
|
||||||
assetId: obj.id,
|
assetId: obj.id,
|
||||||
asset: obj,
|
asset: obj,
|
||||||
host: obj.host,
|
host: obj.host,
|
||||||
param: this.currentModule.param,
|
param: this.currentModuleCopy.param,
|
||||||
paramObj: this.currentModule.paramObj,
|
paramObj: this.currentModuleCopy.paramObj,
|
||||||
port: this.currentModule.port,
|
port: this.currentModuleCopy.port,
|
||||||
path: this.currentModule.path,
|
path: this.currentModuleCopy.path,
|
||||||
moduleId: this.currentModule.id
|
moduleId: this.currentModuleCopy.id
|
||||||
});
|
});
|
||||||
this.assetList.splice(index, 1);
|
this.assetList.splice(index, 1);
|
||||||
},
|
},
|
||||||
@@ -321,7 +437,7 @@
|
|||||||
paramToJson(param) {
|
paramToJson(param) {
|
||||||
let tempParam = {};
|
let tempParam = {};
|
||||||
for (let i = 0; i < param.length; i++) {
|
for (let i = 0; i < param.length; i++) {
|
||||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
|
||||||
}
|
}
|
||||||
let jsonString = JSON.stringify(tempParam);
|
let jsonString = JSON.stringify(tempParam);
|
||||||
if (jsonString == '{}') {
|
if (jsonString == '{}') {
|
||||||
@@ -353,10 +469,7 @@
|
|||||||
|
|
||||||
//保存endpoint
|
//保存endpoint
|
||||||
save() {
|
save() {
|
||||||
this.endpoint.moduleId = this.currentModule.id;
|
this.$post('endpoint', this.endpointList).then(response => {
|
||||||
this.endpoint.projectId = this.currentProject.id;
|
|
||||||
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
|
|
||||||
this.$put('endpoint', this.endpoint).then(response => {
|
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||||
this.esc();
|
this.esc();
|
||||||
@@ -367,8 +480,17 @@
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
//param展示悬浮框
|
//覆盖endpoint的port/path/param
|
||||||
viewParam(item, flag, event) {
|
coverEndpoint() {
|
||||||
|
if (this.endpointList.length > 0) {
|
||||||
|
for (let i = 0; i < this.endpointList.length; i++) {
|
||||||
|
this.endpointList[i].port = this.currentModuleCopy.port;
|
||||||
|
this.endpointList[i].param = this.currentModuleCopy.param;
|
||||||
|
this.endpointList[i].paramObj = this.currentModuleCopy.paramObj;
|
||||||
|
this.endpointList[i].path = this.currentModuleCopy.path;
|
||||||
|
}
|
||||||
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.coverSuccess")});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//删除endpoint
|
//删除endpoint
|
||||||
@@ -394,21 +516,22 @@
|
|||||||
this.assetSearch.label = label;
|
this.assetSearch.label = label;
|
||||||
this.assetSearch.dropdownShow = false;
|
this.assetSearch.dropdownShow = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
clearEndpoints() {
|
||||||
|
this.getAssetList();
|
||||||
|
this.endpointList = [];
|
||||||
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.getProjectList();
|
this.getProjectList();
|
||||||
this.getAssetList();
|
this.getAssetList();
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.getModuleList(this.currentProject.id);
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
endpoint(n, o) {
|
currentProject(n, o) {
|
||||||
if (n && n.id) {
|
this.getModuleList(n.id);
|
||||||
this.rightBox.title = this.$t("project.endpoint.editEndpoint") + " ID：" + n.id;
|
},
|
||||||
} else {
|
currentModule(n, o) {
|
||||||
this.rightBox.title = this.$t("project.endpoint.createEndpoint");
|
this.currentModuleCopy = JSON.parse(JSON.stringify(n));
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -441,15 +564,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.param-box {
|
.param-box {
|
||||||
border: 1px solid #DCDFE6;
|
height: 200px;
|
||||||
border-radius: 4px;
|
overflow: auto;
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.param-box-endpoint {
|
|
||||||
height: 325px;
|
|
||||||
}
|
|
||||||
.param-box-module {
|
|
||||||
height: 227px;
|
|
||||||
}
|
}
|
||||||
.param-box-row {
|
.param-box-row {
|
||||||
padding: 7px 0 0 0;
|
padding: 7px 0 0 0;
|
||||||
@@ -460,14 +576,14 @@
|
|||||||
}
|
}
|
||||||
.param-box-row-key, .param-box-row-value {
|
.param-box-row-key, .param-box-row-value {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 41.5%;
|
width: 50px;
|
||||||
}
|
}
|
||||||
.param-box-row-eq {
|
.param-box-row-eq {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 22px;
|
width: 18px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
height: 32px;
|
height: 22px;
|
||||||
line-height: 32px;
|
line-height: 22px;
|
||||||
color: #c4c7cF;
|
color: #c4c7cF;
|
||||||
}
|
}
|
||||||
.param-box-row-symbol:first-of-type {
|
.param-box-row-symbol:first-of-type {
|
||||||
@@ -476,7 +592,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 6px;
|
top: 7px;
|
||||||
right: 34px;
|
right: 34px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -489,8 +605,8 @@
|
|||||||
width: 14px;
|
width: 14px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 9px;
|
top: 12px;
|
||||||
right: 14px;
|
left: 135px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.param-box-row-symbol>i {
|
.param-box-row-symbol>i {
|
||||||
@@ -536,10 +652,10 @@
|
|||||||
|
|
||||||
.right-child-box .module-info {
|
.right-child-box .module-info {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 33px;
|
height: 24px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2px;
|
top: 5px;
|
||||||
}
|
}
|
||||||
.right-child-box-title {
|
.right-child-box-title {
|
||||||
padding: 9px 0 0 4px;
|
padding: 9px 0 0 4px;
|
||||||
@@ -569,9 +685,12 @@
|
|||||||
width: 60px;
|
width: 60px;
|
||||||
right: 52px;
|
right: 52px;
|
||||||
}
|
}
|
||||||
|
.endpoint-info-param {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
.right-child-box .module-info-cover {
|
.right-child-box .module-info-cover {
|
||||||
right: 4px;
|
right: 4px;
|
||||||
height: 28px;
|
height: 24px;
|
||||||
padding: 5px 5px;
|
padding: 5px 5px;
|
||||||
background: #656565;
|
background: #656565;
|
||||||
color: white;
|
color: white;
|
||||||
@@ -591,17 +710,11 @@
|
|||||||
|
|
||||||
/* begin--子弹框*/
|
/* begin--子弹框*/
|
||||||
.right-sub-box {
|
.right-sub-box {
|
||||||
width: 380px;
|
width: 170px;
|
||||||
height: 520px;
|
height: 225px;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
right: 80px;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
padding: 0 10px;
|
padding: 0 0 0 10px;
|
||||||
}
|
|
||||||
.right-sub-box .el-input-group {
|
|
||||||
width: 227px;
|
|
||||||
float: right;
|
|
||||||
margin: 7px 0 0 0;
|
|
||||||
}
|
}
|
||||||
/* begin--搜索框*/
|
/* begin--搜索框*/
|
||||||
.endpoint-asset-prepend {
|
.endpoint-asset-prepend {
|
||||||
@@ -652,7 +765,7 @@
|
|||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
}
|
}
|
||||||
.endpoint-sub-table-row {
|
.endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
color: #656565;
|
color: #656565;
|
||||||
@@ -681,9 +794,17 @@
|
|||||||
}
|
}
|
||||||
.endpoint-sub-table-body {
|
.endpoint-sub-table-body {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
position: relative;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: calc(100% - 95px);
|
height: calc(100% - 95px);
|
||||||
}
|
}
|
||||||
|
.endpoint-sub-table-body-dialog {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #e9ebec;
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
.endpoints-clear-btn {
|
.endpoints-clear-btn {
|
||||||
margin: 6px 0 0 10px;
|
margin: 6px 0 0 10px;
|
||||||
}
|
}
|
||||||
@@ -692,8 +813,12 @@
|
|||||||
/* end--子弹框*/
|
/* end--子弹框*/
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.module-info.el-input input {
|
.endpoints-box-module-info .el-input input,
|
||||||
|
.endpoints-box-endpoints .el-input input,
|
||||||
|
.right-sub-box .el-input input{
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
.endpoints-box-endpoints-title {
|
.endpoints-box-endpoints-title {
|
||||||
color: black;
|
color: black;
|
||||||
@@ -708,14 +833,16 @@
|
|||||||
.endpoints-box-endpoints .el-table .el-table__row td{
|
.endpoints-box-endpoints .el-table .el-table__row td{
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
}
|
}
|
||||||
.module-info-param.el-input.is-disabled .el-input__inner {
|
.module-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner,
|
||||||
|
.endpoint-info-param.el-input.is-disabled .el-input__inner, .endpoint-info-param.el-input.is-disabled .el-input__inner {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-color: #DCDFE6;
|
border-color: #DCDFE6;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
||||||
}
|
}
|
||||||
.module-info-param.el-input.is-disabled .el-input__inner:hover {
|
.module-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover,
|
||||||
|
.endpoint-info-param.el-input.is-disabled .el-input__inner:hover, .endpoint-info-param.el-input.is-disabled .el-input__inner:hover {
|
||||||
border-color: #c0c4cc;
|
border-color: #c0c4cc;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
436
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
Normal file
436
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
Normal file
@@ -0,0 +1,436 @@
|
|||||||
|
<template>
|
||||||
|
<transition name="right-box">
|
||||||
|
<div class="right-box right-box-alert-config" v-if="rightBox.show">
|
||||||
|
<!-- begin--顶部按钮-->
|
||||||
|
<div class="right-box-top-btns">
|
||||||
|
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
||||||
|
<div class="right-box-btn-icon">
|
||||||
|
<i class="el-icon-close"></i>
|
||||||
|
</div>
|
||||||
|
<span>{{$t('overall.esc')}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
|
||||||
|
<div class="right-box-btn-icon">
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
|
||||||
|
<span v-else>{{$t('overall.edit')}}</span>
|
||||||
|
</div>
|
||||||
|
<div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
|
||||||
|
<div class="right-box-btn-icon">
|
||||||
|
<i class="el-icon-delete"></i>
|
||||||
|
</div>
|
||||||
|
<span>{{$t('overall.delete')}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- end--顶部按钮-->
|
||||||
|
|
||||||
|
<!-- begin--标题-->
|
||||||
|
<div class="right-box-title">{{rightBox.title}}</div>
|
||||||
|
<!-- end--标题-->
|
||||||
|
|
||||||
|
<!-- begin--表单-->
|
||||||
|
<div class="right-box-form">
|
||||||
|
<!--name-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.config.name')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-input
|
||||||
|
v-if="rightBox.isEdit"
|
||||||
|
type="text"
|
||||||
|
placeholder=""
|
||||||
|
v-model="alertRule.alertName"
|
||||||
|
maxlength="64"
|
||||||
|
show-word-limit
|
||||||
|
size="small"
|
||||||
|
></el-input>
|
||||||
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--type-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.list.type')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-select @change="(val) => {changeType(val);}" popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small" >
|
||||||
|
<el-option
|
||||||
|
v-for="item in typeData"
|
||||||
|
:key="item.key"
|
||||||
|
:label="item.value"
|
||||||
|
:value="item.key">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--linkedId-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.config.link')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>
|
||||||
|
<el-select v-model="alertRule.linkId" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||||
|
<el-option
|
||||||
|
v-for="item in linkObjList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="alertRule.type == 3 ? item.host : item.name"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--expr-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.config.expr')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
v-if="rightBox.isEdit"
|
||||||
|
placeholder=""
|
||||||
|
v-model="alertRule.expr"
|
||||||
|
size="small"
|
||||||
|
></el-input>
|
||||||
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--for-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.config.for')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-input
|
||||||
|
type="text"
|
||||||
|
v-if="rightBox.isEdit"
|
||||||
|
placeholder=""
|
||||||
|
v-model="alertRule.last"
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<template slot="append">second</template>
|
||||||
|
</el-input>
|
||||||
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--severity-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.severity')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||||
|
<el-option
|
||||||
|
v-for="item in severityData"
|
||||||
|
:key="item.key"
|
||||||
|
:label="item.value"
|
||||||
|
:value="item.key">
|
||||||
|
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
|
||||||
|
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
||||||
|
<el-input
|
||||||
|
type="text"
|
||||||
|
v-model="item.name"
|
||||||
|
size="mini"
|
||||||
|
></el-input>
|
||||||
|
</span>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--summary-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.summary')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-input
|
||||||
|
type="text"
|
||||||
|
v-if="rightBox.isEdit"
|
||||||
|
placeholder=""
|
||||||
|
v-model="alertRule.summary"
|
||||||
|
size="small"
|
||||||
|
></el-input>
|
||||||
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--description-->
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('alert.description')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
v-if="rightBox.isEdit"
|
||||||
|
placeholder=""
|
||||||
|
v-model="alertRule.description"
|
||||||
|
size="small"
|
||||||
|
></el-input>
|
||||||
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--receiver-->
|
||||||
|
<!--<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||||
|
<el-option
|
||||||
|
@click.native="blurEditReceiver()"
|
||||||
|
v-for="item in receiverData"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item">
|
||||||
|
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
|
||||||
|
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
||||||
|
<el-input
|
||||||
|
type="text"
|
||||||
|
v-model="item.name"
|
||||||
|
size="mini"
|
||||||
|
></el-input>
|
||||||
|
</span>
|
||||||
|
<span class="config-dropdown-error-message">{{item.errorMessage}}</span>
|
||||||
|
<span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
|
||||||
|
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
||||||
|
<i class="el-icon-check" v-if="item.isEdit"></i>
|
||||||
|
</span>
|
||||||
|
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<div class="right-box-row-btn" v-if="rightBox.isEdit">
|
||||||
|
<span class="el-icon-plus"></span>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>
|
||||||
|
</div>
|
||||||
|
</div>-->
|
||||||
|
</div>
|
||||||
|
<!-- end--表单-->
|
||||||
|
|
||||||
|
<!-- begin--底部按钮-->
|
||||||
|
<div class="right-box-bottom-btns">
|
||||||
|
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||||
|
</div>
|
||||||
|
<!-- end--底部按钮-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "alertConfigBox",
|
||||||
|
props: {
|
||||||
|
parentAlertRule: Object
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
alertRule: {id: ''},
|
||||||
|
rightBox: {show: false, isEdit: false, title: ''},
|
||||||
|
severityData: [
|
||||||
|
{
|
||||||
|
key: 'medium',
|
||||||
|
value: this.$t("alert.config.medium")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'high',
|
||||||
|
value: this.$t("alert.config.high")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'low',
|
||||||
|
value: this.$t("alert.config.low")
|
||||||
|
}
|
||||||
|
],
|
||||||
|
typeData: [
|
||||||
|
{
|
||||||
|
key: 1, //project
|
||||||
|
value: this.$t('alert.config.typeOption.project')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 2, //module
|
||||||
|
value: this.$t('alert.config.typeOption.module')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 3, //asset
|
||||||
|
value: this.$t('alert.config.typeOption.asset')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
receiverData: [{
|
||||||
|
id: '1',
|
||||||
|
name: 'group1',
|
||||||
|
description: '小组1desc'
|
||||||
|
}, {
|
||||||
|
id: '2',
|
||||||
|
name: 'group2',
|
||||||
|
description: '小组2desc'
|
||||||
|
}, {
|
||||||
|
id: '3',
|
||||||
|
name: '小组3',
|
||||||
|
description: '小组3desc'
|
||||||
|
}, {
|
||||||
|
id: '4',
|
||||||
|
name: '小组4',
|
||||||
|
description: '小组4desc'
|
||||||
|
}, {
|
||||||
|
id: '5',
|
||||||
|
name: '小组啊小组5',
|
||||||
|
description: '小组5desc'
|
||||||
|
}, {
|
||||||
|
id: '6',
|
||||||
|
name: '小组6',
|
||||||
|
description: '小组6desc'
|
||||||
|
}],
|
||||||
|
linkObjList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
show(show, isEdit) {
|
||||||
|
this.rightBox.show = show;
|
||||||
|
this.rightBox.isEdit = isEdit;
|
||||||
|
},
|
||||||
|
save: function() {
|
||||||
|
if (this.alertRule.id) {
|
||||||
|
this.$put('alert/rule', this.alertRule).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||||
|
this.$emit('reload');
|
||||||
|
this.rightBox.show = false;
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$post('alert/rule', this.alertRule).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||||
|
this.$emit('reload');
|
||||||
|
this.rightBox.show = false;
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeType(type) {
|
||||||
|
this.alertRule.linkId = '';
|
||||||
|
if (type == 1) {
|
||||||
|
this.getProjectList();
|
||||||
|
} else if (type == 2) {
|
||||||
|
this.getModuleList();
|
||||||
|
} else if (type == 3) {
|
||||||
|
this.getAssetList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
del: function() {
|
||||||
|
this.$confirm(this.$t("tip.confirmDelete"), {
|
||||||
|
confirmButtonText: this.$t("tip.yes"),
|
||||||
|
cancelButtonText: this.$t("tip.no"),
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.$delete("alert/rule?ids=" + this.alertRule.id).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||||
|
this.$emit('reload');
|
||||||
|
this.rightBox.show = false;
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveOrToEdit: function() {
|
||||||
|
if (!this.rightBox.isEdit) {
|
||||||
|
this.rightBox.isEdit = true;
|
||||||
|
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
|
||||||
|
} else {
|
||||||
|
this.save();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toEditReceiver: function(item) {
|
||||||
|
if (!item.isEdit) {
|
||||||
|
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
|
||||||
|
this.blurEditReceiver();
|
||||||
|
item.isEdit = true;
|
||||||
|
} else {
|
||||||
|
//如果已在编辑状态，判断name是否有变更，有变更则发请求
|
||||||
|
if (item.name != item.oldName) {
|
||||||
|
if (this.updateReceiverName(item) == 200) {
|
||||||
|
item.isEdit = false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
item.errorMessage = '';
|
||||||
|
item.isEdit = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
blurEditReceiver: function() {
|
||||||
|
for (let i = 0; i < this.receiverData.length; i++) {
|
||||||
|
if (this.receiverData[i].isEdit) {
|
||||||
|
this.receiverData[i].name = this.receiverData[i].oldName;
|
||||||
|
this.receiverData[i].isEdit = false;
|
||||||
|
this.receiverData[i].errorMessage = '';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toDelReceiver: function(item) {
|
||||||
|
this.blurEditReceiver();
|
||||||
|
//TODO 请求后台，删除组
|
||||||
|
},
|
||||||
|
initReceiverData: function() {
|
||||||
|
for (let i = 0; i < this.receiverData.length; i++) {
|
||||||
|
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
|
||||||
|
this.$set(this.receiverData[i], 'isEdit', false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
esc: function() {
|
||||||
|
this.rightBox.show = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
getProjectList() {
|
||||||
|
this.$get('project', {pageNo: 1, pageSize: 9999}).then(response => {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.linkObjList = response.data.list;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getModuleList() {
|
||||||
|
this.$get('module', {pageNo: 1, pageSize: 9999}).then(response => {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.linkObjList = response.data.list;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getAssetList() {
|
||||||
|
this.$get('asset', {pageNo: 1, pageSize: 9999}).then(response => {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.linkObjList = response.data.list;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initReceiverData();
|
||||||
|
this.rightBox.title = this.$t("alert.config.createAlertConfig");
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
parentAlertRule: {
|
||||||
|
deep: true,
|
||||||
|
handler(n, o) {
|
||||||
|
this.alertRule = n;
|
||||||
|
if (this.alertRule.id) {
|
||||||
|
if (this.alertRule.type == 1) {
|
||||||
|
this.getProjectList();
|
||||||
|
} else if (this.alertRule.type == 2) {
|
||||||
|
this.getModuleList();
|
||||||
|
} else if (this.alertRule.type == 3) {
|
||||||
|
this.getAssetList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.rightBox.show) {
|
||||||
|
if (this.rightBox.isEdit && this.alertRule.id) {
|
||||||
|
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
|
||||||
|
} else if (this.rightBox.isEdit && !this.alertRule.id) {
|
||||||
|
this.rightBox.title = this.$t("alert.config.createAlertConfig");
|
||||||
|
} else if (!this.rightBox.isEdit && this.alertRule.id) {
|
||||||
|
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + this.alertRule.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -264,7 +264,7 @@
|
|||||||
paramToJson(param) {
|
paramToJson(param) {
|
||||||
let tempParam = {};
|
let tempParam = {};
|
||||||
for (let i = 0; i < param.length; i++) {
|
for (let i = 0; i < param.length; i++) {
|
||||||
eval('tempParam.' + param[i].key + '="' + param[i].value + '"');
|
eval('tempParam["' + param[i].key + '"]="' + param[i].value + '"');
|
||||||
}
|
}
|
||||||
let jsonString = JSON.stringify(tempParam);
|
let jsonString = JSON.stringify(tempParam);
|
||||||
if (jsonString == '{}') {
|
if (jsonString == '{}') {
|
||||||
@@ -360,7 +360,9 @@
|
|||||||
this.endpoint.moduleId = this.currentModule.id;
|
this.endpoint.moduleId = this.currentModule.id;
|
||||||
this.endpoint.projectId = this.currentProject.id;
|
this.endpoint.projectId = this.currentProject.id;
|
||||||
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
|
this.endpoint.param = this.paramToJson(this.endpoint.paramObj);
|
||||||
this.$put('endpoint', this.endpoint).then(response => {
|
let requestData = [];
|
||||||
|
requestData.push(this.endpoint);
|
||||||
|
this.$put('endpoint', requestData).then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||||
this.esc();
|
this.esc();
|
||||||
|
|||||||
100
nezha-fronted/src/components/common/rightBox/paramEditBox.vue
Normal file
100
nezha-fronted/src/components/common/rightBox/paramEditBox.vue
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<!--start--param编辑框-->
|
||||||
|
<transition name="right-sub-box">
|
||||||
|
<div @click.stop class="right-sub-box" v-if="editParamBox.show" :style="'top: ' + editParamBox.top + 'px; left: ' + editParamBox.left + 'px;'">
|
||||||
|
<div class="param-box">
|
||||||
|
<div class="param-box-row" v-for="(item, index) in currentModule.paramObj">
|
||||||
|
<el-input placeholder="key" class="param-box-row-key" size="mini" v-model="item.key"></el-input>
|
||||||
|
<span class="param-box-row-eq">=</span>
|
||||||
|
<el-input placeholder="value" class="param-box-row-value" size="mini" v-model="item.value"></el-input>
|
||||||
|
<span class="param-box-row-symbol" @click="removeParam(index)"><i class="el-icon-minus"></i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 100%; text-align: center; height: 25px;">
|
||||||
|
<el-button @click="addParam" style="height: 18px; line-height: 18px; padding-top: 0; padding-bottom: 0;" size="mini"><i class="el-icon-plus"></i></el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
<!--end--param编辑框-->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "paramEditBox",
|
||||||
|
props: {
|
||||||
|
editParamBox: Object,
|
||||||
|
paramObj: Array
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* begin--子弹框*/
|
||||||
|
.right-sub-box {
|
||||||
|
width: 170px;
|
||||||
|
height: 225px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 0 0 0 10px;
|
||||||
|
}
|
||||||
|
.param-box {
|
||||||
|
height: 200px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.param-box-row {
|
||||||
|
padding: 7px 0 0 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.param-box-row:last-of-type {
|
||||||
|
padding-bottom: 7px;
|
||||||
|
}
|
||||||
|
.param-box-row-key, .param-box-row-value {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
.param-box-row-eq {
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
text-align: center;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #c4c7cF;
|
||||||
|
}
|
||||||
|
.param-box-row-symbol:first-of-type {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #bbbbbb;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 7px;
|
||||||
|
right: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.param-box-row-symbol:last-of-type {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #bbbbbb;
|
||||||
|
border: 1px solid #bbbbbb;
|
||||||
|
text-align: center;
|
||||||
|
height: 12px;
|
||||||
|
width: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 135px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.param-box-row-symbol>i {
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
right: 1px;
|
||||||
|
}
|
||||||
|
/* end--param*/
|
||||||
|
</style>
|
||||||
@@ -28,28 +28,37 @@
|
|||||||
<div class="right-box-title">{{rightBox.title}}</div>
|
<div class="right-box-title">{{rightBox.title}}</div>
|
||||||
<!-- end--标题-->
|
<!-- end--标题-->
|
||||||
|
|
||||||
<!-- begin--表单-->
|
<el-form :model="project" label-position="top" class="right-box-form">
|
||||||
|
<el-form-item :label='$t("project.project.projectName")' prop="name">
|
||||||
|
<el-input maxlength="64" show-word-limit v-model="project.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item :label='$t("project.project.description")' prop="remark">
|
||||||
|
<el-input type="textarea" maxlength="1024" show-word-limit v-model="project.remark"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!--<!– begin--表单–>
|
||||||
<div class="right-box-form">
|
<div class="right-box-form">
|
||||||
<!--name-->
|
<!–name–>
|
||||||
<div class="right-box-form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
|
<div class="right-box-form-label">{{$t("project.project.projectName")}}</div>
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
<el-input placeholder="" maxlength="64" show-word-limit v-model="project.name" size="small"></el-input>
|
<el-input placeholder="" maxlength="64" show-word-limit v-model="project.name" size="small"></el-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--description-->
|
<!–description–>
|
||||||
<div class="right-box-form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box-form-label">{{$t("project.project.description")}}</div>
|
<div class="right-box-form-label">{{$t("project.project.description")}}</div>
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="project.remark" size="small"></el-input>
|
<el-input type="textarea" placeholder="" maxlength="1024" show-word-limit v-model="project.remark" size="small"></el-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
|
|
||||||
<!-- begin--底部按钮-->
|
<!-- begin--底部按钮-->
|
||||||
<div class="right-box-bottom-btns">
|
<!--<div class="right-box-bottom-btns">
|
||||||
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{project.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||||
</div>
|
</div>-->
|
||||||
<!-- end--底部按钮-->
|
<!-- end--底部按钮-->
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
@@ -119,7 +128,7 @@
|
|||||||
} else {
|
} else {
|
||||||
this.$message.error(response.msg);
|
this.$message.error(response.msg);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<i class="el-icon-time" @click="look_history"></i>
|
<i class="el-icon-time" @click="look_history"></i>
|
||||||
<div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
|
<div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
|
||||||
<div class="list_box_title">
|
<div class="list_box_title">
|
||||||
<span>{{other.recentSearch}}</span>
|
<span>{{$t('search.recentSearch')}}</span>
|
||||||
<i class="el-icon-close" @click="localStorage_display=!localStorage_display"></i>
|
<i class="el-icon-close" @click="localStorage_display=!localStorage_display"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="list_box_content" v-if="history_once.length>0">
|
<div class="list_box_content" v-if="history_once.length>0">
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="list_box_clear">
|
<div class="list_box_clear">
|
||||||
<span v-if="history_once.length>0" @click="clear_history">{{other.clearReSearch}}</span>
|
<span v-if="history_once.length>0" @click="clear_history">{{other.clearReSearch}}</span>
|
||||||
<span v-else class="no_historyList">{{other.noRecentSearch}}</span>
|
<span v-else class="no_historyList">{{$t('search.noRecentSearch')}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
<i class="el-icon-close" @click="close_selcet_list(ind,$event)"></i>
|
<i class="el-icon-close" @click="close_selcet_list(ind,$event)"></i>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
|
<div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
|
||||||
<input type="text" id="sreach_input" v-model="input_sreach" @keyup="enter" @click="stop_click">
|
<input type="text" id="sreach_input" v-model="input_sreach" @keyup="enter(val.name, $event)" @click="stop_click">
|
||||||
<div class="select_info_list" v-if="val.type == 'select'">
|
<div class="select_info_list" v-if="val.type == 'select'">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
|
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
|
||||||
@@ -626,8 +626,17 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// input框监听是按删除还是回车
|
// input框监听是按删除还是回车
|
||||||
enter(e) {
|
enter(val, e) {
|
||||||
var keyCode = window.event ? e.keyCode : e.which;
|
var keyCode = window.event ? e.keyCode : e.which;
|
||||||
|
if(val == 'ID'&&keyCode == 13){
|
||||||
|
let id = /^[0-9]*$/
|
||||||
|
if (!id.test(this.input_sreach) || this.input_sreach > 2147483647) {
|
||||||
|
//如果有不正确的值 进行删除
|
||||||
|
this.input_sreach = ''
|
||||||
|
this.$message.error(this.other.delErrorId)
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
if(keyCode!==8){
|
if(keyCode!==8){
|
||||||
this.delBool = false
|
this.delBool = false
|
||||||
this.delcriteriaBool = false
|
this.delcriteriaBool = false
|
||||||
|
|||||||
@@ -48,11 +48,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="top-tools">
|
<div class="top-tools">
|
||||||
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool top-tool-right margin-l-10" size="mini">
|
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||||
<span><i class="el-icon-plus"></i></span>
|
|
||||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||||
</el-button>
|
</button>
|
||||||
<div class="top-tool-search top-tool top-tool-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"
|
||||||
@@ -60,6 +59,7 @@
|
|||||||
height="calc(100% - 65px)"
|
height="calc(100% - 65px)"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
:resizable="false"
|
||||||
v-for="(item, index) in tableTitle"
|
v-for="(item, index) in tableTitle"
|
||||||
v-if="item.show"
|
v-if="item.show"
|
||||||
:width="item.width"
|
:width="item.width"
|
||||||
@@ -81,232 +81,14 @@
|
|||||||
<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[item.prop].name}}</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>{{scope.row[item.prop]}}</span>
|
<span v-else>{{scope.row[item.prop]}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||||
</div>
|
</div>
|
||||||
|
<alert-config-box :parentAlertRule="alertRule" @reload="getTableData" ref="alertConfigBox"></alert-config-box>
|
||||||
<transition name="right-box">
|
|
||||||
<div class="right-box right-box-alert-config" v-if="rightBox.show">
|
|
||||||
<!-- begin--顶部按钮-->
|
|
||||||
<div class="right-box-top-btns">
|
|
||||||
<div class="right-box-top-btn right-box-top-btn-full" @click="esc()">
|
|
||||||
<div class="right-box-btn-icon">
|
|
||||||
<i class="el-icon-close"></i>
|
|
||||||
</div>
|
|
||||||
<span>{{$t('overall.esc')}}</span>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-top-btn right-box-top-btn-full" @click="saveOrToEdit">
|
|
||||||
<div class="right-box-btn-icon">
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
<span v-if="rightBox.isEdit">{{$t('overall.save')}}</span>
|
|
||||||
<span v-else>{{$t('overall.edit')}}</span>
|
|
||||||
</div>
|
|
||||||
<div @click="del" class="right-box-top-btn" v-if="rightBox.isEdit && alertRule.id != ''">
|
|
||||||
<div class="right-box-btn-icon">
|
|
||||||
<i class="el-icon-delete"></i>
|
|
||||||
</div>
|
|
||||||
<span>{{$t('overall.delete')}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- end--顶部按钮-->
|
|
||||||
|
|
||||||
<!-- begin--标题-->
|
|
||||||
<div class="right-box-title">{{rightBox.title}}</div>
|
|
||||||
<!-- end--标题-->
|
|
||||||
|
|
||||||
<!-- begin--表单-->
|
|
||||||
<div class="right-box-form">
|
|
||||||
<!--name-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.config.name')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-input
|
|
||||||
v-if="rightBox.isEdit"
|
|
||||||
type="text"
|
|
||||||
placeholder=""
|
|
||||||
v-model="alertRule.alertName"
|
|
||||||
maxlength="64"
|
|
||||||
show-word-limit
|
|
||||||
size="small"
|
|
||||||
></el-input>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.alertName}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--type-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.list.type')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-select popper-class="config-dropdown" v-model="alertRule.type" placeholder="" v-if="rightBox.isEdit" size="small">
|
|
||||||
<el-option
|
|
||||||
v-for="item in typeData"
|
|
||||||
:key="item.key"
|
|
||||||
:label="item.value"
|
|
||||||
:value="item.key">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<div v-for="item in typeData" v-if="!rightBox.isEdit && item.key == alertRule.type" class="right-box-form-content-txt">{{item.value}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--linkedId-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.config.link')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-input
|
|
||||||
v-if="rightBox.isEdit"
|
|
||||||
type="text"
|
|
||||||
v-model="alertRule.linkId"
|
|
||||||
size="mini"
|
|
||||||
></el-input>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject.name}}</div>
|
|
||||||
<!--<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
|
|
||||||
<el-option
|
|
||||||
v-for="item in severityData"
|
|
||||||
:key="item.key"
|
|
||||||
:label="item.value"
|
|
||||||
:value="item.key">
|
|
||||||
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
|
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
|
||||||
<el-input
|
|
||||||
type="text"
|
|
||||||
v-model="item.name"
|
|
||||||
size="mini"
|
|
||||||
></el-input>
|
|
||||||
</span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--expr-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.config.expr')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-if="rightBox.isEdit"
|
|
||||||
placeholder=""
|
|
||||||
v-model="alertRule.expr"
|
|
||||||
size="small"
|
|
||||||
></el-input>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.expr}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--for-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.config.for')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-input
|
|
||||||
type="text"
|
|
||||||
v-if="rightBox.isEdit"
|
|
||||||
placeholder=""
|
|
||||||
v-model="alertRule.last"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
<template slot="append">second</template>
|
|
||||||
</el-input>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.last}}s</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--severity-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.severity')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-select popper-class="config-dropdown" v-model="alertRule.severity" placeholder="" v-if="rightBox.isEdit" size="small">
|
|
||||||
<el-option
|
|
||||||
v-for="item in severityData"
|
|
||||||
:key="item.key"
|
|
||||||
:label="item.value"
|
|
||||||
:value="item.key">
|
|
||||||
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.value}}</span>
|
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
|
||||||
<el-input
|
|
||||||
type="text"
|
|
||||||
v-model="item.name"
|
|
||||||
size="mini"
|
|
||||||
></el-input>
|
|
||||||
</span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.severity}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--summary-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.summary')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-input
|
|
||||||
type="text"
|
|
||||||
v-if="rightBox.isEdit"
|
|
||||||
placeholder=""
|
|
||||||
v-model="alertRule.summary"
|
|
||||||
size="small"
|
|
||||||
></el-input>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.summary}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--description-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('alert.description')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-input
|
|
||||||
type="textarea"
|
|
||||||
v-if="rightBox.isEdit"
|
|
||||||
placeholder=""
|
|
||||||
v-model="alertRule.description"
|
|
||||||
size="small"
|
|
||||||
></el-input>
|
|
||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.description}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--receiver-->
|
|
||||||
<div class="right-box-form-row">
|
|
||||||
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
|
|
||||||
<div class="right-box-form-content">
|
|
||||||
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" v-model="alertRule.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
|
|
||||||
<el-option
|
|
||||||
@click.native="blurEditReceiver()"
|
|
||||||
v-for="item in receiverData"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item">
|
|
||||||
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
|
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
|
||||||
<el-input
|
|
||||||
type="text"
|
|
||||||
v-model="item.name"
|
|
||||||
size="mini"
|
|
||||||
></el-input>
|
|
||||||
</span>
|
|
||||||
<span class="config-dropdown-error-message">{{item.errorMessage}}</span>
|
|
||||||
<span class="config-dropdown-btn" @click.stop="toEditReceiver(item)">
|
|
||||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
|
||||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
|
||||||
</span>
|
|
||||||
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelReceiver(item)"><i class="el-icon-delete"></i></span>
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
<div class="right-box-row-btn" v-if="rightBox.isEdit">
|
|
||||||
<span class="el-icon-plus"></span>
|
|
||||||
</div>
|
|
||||||
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{alertRule.receiver}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- end--表单-->
|
|
||||||
|
|
||||||
<!-- begin--底部按钮-->
|
|
||||||
<div class="right-box-bottom-btns">
|
|
||||||
<div @click="esc()" :class="{'right-box-bottom-btn-50': rightBox.isEdit}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save" v-if="rightBox.isEdit" class="right-box-bottom-btn right-box-bottom-btn-50">{{alertRule.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
|
||||||
</div>
|
|
||||||
<!-- end--底部按钮-->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
@@ -346,11 +128,7 @@ export default {
|
|||||||
searchLabel: { //搜索参数
|
searchLabel: { //搜索参数
|
||||||
|
|
||||||
},
|
},
|
||||||
rightBox: { //弹出框相关
|
|
||||||
show: false,
|
|
||||||
isEdit: false, //false查看，true编辑
|
|
||||||
title: ''
|
|
||||||
},
|
|
||||||
alertRule: {
|
alertRule: {
|
||||||
id: '',
|
id: '',
|
||||||
alertName: '',
|
alertName: '',
|
||||||
@@ -441,40 +219,13 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
receiverData: [{
|
|
||||||
id: '1',
|
|
||||||
name: 'group1',
|
|
||||||
description: '小组1desc'
|
|
||||||
}, {
|
|
||||||
id: '2',
|
|
||||||
name: 'group2',
|
|
||||||
description: '小组2desc'
|
|
||||||
}, {
|
|
||||||
id: '3',
|
|
||||||
name: '小组3',
|
|
||||||
description: '小组3desc'
|
|
||||||
}, {
|
|
||||||
id: '4',
|
|
||||||
name: '小组4',
|
|
||||||
description: '小组4desc'
|
|
||||||
}, {
|
|
||||||
id: '5',
|
|
||||||
name: '小组啊小组5',
|
|
||||||
description: '小组5desc'
|
|
||||||
}, {
|
|
||||||
id: '6',
|
|
||||||
name: '小组6',
|
|
||||||
description: '小组6desc'
|
|
||||||
}],
|
|
||||||
tableData: []
|
tableData: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toEdit: function(u) {
|
toEdit: function(u) {
|
||||||
this.alertRule = Object.assign({}, u);
|
this.alertRule = Object.assign({}, u);
|
||||||
this.rightBox.isEdit = true;
|
this.$refs.alertConfigBox.show(true, true);
|
||||||
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + u.id;
|
|
||||||
this.rightBox.show = true;
|
|
||||||
},
|
},
|
||||||
del: function(u) {
|
del: function(u) {
|
||||||
this.$confirm(this.$t("tip.confirmDelete"), {
|
this.$confirm(this.$t("tip.confirmDelete"), {
|
||||||
@@ -494,84 +245,13 @@ export default {
|
|||||||
},
|
},
|
||||||
toAdd: function() {
|
toAdd: function() {
|
||||||
this.cleanAlertRule();
|
this.cleanAlertRule();
|
||||||
this.rightBox.isEdit = true;
|
this.$refs.alertConfigBox.show(true, true);
|
||||||
this.rightBox.title = this.$t("alert.config.createAlertConfig");
|
|
||||||
this.rightBox.show = true;
|
|
||||||
},
|
},
|
||||||
detail: function(u) {
|
detail: function(u) {
|
||||||
this.alertRule = Object.assign({}, u);
|
this.alertRule = Object.assign({}, u);
|
||||||
this.rightBox.isEdit = false;
|
this.$refs.alertConfigBox.show(true, false);
|
||||||
this.rightBox.title = this.$t("alert.config.alertConfig") + " ID：" + u.id;
|
|
||||||
this.rightBox.show = true;
|
|
||||||
},
|
|
||||||
save: function() {
|
|
||||||
if (this.alertRule.id) {
|
|
||||||
this.$put('alert/rule', this.alertRule).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
|
||||||
this.getTableData();
|
|
||||||
this.rightBox.show = false;
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.$post('alert/rule', this.alertRule).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
|
||||||
this.getTableData();
|
|
||||||
this.rightBox.show = false;
|
|
||||||
} else {
|
|
||||||
this.$message.error(response.msg);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
saveOrToEdit: function() {
|
|
||||||
if (!this.rightBox.isEdit) {
|
|
||||||
this.rightBox.isEdit = true;
|
|
||||||
this.rightBox.title = this.$t("alert.config.editAlertConfig") + " ID：" + this.alertRule.id;
|
|
||||||
} else {
|
|
||||||
this.save();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toEditReceiver: function(item) {
|
|
||||||
if (!item.isEdit) {
|
|
||||||
//如果不在编辑状态，那么其他项如果有改动，则还原改动，最后开始编辑
|
|
||||||
this.blurEditReceiver();
|
|
||||||
item.isEdit = true;
|
|
||||||
} else {
|
|
||||||
//如果已在编辑状态，判断name是否有变更，有变更则发请求
|
|
||||||
if (item.name != item.oldName) {
|
|
||||||
if (this.updateReceiverName(item) == 200) {
|
|
||||||
item.isEdit = false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
item.errorMessage = '';
|
|
||||||
item.isEdit = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
blurEditReceiver: function() {
|
|
||||||
for (var i = 0; i < this.receiverData.length; i++) {
|
|
||||||
if (this.receiverData[i].isEdit) {
|
|
||||||
this.receiverData[i].name = this.receiverData[i].oldName;
|
|
||||||
this.receiverData[i].isEdit = false;
|
|
||||||
this.receiverData[i].errorMessage = '';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toDelReceiver: function(item) {
|
|
||||||
this.blurEditReceiver();
|
|
||||||
//TODO 请求后台，删除组
|
|
||||||
},
|
|
||||||
initReceiverData: function() {
|
|
||||||
for (var i = 0; i < this.receiverData.length; i++) {
|
|
||||||
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
|
|
||||||
this.$set(this.receiverData[i], 'isEdit', 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);
|
||||||
@@ -582,9 +262,6 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
esc: function() {
|
|
||||||
this.rightBox.show = false;
|
|
||||||
},
|
|
||||||
updateReceiverName: function(item) {
|
updateReceiverName: function(item) {
|
||||||
//TODO 请求接口改名
|
//TODO 请求接口改名
|
||||||
var code = 200;
|
var code = 200;
|
||||||
@@ -609,8 +286,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
jumpTo(data,id) {
|
jumpTo(data,id) {
|
||||||
this.$store.state.assetData.moduleData = data;
|
|
||||||
this.$store.state.assetData.selectedData = id;
|
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
path: "/" + data,
|
path: "/" + data,
|
||||||
query: {
|
query: {
|
||||||
@@ -638,18 +313,6 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
this.initReceiverData();
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
sProject() {
|
|
||||||
return this.$store.state.createAlertConfig;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
sProject(n, o) {
|
|
||||||
this.$store.commit('toCreateAlertConfig', false);
|
|
||||||
this.toAdd();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -169,7 +169,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="top-tools">
|
<div class="top-tools">
|
||||||
<div class="top-tool-search top-tool top-tool-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"
|
||||||
@@ -177,6 +177,7 @@
|
|||||||
height="calc(100% - 65px)"
|
height="calc(100% - 65px)"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
:resizable="false"
|
||||||
v-for="(item, index) in tableTitle"
|
v-for="(item, index) in tableTitle"
|
||||||
v-if="item.show"
|
v-if="item.show"
|
||||||
:width="item.width"
|
:width="item.width"
|
||||||
|
|||||||
@@ -559,9 +559,6 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.el-table {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-popover {
|
.el-popover {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@@ -62,7 +62,7 @@
|
|||||||
<div class="el-select-add-btn">
|
<div class="el-select-add-btn">
|
||||||
<el-popover
|
<el-popover
|
||||||
placement="left"
|
placement="left"
|
||||||
trigger="click"
|
trigger="manual"
|
||||||
v-model="popTypeVisible"
|
v-model="popTypeVisible"
|
||||||
>
|
>
|
||||||
<div class="pop-window-assetType" @click="editQuit()">
|
<div class="pop-window-assetType" @click="editQuit()">
|
||||||
@@ -1448,10 +1448,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.el-table {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-popover {
|
.el-popover {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|||||||
@@ -1518,10 +1518,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.el-table {
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-popover {
|
.el-popover {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|||||||
@@ -3,11 +3,6 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-right {
|
|
||||||
height: calc(100% - 131px);
|
|
||||||
margin-left: 322px;
|
|
||||||
padding: 0 15px 0 25px;
|
|
||||||
}
|
|
||||||
.content-right-option {
|
.content-right-option {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -54,11 +49,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="top-tools">
|
<div class="top-tools">
|
||||||
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
|
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||||
<span><i class="el-icon-plus"></i></span>
|
|
||||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||||
</el-button>
|
</button>
|
||||||
<div class="top-tool-search top-tool top-tool-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"
|
||||||
@@ -66,6 +60,7 @@
|
|||||||
height="calc(100% - 65px)"
|
height="calc(100% - 65px)"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
:resizable="false"
|
||||||
v-for="(item, index) in tableTitle"
|
v-for="(item, index) in tableTitle"
|
||||||
v-if="item.show"
|
v-if="item.show"
|
||||||
:width="item.width"
|
:width="item.width"
|
||||||
@@ -148,6 +143,19 @@
|
|||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.username}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="right-box-form-row" v-if="rightBox.isEdit && !user.userId">
|
||||||
|
<div class="right-box-form-label">{{$t('config.account.password')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-input
|
||||||
|
type="text"
|
||||||
|
placeholder=""
|
||||||
|
v-model="user.password"
|
||||||
|
maxlength="16"
|
||||||
|
show-word-limit
|
||||||
|
size="small"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="right-box-form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box-form-label">E-mail</div>
|
<div class="right-box-form-label">E-mail</div>
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
@@ -161,7 +169,7 @@
|
|||||||
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.email}}</div>
|
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{user.email}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box-form-row">
|
<!--<div class="right-box-form-row">
|
||||||
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
|
<div class="right-box-form-label">{{$t('config.account.receiver')}}</div>
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
|
<el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown" multiple v-model="user.receiver" placeholder="" v-if="rightBox.isEdit" size="small">
|
||||||
@@ -194,13 +202,13 @@
|
|||||||
<template v-for="rec in user.receiver">{{rec.name}}</template>
|
<template v-for="rec in user.receiver">{{rec.name}}</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>-->
|
||||||
<div class="right-box-form-row">
|
<div class="right-box-form-row">
|
||||||
<div class="right-box-form-label">{{$t('config.account.language')}}</div>
|
<div class="right-box-form-label">{{$t('config.account.language')}}</div>
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
<el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
|
<el-radio v-model="user.lang" label="en" :disabled="!rightBox.isEdit && user.lang != 'en'">English</el-radio>
|
||||||
<el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
|
<el-radio v-model="user.lang" label="zh" :disabled="!rightBox.isEdit && user.lang != 'zh'">中文</el-radio>
|
||||||
<el-radio v-model="user.lang" label="ru" disabled>русский（{{$t('config.account.notCurrentlySupport')}}）</el-radio>
|
<!--<el-radio v-model="user.lang" label="ru" disabled>русский（{{$t('config.account.notCurrentlySupport')}}）</el-radio>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box-form-row">
|
<div class="right-box-form-row">
|
||||||
@@ -282,7 +290,7 @@ export default {
|
|||||||
}, {
|
}, {
|
||||||
label: this.$t('config.account.receiver'),
|
label: this.$t('config.account.receiver'),
|
||||||
prop: 'receiver',
|
prop: 'receiver',
|
||||||
show: true,
|
show: false,
|
||||||
width: 240
|
width: 240
|
||||||
}, {
|
}, {
|
||||||
label: this.$t('config.account.createTime'),
|
label: this.$t('config.account.createTime'),
|
||||||
@@ -375,7 +383,7 @@ export default {
|
|||||||
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
||||||
this.$get('sys/user/list', this.searchLabel).then(response => {
|
this.$get('sys/user/list', this.searchLabel).then(response => {
|
||||||
if (response.code === 200) {
|
if (response.code === 200) {
|
||||||
for (var i = 0; i < response.data.list.length; i++) {
|
for (let i = 0; i < response.data.list.length; i++) {
|
||||||
response.data.list[i].status = response.data.list[i].status + "";
|
response.data.list[i].status = response.data.list[i].status + "";
|
||||||
}
|
}
|
||||||
this.tableData = response.data.list;
|
this.tableData = response.data.list;
|
||||||
@@ -452,7 +460,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
blurEditReceiver: function() {
|
blurEditReceiver: function() {
|
||||||
for (var i = 0; i < this.receiverData.length; i++) {
|
for (let i = 0; i < this.receiverData.length; i++) {
|
||||||
if (this.receiverData[i].isEdit) {
|
if (this.receiverData[i].isEdit) {
|
||||||
this.receiverData[i].name = this.receiverData[i].oldName;
|
this.receiverData[i].name = this.receiverData[i].oldName;
|
||||||
this.receiverData[i].isEdit = false;
|
this.receiverData[i].isEdit = false;
|
||||||
@@ -466,7 +474,7 @@ export default {
|
|||||||
//TODO 请求后台，删除用户组
|
//TODO 请求后台，删除用户组
|
||||||
},
|
},
|
||||||
initReceiverData: function() {
|
initReceiverData: function() {
|
||||||
for (var i = 0; i < this.receiverData.length; i++) {
|
for (let i = 0; i < this.receiverData.length; i++) {
|
||||||
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
|
this.$set(this.receiverData[i], 'oldName', this.receiverData[i].name);
|
||||||
this.$set(this.receiverData[i], 'isEdit', false);
|
this.$set(this.receiverData[i], 'isEdit', false);
|
||||||
}
|
}
|
||||||
@@ -476,7 +484,7 @@ export default {
|
|||||||
},
|
},
|
||||||
updateReceiverName: function(item) {
|
updateReceiverName: function(item) {
|
||||||
//TODO 请求接口改名
|
//TODO 请求接口改名
|
||||||
var code = 200;
|
let code = 200;
|
||||||
//this.$set(item, 'errorMessage', 'err');
|
//this.$set(item, 'errorMessage', 'err');
|
||||||
item.errorMessage = '';
|
item.errorMessage = '';
|
||||||
item.oldName = item.name;
|
item.oldName = item.name;
|
||||||
|
|||||||
@@ -23,6 +23,42 @@
|
|||||||
.content-right-option .el-icon-view:hover {
|
.content-right-option .el-icon-view:hover {
|
||||||
color: #409EFF;
|
color: #409EFF;
|
||||||
}
|
}
|
||||||
|
.pop-window {
|
||||||
|
height: 370px;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop-window-assetType {
|
||||||
|
height: 550px;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop-window-assetType-content {
|
||||||
|
padding: 1px 15px 15px 20px;
|
||||||
|
}
|
||||||
|
.sidebar-pop-input {
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
width: 200px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #DCDFE6;
|
||||||
|
color: #606266;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-pop-input-select {
|
||||||
|
position: absolute;
|
||||||
|
right: 83px;
|
||||||
|
width: 200px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #DCDFE6;
|
||||||
|
color: #606266;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0px 15px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div class="prom">
|
<div class="prom">
|
||||||
@@ -35,11 +71,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="top-tools">
|
<div class="top-tools">
|
||||||
<el-button @click="toAdd" class="top-tool-btn top-tool-btn-active margin-l-10 top-tool top-tool-right" size="mini">
|
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||||
<span><i class="el-icon-plus"></i></span>
|
|
||||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||||
</el-button>
|
</button>
|
||||||
<div class="top-tool-search top-tool top-tool-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"
|
||||||
@@ -47,6 +82,7 @@
|
|||||||
height="calc(100% - 65px)"
|
height="calc(100% - 65px)"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
:resizable="false"
|
||||||
v-for="(item, index) in tableTitle"
|
v-for="(item, index) in tableTitle"
|
||||||
v-if="item.show"
|
v-if="item.show"
|
||||||
:width="item.width"
|
:width="item.width"
|
||||||
@@ -62,7 +98,7 @@
|
|||||||
<span v-else>{{scope.row[item.prop]}}</span>
|
<span v-else>{{scope.row[item.prop]}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column :label="$t('config.account.option')" width="100">
|
<el-table-column :resizable="false" :label="$t('config.account.option')" width="100">
|
||||||
<template slot-scope="scope" :column="item">
|
<template slot-scope="scope" :column="item">
|
||||||
<div class="content-right-options">
|
<div class="content-right-options">
|
||||||
<span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
|
<span @click="del(scope.row)" class="content-right-option"><i class="el-icon-delete"></i></span>
|
||||||
@@ -117,24 +153,116 @@
|
|||||||
:key="item.id"
|
:key="item.id"
|
||||||
:label="item.name"
|
:label="item.name"
|
||||||
:value="item">
|
:value="item">
|
||||||
<span class="config-dropdown-label-txt" v-if="!item.isEdit">{{item.name}}</span>
|
<span class="config-dropdown-label-txt">{{item.name}}</span>
|
||||||
<span class="config-dropdown-label-input" v-if="item.isEdit" @click.stop>
|
<el-popover
|
||||||
<el-input
|
placement="left"
|
||||||
type="text"
|
v-model="item[item.name]"
|
||||||
v-model="item.name"
|
>
|
||||||
size="mini"
|
<div class="pop-window-assetType-content">
|
||||||
></el-input>
|
<div class="right-box-top-btns">
|
||||||
</span>
|
<div class="right-box-top-btn right-box-top-btn-full"
|
||||||
<span class="config-dropdown-error-message">{{item.errorMessage}}</span>
|
@click="item[item.name] = false">
|
||||||
<span class="config-dropdown-btn" @click.stop="toEditIdc(item)">
|
<div class="right-box-btn-icon">
|
||||||
<i class="el-icon-edit-outline" v-if="!item.isEdit"></i>
|
<i class="el-icon-close"></i>
|
||||||
<i class="el-icon-check" v-if="item.isEdit"></i>
|
</div>
|
||||||
</span>
|
<span>{{$t('overall.esc')}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop-window">
|
||||||
|
<span style="display: block;padding-bottom: 20px">标题</span>
|
||||||
|
<el-input v-model="popIdcData.name"/>
|
||||||
|
<el-input v-model="popIdcData.location"/>
|
||||||
|
<el-select v-model="popIdcData.principal" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in idcUserData"
|
||||||
|
:key="item.key"
|
||||||
|
:label="item.username"
|
||||||
|
:value="item.userId"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-input v-model="popIdcData.tel"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btns">
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
||||||
|
@click.stop="item[item.name]= false">
|
||||||
|
{{$t('overall.cancel')}}
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-50"
|
||||||
|
@click="editData('idc', item.id, popIdcData)">
|
||||||
|
{{$t('overall.save')}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="config-dropdown-btn" slot="reference"
|
||||||
|
@click.stop="getSingleIDCData(item.id,'edit')"><i
|
||||||
|
class="el-icon-edit-outline"></i></span>
|
||||||
|
</el-popover>
|
||||||
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
|
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"><i class="el-icon-delete"></i></span>
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
<div class="right-box-row-btn" v-if="rightBox.isEdit">
|
<div class="right-box-row-btn" v-if="rightBox.isEdit">
|
||||||
<span class="el-icon-plus"></span>
|
<el-popover
|
||||||
|
placement="left"
|
||||||
|
v-model="visible"
|
||||||
|
>
|
||||||
|
<div class="pop-window-assetType-content">
|
||||||
|
<div class="right-box-top-btns">
|
||||||
|
<div class="right-box-top-btn right-box-top-btn-full"
|
||||||
|
@click="visible = false">
|
||||||
|
<div class="right-box-btn-icon">
|
||||||
|
<i class="el-icon-close"></i>
|
||||||
|
</div>
|
||||||
|
<span>{{$t('overall.esc')}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pop-window">
|
||||||
|
<span style="display: block;padding-bottom: 20px">标题</span>
|
||||||
|
<div style="padding-top: 10px;padding-left: 20px">
|
||||||
|
<div>
|
||||||
|
<label style="font-size: 12px">DN name</label>
|
||||||
|
<input class='sidebar-pop-input' v-model="addIdcData.name"/>
|
||||||
|
</div>
|
||||||
|
<div style="padding-top: 40px">
|
||||||
|
<label style="font-size: 12px">Loaction</label>
|
||||||
|
<input class='sidebar-pop-input' v-model="addIdcData.location"/>
|
||||||
|
</div>
|
||||||
|
<div style="padding-top: 40px">
|
||||||
|
<label style="font-size: 12px;padding-right: 20px">负责人</label>
|
||||||
|
<select class='sidebar-pop-input-select'
|
||||||
|
style="margin-left:-40px "
|
||||||
|
v-model="addIdcData.principal"
|
||||||
|
clearable>
|
||||||
|
<option
|
||||||
|
v-for="item in idcUserData"
|
||||||
|
:key="item.key"
|
||||||
|
:label="item.username"
|
||||||
|
:value="item.userId"
|
||||||
|
>
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div style="padding-top: 40px">
|
||||||
|
<label style="font-size: 12px">Tel</label>
|
||||||
|
<input class='sidebar-pop-input' v-model="addIdcData.tel"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btns">
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-cancel"
|
||||||
|
@click.stop="visible= false">
|
||||||
|
{{$t('overall.cancel')}}
|
||||||
|
</div>
|
||||||
|
<div class="right-box-bottom-btn right-box-bottom-btn-50"
|
||||||
|
@click="addNewData('IDC')">
|
||||||
|
{{$t('overall.save')}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span slot="reference"
|
||||||
|
@click.prevent=''><i
|
||||||
|
class="el-icon-plus"></i></span>
|
||||||
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
|
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -198,6 +326,7 @@ export default {
|
|||||||
name: "prom",
|
name: "prom",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
visible:false,
|
||||||
rightBox: { //弹出框相关
|
rightBox: { //弹出框相关
|
||||||
show: false,
|
show: false,
|
||||||
isEdit: false, //false查看，true编辑
|
isEdit: false, //false查看，true编辑
|
||||||
@@ -283,6 +412,28 @@ export default {
|
|||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
searchLabel: {}, //搜索参数
|
searchLabel: {}, //搜索参数
|
||||||
|
idcSelectedData: {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
location: '',
|
||||||
|
principal: '',
|
||||||
|
tel: ''
|
||||||
|
},
|
||||||
|
addIdcData: {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
location: '',
|
||||||
|
principal: '',
|
||||||
|
tel: ''
|
||||||
|
},
|
||||||
|
popIdcData: {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
location: '',
|
||||||
|
principal: '',
|
||||||
|
tel: ''
|
||||||
|
},
|
||||||
|
idcUserData: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -382,6 +533,7 @@ export default {
|
|||||||
if (this.idcData[i].isEdit) {
|
if (this.idcData[i].isEdit) {
|
||||||
this.idcData[i].name = this.idcData[i].oldName;
|
this.idcData[i].name = this.idcData[i].oldName;
|
||||||
this.idcData[i].isEdit = false;
|
this.idcData[i].isEdit = false;
|
||||||
|
|
||||||
this.idcData[i].errorMessage = '';
|
this.idcData[i].errorMessage = '';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -412,6 +564,7 @@ export default {
|
|||||||
for (var i = 0; i < this.idcData.length; i++) {
|
for (var i = 0; i < this.idcData.length; i++) {
|
||||||
this.$set(this.idcData[i], 'oldName', this.idcData[i].name);
|
this.$set(this.idcData[i], 'oldName', this.idcData[i].name);
|
||||||
this.$set(this.idcData[i], 'isEdit', false);
|
this.$set(this.idcData[i], 'isEdit', false);
|
||||||
|
this.$set(this.idcData[i], this.idcData[i].name, false)
|
||||||
}
|
}
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
}
|
}
|
||||||
@@ -466,7 +619,6 @@ export default {
|
|||||||
this.getTableData();
|
this.getTableData();
|
||||||
},
|
},
|
||||||
search: function(searchObj) {
|
search: function(searchObj) {
|
||||||
console.info(searchObj);
|
|
||||||
this.searchLabel = {};
|
this.searchLabel = {};
|
||||||
for (let item in searchObj) {
|
for (let item in searchObj) {
|
||||||
if (searchObj[item]) {
|
if (searchObj[item]) {
|
||||||
@@ -474,10 +626,77 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.getTableData();
|
this.getTableData();
|
||||||
}
|
},
|
||||||
|
addNewData(type) {
|
||||||
|
if (type === 'IDC') {
|
||||||
|
this.$post('idc', this.addIdcData).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
const h = this.$createElement;
|
||||||
|
this.$notify({
|
||||||
|
message: h('i', {style: 'color: teal'}, '添加成功'),
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
this.getIdcData()
|
||||||
|
}else{
|
||||||
|
const h = this.$createElement;
|
||||||
|
this.$notify({
|
||||||
|
message: h('i', {style: 'color: teal'}, res.msg),
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getSingleIDCData(data, item) {
|
||||||
|
if (item !== 'edit') {
|
||||||
|
this.idcSelectedData = '';
|
||||||
|
this.idcData.forEach(item => {
|
||||||
|
if (item.id === data) {
|
||||||
|
this.idcSelectedData = item
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.idcData.forEach(item => {
|
||||||
|
if (item.id === data) {
|
||||||
|
console.log(item)
|
||||||
|
this.popIdcData.name = item.name
|
||||||
|
this.popIdcData.location = item.location
|
||||||
|
this.popIdcData.principal = item.principal
|
||||||
|
this.popIdcData.tel = item.tel
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getUserData() {
|
||||||
|
this.$get('sys/user/list').then(response => {
|
||||||
|
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.idcUserData = response.data.list
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
editData(data, id, item) {
|
||||||
|
item.id = id;
|
||||||
|
this.$put(data, item).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
const h = this.$createElement;
|
||||||
|
this.$notify({
|
||||||
|
message: h('i', {style: 'color: teal'}, '修改成功'),
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
const h = this.$createElement;
|
||||||
|
this.$notify({
|
||||||
|
message: h('i', {style: 'color: teal'}, res.msg),
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
this.getIdcData();
|
this.getIdcData();
|
||||||
|
this.getUserData();
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
'promServer.idc': function(n, o) {
|
'promServer.idc': function(n, o) {
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<style scoped>
|
||||||
|
.metricPreview {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<div class="metricPreview">
|
||||||
|
<div class="content-left">
|
||||||
|
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
|
||||||
|
<div class="sidebar-info">
|
||||||
|
<div class="sidebar-info-item sidebar-info-top" @click="jumpTo('panel')">{{$t('dashboard.panel.title')}}</div>
|
||||||
|
<div class="sidebar-info-item sidebar-info-item-active">{{$t('dashboard.metricPreview.title')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-right">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "metricPreview",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
jumpTo(data,id) {
|
||||||
|
this.$store.state.assetData.moduleData = data;
|
||||||
|
this.$store.state.assetData.selectedData = id;
|
||||||
|
this.$router.push({
|
||||||
|
path: "/" + data,
|
||||||
|
query: {
|
||||||
|
t: +new Date()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function() {
|
||||||
|
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
318
nezha-fronted/src/components/page/dashboard/panel.vue
Normal file
318
nezha-fronted/src/components/page/dashboard/panel.vue
Normal file
@@ -0,0 +1,318 @@
|
|||||||
|
<style scoped>
|
||||||
|
.panel {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.panel .el-table {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.content-right-option {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.content-right-option .el-icon-delete {
|
||||||
|
color: #F98D9A;
|
||||||
|
}
|
||||||
|
.content-right-option .el-icon-delete:hover {
|
||||||
|
color: #D96D7A;
|
||||||
|
}
|
||||||
|
.content-right-option .el-icon-view {
|
||||||
|
color: #60BEFF;
|
||||||
|
}
|
||||||
|
.content-right-option .el-icon-view:hover {
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-list {
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* begin--Panel-自定义可编辑的el-select下拉框样式*/
|
||||||
|
.panel-dropdown-btn {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 7px;
|
||||||
|
float: right;
|
||||||
|
color: #60BEFF;
|
||||||
|
font-size: 13px
|
||||||
|
}
|
||||||
|
.panel-dropdown-btn:hover {
|
||||||
|
color: #409EFF;
|
||||||
|
}
|
||||||
|
.panel-dropdown-btn-create {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #F98D9A;
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
.panel-dropdown-btn-create:hover {
|
||||||
|
color: #D96D7A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-dropdown-btn-delete {
|
||||||
|
color: #F98D9A;
|
||||||
|
font-size: 13px
|
||||||
|
}
|
||||||
|
.panel-dropdown-btn-delete:hover {
|
||||||
|
color: #D96D7A;
|
||||||
|
}
|
||||||
|
.panel-dropdown-error-message {
|
||||||
|
color: #F98D9A;
|
||||||
|
}
|
||||||
|
/* end--Panel-自定义可编辑的el-select下拉框样式*/
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="content-left">
|
||||||
|
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
|
||||||
|
<div class="sidebar-info">
|
||||||
|
<div class="sidebar-info-item sidebar-info-top sidebar-info-item-active">{{$t('dashboard.panel.title')}}</div>
|
||||||
|
<div class="sidebar-info-item" @click="jumpTo('metricPreview')">{{$t('dashboard.metricPreview.title')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-right">
|
||||||
|
<div class="top-tools">
|
||||||
|
<button @click="toAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
|
||||||
|
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
||||||
|
</button>
|
||||||
|
<div class="top-tool-search float-right"><search-input :searchMsg="searchMsg" @search="search"></search-input></div>
|
||||||
|
<el-select class="right-box-row-with-btn" popper-class="" v-model="showPanel.id" placeholder="" size="small">
|
||||||
|
<el-option >
|
||||||
|
<span class="panel-dropdown-btn-create" @click.stop="toAdd" >{{$t('dashboard.panel.createPanelTitleSec')}}</span>
|
||||||
|
</el-option>
|
||||||
|
<el-option
|
||||||
|
@click.native=""
|
||||||
|
v-for="item in panelData"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id">
|
||||||
|
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
|
||||||
|
<span class="panel-dropdown-btn" @click.stop="toEdit(item)">
|
||||||
|
<i class="el-icon-edit-outline" ></i>
|
||||||
|
</span>
|
||||||
|
<span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="table-list">
|
||||||
|
<!--<div class="box-content">
|
||||||
|
<chart-list
|
||||||
|
@on-edit-chart="editData"
|
||||||
|
@on-remove-chart="removeData" ref="chartList"></chart-list>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<transition name="right-box">
|
||||||
|
<div class="right-box right-box-panel" v-if="rightBox.show">
|
||||||
|
<!-- begin--顶部按钮-->
|
||||||
|
<div class="right-box-top-btns">
|
||||||
|
<div class="right-box-top-btn right-box-top-btn-full" @click="esc">
|
||||||
|
<div class="right-box-btn-icon">
|
||||||
|
<i class="el-icon-close"></i>
|
||||||
|
</div>
|
||||||
|
<span>{{$t('overall.esc')}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-box-top-btn right-box-top-btn-full" @click="save">
|
||||||
|
<div class="right-box-btn-icon">
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<span >{{$t('overall.save')}}</span>
|
||||||
|
</div>
|
||||||
|
<div @click="del(panel)" class="right-box-top-btn" v-if="panel.id != ''">
|
||||||
|
<div class="right-box-btn-icon">
|
||||||
|
<i class="el-icon-delete"></i>
|
||||||
|
</div>
|
||||||
|
<span>{{$t('overall.delete')}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- end--顶部按钮-->
|
||||||
|
|
||||||
|
<!-- begin--标题-->
|
||||||
|
<div class="right-box-title">{{rightBox.title}}</div>
|
||||||
|
<!-- end--标题-->
|
||||||
|
|
||||||
|
<!-- begin--表单-->
|
||||||
|
<div class="right-box-form">
|
||||||
|
<div class="right-box-form-row">
|
||||||
|
<div class="right-box-form-label">{{$t('dashboard.panel.panelForm.panelName')}}</div>
|
||||||
|
<div class="right-box-form-content">
|
||||||
|
<el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small"></el-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- end--表单-->
|
||||||
|
|
||||||
|
<!-- begin--底部按钮-->
|
||||||
|
<div class="right-box-bottom-btns">
|
||||||
|
<div @click="esc()" :class="{'right-box-bottom-btn-50': true}" class="right-box-bottom-btn right-box-bottom-btn-cancel">{{$t('overall.cancel')}}</div><div @click="save()" class="right-box-bottom-btn right-box-bottom-btn-50">{{panel.id == '' ? $t('overall.create') : $t('overall.save')}}</div>
|
||||||
|
</div>
|
||||||
|
<!-- end--底部按钮-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "panel",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
rightBox: { //弹出框相关
|
||||||
|
show: false,
|
||||||
|
title: this.$t('dashboard.panel.createPanelTitle')
|
||||||
|
},
|
||||||
|
showPanel:{//panel下拉列表
|
||||||
|
id:'',
|
||||||
|
name:''
|
||||||
|
},
|
||||||
|
panel: {//新增panel
|
||||||
|
id:'',
|
||||||
|
name: ''
|
||||||
|
},
|
||||||
|
pageObj: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 9999,//此处获取所有数据，所以设置一个较大的值
|
||||||
|
total:0
|
||||||
|
},
|
||||||
|
chartsData: [],//中间部分图表相关数据
|
||||||
|
panelData: [],
|
||||||
|
searchMsg: { //给搜索框子组件传递的信息
|
||||||
|
zheze_none: true,
|
||||||
|
searchLabelList: [{
|
||||||
|
id: 1,
|
||||||
|
name: this.$t("dashboard.panel.panelForm.panelId"),
|
||||||
|
type: 'input',
|
||||||
|
label: 'id',
|
||||||
|
disabled: false
|
||||||
|
},{
|
||||||
|
id: 2,
|
||||||
|
name: this.$t("dashboard.panel.panelForm.panelName"),
|
||||||
|
type: 'input',
|
||||||
|
label: 'name',
|
||||||
|
disabled: false
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
searchLabel: {}, //搜索参数
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
del: function(u) {
|
||||||
|
this.$confirm(this.$t("tip.confirmDelete"), {
|
||||||
|
confirmButtonText: this.$t("tip.yes"),
|
||||||
|
cancelButtonText: this.$t("tip.no"),
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
this.$delete("panel?ids=" + u.id).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
|
||||||
|
if(this.showPanel.id===u.id){
|
||||||
|
this.showPanel.id ='';
|
||||||
|
}
|
||||||
|
this.getTableData();
|
||||||
|
this.rightBox.show = false;
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.msg);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toEdit: function(u) {
|
||||||
|
this.panel = Object.assign({}, u);
|
||||||
|
this.rightBox.title = this.$t("dashboard.panel.editPanelTitle") ;
|
||||||
|
this.rightBox.show = true;
|
||||||
|
},
|
||||||
|
toAdd: function() {
|
||||||
|
this.cleanPanel();
|
||||||
|
this.rightBox.title = this.$t("dashboard.panel.createPanelTitle");
|
||||||
|
this.rightBox.show = true;
|
||||||
|
},
|
||||||
|
save: function() {
|
||||||
|
if (this.panel.id) {
|
||||||
|
this.$put('panel', this.panel).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||||
|
this.getTableData();
|
||||||
|
this.esc();
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$post('panel', this.panel).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||||
|
this.getTableData();
|
||||||
|
this.esc();
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
esc: function() {
|
||||||
|
this.rightBox.show = false;
|
||||||
|
},
|
||||||
|
jumpTo(data,id) {
|
||||||
|
this.$store.state.assetData.moduleData = data
|
||||||
|
this.$store.state.assetData.selectedData = id
|
||||||
|
this.$router.push({
|
||||||
|
path: "/" + data,
|
||||||
|
query: {
|
||||||
|
t: +new Date()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getTableData: function() {
|
||||||
|
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
|
||||||
|
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
|
||||||
|
this.$get('panel', this.searchLabel).then(response => {
|
||||||
|
if (response.code === 200) {
|
||||||
|
this.panelData = response.data.list;
|
||||||
|
if( response.data.list.length>0 && this.showPanel.id===''){
|
||||||
|
this.showPanel.id = response.data.list[0].id;
|
||||||
|
}
|
||||||
|
this.pageObj.total = response.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
cleanPanel: function() {
|
||||||
|
this.panel = {
|
||||||
|
id: '',
|
||||||
|
name: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageNo(val) {
|
||||||
|
this.pageObj.pageNo = val;
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
pageSize(val) {
|
||||||
|
this.pageObj.pageSize = val;
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
search: function(searchObj) {
|
||||||
|
console.info(searchObj);
|
||||||
|
this.searchLabel = {};
|
||||||
|
for (let item in searchObj) {
|
||||||
|
if (searchObj[item]) {
|
||||||
|
this.$set(this.searchLabel, item, searchObj[item]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.getTableData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTableData();
|
||||||
|
},
|
||||||
|
mounted: function() {
|
||||||
|
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,671 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="project">
|
|
||||||
<div class="content-left">
|
|
||||||
<div class="sidebar-title">{{currentProject.name}}</div>
|
|
||||||
<div class="sidebar-info">
|
|
||||||
<div
|
|
||||||
v-for="item in moduleList"
|
|
||||||
class="sidebar-info-item"
|
|
||||||
:class="{'sidebar-info-item-active': item.id == currentModule.id}"
|
|
||||||
@click="changeModule(item)"
|
|
||||||
>
|
|
||||||
{{item.name}}
|
|
||||||
<div class="side-bar-menu-edit" @click.stop="toEditModule(item)"><i class="el-icon-edit-outline"></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--metrics-->
|
|
||||||
<div class="content-right" v-show="tableShow == 2">
|
|
||||||
<div class="top-tools">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button @click="tableShow = 1" class="top-tool-btn top-tool" size="mini">
|
|
||||||
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
|
|
||||||
</el-button>
|
|
||||||
<el-button class="top-tool-btn top-tool top-tool-btn-active" size="mini">
|
|
||||||
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
|
|
||||||
</el-button>
|
|
||||||
</el-button-group>
|
|
||||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="metricSearchMsg" @search="metricSearch"></search-input></div>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
:data="metricsTableData"
|
|
||||||
border
|
|
||||||
height="calc(100% - 65px)"
|
|
||||||
style="width: 100%;">
|
|
||||||
<el-table-column
|
|
||||||
v-for="(item, index) in metricsTableTitle"
|
|
||||||
v-if="item.show"
|
|
||||||
:width="item.width"
|
|
||||||
:key="`col-${index}`"
|
|
||||||
:label="item.label"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope" :column="item">
|
|
||||||
<span>{{scope.row[item.prop]}}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<Pagination v-cloak :pageObj="metricPageObj" @pageNo='metricsPageNo' @pageSize='metricsPageSize' ref="metricPagination"></Pagination>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--endpoint-->
|
|
||||||
<div class="content-right" v-show="tableShow == 1">
|
|
||||||
<div class="top-tools">
|
|
||||||
<el-button-group>
|
|
||||||
<el-button @click="" class="top-tool-btn top-tool top-tool-btn-active" size="mini">
|
|
||||||
<span class="top-tool-btn-txt">{{$t('project.endpoint.endpoint')}}</span>
|
|
||||||
</el-button>
|
|
||||||
<el-button @click="tableShow = 2" class="top-tool-btn top-tool" size="mini">
|
|
||||||
<span class="top-tool-btn-txt">{{$t('project.metrics.metrics')}}</span>
|
|
||||||
</el-button>
|
|
||||||
</el-button-group>
|
|
||||||
<el-button @click="toCreateEndpoint" class="top-tool-btn top-tool-btn-active top-tool margin-l-10 top-tool-right" size="mini">
|
|
||||||
<span><i class="el-icon-plus"></i></span>
|
|
||||||
<span class="top-tool-btn-txt">{{$t('overall.add')}}</span>
|
|
||||||
</el-button>
|
|
||||||
<div class="top-tool-search top-tool top-tool-right"><search-input :searchMsg="endpointSearchMsg" @search="endpointSearch"></search-input></div>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
:data="endpointTableData"
|
|
||||||
border
|
|
||||||
height="calc(100% - 65px)"
|
|
||||||
style="width: 100%;">
|
|
||||||
<el-table-column
|
|
||||||
v-for="(item, index) in endpointTableTitle"
|
|
||||||
v-if="item.show"
|
|
||||||
:width="item.width"
|
|
||||||
:key="`col-${index}`"
|
|
||||||
:label="item.label"
|
|
||||||
>
|
|
||||||
<template slot-scope="scope" :column="item">
|
|
||||||
<span v-if="item.prop == 'asset' && scope.row[item.prop]">{{scope.row[item.prop].host}}</span>
|
|
||||||
<span v-else-if="item.prop == 'param'">
|
|
||||||
<span v-for="p in scope.row.paramObj">{{p.key}}={{p.value}}，</span>
|
|
||||||
</span>
|
|
||||||
<span v-else>{{scope.row[item.prop]}}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column :label="$t('overall.option')" width="100">
|
|
||||||
<template slot-scope="scope" :column="item">
|
|
||||||
<div class="content-right-options">
|
|
||||||
<span @click.stop="endpointDetail(scope.row)" class="content-right-option"><i class="el-icon-view"></i></span>
|
|
||||||
<span @click.stop="toEditEndpoint(scope.row)" class="content-right-option"><i class="el-icon-edit-outline"></i></span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<Pagination v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<module-box :currentProject="currentProject" :module="editModule" @reload="getModuleList" ref="moduleBox"></module-box>
|
|
||||||
<edit-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="editEndpointBox"></edit-endpoint-box>
|
|
||||||
<add-endpoint-box :currentProject="currentProject" :currentModule="currentModule" :endpoint="editEndpoint" @reload="getEndpointTableData" ref="addEndpointBox"></add-endpoint-box>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "project2",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
tableShow: 1, // 1.endpoint; 2.metrics
|
|
||||||
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
|
|
||||||
endpointTableTitle: [
|
|
||||||
{
|
|
||||||
label: this.$t("project.endpoint.endpointId"),
|
|
||||||
prop: 'id',
|
|
||||||
show: true,
|
|
||||||
width: 110
|
|
||||||
},{
|
|
||||||
label: this.$t("project.endpoint.host"),
|
|
||||||
prop: 'host',
|
|
||||||
show: true,
|
|
||||||
},{
|
|
||||||
label: this.$t("project.endpoint.port"),
|
|
||||||
prop: 'port',
|
|
||||||
show: true,
|
|
||||||
},{
|
|
||||||
label: this.$t("project.endpoint.param"),
|
|
||||||
prop: 'param',
|
|
||||||
show: true,
|
|
||||||
},{
|
|
||||||
label: this.$t("project.endpoint.path"),
|
|
||||||
prop: 'path',
|
|
||||||
show: true,
|
|
||||||
},{
|
|
||||||
label: this.$t("project.endpoint.asset"),
|
|
||||||
prop: 'asset',
|
|
||||||
show: true,
|
|
||||||
}
|
|
||||||
],
|
|
||||||
endpointTableData: [],
|
|
||||||
endpointPageObj: {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
total:0
|
|
||||||
},
|
|
||||||
metricsTableTitle: [
|
|
||||||
{
|
|
||||||
label: "ID",
|
|
||||||
prop: 'id',
|
|
||||||
show: true,
|
|
||||||
width: 100
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("project.metrics.name"),
|
|
||||||
prop: 'metric',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("project.metrics.type"),
|
|
||||||
prop: 'type',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: this.$t("project.metrics.description"),
|
|
||||||
prop: 'help',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
metricsTableData: [],
|
|
||||||
metricPageObj: {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
total: 0
|
|
||||||
},
|
|
||||||
moduleList: [],
|
|
||||||
projectList: [],
|
|
||||||
currentProject: {id: '', name: '', remark: ''}, //endpoint弹框、module列表用来回显project
|
|
||||||
editModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //编辑的module
|
|
||||||
currentModule: {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []}, //endpoint弹框用来回显module
|
|
||||||
endpointSearchLabel: {moduleId: ''}, //endpoint搜索参数
|
|
||||||
metricSearchLabel: {moduleId: ''}, //metrics搜索参数
|
|
||||||
endpointSearchMsg: { //给搜索框子组件传递的信息
|
|
||||||
zheze_none: true,
|
|
||||||
searchLabelList: [{
|
|
||||||
id: 1,
|
|
||||||
name: "ID",
|
|
||||||
type: 'input',
|
|
||||||
label: 'id',
|
|
||||||
disabled: false
|
|
||||||
}, {
|
|
||||||
id: 11,
|
|
||||||
name: this.$t('asset.asset'),
|
|
||||||
type: 'asset',
|
|
||||||
label: 'asset',
|
|
||||||
disabled: false
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
metricSearchMsg: { //给搜索框子组件传递的信息
|
|
||||||
zheze_none: true,
|
|
||||||
searchLabelList: [{
|
|
||||||
id: 12,
|
|
||||||
name: 'Metric',
|
|
||||||
type: 'input',
|
|
||||||
label: 'metric',
|
|
||||||
disabled: false
|
|
||||||
}],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getEndpointTableData() {
|
|
||||||
this.endpointSearchLabel.moduleId = this.currentModule.id;
|
|
||||||
this.$set(this.endpointSearchLabel, 'pageNo', this.endpointPageObj.pageNo);
|
|
||||||
this.$set(this.endpointSearchLabel, 'pageSize', this.endpointPageObj.pageSize);
|
|
||||||
this.$get('endpoint', this.endpointSearchLabel).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
for (let i = 0; i < response.data.list.length; i++) {
|
|
||||||
try {
|
|
||||||
let tempObj = JSON.parse(response.data.list[i].param);
|
|
||||||
response.data.list[i].paramObj = [];
|
|
||||||
for (let k in tempObj) {
|
|
||||||
response.data.list[i].paramObj.push({key: k, value: tempObj[k]})
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.info(response.data.list[i], err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.endpointTableData = response.data.list;
|
|
||||||
this.endpointPageObj.total = response.data.total;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getMetricsTableData() {
|
|
||||||
this.metricSearchLabel.moduleId = this.currentModule.id;
|
|
||||||
this.$set(this.metricSearchLabel, 'pageNo', this.metricPageObj.pageNo);
|
|
||||||
this.$set(this.metricSearchLabel, 'pageSize', this.metricPageObj.pageSize);
|
|
||||||
this.$get('metric', this.metricPageObj).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.metricsTableData = response.data.list;
|
|
||||||
this.metricPageObj.total = response.data.total;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
endpointPageNo(val) {
|
|
||||||
this.endpointPageObj.pageNo = val;
|
|
||||||
this.getEndpointTableData();
|
|
||||||
},
|
|
||||||
endpointPageSize(val) {
|
|
||||||
this.endpointPageObj.pageSize = val;
|
|
||||||
this.getEndpointTableData();
|
|
||||||
},
|
|
||||||
metricsPageNo(val) {
|
|
||||||
this.metricPageObj.pageNo = val;
|
|
||||||
this.getMetricsTableData();
|
|
||||||
},
|
|
||||||
metricsPageSize(val) {
|
|
||||||
this.metricPageObj.pageSize = val;
|
|
||||||
this.getMetricsTableData();
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取左侧module列表数据
|
|
||||||
getModuleList() {
|
|
||||||
//若currentProject不存在（如页面刷新了），默认取project列表的第一个
|
|
||||||
if (this.currentProject && this.currentProject.id) {
|
|
||||||
this.$get('module', {projectId: this.currentProject.id, pageSize: 999, pageNo: 1}).then(response => {
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.moduleList = response.data.list;
|
|
||||||
for (let i = 0; i < this.moduleList.length; i++) {
|
|
||||||
try {
|
|
||||||
let tempObj = JSON.parse(this.moduleList[i].param);
|
|
||||||
this.$set(this.moduleList[i], 'paramObj', []);
|
|
||||||
for (let k in tempObj) {
|
|
||||||
this.moduleList[i].paramObj.push({key: k, value: tempObj[k]});
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.info(response.data.list[i], err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.moduleList.length > 0) {
|
|
||||||
this.currentModule = this.moduleList[0];
|
|
||||||
} else {
|
|
||||||
this.currentModule = {id: '', name: '', project: {}, port: '', path: '', param: '', paramObj: []};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (this.projectList && this.projectList.length > 0) {
|
|
||||||
this.$store.commit('setProject', this.projectList[0]);
|
|
||||||
} else {
|
|
||||||
this.$get('project', {pageSize: 999, pageNo: 1}).then(response => {
|
|
||||||
if (response.code == 200) {
|
|
||||||
this.projectList = response.data.list;
|
|
||||||
if (this.projectList.length > 0) {
|
|
||||||
this.getModuleList();
|
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
//左侧module列表选中切换
|
|
||||||
changeModule(module) {
|
|
||||||
this.currentModule = module;
|
|
||||||
},
|
|
||||||
|
|
||||||
//弹出endpoint编辑页
|
|
||||||
toEditEndpoint(endpoint) {
|
|
||||||
this.rightBoxHandler(3);
|
|
||||||
this.$refs.editEndpointBox.toEdit(true);
|
|
||||||
this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
|
|
||||||
if (!this.editEndpoint.paramObj) {
|
|
||||||
this.$set(this.editEndpoint, 'paramObj', []);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
toCreateEndpoint() {
|
|
||||||
this.$refs.addEndpointBox.show(true);
|
|
||||||
},
|
|
||||||
|
|
||||||
//查看endpoint详情
|
|
||||||
endpointDetail(endpoint) {
|
|
||||||
this.editEndpoint = JSON.parse(JSON.stringify(endpoint));
|
|
||||||
if (!this.editEndpoint.paramObj) {
|
|
||||||
this.$set(this.editEndpoint, 'paramObj', []);
|
|
||||||
}
|
|
||||||
this.rightBoxHandler(3);
|
|
||||||
this.$refs.editEndpointBox.toEdit(false);
|
|
||||||
},
|
|
||||||
|
|
||||||
//弹出module编辑页
|
|
||||||
toEditModule(module) {
|
|
||||||
console.info(module)
|
|
||||||
this.currentModule = JSON.parse(JSON.stringify(module));
|
|
||||||
if (!this.currentModule.paramObj) {
|
|
||||||
this.$set(this.currentModule, 'paramObj', []);
|
|
||||||
}
|
|
||||||
this.editModule = JSON.parse(JSON.stringify(module));
|
|
||||||
if (!this.editModule.paramObj) {
|
|
||||||
this.$set(this.editModule, 'paramObj', []);
|
|
||||||
}
|
|
||||||
this.rightBoxHandler(2);
|
|
||||||
},
|
|
||||||
|
|
||||||
//搜索
|
|
||||||
endpointSearch: function(searchObj) {
|
|
||||||
this.endpointSearchLabel = {};
|
|
||||||
for (let item in searchObj) {
|
|
||||||
if (searchObj[item]) {
|
|
||||||
this.$set(this.endpointSearchLabel, item, searchObj[item]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.getEndpointTableData();
|
|
||||||
},
|
|
||||||
//搜索
|
|
||||||
metricSearch: function(searchObj) {
|
|
||||||
this.metricSearchLabel = {};
|
|
||||||
for (let item in searchObj) {
|
|
||||||
if (searchObj[item]) {
|
|
||||||
this.$set(this.metricSearchLabel, item, searchObj[item]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.getMetricsTableData();
|
|
||||||
},
|
|
||||||
|
|
||||||
//控制弹框状态 type 1:project; 2:module; 3:editEndponit; 4:addEndpoint;
|
|
||||||
rightBoxHandler(type) {
|
|
||||||
if (type == 1) {
|
|
||||||
this.$refs.projectBox.show(true);
|
|
||||||
|
|
||||||
if (this.$refs.moduleBox) {
|
|
||||||
this.$refs.moduleBox.show(false);
|
|
||||||
}
|
|
||||||
if (this.$refs.editEndpointBox) {
|
|
||||||
this.$refs.editEndpointBox.show(false);
|
|
||||||
}
|
|
||||||
//this.$refs.addEndpointBox.show(false);
|
|
||||||
} else if (type == 2) {
|
|
||||||
this.$refs.moduleBox.show(true);
|
|
||||||
|
|
||||||
if (this.$refs.projectBox) {
|
|
||||||
this.$refs.projectBox.show(false);
|
|
||||||
}
|
|
||||||
if (this.$refs.editEndpointBox) {
|
|
||||||
this.$refs.editEndpointBox.show(false);
|
|
||||||
}
|
|
||||||
//this.$refs.addEndpointBox.show(false);
|
|
||||||
} else if (type == 3) {
|
|
||||||
this.$refs.editEndpointBox.show(true);
|
|
||||||
if (this.$refs.projectBox) {
|
|
||||||
this.$refs.projectBox.show(false);
|
|
||||||
}
|
|
||||||
if (this.$refs.moduleBox) {
|
|
||||||
this.$refs.moduleBox.show(false);
|
|
||||||
}
|
|
||||||
//this.$refs.addEndpointBox.show(false);
|
|
||||||
} else if (type == 4) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.currentProject = this.$store.state.currentProject;
|
|
||||||
this.getModuleList();
|
|
||||||
this.getMetricsTableData();
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.getEndpointTableData();
|
|
||||||
}, 200);
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
currentProjectChange() {
|
|
||||||
return this.$store.state.currentProject;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
currentProjectChange(n, o) {
|
|
||||||
this.currentProject = Object.assign({}, n);
|
|
||||||
},
|
|
||||||
currentProject(n, o) {
|
|
||||||
this.getModuleList();
|
|
||||||
},
|
|
||||||
currentModule(n, o) {
|
|
||||||
this.metricPageObj.pageNo = 1;
|
|
||||||
this.endpointPageObj.pageNo = 1;
|
|
||||||
if (n && n.id) {
|
|
||||||
this.getEndpointTableData();
|
|
||||||
this.getMetricsTableData();
|
|
||||||
} else {
|
|
||||||
this.endpointTableData = [];
|
|
||||||
this.metricsTableData = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.project {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.content-right-option {
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
.content-right-option .el-icon-delete {
|
|
||||||
color: #F98D9A;
|
|
||||||
}
|
|
||||||
.content-right-option .el-icon-delete:hover {
|
|
||||||
color: #D96D7A;
|
|
||||||
}
|
|
||||||
.content-right-option .el-icon-view {
|
|
||||||
color: #60BEFF;
|
|
||||||
}
|
|
||||||
.content-right-option .el-icon-view:hover {
|
|
||||||
color: #409EFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* start--param*/
|
|
||||||
.param-btn {
|
|
||||||
float: right;
|
|
||||||
height: 27px;
|
|
||||||
margin-top: -3px;
|
|
||||||
}
|
|
||||||
.param-btn-active {
|
|
||||||
background-color: #656565;
|
|
||||||
color: white;
|
|
||||||
border: 1px solid #656565;
|
|
||||||
}
|
|
||||||
.param-btn-active:hover, .param-btn-active:focus {
|
|
||||||
background-color: #656565;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.param-btn-clear {
|
|
||||||
background-color: #D4D4D4;
|
|
||||||
border: 1px solid #D4D4D4;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.param-btn-clear:hover, .param-btn-clear:focus {
|
|
||||||
background-color: #D4D4D4;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.param-box {
|
|
||||||
border: 1px solid #DCDFE6;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.param-box-endpoint {
|
|
||||||
height: 325px;
|
|
||||||
}
|
|
||||||
.param-box-module {
|
|
||||||
height: 227px;
|
|
||||||
}
|
|
||||||
.param-box-row {
|
|
||||||
padding: 7px 0 0 0;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.param-box-row:last-of-type {
|
|
||||||
padding-bottom: 7px;
|
|
||||||
}
|
|
||||||
.param-box-row-key, .param-box-row-value {
|
|
||||||
display: inline-block;
|
|
||||||
width: 41.5%;
|
|
||||||
}
|
|
||||||
.param-box-row-eq {
|
|
||||||
display: inline-block;
|
|
||||||
width: 22px;
|
|
||||||
text-align: center;
|
|
||||||
height: 32px;
|
|
||||||
line-height: 32px;
|
|
||||||
color: #c4c7cF;
|
|
||||||
}
|
|
||||||
.param-box-row-symbol {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #c4c7cF;
|
|
||||||
border: 1px solid #c4c7cF;
|
|
||||||
text-align: center;
|
|
||||||
height: 12px;
|
|
||||||
width: 14px;
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
top: 17px;
|
|
||||||
right: 25px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.param-box-row-symbol>i {
|
|
||||||
position: absolute;
|
|
||||||
top: 1px;
|
|
||||||
right: 1px;
|
|
||||||
}
|
|
||||||
/* end--param*/
|
|
||||||
|
|
||||||
/* begin--子弹框*/
|
|
||||||
.right-sub-box {
|
|
||||||
width: 380px;
|
|
||||||
height: 520px;
|
|
||||||
position: absolute;
|
|
||||||
top: 380px;
|
|
||||||
right: 100px;
|
|
||||||
z-index: 2;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-input-group {
|
|
||||||
width: 227px;
|
|
||||||
float: right;
|
|
||||||
margin: 7px 0 0 0;
|
|
||||||
}
|
|
||||||
/* begin--搜索框*/
|
|
||||||
.endpoint-asset-prepend {
|
|
||||||
border-radius: 4px 0 0 4px;
|
|
||||||
}
|
|
||||||
.endpoint-asset-label {
|
|
||||||
line-height: 26px;
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
.endpoint-asset-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 27px;
|
|
||||||
background-color: #656565;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 52px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.endpoint-asset-dropdown-item {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 22px;
|
|
||||||
height: 22px;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.endpoint-asset-label-txt {
|
|
||||||
display: inline-block;
|
|
||||||
width: 19px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.endpoint-asset-dropdown-item:first-of-type {
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
.endpoint-asset-dropdown-item:last-of-type {
|
|
||||||
border-radius: 0 0 4px 4px;
|
|
||||||
}
|
|
||||||
.endpoint-asset-dropdown-item:hover {
|
|
||||||
background-color: #3a8ee6;
|
|
||||||
}
|
|
||||||
/* end--搜索框*/
|
|
||||||
/* begin--table*/
|
|
||||||
.endpoint-sub-table {
|
|
||||||
margin-top: 25px;
|
|
||||||
}
|
|
||||||
.line-100 {
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-head {
|
|
||||||
line-height: 28px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-row {
|
|
||||||
line-height: 28px;
|
|
||||||
height: 30px;
|
|
||||||
color: #656565;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-row-active {
|
|
||||||
background-color: #dadada;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-col {
|
|
||||||
display: inline-block;
|
|
||||||
width: 45%;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-paginate-all {
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
bottom: 17px;
|
|
||||||
color: #5a5a5a;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-body {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
/* end--table*/
|
|
||||||
|
|
||||||
/* end--子弹框*/
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
/* begin--覆盖分页组件样式*/
|
|
||||||
.right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
|
|
||||||
margin: 0 3px;
|
|
||||||
min-width: 25px;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pagination button, .right-sub-box .el-pagination span:not([class*=suffix]) {
|
|
||||||
margin: 0 3px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pager li {
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
||||||
background-color: #656565;
|
|
||||||
border: 1px solid #656565;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pagination.is-background .btn-next, .right-sub-box .el-pagination.is-background .btn-prev, .right-sub-box .el-pagination.is-background .el-pager li {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pagination button, .right-sub-box .el-pager li {
|
|
||||||
border: 1px solid #DADADA;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pager li.active+li {
|
|
||||||
border: 1px solid #DADADA;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pagination.is-background .el-pager li:not(.disabled):hover {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
.right-sub-box .el-pagination.is-background .el-pager li.active:hover {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.endpoint-sub-table-paginate .el-pagination {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 13px;
|
|
||||||
}
|
|
||||||
.el-input-group__append>i {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* end--覆盖分页组件样式*/
|
|
||||||
</style>
|
|
||||||
@@ -11,7 +11,7 @@ axios.interceptors.request.use(config => {
|
|||||||
// "Content-Type": 'application/x-www-form-urlencoded',
|
// "Content-Type": 'application/x-www-form-urlencoded',
|
||||||
// }
|
// }
|
||||||
// config.data = qs.stringify(config.data);
|
// config.data = qs.stringify(config.data);
|
||||||
let token = sessionStorage.getItem('token')
|
let token = sessionStorage.getItem('nz-token')
|
||||||
if (token) {
|
if (token) {
|
||||||
config.headers['Authorization'] = token //请求头token
|
config.headers['Authorization'] = token //请求头token
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ import editEndpointBox from './components/common/rightBox/editEndpointBox'; //en
|
|||||||
import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
|
import addEndpointBox from './components/common/rightBox/addEndpointBox'; //endpoint弹框组件
|
||||||
import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
|
import assetAddUnit from "./components/page/asset/assetAddUnit"; //资产添加组件
|
||||||
import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
|
import assetEditUnit from "./components/page/asset/assetEditUnit"; //资产添加组件
|
||||||
|
import alertConfigBox from "./components/common/rightBox/alertConfigBox"; //告警规则弹框组件
|
||||||
|
|
||||||
Vue.component("Pagination", Pagination);
|
Vue.component("Pagination", Pagination);
|
||||||
Vue.component("searchInput", searchInput);
|
Vue.component("searchInput", searchInput);
|
||||||
@@ -31,6 +32,7 @@ Vue.component("edit-endpoint-box", editEndpointBox);
|
|||||||
Vue.component("add-endpoint-box", addEndpointBox);
|
Vue.component("add-endpoint-box", addEndpointBox);
|
||||||
Vue.component("assetAddUnit", assetAddUnit);
|
Vue.component("assetAddUnit", assetAddUnit);
|
||||||
Vue.component("assetEditUnit", assetEditUnit);
|
Vue.component("assetEditUnit", assetEditUnit);
|
||||||
|
Vue.component("alert-config-box", alertConfigBox);
|
||||||
|
|
||||||
Vue.prototype.$axios = axios;
|
Vue.prototype.$axios = axios;
|
||||||
Vue.prototype.$post = post;
|
Vue.prototype.$post = post;
|
||||||
|
|||||||
@@ -36,9 +36,17 @@ export default new Router({
|
|||||||
path: '/dashboard',
|
path: '/dashboard',
|
||||||
component: resolve => require(['../components/page/dashboard.vue'], resolve),
|
component: resolve => require(['../components/page/dashboard.vue'], resolve),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/panel',
|
||||||
|
component: resolve => require(['../components/page/dashboard/panel.vue'], resolve),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/metricPreview',
|
||||||
|
component: resolve => require(['../components/page/dashboard/metricPreview.vue'], resolve),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/project',
|
path: '/project',
|
||||||
component: resolve => require(['../components/page/project/project2.vue'], resolve),
|
component: resolve => require(['../components/page/project/project.vue'], resolve),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/asset',
|
path: '/asset',
|
||||||
|
|||||||
Reference in New Issue
Block a user