fix：修复冲突
This commit is contained in:
zyh
@@ -597,3 +597,10 @@
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nz-table-list .el-table__body{
|
||||||
|
.el-table-remark{
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: keep-all
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -13,8 +13,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 30px;
|
padding: 12px 30px 12px 38px;
|
||||||
padding-right: 38px;
|
|
||||||
border-bottom: 1px solid $--border-color-light;
|
border-bottom: 1px solid $--border-color-light;
|
||||||
background: $--background-color-base;
|
background: $--background-color-base;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -24,9 +23,19 @@
|
|||||||
justify-content: start;
|
justify-content: start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
i.nz-icon{
|
i.nz-icon{
|
||||||
font-size: 72px;
|
width: 70px;
|
||||||
color: #AEB8C2;
|
height: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #DCE0E5;
|
||||||
margin-right: 11px;
|
margin-right: 11px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
&::before{
|
||||||
|
font-size: 42px;
|
||||||
|
color: #AEB8C2;
|
||||||
|
padding-left: 3px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.dialog-header-name{
|
.dialog-header-name{
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|||||||
@@ -43,6 +43,9 @@
|
|||||||
.el-input__inner{
|
.el-input__inner{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.right-box-select-top {
|
||||||
|
width: 219px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.form-row-item-full{
|
.form-row-item-full{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -104,6 +107,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 3px 10px;
|
padding: 3px 10px;
|
||||||
|
cursor: pointer;
|
||||||
.nz-icon-shuru {
|
.nz-icon-shuru {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -171,66 +175,6 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.image-select-box {
|
|
||||||
text-align: center;
|
|
||||||
width: 225px;
|
|
||||||
z-index: 1;
|
|
||||||
padding: 0px 0px 0px 0px;
|
|
||||||
position: absolute;
|
|
||||||
top: 26px;
|
|
||||||
background: $--background-color-empty;
|
|
||||||
border: 1px solid $--border-color-light;
|
|
||||||
border-radius: 4px;
|
|
||||||
left: 0;
|
|
||||||
.el-card {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.el-card__body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
.el-collapse-item {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
.image-box-item {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 47px;
|
|
||||||
height: 47px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
.image-src{
|
|
||||||
width: 31px;
|
|
||||||
height: 31px;
|
|
||||||
}
|
|
||||||
.image-text {
|
|
||||||
width: 100%;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.delIcon{
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: -5px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.image-box-item:hover {
|
|
||||||
border-color: $--color-primary;
|
|
||||||
.delIcon {
|
|
||||||
display: inline-block;
|
|
||||||
color: $--color-primary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.upload-pic-box{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.nz-color {
|
.nz-color {
|
||||||
.vc-input__input {
|
.vc-input__input {
|
||||||
@@ -254,6 +198,178 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.thresholds-from-item {
|
.thresholds-from-item {
|
||||||
margin-left: 10px;
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-select-box {
|
||||||
|
text-align: center;
|
||||||
|
width: 225px;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 0px 0px 0px 0px;
|
||||||
|
background: $--background-color-empty;
|
||||||
|
border: none;
|
||||||
|
box-shadow: unset !important;
|
||||||
|
border-radius: 4px;
|
||||||
|
left: 0;
|
||||||
|
.el-card {
|
||||||
|
border: none;
|
||||||
|
box-shadow: unset !important;
|
||||||
|
}
|
||||||
|
.el-card__body {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.el-collapse-item {
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
.nz-collapse-header {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 0 0 8px;
|
||||||
|
.nz-collapse-header-content {
|
||||||
|
width: calc(100% - 130px);
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.nz-icon-caret-right {
|
||||||
|
display: inline-block;
|
||||||
|
width: 30px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.nz-icon-caret-right {
|
||||||
|
color: #BEBEBE;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.title-delete {
|
||||||
|
display: none;
|
||||||
|
width: 100px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.title-all {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nz-collapse-header:hover,.nz-collapse-header.is-active {
|
||||||
|
background: #F6F6F6;
|
||||||
|
color: $--color-primary;
|
||||||
|
.nz-icon-caret-right {
|
||||||
|
color: #BEBEBE;
|
||||||
|
}
|
||||||
|
.title-delete {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.title-all {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nz-collapse-header:hover {
|
||||||
|
background: #FFFFFF;
|
||||||
|
}
|
||||||
|
.nz-collapse-body {
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.image-box-item {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
margin: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
.image-src{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.image-text {
|
||||||
|
width: 100%;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.delIcon{
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
top: -1px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-box-item.is-select {
|
||||||
|
border-color: $--border-select-color;
|
||||||
|
.delIcon {
|
||||||
|
display: inline-block;
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-box-item:hover {
|
||||||
|
border-color: $--border-select-color;
|
||||||
|
.delIcon {
|
||||||
|
display: inline-block;
|
||||||
|
color: $--color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rotate90 {
|
||||||
|
display:inline-block;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nz-select-img-dialog-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.el-icon-plus {
|
||||||
|
color: $--color-primary;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nz-select-img-dialog {
|
||||||
|
.upload-pic-row {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 20px;
|
||||||
|
.el-autocomplete{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nz-new-dialog{
|
||||||
|
.el-dialog__header{
|
||||||
|
padding: 16px 20px;
|
||||||
|
.el-dialog__title{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
border-bottom: 1px solid $--border-color-light;
|
||||||
|
}
|
||||||
|
.el-dialog__body{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.el-dialog__footer{
|
||||||
|
border-top: 1px solid $--border-color-light;
|
||||||
|
padding: 13px 20px;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is-fullscreen.nz-new-dialog.meta2d-preview {
|
||||||
|
overflow: hidden;
|
||||||
|
.el-dialog__body{
|
||||||
|
flex: 1;
|
||||||
|
.meta2d-project {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -465,7 +465,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
height: 90px;
|
height: 90px !important;
|
||||||
width: 35px;
|
width: 35px;
|
||||||
border: 1px solid $--border-color-light;
|
border: 1px solid $--border-color-light;
|
||||||
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
box-shadow: -1px 1px 9px -1px rgba(205,205,205,0.77);
|
||||||
@@ -476,6 +476,7 @@
|
|||||||
height: 50%;
|
height: 50%;
|
||||||
opacity: 0.42;
|
opacity: 0.42;
|
||||||
background: $--background-color-empty;
|
background: $--background-color-empty;
|
||||||
|
color: $--color-text-regular;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -519,6 +520,11 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.meta2d-box:hover {
|
||||||
|
.right-bottom-zoom{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
.selpop {
|
.selpop {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -38,3 +38,6 @@
|
|||||||
.ip-detail-available {
|
.ip-detail-available {
|
||||||
color:$--color-success !important;
|
color:$--color-success !important;
|
||||||
}
|
}
|
||||||
|
.right-box-select-top.right-box-select-width {
|
||||||
|
width: 640px !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -270,7 +270,7 @@
|
|||||||
.ti-input {
|
.ti-input {
|
||||||
border: 1px solid $--border-color-light;
|
border: 1px solid $--border-color-light;
|
||||||
.ti-tag.ti-valid {
|
.ti-tag.ti-valid {
|
||||||
background-color: $--label-background-color !important;;
|
background-color: $--background-color-base !important;;
|
||||||
color: $--color-text-primary !important;;
|
color: $--color-text-primary !important;;
|
||||||
}
|
}
|
||||||
.ti-new-tag-input {
|
.ti-new-tag-input {
|
||||||
|
|||||||
@@ -774,7 +774,7 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 10;
|
z-index: 11;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.leaflet-container:hover{
|
.leaflet-container:hover{
|
||||||
|
|||||||
@@ -3,11 +3,33 @@
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
.ping{
|
.ping{
|
||||||
|
.top-tools{
|
||||||
|
padding: 10px 0 0 0 !important;
|
||||||
|
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.06);-moz-box-shadow:0 1px 2px rgba(0,0,0,.06);
|
||||||
|
box-shadow:0 1px 2px rgba(0,0,0,.06);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
.top-tool-left{
|
.top-tool-left{
|
||||||
|
box-sizing:border-box;
|
||||||
|
padding: 20px 0 0px 20px;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
|
.tools-header{
|
||||||
|
height: 148px;
|
||||||
|
margin-top: 38px;
|
||||||
|
box-shadow: unset;
|
||||||
|
.tools-header-left>span{
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
.tools-header-center{
|
||||||
|
width: 391px;
|
||||||
|
}
|
||||||
|
.tools-header-right .right-content-text{
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.ipInput{
|
.ipInput{
|
||||||
width:280px;
|
width:240px;
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
max-height: 128px;
|
max-height: 128px;
|
||||||
}
|
}
|
||||||
@@ -22,9 +44,9 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
border: 1px solid $--button-icon-border-color !important;
|
border: 1px solid $--border-color-light !important;
|
||||||
.ti-tag.ti-valid {
|
.ti-tag.ti-valid {
|
||||||
background-color: $--label-background-color !important;;
|
background-color: $--background-color-base !important;;
|
||||||
color: $--color-text-primary !important;;
|
color: $--color-text-primary !important;;
|
||||||
}
|
}
|
||||||
.ti-new-tag-input {
|
.ti-new-tag-input {
|
||||||
@@ -59,11 +81,11 @@
|
|||||||
padding: 2px 4px !important;
|
padding: 2px 4px !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
border-right: none !important;
|
border-right: none !important;
|
||||||
background: $--label-background-color;
|
background: $--background-color-base;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
color: $--color-text-primary;
|
color: $--color-text-primary;
|
||||||
i{
|
i{
|
||||||
font-size: 14px !important;
|
font-size: 12px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn{
|
.btn{
|
||||||
@@ -134,6 +156,14 @@
|
|||||||
.data-wrap{
|
.data-wrap{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
&>span{
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $--color-text-regular;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 30px 0 11px 0;
|
||||||
|
}
|
||||||
.data-top{
|
.data-top{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
@@ -263,6 +293,7 @@
|
|||||||
}
|
}
|
||||||
// 雷达
|
// 雷达
|
||||||
.radar {
|
.radar {
|
||||||
|
box-sizing: border-box;
|
||||||
/*margin-left: 50px;*/
|
/*margin-left: 50px;*/
|
||||||
width: 92px;
|
width: 92px;
|
||||||
|
|
||||||
@@ -425,9 +456,20 @@ td.el-table__expanded-cell:hover {
|
|||||||
#pingTable{
|
#pingTable{
|
||||||
th.el-table__expand-column{
|
th.el-table__expand-column{
|
||||||
.arrow-expand{
|
.arrow-expand{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
i.nz-icon{
|
i.nz-icon{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 2px;
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
color: $--color-text-regular;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,11 +3,33 @@
|
|||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
.trace{
|
.trace{
|
||||||
|
.top-tools{
|
||||||
|
padding: 10px 0 0 0 !important;
|
||||||
|
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.06);-moz-box-shadow:0 1px 2px rgba(0,0,0,.06);
|
||||||
|
box-shadow:0 1px 2px rgba(0,0,0,.06);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
.top-tool-left{
|
.top-tool-left{
|
||||||
|
box-sizing:border-box;
|
||||||
|
padding: 20px 0 0px 20px;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
|
.tools-header{
|
||||||
|
height: 148px;
|
||||||
|
margin-top: 38px;
|
||||||
|
box-shadow: unset;
|
||||||
|
.tools-header-left>span{
|
||||||
|
margin-right: 10px !important;
|
||||||
|
}
|
||||||
|
.tools-header-center{
|
||||||
|
width: 391px;
|
||||||
|
}
|
||||||
|
.tools-header-right .right-content-text{
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.ipInput{
|
.ipInput{
|
||||||
width:280px;
|
width:240px;
|
||||||
min-height: 36px;
|
min-height: 36px;
|
||||||
max-height: 128px;
|
max-height: 128px;
|
||||||
}
|
}
|
||||||
@@ -22,9 +44,9 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
border: 1px solid $--button-icon-border-color !important;
|
border: 1px solid $--border-color-light !important;
|
||||||
.ti-tag.ti-valid {
|
.ti-tag.ti-valid {
|
||||||
background-color: $--label-background-color !important;;
|
background-color: $--background-color-base !important;;
|
||||||
color: $--color-text-primary !important;;
|
color: $--color-text-primary !important;;
|
||||||
}
|
}
|
||||||
.ti-new-tag-input {
|
.ti-new-tag-input {
|
||||||
@@ -59,11 +81,11 @@
|
|||||||
padding: 2px 4px !important;
|
padding: 2px 4px !important;
|
||||||
border-radius: 2px !important;
|
border-radius: 2px !important;
|
||||||
border-right: none !important;
|
border-right: none !important;
|
||||||
background: $--label-background-color;
|
background: $--background-color-base;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
color: $--color-text-primary;
|
color: $--color-text-primary;
|
||||||
i{
|
i{
|
||||||
font-size: 14px !important;
|
font-size: 12px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn{
|
.btn{
|
||||||
@@ -132,8 +154,24 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.data-wrap{
|
.data-wrap{
|
||||||
|
&>span{
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $--color-text-regular;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 30px 0 11px 0;
|
||||||
|
}
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
&>span{
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $--color-text-regular;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
margin: 30px 0 11px 0;
|
||||||
|
}
|
||||||
.data-top{
|
.data-top{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
@@ -162,9 +200,20 @@
|
|||||||
}
|
}
|
||||||
th.el-table__expand-column{
|
th.el-table__expand-column{
|
||||||
.arrow-expand{
|
.arrow-expand{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
i.nz-icon{
|
i.nz-icon{
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-left: 2px;
|
border: 1px solid #d9d9d9;
|
||||||
|
color: $--color-text-regular;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-left: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -183,6 +232,9 @@
|
|||||||
}
|
}
|
||||||
.el-input-group__append{
|
.el-input-group__append{
|
||||||
color: $--color-text-primary;
|
color: $--color-text-primary;
|
||||||
|
background-color: $--right-box-sub-title-background-color;
|
||||||
|
border: 1px solid $--border-color-light;
|
||||||
|
border-left: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pop-tit{
|
.pop-tit{
|
||||||
|
|||||||
7687
nezha-fronted/src/assets/css/font/demo_index.html
Normal file
7687
nezha-fronted/src/assets/css/font/demo_index.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -5,6 +5,41 @@
|
|||||||
"css_prefix_text": "nz-icon-",
|
"css_prefix_text": "nz-icon-",
|
||||||
"description": "",
|
"description": "",
|
||||||
"glyphs": [
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "34724146",
|
||||||
|
"name": "全部展开",
|
||||||
|
"font_class": "quanbuzhankai1",
|
||||||
|
"unicode": "e7d7",
|
||||||
|
"unicode_decimal": 59351
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "34724147",
|
||||||
|
"name": "全部收起",
|
||||||
|
"font_class": "quanbushouqi1",
|
||||||
|
"unicode": "e7d8",
|
||||||
|
"unicode_decimal": 59352
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "34708233",
|
||||||
|
"name": "Diagnosis result",
|
||||||
|
"font_class": "a-Diagnosisresult",
|
||||||
|
"unicode": "e7d6",
|
||||||
|
"unicode_decimal": 59350
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "34702402",
|
||||||
|
"name": "Unlock",
|
||||||
|
"font_class": "Unlock1",
|
||||||
|
"unicode": "e7d4",
|
||||||
|
"unicode_decimal": 59348
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "34702403",
|
||||||
|
"name": "image",
|
||||||
|
"font_class": "image",
|
||||||
|
"unicode": "e7d5",
|
||||||
|
"unicode_decimal": 59349
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"icon_id": "20226387",
|
"icon_id": "20226387",
|
||||||
"name": "下降",
|
"name": "下降",
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -60,7 +60,7 @@ $--border-color-light-focus: darken($--border-color-light, 20%);
|
|||||||
// 深色边框
|
// 深色边框
|
||||||
$--explore-border-color-bottom: #DEDEDE;
|
$--explore-border-color-bottom: #DEDEDE;
|
||||||
// 选中边框
|
// 选中边框
|
||||||
$--border-select-color: #FBCF9F;
|
$--border-select-color: #FBCF9E;
|
||||||
|
|
||||||
/* 5.提示色 */
|
/* 5.提示色 */
|
||||||
// 正常绿色(覆盖element-ui内置变量)
|
// 正常绿色(覆盖element-ui内置变量)
|
||||||
|
|||||||
@@ -2,16 +2,21 @@
|
|||||||
<div v-my-loading="topologyLoading" class="overview">
|
<div v-my-loading="topologyLoading" class="overview">
|
||||||
<transition name = "el-zoom-in-center">
|
<transition name = "el-zoom-in-center">
|
||||||
<div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
|
<div v-if="allProject&&allProject.length>0" style="width: 100%;height: 100%;position: relative">
|
||||||
<el-carousel :interval="5000" :trigger="'click'" arrow="hover">
|
<el-carousel :interval="5000" :trigger="'click'" :autoplay="false" arrow="hover">
|
||||||
<el-carousel-item v-for="(item,index) in allProject" :key="index">
|
<el-carousel-item v-for="(item,index) in allProject" :key="index" style="min-height: 10px;min-width: 10px">
|
||||||
<div class="maskLayer" @click="toProject(item)"></div>
|
<div class="maskLayer" @click="toProject(item)"></div>
|
||||||
<!-- <span class="project-name">{{item.name}}</span>-->
|
<!-- <span class="project-name">{{item.name}}</span>-->
|
||||||
<topology
|
<meta2dMain
|
||||||
:fromOverView="true"
|
:meta2dId="'autoTopology' + item.id + (isFullscreen ? 'screen' : '')"
|
||||||
:from-chart="true"
|
:topoData="item.topoData"
|
||||||
:obj="item"
|
:isPreview="true"
|
||||||
|
:querysArray="item.querysArray"
|
||||||
|
:project="item"
|
||||||
|
:params="item.params"
|
||||||
|
:show-zoom="false"
|
||||||
|
class="meta2d-chart"
|
||||||
|
:is-chart="true"
|
||||||
:ref="'topology' + index"
|
:ref="'topology' + index"
|
||||||
:topologyIndexF="isFullscreen?('screen'+chartInfo.id+'-'+index):(chartInfo.id+'-'+index)"
|
|
||||||
/>
|
/>
|
||||||
</el-carousel-item>
|
</el-carousel-item>
|
||||||
</el-carousel>
|
</el-carousel>
|
||||||
@@ -23,7 +28,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import topology from '@/components/common/project/topologyL5'
|
import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
|
||||||
import chartMixin from '@/components/chart/chartMixin'
|
import chartMixin from '@/components/chart/chartMixin'
|
||||||
import bus from '@/libs/bus'
|
import bus from '@/libs/bus'
|
||||||
export default {
|
export default {
|
||||||
@@ -36,7 +41,7 @@ export default {
|
|||||||
},
|
},
|
||||||
mixins: [chartMixin],
|
mixins: [chartMixin],
|
||||||
components: {
|
components: {
|
||||||
topology
|
meta2dMain
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart () {
|
initChart () {
|
||||||
@@ -64,6 +69,14 @@ export default {
|
|||||||
this.topologyLoading = false
|
this.topologyLoading = false
|
||||||
}
|
}
|
||||||
res2.forEach((item, index) => {
|
res2.forEach((item, index) => {
|
||||||
|
item.topoData = item.topo || {}
|
||||||
|
if (item.topo.topo) {
|
||||||
|
item.topoData = item.topo.topo || {}
|
||||||
|
}
|
||||||
|
item.querysArray = item.topo.elements || []
|
||||||
|
item.params = {
|
||||||
|
timeType: item.topo.timeType || 5
|
||||||
|
}
|
||||||
// temp.push(item)
|
// temp.push(item)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.allProject.push(item)
|
this.allProject.push(item)
|
||||||
@@ -78,7 +91,10 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
toProject (projectInfo) { // 跳转对应project页面
|
toProject (projectInfo) { // 跳转对应project页面
|
||||||
this.$store.commit('currentProjectChange', projectInfo)
|
this.$store.commit('currentProjectChange', {
|
||||||
|
id: projectInfo.id,
|
||||||
|
name: projectInfo.name
|
||||||
|
})
|
||||||
this.jumpTo('project')
|
this.jumpTo('project')
|
||||||
},
|
},
|
||||||
jumpTo (data, id) {
|
jumpTo (data, id) {
|
||||||
@@ -101,7 +117,7 @@ export default {
|
|||||||
},
|
},
|
||||||
resize () {
|
resize () {
|
||||||
this.allProject.forEach((item, index) => {
|
this.allProject.forEach((item, index) => {
|
||||||
this.$refs['topology' + index][0] && this.$refs['topology' + index][0].winResize()
|
this.$refs['topology' + index][0] && this.$refs['topology' + index][0].topoResize()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -114,6 +130,11 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
.meta2d-chart {
|
||||||
|
/deep/.meta2d-project {
|
||||||
|
height: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -406,7 +406,7 @@ function timeCompute (value, unit, dot = 0) {
|
|||||||
return `${value.toFixed(dot)} ${unit}`
|
return `${value.toFixed(dot)} ${unit}`
|
||||||
}
|
}
|
||||||
const units = [
|
const units = [
|
||||||
{ unit: 'ns', ascii: 1 },
|
{ unit: 'ns', ascii: 1000 },
|
||||||
{ unit: 'us', ascii: 1000 },
|
{ unit: 'us', ascii: 1000 },
|
||||||
{ unit: 'ms', ascii: 1000 },
|
{ unit: 'ms', ascii: 1000 },
|
||||||
{ unit: 's', ascii: 60 },
|
{ unit: 's', ascii: 60 },
|
||||||
|
|||||||
@@ -236,7 +236,7 @@ export default {
|
|||||||
disabled: false
|
disabled: false
|
||||||
}, {
|
}, {
|
||||||
name: this.$t('overall.acknowledge'),
|
name: this.$t('overall.acknowledge'),
|
||||||
type: 'selectString',
|
type: 'select',
|
||||||
label: 'ack',
|
label: 'ack',
|
||||||
readonly: true,
|
readonly: true,
|
||||||
disabled: false
|
disabled: false
|
||||||
|
|||||||
@@ -253,7 +253,7 @@ export default {
|
|||||||
const config = this.obj.configs.find(c => c.type === 'logs')
|
const config = this.obj.configs.find(c => c.type === 'logs')
|
||||||
const hasLog = config && config.enable === 1
|
const hasLog = config && config.enable === 1
|
||||||
const tabs = [
|
const tabs = [
|
||||||
{ prop: 'dashboardTab', name: this.$t('overall.detail') },
|
{ prop: 'dashboardTab', name: this.$t('overall.dashboard') },
|
||||||
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
|
||||||
{ prop: 'endpointQuery', name: this.$t('overall.metrics') }
|
{ prop: 'endpointQuery', name: this.$t('overall.metrics') }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
<!-- 头部 -->
|
<!-- 头部 -->
|
||||||
<div class="dialog-header" style="vertical-align:top;">
|
<div class="dialog-header" style="vertical-align:top;">
|
||||||
<div class="dialog-header-l">
|
<div class="dialog-header-l">
|
||||||
<i class="nz-icon nz-icon-Diagnosis1"></i>
|
<i class="nz-icon nz-icon-a-Diagnosisresult"></i>
|
||||||
<div>
|
<div>
|
||||||
<div class="dialog-header-name">{{diagnosisTabData.row.name}}</div>
|
<div class="dialog-header-name">{{diagnosisTabData.row.name}}</div>
|
||||||
<div v-html="fragment" class="dialog-header-item">
|
<div v-html="fragment" class="dialog-header-item">
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pop-custom" :class="{'pop-custom-top' : tableClass || operationTrue}" v-clickoutside="esc">
|
<div class="pop-custom" :class="{'pop-custom-top' : tableClass || operationTrue}" v-clickoutside="esc" @click.stop>
|
||||||
<div class="pop-title" @click.stop>{{$t('overall.selectColumns')}}</div>
|
<div class="pop-title" @click.stop>{{$t('overall.selectColumns')}}</div>
|
||||||
<div class="pop-box custom-labels" @click.stop>
|
<div class="pop-box custom-labels" @click.stop>
|
||||||
<div style="height: 100%; overflow: auto;">
|
<div style="height: 100%; overflow: auto;">
|
||||||
|
|||||||
@@ -48,6 +48,15 @@ export function setTopology (key, value) {
|
|||||||
delete topologyCache[`topology${key}`]
|
delete topologyCache[`topology${key}`]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
export function clearTopology () {
|
||||||
|
Object.keys(topologyCache).forEach(key => {
|
||||||
|
if (topologyCache[`topology${key}`]) {
|
||||||
|
topologyCache[`topology${key}`].destroy()
|
||||||
|
topologyCache[`topology${key}`] = null
|
||||||
|
delete topologyCache[`topology${key}`]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export function clearTopologyCache () {
|
export function clearTopologyCache () {
|
||||||
topologyCache = {}
|
topologyCache = {}
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ export default {
|
|||||||
reload () {
|
reload () {
|
||||||
if (this.currentProject.id) {
|
if (this.currentProject.id) {
|
||||||
this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
|
this.$get('monitor/project/topo', { projectId: this.currentProject.id }).then(res => {
|
||||||
|
|
||||||
if (res.data && res.data.topo) {
|
if (res.data && res.data.topo) {
|
||||||
this.topoData = res.data.topo || {}
|
this.topoData = res.data.topo || {}
|
||||||
if (res.data.topo.topo) {
|
if (res.data.topo.topo) {
|
||||||
|
|||||||
@@ -125,6 +125,7 @@ export default {
|
|||||||
// meta2d.on('add', this.appPen) // 添加新画笔·
|
// meta2d.on('add', this.appPen) // 添加新画笔·
|
||||||
meta2d.on('click', this.topoClick) // click画笔·
|
meta2d.on('click', this.topoClick) // click画笔·
|
||||||
setTopology(this.meta2dId, meta2d)
|
setTopology(this.meta2dId, meta2d)
|
||||||
|
this.reload()
|
||||||
},
|
},
|
||||||
reload () {
|
reload () {
|
||||||
this.position.show = false
|
this.position.show = false
|
||||||
@@ -132,10 +133,17 @@ export default {
|
|||||||
const startTime = endTime - 60 * this.params.timeType * 1000
|
const startTime = endTime - 60 * this.params.timeType * 1000
|
||||||
this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
|
this.getQueryValues(this.querysArray, startTime, endTime).then((arr) => {
|
||||||
this.clacTopoData(this.topoData, arr).then((data) => {
|
this.clacTopoData(this.topoData, arr).then((data) => {
|
||||||
|
if (!getTopology(this.meta2dId)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
this.getModule()
|
this.getModule()
|
||||||
getTopology(this.meta2dId).resize()
|
getTopology(this.meta2dId).resize()
|
||||||
getTopology(this.meta2dId).open(data)
|
getTopology(this.meta2dId).open(data)
|
||||||
|
if (this.isChart) {
|
||||||
|
getTopology(this.meta2dId).fitView(true, 20)
|
||||||
|
} else {
|
||||||
getTopology(this.meta2dId).centerView()
|
getTopology(this.meta2dId).centerView()
|
||||||
|
}
|
||||||
getTopology(this.meta2dId).lock(1)
|
getTopology(this.meta2dId).lock(1)
|
||||||
this.getNodesArr()
|
this.getNodesArr()
|
||||||
})
|
})
|
||||||
@@ -494,7 +502,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!item.type && item.moduleId) {
|
if (!item.type && item.moduleId) {
|
||||||
this.$get('stat/module/abnormal', { moduleId: item.moduleId }).then(res=>{
|
this.$get('stat/module/abnormal', { moduleId: item.moduleId }).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
const module = res.data.list[0]
|
const module = res.data.list[0]
|
||||||
item.moduleData.state.error = item.moduleData.error = !module.state
|
item.moduleData.state.error = item.moduleData.error = !module.state
|
||||||
@@ -530,7 +538,7 @@ export default {
|
|||||||
if (key === 'asset' || key === 'alert' || key === 'endpoint') {
|
if (key === 'asset' || key === 'alert' || key === 'endpoint') {
|
||||||
this.showNodeTools()
|
this.showNodeTools()
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,6 +10,10 @@ export default {
|
|||||||
getTopology(id).centerView()
|
getTopology(id).centerView()
|
||||||
},
|
},
|
||||||
initEdit (id) {
|
initEdit (id) {
|
||||||
|
const endTime = new Date().getTime()
|
||||||
|
const startTime = endTime - 60 * this.params.timeType * 1000
|
||||||
|
const elements = getTopology(id).data().elements
|
||||||
|
this.getQueryValues(elements, startTime, endTime)
|
||||||
bus.$emit('changeSelectPens', [])
|
bus.$emit('changeSelectPens', [])
|
||||||
getTopology(id).inactive()
|
getTopology(id).inactive()
|
||||||
getTopology(id).lock(0)
|
getTopology(id).lock(0)
|
||||||
@@ -212,7 +216,6 @@ export default {
|
|||||||
pen.animateColor = mapping.color.bac
|
pen.animateColor = mapping.color.bac
|
||||||
pen.borderColor = mapping.color.border
|
pen.borderColor = mapping.color.border
|
||||||
pen.color = mapping.color.text
|
pen.color = mapping.color.text
|
||||||
console.log(!!pen.lineAnimateType)
|
|
||||||
if (pen.lineAnimateType) {
|
if (pen.lineAnimateType) {
|
||||||
pen.autoPlay = true
|
pen.autoPlay = true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -51,7 +51,7 @@
|
|||||||
<div v-for="(item, index) in elements" :key="item.id" @click.stop="penActive(item)">
|
<div v-for="(item, index) in elements" :key="item.id" @click.stop="penActive(item)">
|
||||||
<div class="pen-tools pen-item" :class="selectPenArrId.indexOf(item.id) !== -1 ? 'is-active' : ''">
|
<div class="pen-tools pen-item" :class="selectPenArrId.indexOf(item.id) !== -1 ? 'is-active' : ''">
|
||||||
<span class="hide-input">
|
<span class="hide-input">
|
||||||
<i v-if="item.type !== 1" class="nz-icon nz-icon-juxing" style="margin-right: 3px"/>
|
<i v-if="item.type !== 1" class="nz-icon nz-icon-image" style="margin-right: 3px"/>
|
||||||
<i v-else class="nz-icon nz-icon-xiantiao" />
|
<i v-else class="nz-icon nz-icon-xiantiao" />
|
||||||
<el-input
|
<el-input
|
||||||
:ref="'hideInput' + index"
|
:ref="'hideInput' + index"
|
||||||
@@ -95,10 +95,10 @@
|
|||||||
<div style="display: flex;padding: 10px 0; justify-content: space-between">
|
<div style="display: flex;padding: 10px 0; justify-content: space-between">
|
||||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="addNode"
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="addNode"
|
||||||
style="margin-right: 20px">
|
style="margin-right: 20px">
|
||||||
{{$t('add element')}}
|
{{$t('project.topology.addNode')}}
|
||||||
</button>
|
</button>
|
||||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="selectPenArrId.length" style="margin-right: 20px" @click="clearSelection">
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" v-if="selectPenArrId.length" style="margin-right: 20px" @click="clearSelection">
|
||||||
{{$t('Clear selection')}}
|
{{$t('project.topology.clearSelection')}}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -126,7 +126,6 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
selectPenArrId () {
|
selectPenArrId () {
|
||||||
console.log(this.selectPenArr)
|
|
||||||
return this.selectPenArr.active.map(item => item.id)
|
return this.selectPenArr.active.map(item => item.id)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -200,7 +199,6 @@ export default {
|
|||||||
},
|
},
|
||||||
penActive (item) {
|
penActive (item) {
|
||||||
// bus.$emit('changeSelectPens', [])
|
// bus.$emit('changeSelectPens', [])
|
||||||
console.log(getTopology(this.meta2dId).store)
|
|
||||||
this.$emit('changeActiveName')
|
this.$emit('changeActiveName')
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
getTopology(this.meta2dId).active([item])
|
getTopology(this.meta2dId).active([item])
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
@change="change('nzName')"></el-input>
|
@change="change('nzName')"></el-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row-item">
|
<div class="form-row-item form-row-item-full">
|
||||||
<div class="form-row-key">
|
<div class="form-row-key">
|
||||||
{{$t('overall.module')}}
|
{{$t('overall.module')}}
|
||||||
</div>
|
</div>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
<div v-show="elements.position" class="form-row-content">
|
<div v-show="elements.position" class="form-row-content">
|
||||||
<div class="form-row-item">
|
<div class="form-row-item">
|
||||||
<div class="form-row-key">
|
<div class="form-row-key">
|
||||||
X
|
{{$t('topology.position.x')}}
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row-value">
|
<div class="form-row-value">
|
||||||
<el-input-number
|
<el-input-number
|
||||||
@@ -69,7 +69,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="form-row-item">
|
<div class="form-row-item">
|
||||||
<div class="form-row-key">
|
<div class="form-row-key">
|
||||||
Y
|
{{$t('topology.position.y')}}
|
||||||
</div>
|
</div>
|
||||||
<div class="form-row-value">
|
<div class="form-row-value">
|
||||||
<el-input-number
|
<el-input-number
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div v-if="!isChart && !editFlag"> {{project && project.name}} </div>
|
<div v-if="!isChart && !editFlag"> {{project && project.name}} </div>
|
||||||
<div class="tools-left" v-if="editFlag">
|
<div class="tools-left" v-if="editFlag">
|
||||||
<topology-top-tool
|
<topology-top-tool
|
||||||
v-if="editFlag&&toolShow&&!isPreview"
|
v-if="editFlag&&toolShow"
|
||||||
:meta2dId="meta2dId"
|
:meta2dId="meta2dId"
|
||||||
ref="topTool"
|
ref="topTool"
|
||||||
>
|
>
|
||||||
@@ -27,16 +27,16 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="editFlag" class="top-tool-right float-right">
|
<div v-if="editFlag" class="top-tool-right float-right">
|
||||||
<button @click="previewTopology" v-if="!isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light"
|
<button @click="previewTopology" class="nz-btn nz-btn-size-normal nz-btn-style-light"
|
||||||
style="margin-right: 20px"
|
style="margin-right: 20px"
|
||||||
>
|
>
|
||||||
{{$t('overall.preview')}}
|
{{$t('overall.preview')}}
|
||||||
</button>
|
</button>
|
||||||
<button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"
|
<!-- <button v-if="isPreview" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="previewExit"-->
|
||||||
style="margin-right: 20px"
|
<!-- style="margin-right: 20px"-->
|
||||||
>
|
<!-- >-->
|
||||||
{{$t('project.topology.previewExit')}}
|
<!-- {{$t('project.topology.previewExit')}}-->
|
||||||
</button>
|
<!-- </button>-->
|
||||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="saveMeta2d"
|
||||||
:disabled="prevent_opt.save"
|
:disabled="prevent_opt.save"
|
||||||
:class="{'nz-btn-disabled':prevent_opt.save}"
|
:class="{'nz-btn-disabled':prevent_opt.save}"
|
||||||
@@ -56,12 +56,14 @@ import { getTopology, setTopology, dealImg, topologyImg } from '@/components/com
|
|||||||
import { deepClone } from '@meta2d/core'
|
import { deepClone } from '@meta2d/core'
|
||||||
import bus from '@/libs/bus'
|
import bus from '@/libs/bus'
|
||||||
import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
|
import topologyTopTool from '@/components/common/project/meta2d/topologyTopTool'
|
||||||
|
import meta2dMainOther from '@/components/common/project/meta2d/meta2dMain'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'meta2dHeader',
|
name: 'meta2dHeader',
|
||||||
mixins: [topoUtil],
|
mixins: [topoUtil],
|
||||||
components: {
|
components: {
|
||||||
topologyTopTool
|
topologyTopTool,
|
||||||
|
meta2dMainOther
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
meta2dId: {},
|
meta2dId: {},
|
||||||
@@ -78,9 +80,12 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
topoScreenState: '',
|
topoScreenState: '',
|
||||||
isPreview: false,
|
|
||||||
searchTime: bus.getTimezontDateRange(),
|
searchTime: bus.getTimezontDateRange(),
|
||||||
toolShow: true
|
toolShow: true,
|
||||||
|
topoData: {},
|
||||||
|
querysArray: {},
|
||||||
|
currentProject: {},
|
||||||
|
params: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -156,26 +161,44 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
previewTopology () {
|
previewTopology () {
|
||||||
console.log(getTopology(this.meta2dId).data())
|
|
||||||
this.isPreview = true
|
|
||||||
const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
|
const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
|
||||||
const endTime = new Date().getTime()
|
const timeType = this.$parent.$refs.meta2dProps.$refs.meta2dData.dataTimeType
|
||||||
const startTime = endTime - 60 * 5 * 1000
|
const topoData = {
|
||||||
this.getQueryValues(elements, startTime, endTime).then(arr => {
|
...getTopology(this.meta2dId).data()
|
||||||
this.clacTopoData(getTopology(this.meta2dId).data(), arr).then((data) => {
|
}
|
||||||
getTopology(this.meta2dId).resize()
|
topoData.elements = elements
|
||||||
getTopology(this.meta2dId).open(data)
|
topoData.timeType = timeType
|
||||||
getTopology(this.meta2dId).centerView()
|
const params = {
|
||||||
getTopology(this.meta2dId).lock(1)
|
topoData,
|
||||||
})
|
querysArray: topoData.elements || [],
|
||||||
})
|
params: {
|
||||||
|
timeType: topoData.timeType || 5
|
||||||
|
},
|
||||||
|
currentProject: {
|
||||||
|
id: this.project.id
|
||||||
|
},
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
bus.$emit('showMeta2dPreview', params)
|
||||||
|
// console.log(getTopology(this.meta2dId).data())
|
||||||
|
// const elements = this.$parent.$refs.meta2dProps.$refs.meta2dData.elements
|
||||||
|
// const endTime = new Date().getTime()
|
||||||
|
// const startTime = endTime - 60 * 5 * 1000
|
||||||
|
// this.getQueryValues(elements, startTime, endTime).then(arr => {
|
||||||
|
// this.clacTopoData(getTopology(this.meta2dId).data(), arr).then((data) => {
|
||||||
|
// getTopology(this.meta2dId).resize()
|
||||||
|
// getTopology(this.meta2dId).open(data)
|
||||||
|
// getTopology(this.meta2dId).centerView()
|
||||||
|
// getTopology(this.meta2dId).lock(1)
|
||||||
|
// })
|
||||||
|
// })
|
||||||
},
|
},
|
||||||
previewExit () {
|
previewExit () {
|
||||||
if (this.$refs.topTool && this.$refs.topTool.option.map) {
|
if (this.$refs.topTool && this.$refs.topTool.option.map) {
|
||||||
this.$refs.topTool.option.map = false
|
this.$refs.topTool.option.map = false
|
||||||
getTopology(this.meta2dId).hideMap()
|
getTopology(this.meta2dId).hideMap()
|
||||||
}
|
}
|
||||||
this.isPreview = false
|
// this.isPreview = false
|
||||||
getTopology(this.meta2dId).lock(0)
|
getTopology(this.meta2dId).lock(0)
|
||||||
getTopology(this.meta2dId).stopAnimate()
|
getTopology(this.meta2dId).stopAnimate()
|
||||||
if (getTopology(this.meta2dId).data().pens) {
|
if (getTopology(this.meta2dId).data().pens) {
|
||||||
@@ -188,12 +211,15 @@ export default {
|
|||||||
this.$emit('getNodesArr')
|
this.$emit('getNodesArr')
|
||||||
},
|
},
|
||||||
cancelTopology () {
|
cancelTopology () {
|
||||||
this.isPreview = false
|
// this.isPreview = false
|
||||||
this.$store.commit('setShowTopoScreen', this.topoScreenState)
|
this.$store.commit('setShowTopoScreen', this.topoScreenState)
|
||||||
if (this.$refs.topTool && this.$refs.topTool.option.map) {
|
if (this.$refs.topTool && this.$refs.topTool.option.map) {
|
||||||
getTopology(this.meta2dId).hideMap()
|
getTopology(this.meta2dId).hideMap()
|
||||||
}
|
}
|
||||||
this.$emit('exitEdit', true)
|
this.$emit('exitEdit', true)
|
||||||
|
},
|
||||||
|
reload () {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
<div class="meta2d-box list-page" :class="editFlag ? 'topology-dialog' : ''" v-my-loading="meta2dLoading" ref="meta2dBox" v-clickoutside="showNodeTools">
|
<div class="meta2d-box list-page" :class="editFlag ? 'topology-dialog' : ''" v-my-loading="meta2dLoading" ref="meta2dBox" v-clickoutside="showNodeTools">
|
||||||
<meta2dHeader
|
<meta2dHeader
|
||||||
ref="header"
|
ref="header"
|
||||||
|
v-if="!isPreview"
|
||||||
:meta2dId="meta2dId"
|
:meta2dId="meta2dId"
|
||||||
:isChart="isChart"
|
:isChart="isChart"
|
||||||
:project="project"
|
:project="project"
|
||||||
@@ -12,7 +13,7 @@
|
|||||||
@getNodesArr="getNodesArr"
|
@getNodesArr="getNodesArr"
|
||||||
/>
|
/>
|
||||||
<div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'" @contextmenu="onContextMenu($event)" style="position: relative">
|
<div class="meta2d-main" :class="isChart ? 'meta2d-chart': 'meta2d-project'" @contextmenu="onContextMenu($event)" style="position: relative">
|
||||||
<div v-for="(item,index) in nodesArr" v-if="!editFlag&&!isPreview"
|
<div v-for="(item,index) in nodesArr" v-if="!editFlag"
|
||||||
:key="index"
|
:key="index"
|
||||||
v-show="(item.y + offsetY - 48 > -20) && (item.x + item.width/2 + offsetX - 24 > - 20)"
|
v-show="(item.y + offsetY - 48 > -20) && (item.x + item.width/2 + offsetX - 24 > - 20)"
|
||||||
:style="{position: 'absolute',top:item.y + offsetY - 48 + 'px',left:item.x + item.width/2 + offsetX - 24 +'px', 'z-index': 10}"
|
:style="{position: 'absolute',top:item.y + offsetY - 48 + 'px',left:item.x + item.width/2 + offsetX - 24 +'px', 'z-index': 10}"
|
||||||
@@ -44,7 +45,7 @@
|
|||||||
<div :id="meta2dId" style="height: 100%;width: 100%"></div>
|
<div :id="meta2dId" style="height: 100%;width: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
<meta2dProps
|
<meta2dProps
|
||||||
v-if="editFlag && !isPreview"
|
v-if="editFlag"
|
||||||
ref="meta2dProps"
|
ref="meta2dProps"
|
||||||
:modules="modules"
|
:modules="modules"
|
||||||
:selectPens.sync="selectPens"
|
:selectPens.sync="selectPens"
|
||||||
@@ -53,11 +54,11 @@
|
|||||||
:meta2dId="meta2dId"
|
:meta2dId="meta2dId"
|
||||||
@updatePens="updatePens"
|
@updatePens="updatePens"
|
||||||
/>
|
/>
|
||||||
<div class="context-menu" v-if="contextmenu.left && editFlag && !isPreview" :style="this.contextmenu">
|
<div class="context-menu" v-if="contextmenu.left && editFlag " :style="this.contextmenu">
|
||||||
<CanvasContextMenu :meta2dId="meta2dId" :selectPens.sync="selectPens"></CanvasContextMenu>
|
<CanvasContextMenu :meta2dId="meta2dId" :selectPens.sync="selectPens"></CanvasContextMenu>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-show="position.show && (!editFlag || isPreview )"
|
v-show="position.show && (!editFlag)"
|
||||||
@mouseleave="tooltipOut"
|
@mouseleave="tooltipOut"
|
||||||
@mouseenter="tooltipOver"
|
@mouseenter="tooltipOver"
|
||||||
style="position: absolute"
|
style="position: absolute"
|
||||||
@@ -98,6 +99,10 @@
|
|||||||
@close="popDataShowUpdate('',true)">
|
@close="popDataShowUpdate('',true)">
|
||||||
</alertTable>
|
</alertTable>
|
||||||
</transition>
|
</transition>
|
||||||
|
<div v-if="!editFlag&&showZoom" class="right-bottom-zoom">
|
||||||
|
<div class="zoom-option" style="border-bottom: 1px solid #c5c8cb;" @click="zoomMap(0.25)" :title="$t('overall.enlargement')"><span><i class="nz-icon nz-icon-enlarge"></i></span></div>
|
||||||
|
<div class="zoom-option" @click="zoomMap(-0.25)" :title="$t('overall.shrink')"><span><i class="nz-icon nz-icon-narrow"></i></span></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -128,11 +133,16 @@ export default {
|
|||||||
querysArray: {},
|
querysArray: {},
|
||||||
params: {},
|
params: {},
|
||||||
project: {},
|
project: {},
|
||||||
|
isPreview: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showZoom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
isPreview () {
|
|
||||||
return this.$refs.header && this.$refs.header.isPreview
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
meta2dHeader,
|
meta2dHeader,
|
||||||
@@ -147,14 +157,18 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
topoData: {
|
topoData: {
|
||||||
immediate: true,
|
immediate: false,
|
||||||
handler () {
|
handler () {
|
||||||
|
if (!this.isChart) {
|
||||||
this.reload()
|
this.reload()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
setTimeout(() => {
|
||||||
this.init()
|
this.init()
|
||||||
|
})
|
||||||
bus.$on('changeSelectPens', this.pensActive)
|
bus.$on('changeSelectPens', this.pensActive)
|
||||||
this.$refs.meta2dBox.addEventListener('mousemove', this.mousemove)
|
this.$refs.meta2dBox.addEventListener('mousemove', this.mousemove)
|
||||||
// this.$refs.meta2dBox.addEventListener('mousedown', this.mousedown)
|
// this.$refs.meta2dBox.addEventListener('mousedown', this.mousedown)
|
||||||
@@ -169,11 +183,16 @@ export default {
|
|||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.setContextmenu = true
|
this.setContextmenu = true
|
||||||
}, 100)
|
}, 100)
|
||||||
|
},
|
||||||
|
zoomMap (num) {
|
||||||
|
getTopology(this.meta2dId).scale(getTopology(this.meta2dId).store.data.scale + num)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
getTopology(this.meta2dId).destroy()
|
if (getTopology(this.meta2dId)) {
|
||||||
|
getTopology(this.meta2dId).clear()
|
||||||
setTopology(this.meta2dId, null)
|
setTopology(this.meta2dId, null)
|
||||||
|
}
|
||||||
bus.$off('changeSelectPens', this.pensActive)
|
bus.$off('changeSelectPens', this.pensActive)
|
||||||
this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
|
this.$refs.meta2dBox.removeEventListener('mousemove', this.mousemove)
|
||||||
this.$refs.meta2dBox.removeEventListener('mouseup', this.mouseup)
|
this.$refs.meta2dBox.removeEventListener('mouseup', this.mouseup)
|
||||||
|
|||||||
@@ -1,74 +1,83 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="meta2d-image-box" v-clickoutside="changeSelectBoxShow">
|
<div class="meta2d-image-box">
|
||||||
<div @click="selectBoxShow = !selectBoxShow" style="position: relative">
|
<div @click="changeSelectBoxShow(true)" style="position: relative">
|
||||||
<div class="image-input">
|
<div class="image-input">
|
||||||
<span v-if="imageName">{{unit}} / {{imageName}}</span>
|
<span v-if="imageName">{{unit}} / {{imageName}}</span>
|
||||||
<i class="el-icon-circle-close" style="position: absolute;top: 10px;right: 10px;font-size: 14px" @click.stop="selectImageChange({image: '', id: ''})"/>
|
<i class="el-icon-circle-close" style="position: absolute;top: 10px;right: 10px;font-size: 14px" @click.stop="selectImageChange({image: '', id: ''})"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="image-select-box" v-if="selectBoxShow">
|
<!-- <div class="image-select-box" v-if="selectBoxShow">-->
|
||||||
<!-- <div v-for="item in iconArray" :key="item.id" class="image-box-item" @click="selectImageChange(item)">-->
|
<!-- -->
|
||||||
<!-- <img :src="item.image" class="imag-src"/>-->
|
|
||||||
<!-- <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
|
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<div style="height: 350px" v-my-loading="imgageLoading">
|
<!--selectImg-->
|
||||||
<el-card shadow="hover" style="height:320px;width:100%;overflow-y: auto"
|
<el-dialog
|
||||||
|
:title="$t('project.topology.image')"
|
||||||
|
custom-class="nz-select-img-dialog nz-new-dialog"
|
||||||
|
:visible.sync="selectBoxShow"
|
||||||
|
width="auto"
|
||||||
|
:append-to-body="true"
|
||||||
|
:modal-append-to-body="false"
|
||||||
|
@close="changeSelectBoxShow(false)"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<div class="image-select-box" style="width: 650px;height:446px;margin-top: 10px" v-my-loading="imgageLoading">
|
||||||
|
<el-card shadow="hover" style="height:446px;width:100%;overflow-y: auto"
|
||||||
class="project-topology-add-node">
|
class="project-topology-add-node">
|
||||||
<el-collapse v-model="activeNames" v-for="(item, index) in tools" :key="index" class="collapse-box">
|
<div v-for="(item, index) in tools" :key="index" class="collapse-box">
|
||||||
<el-collapse-item :title="item.group" :name="item.group">
|
<div :title="item.group" :name="item.group">
|
||||||
<template slot="title">
|
<div class="nz-collapse-header" :class="item.show ? 'is-active' : ''" @click.stop="selectGroup(item)">
|
||||||
<div style="display: flex;width: 100%;">
|
<span class="nz-icon-caret-right-box">
|
||||||
<div style="flex: 1">{{item.group}}</div> <i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')"></i>
|
<i class="nz-icon nz-icon-caret-right" :class="item.show ? 'rotate90': ''" />
|
||||||
|
</span>
|
||||||
|
<div class="text-ellipsis nz-collapse-header-content">{{item.group}}</div>
|
||||||
|
<i class="nz-icon nz-icon-delete title-delete" @click.stop="tooltipDeleteTitle(item)" :title="$t('overall.delete')" />
|
||||||
|
<span class="title-all">{{item.children.length}}</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<transition name="el-zoom-in-top">
|
||||||
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item">
|
<div v-show="item.show" class="nz-collapse-body">
|
||||||
|
<div v-for="(btn, i) in item.children" :key="'info2'+'-'+index+'-'+i" class="buttons image-box-item" :class="btn.id === selectImgId ? 'is-select':''">
|
||||||
<img :src="btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
|
<img :src="btn.image" v-if="btn.image" class="image-src" @click.stop="selectImageChange(btn)">
|
||||||
<!-- <div class="img-text text-ellipsis" :title="item.imageName">{{item.imageName}}</div>-->
|
<div class="img-text text-ellipsis" :title="btn.imageName">{{btn.imageName}}</div>
|
||||||
<i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click.stop="tooltipDelete(btn)"></i>
|
<i v-if="item.group!=='General'" class="delIcon nz-icon nz-icon-delete" @click.stop="tooltipDelete(btn)"></i>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</div>
|
||||||
</el-collapse>
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
<div class="upload-pic-box" @click="uploadPicChange">
|
</div>
|
||||||
|
<div slot="footer" class="nz-select-img-dialog-footer">
|
||||||
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="uploadPicChange">
|
||||||
<i class="el-icon-plus"></i>
|
<i class="el-icon-plus"></i>
|
||||||
<span>
|
<span>
|
||||||
{{ $t('overall.uploadCustomPicture') }}
|
{{ $t('overall.uploadCustomPicture') }}
|
||||||
</span>
|
</span>
|
||||||
|
</button>
|
||||||
|
<span>
|
||||||
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="changeSelectBoxShow(false)">
|
||||||
|
{{$t('overall.cancel')}}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" @click="changImage" :disabled="prevent_opt.save"
|
||||||
|
:class="{'nz-btn-disabled':prevent_opt.save}"
|
||||||
|
style="">
|
||||||
|
{{$t('el.datepicker.confirm')}}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-dialog>
|
||||||
</div>
|
|
||||||
<!--Custom picture-->
|
<!--Custom picture-->
|
||||||
<el-dialog
|
<el-dialog
|
||||||
:title="title"
|
:title="title"
|
||||||
:visible.sync="uploadPicShow"
|
:visible.sync="uploadPicShow"
|
||||||
width="auto"
|
custom-class="nz-select-img-dialog nz-new-dialog"
|
||||||
|
width="452px"
|
||||||
:append-to-body="true"
|
:append-to-body="true"
|
||||||
:modal-append-to-body="false"
|
:modal-append-to-body="false"
|
||||||
@close="uploadPicShow = false"
|
@close="uploadPicShow = false"
|
||||||
destroy-on-close>
|
destroy-on-close>
|
||||||
<el-row class="upload-pic-row">
|
<el-row class="upload-pic-row" style="margin-top: 20px;margin-bottom: 20px;">
|
||||||
<el-col :span="4" class="upload-pic-label">{{ $t('overall.name') }}</el-col>
|
<el-col :span="24">
|
||||||
<el-col :span="20">
|
|
||||||
<el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small" :placeholder="$t('project.topology.placeholderImg')"></el-input>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="upload-pic-row">
|
|
||||||
<el-col :span="4" class="upload-pic-label">{{ $t('overall.folder') }}</el-col>
|
|
||||||
<el-col :span="20">
|
|
||||||
<el-autocomplete
|
|
||||||
popper-class="right-box-select-top right-public-box-dropdown-top"
|
|
||||||
:maxlength="64" show-word-limit
|
|
||||||
class="inline-input"
|
|
||||||
v-model="uploadPic.unit"
|
|
||||||
:fetch-suggestions="querySearch"
|
|
||||||
size="small"
|
|
||||||
></el-autocomplete>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<el-row class="upload-pic-row">
|
|
||||||
<el-col :span="4" class="upload-pic-label"> </el-col>
|
|
||||||
<el-col :span="20">
|
|
||||||
<div class="upload-body">
|
<div class="upload-body">
|
||||||
<el-upload
|
<el-upload
|
||||||
drag
|
drag
|
||||||
@@ -87,7 +96,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<div class="upload-pic-row" style="text-align: center">
|
<el-row class="upload-pic-row">
|
||||||
|
<el-col :span="4" class="upload-pic-label" style="text-align: left">{{ $t('overall.name') }}</el-col>
|
||||||
|
<el-col :span="20">
|
||||||
|
<el-input maxlength="64" show-word-limit v-model="uploadPic.name" size="small" :placeholder="$t('project.topology.placeholderImg')"></el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="upload-pic-row" style="margin-bottom: 30px">
|
||||||
|
<el-col :span="4" class="upload-pic-label" style="text-align: left">{{ $t('overall.folder') }}</el-col>
|
||||||
|
<el-col :span="20">
|
||||||
|
<el-autocomplete
|
||||||
|
popper-class="right-box-select-top right-public-box-dropdown-top"
|
||||||
|
:maxlength="64" show-word-limit
|
||||||
|
class="inline-input"
|
||||||
|
v-model="uploadPic.unit"
|
||||||
|
:fetch-suggestions="querySearch"
|
||||||
|
size="small"
|
||||||
|
></el-autocomplete>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div slot="footer" class="upload-pic-row" style="text-align: right;margin-bottom: 0;width: 100%">
|
||||||
<span>
|
<span>
|
||||||
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-right: 20px" @click="uploadPicShow=false">
|
||||||
{{$t('project.topology.exit')}}
|
{{$t('project.topology.exit')}}
|
||||||
@@ -106,9 +134,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { dealImg, topologyImg } from '@/components/common/js/common'
|
|
||||||
import { imageTemp } from '@/components/common/project/L5/services/canvas'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'meta2dSelectImage',
|
name: 'meta2dSelectImage',
|
||||||
props: {
|
props: {
|
||||||
@@ -131,6 +156,8 @@ export default {
|
|||||||
name: '',
|
name: '',
|
||||||
unit: ''
|
unit: ''
|
||||||
},
|
},
|
||||||
|
selectImgId: '',
|
||||||
|
selectImg: '',
|
||||||
unit: '',
|
unit: '',
|
||||||
imageName: '',
|
imageName: '',
|
||||||
baseUrl: '',
|
baseUrl: '',
|
||||||
@@ -147,12 +174,6 @@ export default {
|
|||||||
this.$get('monitor/project/topo/icon').then(res => {
|
this.$get('monitor/project/topo/icon').then(res => {
|
||||||
this.imgageLoading = true
|
this.imgageLoading = true
|
||||||
this.tools = []
|
this.tools = []
|
||||||
// res.data.list.forEach((item, index) => {
|
|
||||||
// item.imageName = item.name
|
|
||||||
// delete item.name
|
|
||||||
// promiseArr.push(topologyImg['img' + item.id] || dealImg(`monitor/project/topo/icon/${item.id}/1`, item.id))
|
|
||||||
// imgArr.push({ ...item })
|
|
||||||
// })
|
|
||||||
this.iconArray = [...res.data.list]
|
this.iconArray = [...res.data.list]
|
||||||
this.iconArray.forEach((item, index) => {
|
this.iconArray.forEach((item, index) => {
|
||||||
item.imageName = item.name
|
item.imageName = item.name
|
||||||
@@ -177,6 +198,7 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
this.tools.push({
|
this.tools.push({
|
||||||
group: item.unit,
|
group: item.unit,
|
||||||
|
show: false,
|
||||||
children: [{
|
children: [{
|
||||||
text: item.imageName,
|
text: item.imageName,
|
||||||
imageName: item.imageName,
|
imageName: item.imageName,
|
||||||
@@ -188,59 +210,42 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const findItem = this.tools.find(group => group.group === this.unit)
|
||||||
|
if (findItem) {
|
||||||
|
findItem.show = true
|
||||||
|
}
|
||||||
this.imgInit = true
|
this.imgInit = true
|
||||||
this.imgageLoading = false
|
this.imgageLoading = false
|
||||||
// Promise.all(promiseArr).then((res2, header) => {
|
|
||||||
// this.iconArray = [...res.data.list]
|
|
||||||
// this.iconArray.forEach((item, index) => {
|
|
||||||
// item.image = res2[index].data
|
|
||||||
// if (this.imgId == item.id) {
|
|
||||||
// this.unit = item.unit
|
|
||||||
// this.imageName = item.imageName
|
|
||||||
// } else if (this.selectImage === item.image) {
|
|
||||||
// this.unit = item.unit
|
|
||||||
// this.imageName = item.imageName
|
|
||||||
// }
|
|
||||||
// const group = this.tools.find(tool => tool.group === item.unit)
|
|
||||||
// if (group) {
|
|
||||||
// group.children.push({
|
|
||||||
// text: item.imageName,
|
|
||||||
// imageName: item.imageName,
|
|
||||||
// image: res2[index].data,
|
|
||||||
// imageId: item.id,
|
|
||||||
// id: item.id,
|
|
||||||
// unit: item.unit,
|
|
||||||
// })
|
|
||||||
// } else {
|
|
||||||
// this.tools.push({
|
|
||||||
// group: item.unit,
|
|
||||||
// children: [{
|
|
||||||
// text: item.imageName,
|
|
||||||
// imageName: item.imageName,
|
|
||||||
// image: res2[index].data,
|
|
||||||
// imageId: item.id,
|
|
||||||
// id: item.id,
|
|
||||||
// unit: item.unit,
|
|
||||||
// }]
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
//
|
|
||||||
// this.imgInit = true
|
|
||||||
// this.imgageLoading = false
|
|
||||||
// imgArr = null
|
|
||||||
// promiseArr = null
|
|
||||||
// })
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
changeSelectBoxShow () {
|
changeSelectBoxShow (flag) {
|
||||||
this.selectBoxShow = false
|
this.selectBoxShow = flag
|
||||||
|
this.selectImgId = this.imgId
|
||||||
|
const findItem = this.tools.find(group => {
|
||||||
|
group.show = false
|
||||||
|
return group.group === this.unit
|
||||||
|
})
|
||||||
|
if (findItem) {
|
||||||
|
findItem.show = true
|
||||||
|
findItem.children.forEach(item=>{
|
||||||
|
if (item.id === this.selectImgId) {
|
||||||
|
this.selectImg = item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectGroup (item) {
|
||||||
|
item.show = !item.show
|
||||||
},
|
},
|
||||||
selectImageChange (item) {
|
selectImageChange (item) {
|
||||||
this.unit = item.unit
|
this.selectImgId = item.id
|
||||||
this.imageName = item.imageName
|
this.selectImg = item
|
||||||
this.$emit('updateImage', item)
|
},
|
||||||
|
changImage () {
|
||||||
|
this.unit = this.selectImg.unit
|
||||||
|
this.imageName = this.selectImg.imageName
|
||||||
|
this.$emit('updateImage', this.selectImg)
|
||||||
|
this.changeSelectBoxShow(false)
|
||||||
},
|
},
|
||||||
tooltipDelete (item) {
|
tooltipDelete (item) {
|
||||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||||
@@ -380,37 +385,7 @@ export default {
|
|||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||||
this.uploadPicShow = false
|
this.uploadPicShow = false
|
||||||
this.$get('monitor/project/topo/icon', { id: res.data.id }).then(iconInfo => {
|
this.imageInit()
|
||||||
dealImg(`monitor/project/topo/icon/${res.data.id}/1`, res.data.id).then((data, header) => {
|
|
||||||
const group = this.tools.find(tool => tool.group === this.uploadPic.unit)
|
|
||||||
this.iconArray.push({
|
|
||||||
...iconInfo.data.list[0],
|
|
||||||
image: `/monitor/project/topo/icon/${res.data.id}/0`
|
|
||||||
})
|
|
||||||
if (group) {
|
|
||||||
group.children.push({
|
|
||||||
text: res.data.imageName,
|
|
||||||
imageName: res.data.imageName,
|
|
||||||
image: `/monitor/project/topo/icon/${res.data.id}/0`,
|
|
||||||
imageId: res.data.id,
|
|
||||||
id: res.data.id,
|
|
||||||
unit: this.uploadPic.unit
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.tools.push({
|
|
||||||
group: this.uploadPic.unit,
|
|
||||||
children: [{
|
|
||||||
text: res.data.imageName,
|
|
||||||
imageName: res.data.imageName,
|
|
||||||
image: `/monitor/project/topo/icon/${res.data.id}/0`,
|
|
||||||
imageId: res.data.id,
|
|
||||||
id: res.data.id,
|
|
||||||
unit: this.uploadPic.unit
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
} else {
|
||||||
this.$message.error(res.msg)
|
this.$message.error(res.msg)
|
||||||
}
|
}
|
||||||
@@ -421,18 +396,5 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.image-box-item{
|
|
||||||
|
|
||||||
}
|
|
||||||
.image-box-item {
|
|
||||||
|
|
||||||
}
|
|
||||||
.image-box-item:hover {
|
|
||||||
border-color: #fa901c;
|
|
||||||
.delIcon {
|
|
||||||
display: inline-block;
|
|
||||||
color: #fa901c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -18,7 +18,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import panelChart from '@/components/chart/panelChart'
|
|
||||||
import defaultLineData from '@/components/chart/defaultLineData'
|
import defaultLineData from '@/components/chart/defaultLineData'
|
||||||
import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
|
import topoUtil from '@/components/common/project/meta2d/js/topoUtil'
|
||||||
|
|
||||||
@@ -34,7 +33,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
panelChart
|
panelChart: () => import('@/components/chart/panelChart')
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
class="element-item form-row-item thresholds-from-item"
|
class="element-item form-row-item thresholds-from-item"
|
||||||
style="margin-bottom: 10px !important"
|
style="margin-bottom: 10px !important"
|
||||||
v-for="index of chartConfig.elements.length"
|
v-for="index of chartConfig.elements.length"
|
||||||
:key="index"
|
:key="expressionName[index-1] + index"
|
||||||
>
|
>
|
||||||
<div class="chart-title chart-title-config">
|
<div class="chart-title chart-title-config">
|
||||||
<span class="chart-title-content el-form-item" :class="{
|
<span class="chart-title-content el-form-item" :class="{
|
||||||
|
|||||||
@@ -597,7 +597,15 @@ export default {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.editChart = obj
|
if (obj.elements && obj.elements.length) {
|
||||||
|
obj.elements.forEach((item, index) => {
|
||||||
|
item.orderNum = index
|
||||||
|
delete item.seq
|
||||||
|
delete item.buildIn
|
||||||
|
delete item.chartId
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.editChart = this.$loadsh.cloneDeep(obj)
|
||||||
this.oldData = this.$loadsh.cloneDeep(obj)
|
this.oldData = this.$loadsh.cloneDeep(obj)
|
||||||
if (this.stableTime) {
|
if (this.stableTime) {
|
||||||
clearTimeout(this.stableTime)
|
clearTimeout(this.stableTime)
|
||||||
|
|||||||
@@ -434,6 +434,7 @@ export default {
|
|||||||
if (this.expressions.length) {
|
if (this.expressions.length) {
|
||||||
this.chartConfig.elements = []
|
this.chartConfig.elements = []
|
||||||
this.expressions.forEach((expr, i) => {
|
this.expressions.forEach((expr, i) => {
|
||||||
|
if (this.expressionsShow[i]) {
|
||||||
this.chartConfig.elements.push({
|
this.chartConfig.elements.push({
|
||||||
id: this.expressionsShow[i].elementId,
|
id: this.expressionsShow[i].elementId,
|
||||||
expression: expr,
|
expression: expr,
|
||||||
@@ -443,6 +444,7 @@ export default {
|
|||||||
state: this.expressionsShow[i].state,
|
state: this.expressionsShow[i].state,
|
||||||
orderNum: i
|
orderNum: i
|
||||||
})
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.chartConfig.elements = []
|
this.chartConfig.elements = []
|
||||||
@@ -551,12 +553,6 @@ export default {
|
|||||||
elementId: ''
|
elementId: ''
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
this.$nextTick(() => {
|
|
||||||
this.expressions.forEach((ex, index) => {
|
|
||||||
this.$refs[`promql-${index}`][0].metricChange(ex)
|
|
||||||
this.$refs[`promql-${index}`][0].promqlInputChange(ex)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.expressionChange()
|
this.expressionChange()
|
||||||
},
|
},
|
||||||
removeExpression (index) {
|
removeExpression (index) {
|
||||||
@@ -573,12 +569,6 @@ export default {
|
|||||||
this.chartConfig.elements.forEach((item, index) => {
|
this.chartConfig.elements.forEach((item, index) => {
|
||||||
this.$refs.chartForm.validateField('elements.' + index + '.expression')
|
this.$refs.chartForm.validateField('elements.' + index + '.expression')
|
||||||
})
|
})
|
||||||
this.$nextTick(() => {
|
|
||||||
this.expressions.forEach((ex, index) => {
|
|
||||||
this.$refs[`promql-${index}`][0].metricChange(ex)
|
|
||||||
this.$refs[`promql-${index}`][0].promqlInputChange(ex)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
this.expressionChange()
|
this.expressionChange()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
<el-select
|
<el-select
|
||||||
v-model="editipDetails.state"
|
v-model="editipDetails.state"
|
||||||
class="right-box__select"
|
class="right-box__select"
|
||||||
popper-class="right-box-select-top prevent-clickoutside"
|
popper-class="right-box-select-top prevent-clickoutside right-box-select-width"
|
||||||
size="small"
|
size="small"
|
||||||
:placeholder="$t('el.select.placeholder')"
|
:placeholder="$t('el.select.placeholder')"
|
||||||
value-key="id">
|
value-key="id">
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
placeholder=""
|
placeholder=""
|
||||||
@change="validValueType"
|
@change="validValueType"
|
||||||
:disabled="!!editipam.id"
|
:disabled="!!editipam.id"
|
||||||
popper-class="right-box-select-top prevent-clickoutside"
|
popper-class="right-box-select-top right-box__select-width prevent-clickoutside"
|
||||||
size="small">
|
size="small">
|
||||||
<template v-for="item in typeList">
|
<template v-for="item in typeList">
|
||||||
<el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
|
<el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<el-form-item :label="$t('overall.dc')" prop="dc.name">
|
<el-form-item :label="$t('overall.dc')" prop="dc.name">
|
||||||
<div class="right-box-form-content">
|
<div class="right-box-form-content">
|
||||||
<el-select id="prom-box-input-dc" v-model="editipam.dc" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside" size="small" value-key="id">
|
<el-select id="prom-box-input-dc" v-model="editipam.dc" placeholder="" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside right-box-select-width" size="small" value-key="id">
|
||||||
<el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
|
<el-option v-for="item in dcData" :id="'prom-edit-dc-op-'+item.id" :key="item.id" :label="item.name" :value="item">
|
||||||
<span class="config-dropdown-label-txt">{{item.name}}</span>
|
<span class="config-dropdown-label-txt">{{item.name}}</span>
|
||||||
</el-option>
|
</el-option>
|
||||||
|
|||||||
@@ -51,11 +51,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.prop === 'description'">
|
<template v-else-if="item.prop === 'description'">
|
||||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
<span v-if="scope.row[item.prop]" class="el-table-remark">{{scope.row[item.prop]}}</span>
|
||||||
<span v-else>-</span>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.prop === 'remark'">
|
|
||||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">
|
<span v-else-if="item.prop === 'severityId'&&scope.row['severity']" class="severity">
|
||||||
|
|||||||
@@ -103,7 +103,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</copy>
|
</copy>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="scope.row[item.prop]">{{
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{
|
||||||
scope.row[item.prop] || "-"
|
scope.row[item.prop] || "-"
|
||||||
}}</span>
|
}}</span>
|
||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
:key="`col-${index}`"
|
:key="`col-${index}`"
|
||||||
:label="item.label">
|
:label="item.label">
|
||||||
<template slot-scope="scope" :column="item">
|
<template slot-scope="scope" :column="item">
|
||||||
<template v-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
<span v-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
|
||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -61,9 +61,9 @@
|
|||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="item.prop === 'remark'">
|
<template v-if="item.prop === 'remark'">
|
||||||
<template v-if="scope.row.remark">
|
<span v-if="scope.row.remark" class="el-table-remark">
|
||||||
{{scope.row.remark}}
|
{{scope.row.remark}}
|
||||||
</template>
|
</span>
|
||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -48,7 +48,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</copy>
|
</copy>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop] || '-'}}</span>
|
||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</copy>
|
</copy>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop] || '-'}}</span>
|
||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -49,7 +49,7 @@
|
|||||||
{{ 'Used' }}
|
{{ 'Used' }}
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
|
||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</copy>
|
</copy>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -78,7 +78,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="item.prop === 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
|
<span v-else-if="item.prop === 'updateAt'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
|
||||||
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
|
||||||
<template v-else>-</template>
|
<template v-else>-</template>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -74,7 +74,7 @@
|
|||||||
{{scope.row[item.prop]}}
|
{{scope.row[item.prop]}}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -80,7 +80,7 @@
|
|||||||
{{scope.row.dashboard ? scope.row.dashboard.name : '-'}}
|
{{scope.row.dashboard ? scope.row.dashboard.name : '-'}}
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
|
<span v-else-if="item.prop === 'id'" :id="'globalSearch' + scope.row.id">{{scope.row[item.prop]}}</span>
|
||||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -87,7 +87,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="item.prop === 'remark'">
|
<template v-else-if="item.prop === 'remark'">
|
||||||
<template>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</template>
|
<span class="el-table-remark">{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="item.prop === 'state'">
|
<template v-else-if="item.prop === 'state'">
|
||||||
<div v-if="scope.row[item.prop] == '1'">
|
<div v-if="scope.row[item.prop] == '1'">
|
||||||
|
|||||||
@@ -51,7 +51,7 @@
|
|||||||
</copy>
|
</copy>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
|
<span v-else-if="scope.row[item.prop]" :class="item.prop === 'remark'? 'el-table-remark':''">{{scope.row[item.prop]}}</span>
|
||||||
<span v-else>-</span>
|
<span v-else>-</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -11,8 +11,8 @@
|
|||||||
<el-table-column type="expand">
|
<el-table-column type="expand">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="arrow-expand" @click="toggleRowExpansion">
|
<div class="arrow-expand" @click="toggleRowExpansion">
|
||||||
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai"></i>
|
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai1"></i>
|
||||||
<i v-else class="nz-icon nz-icon-quanbushouqi"></i>
|
<i v-else class="nz-icon nz-icon-quanbushouqi1"></i>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template slot-scope="{ row }">
|
<template slot-scope="{ row }">
|
||||||
|
|||||||
@@ -11,8 +11,8 @@
|
|||||||
<el-table-column type="expand">
|
<el-table-column type="expand">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="arrow-expand" @click="toggleRowExpansion">
|
<div class="arrow-expand" @click="toggleRowExpansion">
|
||||||
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai"></i>
|
<i v-if="expandData" class="nz-icon nz-icon-quanbuzhankai1"></i>
|
||||||
<i v-else class="nz-icon nz-icon-quanbushouqi"></i>
|
<i v-else class="nz-icon nz-icon-quanbushouqi1"></i>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template slot-scope="{ row }">
|
<template slot-scope="{ row }">
|
||||||
|
|||||||
@@ -313,7 +313,6 @@ export default {
|
|||||||
'date-range-history' + this.sign,
|
'date-range-history' + this.sign,
|
||||||
JSON.stringify(this.rangeHistory)
|
JSON.stringify(this.rangeHistory)
|
||||||
)
|
)
|
||||||
|
|
||||||
this.$set(this.searchTime, 2, '')
|
this.$set(this.searchTime, 2, '')
|
||||||
this.showDropdown(false)
|
this.showDropdown(false)
|
||||||
this.getRangeHistoryArr()
|
this.getRangeHistoryArr()
|
||||||
|
|||||||
@@ -126,7 +126,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mib-browser-detail-row">
|
<div class="mib-browser-detail-row">
|
||||||
<div>Description</div>
|
<div>Description</div>
|
||||||
<div>{{currentWalk.description}}</div>
|
<div class="el-table-remark">{{currentWalk.description}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -52,9 +52,9 @@
|
|||||||
<template v-if="item.prop == 'createAt'">
|
<template v-if="item.prop == 'createAt'">
|
||||||
{{scope.row[item.prop]?utcTimeToTimezoneStr(scope.row[item.prop]):'-'}}
|
{{scope.row[item.prop]?utcTimeToTimezoneStr(scope.row[item.prop]):'-'}}
|
||||||
</template>
|
</template>
|
||||||
<template v-if="item.prop == 'remark'">
|
<span v-if="item.prop == 'remark'" class="el-table-remark">
|
||||||
{{scope.row[item.prop]?scope.row[item.prop]:'-'}}
|
{{scope.row[item.prop]?scope.row[item.prop]:'-'}}
|
||||||
</template>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
|
|||||||
@@ -38,6 +38,28 @@
|
|||||||
ref="editEndpointBox">
|
ref="editEndpointBox">
|
||||||
</edit-endpoint-box>
|
</edit-endpoint-box>
|
||||||
</transition>
|
</transition>
|
||||||
|
<el-dialog
|
||||||
|
:title="'123'"
|
||||||
|
:visible.sync="isPreview.show"
|
||||||
|
fullscreen
|
||||||
|
custom-class="nz-new-dialog meta2d-preview"
|
||||||
|
:append-to-body="true"
|
||||||
|
:modal-append-to-body="false"
|
||||||
|
@close="isPreview.show = false"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<div v-if="isPreview.show" style="width: 100%;height: 100%">
|
||||||
|
<meta2dMain
|
||||||
|
:meta2dId="'projectIdIsPreview'"
|
||||||
|
:is-preview="true"
|
||||||
|
:name="'preview'"
|
||||||
|
:topoData="isPreview.topoData"
|
||||||
|
:querysArray="isPreview.querysArray"
|
||||||
|
:project="isPreview.currentProject"
|
||||||
|
:params="isPreview.params"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -46,6 +68,7 @@ import bus from '@/libs/bus'
|
|||||||
import topologyL5 from '@/components/common/project/topologyL5'
|
import topologyL5 from '@/components/common/project/topologyL5'
|
||||||
import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
|
import meta2dMain from '@/components/common/project/meta2d/meta2dMain'
|
||||||
import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
|
import beforeMeta2d from '@/components/common/mixin/beforeMeta2d'
|
||||||
|
import { clearTopology } from '@/components/common/js/common'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'project2',
|
name: 'project2',
|
||||||
@@ -62,6 +85,13 @@ export default {
|
|||||||
addEndpoint: { show: false },
|
addEndpoint: { show: false },
|
||||||
editEndpoint: { show: false }
|
editEndpoint: { show: false }
|
||||||
},
|
},
|
||||||
|
isPreview: {
|
||||||
|
show: false,
|
||||||
|
topoData: {},
|
||||||
|
querysArray: {},
|
||||||
|
currentProject: {},
|
||||||
|
params: {},
|
||||||
|
},
|
||||||
/* 二级页面相关 */
|
/* 二级页面相关 */
|
||||||
bottomBox: {
|
bottomBox: {
|
||||||
endpoint: {}, // asset详情
|
endpoint: {}, // asset详情
|
||||||
@@ -556,6 +586,9 @@ export default {
|
|||||||
bus.$on('alert-message-change', () => {
|
bus.$on('alert-message-change', () => {
|
||||||
this.getEndpointTableData()
|
this.getEndpointTableData()
|
||||||
})
|
})
|
||||||
|
bus.$on('showMeta2dPreview', (params) => {
|
||||||
|
this.isPreview = params
|
||||||
|
})
|
||||||
},
|
},
|
||||||
messageStyle (e) {
|
messageStyle (e) {
|
||||||
if (e.column.label == 'Alerts' || e.column.label == this.$t('overall.alert')) {
|
if (e.column.label == 'Alerts' || e.column.label == this.$t('overall.alert')) {
|
||||||
@@ -668,6 +701,8 @@ export default {
|
|||||||
bus.$off('module-list-change')
|
bus.$off('module-list-change')
|
||||||
bus.$off('endpoint-list-change')
|
bus.$off('endpoint-list-change')
|
||||||
bus.$off('alert-message-change')
|
bus.$off('alert-message-change')
|
||||||
|
bus.$off('showMeta2dPreview')
|
||||||
|
clearTopology()
|
||||||
if (this.scrollbarWrap) {
|
if (this.scrollbarWrap) {
|
||||||
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
|
this.scrollbarWrap.removeEventListener('scroll', bus.debounce)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -132,6 +132,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 存在任务id时展示表格 -->
|
<!-- 存在任务id时展示表格 -->
|
||||||
<div class="data-wrap" v-show="tid!==undefined">
|
<div class="data-wrap" v-show="tid!==undefined">
|
||||||
|
<span>{{$t('ping.results')}}</span>
|
||||||
<div class="data-bottom">
|
<div class="data-bottom">
|
||||||
<ping-table
|
<ping-table
|
||||||
ref="dataTable"
|
ref="dataTable"
|
||||||
|
|||||||
@@ -124,6 +124,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 存在任务id时展示表格 -->
|
<!-- 存在任务id时展示表格 -->
|
||||||
<div class="data-wrap" v-show="tid!==undefined">
|
<div class="data-wrap" v-show="tid!==undefined">
|
||||||
|
<span>{{$t('ping.results')}}</span>
|
||||||
<div class="data-bottom">
|
<div class="data-bottom">
|
||||||
<trace-table
|
<trace-table
|
||||||
ref="dataTable"
|
ref="dataTable"
|
||||||
|
|||||||
Reference in New Issue
Block a user