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

feat: asset功能、panel样式修复

Browse Source
This commit is contained in:
chenjinsong
2021-04-26 21:42:15 +08:00
parent 79192a889d
commit 2b3047b413
43 changed files with 1091 additions and 827 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
nezha-fronted/src/assets/css/common.scss
View File

@@ -46,3 +46,42 @@
.el-checkbox__inner, .el-input__inner {
border-color: rgba(0,0,0,0.15)
}
.nz-icon-copy {
padding: 0 4px;
color: $--theme-color;
background-color: #FDF5E9;
border-radius: $--primary-border-radius;
cursor: pointer;
}
.red {
color: $--danger-color !important;
}
.green {
color:$--success-color !important;
}
.gray {
color: $--suspended-color !important;
}
.dark-red {
color: #aa0000 !important;
}
.orange {
color: var(--theme-color) !important;
}
.red-bg {
background-color: $--danger-color !important;
}
.green-bg {
background-color:$--success-color !important;
}
.gray-bg {
background-color: $--suspended-color !important;
}
.dark-red-bg {
background-color: #aa0000 !important;
}
.orange-bg {
background-color: var(--theme-color) !important;
}

42
nezha-fronted/src/assets/css/common/rightBoxCommon.scss
View File

@@ -49,11 +49,14 @@
overflow-x: hidden;
overflow-y: auto;
.el-input__inner {
.el-input__inner, .el-textarea__inner {
padding: 0 10px;
border-radius: $--primary-border-radius;
border: 1px solid $--right-box-border-color;
}
.el-textarea__inner {
padding: 5px 20px 4px 15px;
}
.el-form {
padding-top: 20px;
@@ -79,6 +82,8 @@
}
.form__sub-title {
display: flex;
justify-content: space-between;
padding: 0 10px;
margin-bottom: 20px;
line-height: 32px;
@@ -187,3 +192,38 @@
.right-box-select-dropdown {
width: 625px;
}
.limit-height {
max-height: 200px;
overflow: auto;
}
.form-items--half-width-group {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.form-item--half-width {
width: calc(50% - 10px);
.el-select {
width: 100%;
}
}
}
.nz-icon-minus-position {
display: inline-flex;
flex-direction: column;
position: absolute;
right: 0;
top: 50%;
height: 100%;
transform: translateY(-50%);
justify-content: space-between;
box-sizing: border-box;
}
.form-item--end-with-btn { // 末尾留出btn宽度空间的form item
}
.el-form-item__content .el-autocomplete .el-input-group {
vertical-align: unset;
}

58
nezha-fronted/src/assets/css/common/tableCommon.scss
View File

@@ -65,7 +65,7 @@
.top-tool-btn {
height: 32px;
width: 36px;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
outline: none;
border-radius: $--button-border-radius;
background-color: $--button-gray-background-color;
@@ -261,7 +261,7 @@
.table-operation-item.table-operation-item--more {
justify-content: space-between;
width: 52px;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
span {
line-height: 14px;
@@ -329,14 +329,56 @@
padding: 0 20px 20px;
.nz-label-search {
display: flex;
align-items: center;
margin-right: 20px;
.el-cascader {
width: 175px;
.el-tag {
max-width: calc(100% - 45px);
}
}
&.is-focus, &.is-hover {
.nz-label-search__label {
border-color: #c7c7c7;
}
}
.nz-label-search__label {
padding-left: 6px;
height: 24px;
border: 1px solid RGBA(0,0,0,0.15);
line-height: 22px;
border-right: none;
transform: translateX(1px);
box-sizing: border-box;
transition: border-color linear .2s;
span {
font-size: 14px;
color: #666;
}
i {
line-height: 28px !important;
}
}
.el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
border-color: #c7c7c7 !important;
}
.el-input__inner {
height: 24px !important;
width: 140px;
border-left: none;
}
.el-tag {
background-color: white;
i {
color: white;
top: 0;
}
}
}
}
@@ -354,5 +396,15 @@
}
.el-cascader-menu__list {
display: flex;
flex-wrap: wrap;
width: 100%;
max-height: 120px;
}
}
.el-popper.el-cascader__dropdown.click-search-dropdown::after {
content: '';
position: absolute;
top: -1px;
height: 1px;
background-color: white;
}

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

19
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -20,13 +20,16 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="Cabinet" unicode="&#59160;" d="M198.75882495 5.17988035999997v-27.41058797a44.70728068 44.70728068 0 0 0-89.38235099 0V23.249609380000038h1.1917648a18.03751953 18.03751953 0 0 0-0.48314747 4.15507121V812.68097769C110.0850913 824.98514305 122.51809545 834.93798828 137.88219653 834.93798828h749.07241838c15.3318916 0 27.76489576-9.98505558 27.66826644-22.28922093v-785.27629624a17.81205053 17.81205053 0 0 0-0.70861647-4.9281084v-44.67507032a44.70728068 44.70728068 0 1 0-89.41456135 0v27.37837761H198.75882495zM723.36075536 158.53100586000005h24.9626385a32.20985668 32.20985668 0 0 1 32.20985582 32.20985667v70.86168314a32.20985668 32.20985668 0 0 1-32.20985582 32.20985667h-24.9626385a32.20985668 32.20985668 0 0 1-32.20985669-32.20985667V190.74086252999996a32.20985668 32.20985668 0 0 1 32.20985669-32.20985667z m57.17249432 302.77264964v25.76788431a32.20985668 32.20985668 0 0 1-32.20985582 32.20985667H276.38457878a32.20985668 32.20985668 0 0 1-32.20985581-32.20985667v-25.76788431a32.20985668 32.20985668 0 0 1 32.20985581-32.20985667h471.93881508a32.20985668 32.20985668 0 0 1 32.20985582 32.20985667zM646.443618 641.67885082v25.7678843a32.20985668 32.20985668 0 0 1-32.20985581 32.20985668H276.38457878a32.20985668 32.20985668 0 0 1-32.20985581-32.20985668V641.67885082a32.20985668 32.20985668 0 0 1 32.20985581-32.20985668h337.84918341a32.20985668 32.20985668 0 0 1 32.20985581 32.20985668z" horiz-adv-x="1024" />
<glyph glyph-name="add" unicode="&#59161;" d="M522.61045266 827.11666667a48.05 48.05 0 0 0 48.05-48.05v-352.34378598h352.41242804a48.05 48.05 0 0 0 0-96.1H570.66045266v-352.41242804a48.05 48.05 0 0 0-96.1 0V330.62288069H122.21666668a48.05 48.05 0 1 0 0 96.1h352.34378598V779.06666667a48.05 48.05 0 0 0 48.05 48.05z" horiz-adv-x="1024" />
<glyph glyph-name="cabinet" unicode="&#59160;" d="M198.75882495 5.17988035999997v-27.41058797a44.70728068 44.70728068 0 0 0-89.38235099 0V23.249609380000038h1.1917648a18.03751953 18.03751953 0 0 0-0.48314747 4.15507121V812.68097769C110.0850913 824.98514305 122.51809545 834.93798828 137.88219653 834.93798828h749.07241838c15.3318916 0 27.76489576-9.98505558 27.66826644-22.28922093v-785.27629624a17.81205053 17.81205053 0 0 0-0.70861647-4.9281084v-44.67507032a44.70728068 44.70728068 0 1 0-89.41456135 0v27.37837761H198.75882495zM723.36075536 158.53100586000005h24.9626385a32.20985668 32.20985668 0 0 1 32.20985582 32.20985667v70.86168314a32.20985668 32.20985668 0 0 1-32.20985582 32.20985667h-24.9626385a32.20985668 32.20985668 0 0 1-32.20985669-32.20985667V190.74086252999996a32.20985668 32.20985668 0 0 1 32.20985669-32.20985667z m57.17249432 302.77264964v25.76788431a32.20985668 32.20985668 0 0 1-32.20985582 32.20985667H276.38457878a32.20985668 32.20985668 0 0 1-32.20985581-32.20985667v-25.76788431a32.20985668 32.20985668 0 0 1 32.20985581-32.20985667h471.93881508a32.20985668 32.20985668 0 0 1 32.20985582 32.20985667zM646.443618 641.67885082v25.7678843a32.20985668 32.20985668 0 0 1-32.20985581 32.20985668H276.38457878a32.20985668 32.20985668 0 0 1-32.20985581-32.20985668V641.67885082a32.20985668 32.20985668 0 0 1 32.20985581-32.20985668h337.84918341a32.20985668 32.20985668 0 0 1 32.20985581 32.20985668z" horiz-adv-x="1024" />
<glyph glyph-name="about" unicode="&#59158;" d="M512-66.93798828000001c-248.01589355 0-450.93798828 202.92209473-450.93798828 450.93798828s202.92209473 450.93798828 450.93798828 450.93798828 450.93798828-202.92209473 450.93798828-450.93798828-202.92209473-450.93798828-450.93798828-450.93798828zM512 773.49768738A389.27221838 389.27221838 0 0 1 122.50231262 384c0-215.21015491 174.28753247-389.49768738 389.49768738-389.49768738s389.49768738 174.28753247 389.49768738 389.49768738S727.15378766 773.49768738 512 773.49768738zM512.33820349 458.63023706c24.40701862 0 44.19192285-21.47592169 44.19192285-48.02489575v-260.41668824c0-26.49260681-19.78490423-48.02489575-44.19192285-48.02489574-24.35065137 0-44.1355556 21.47592169-44.1355556 48.02489574v260.41668823c0 26.49260681 19.72853699 48.02489575 44.1355556 48.02489576z m-14.93732086 148.92227063a56.36724854 56.36724854 0 1 0 29.19823474-108.90152416 56.36724854 56.36724854 0 0 0-29.19823474 108.90152416z" horiz-adv-x="1024" />
<glyph glyph-name="License" unicode="&#59159;" d="M924.84875925 820.84617615C970.16426954 820.84617615 1007.09233325 784.15109736 1007.09233325 738.95207994v-709.90415988A82.12708112 82.12708112 0 0 0 924.84875925-52.84617615000002H157.397397A82.12708112 82.12708112 0 0 0 75.15382385 29.047920060000024V738.95207994A82.12708112 82.12708112 0 0 0 157.397397 820.84617615z m-3.20353805-58.24615711H160.60093591A27.14270937 27.14270937 0 0 1 133.39998096 735.57380256v-703.14760512c0-14.85276999 12.23169293-27.02621648 27.20095495-27.02621648h761.04428529a27.14270937 27.14270937 0 0 1 27.20095495 27.02621648V735.57380256A27.14270937 27.14270937 0 0 1 921.6452212 762.60001904z m-238.16853524-58.24615624a191.51336362 191.51336362 0 0 0 191.28037871-191.28037958c0-52.36329469-21.20160137-99.89215866-55.39209514-134.43212936a27.7834168 27.7834168 0 0 0 0.75720034-6.40707783v-241.72155023a27.20095495 27.20095495 0 0 0-27.37569428-27.25920139 27.37569342 27.37569342 0 0 0-12.81415393 3.20353805l-96.4556357 51.54784879-96.45563569-51.54784879a27.37569342 27.37569342 0 0 0-40.1898482 24.11390893v241.72155109c0 2.15510809 0.2912305 4.31021532 0.75719946 6.34883138a190.63967127 190.63967127 0 0 0-55.33384869 134.43212936A191.51336362 191.51336362 0 0 0 683.41843952 704.3538628z m-296.93890775-490.08316406a27.31744784 27.31744784 0 1 0 0-54.69314125H277.20974215a27.31744784 27.31744784 0 1 0 0 54.69314125zM765.37078216 340.31538237999996a190.1737023 190.1737023 0 0 0-81.95234264-18.46403142c-29.29781659 0-57.08123339 6.64006188-81.95234265 18.46403142v-164.19591578l69.07994228 36.98630929a27.49218631 27.49218631 0 0 0 25.74480074 0l69.07994227-36.98630929z m-81.95234264 309.40358475a136.76197593 136.76197593 0 0 1-136.58723745-136.64548391 136.76197593 136.76197593 0 0 1 136.58723745-136.58723745 136.76197593 136.76197593 0 0 1 136.58723745 136.58723745 136.76197593 136.76197593 0 0 1-136.58723745 136.64548391zM386.53777821 432.8102797a27.31744784 27.31744784 0 1 0 0-54.63489567H277.20974215a27.31744784 27.31744784 0 1 0 0 54.63489567z m0 218.59782655a27.31744784 27.31744784 0 1 0 0-54.63489567H277.20974215a27.31744784 27.31744784 0 1 0 0 54.63489567z" horiz-adv-x="1092" />
<glyph glyph-name="license" unicode="&#59159;" d="M924.84875925 820.84617615C970.16426954 820.84617615 1007.09233325 784.15109736 1007.09233325 738.95207994v-709.90415988A82.12708112 82.12708112 0 0 0 924.84875925-52.84617615000002H157.397397A82.12708112 82.12708112 0 0 0 75.15382385 29.047920060000024V738.95207994A82.12708112 82.12708112 0 0 0 157.397397 820.84617615z m-3.20353805-58.24615711H160.60093591A27.14270937 27.14270937 0 0 1 133.39998096 735.57380256v-703.14760512c0-14.85276999 12.23169293-27.02621648 27.20095495-27.02621648h761.04428529a27.14270937 27.14270937 0 0 1 27.20095495 27.02621648V735.57380256A27.14270937 27.14270937 0 0 1 921.6452212 762.60001904z m-238.16853524-58.24615624a191.51336362 191.51336362 0 0 0 191.28037871-191.28037958c0-52.36329469-21.20160137-99.89215866-55.39209514-134.43212936a27.7834168 27.7834168 0 0 0 0.75720034-6.40707783v-241.72155023a27.20095495 27.20095495 0 0 0-27.37569428-27.25920139 27.37569342 27.37569342 0 0 0-12.81415393 3.20353805l-96.4556357 51.54784879-96.45563569-51.54784879a27.37569342 27.37569342 0 0 0-40.1898482 24.11390893v241.72155109c0 2.15510809 0.2912305 4.31021532 0.75719946 6.34883138a190.63967127 190.63967127 0 0 0-55.33384869 134.43212936A191.51336362 191.51336362 0 0 0 683.41843952 704.3538628z m-296.93890775-490.08316406a27.31744784 27.31744784 0 1 0 0-54.69314125H277.20974215a27.31744784 27.31744784 0 1 0 0 54.69314125zM765.37078216 340.31538237999996a190.1737023 190.1737023 0 0 0-81.95234264-18.46403142c-29.29781659 0-57.08123339 6.64006188-81.95234265 18.46403142v-164.19591578l69.07994228 36.98630929a27.49218631 27.49218631 0 0 0 25.74480074 0l69.07994227-36.98630929z m-81.95234264 309.40358475a136.76197593 136.76197593 0 0 1-136.58723745-136.64548391 136.76197593 136.76197593 0 0 1 136.58723745-136.58723745 136.76197593 136.76197593 0 0 1 136.58723745 136.58723745 136.76197593 136.76197593 0 0 1-136.58723745 136.64548391zM386.53777821 432.8102797a27.31744784 27.31744784 0 1 0 0-54.63489567H277.20974215a27.31744784 27.31744784 0 1 0 0 54.63489567z m0 218.59782655a27.31744784 27.31744784 0 1 0 0-54.63489567H277.20974215a27.31744784 27.31744784 0 1 0 0 54.63489567z" horiz-adv-x="1092" />
<glyph glyph-name="link" unicode="&#58997;" d="M717.9 327.1l135.8 135.8c62.5 62.5 62.5 163.8 0 226.3s-163.8 62.5-226.3 0l-67.9-67.9c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l67.9 67.9c87.5 87.5 229.3 87.5 316.8 0s87.5-229.3 0-316.8L763.2 281.79999999999995c-87.5-87.5-229.3-87.5-316.8 0-30.8 30.8-51.5 69.1-60.5 110.7-3 14-4.7 28.3-5.1 42.6-0.4 17.7 13.6 32.3 31.3 32.7 17.7 0.4 32.3-13.6 32.7-31.3 0.2-10.3 1.4-20.5 3.6-30.5 6.5-29.7 21.2-57 43.2-79 62.5-62.4 163.8-62.4 226.3 0.1zM310.6 462.9L174.9 327.1c-62.5-62.5-62.5-163.8 0-226.3s163.8-62.5 226.3 0l67.9 67.9c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-67.9-67.9c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8l135.8 135.8c87.5 87.5 229.3 87.5 316.8 0 30.8-30.8 51.5-69.1 60.5-110.7 3-14 4.7-28.3 5.1-42.6 0.4-17.7-13.6-32.3-31.3-32.7-17.7-0.4-32.3 13.6-32.7 31.3-0.2 10.3-1.4 20.5-3.6 30.5-6.5 29.7-21.2 57-43.2 79-62.7 62.4-164 62.4-226.5 0z" horiz-adv-x="1024" />
@@ -38,10 +41,10 @@ Created by iconfont
<glyph glyph-name="multitext" unicode="&#59152;" d="M913.89848206 820.84617615H110.10151794A34.94769409 34.94769409 0 0 1 75.15382385 785.89848206v-803.79696412c0-19.29403917 15.65365493-34.94769409 34.94769409-34.94769409h803.79696412a34.94769409 34.94769409 0 0 1 34.94769409 34.94769409V785.89848206a34.94769409 34.94769409 0 0 1-34.94769409 34.94769409z m-43.68461762-795.06004059H153.78613556V742.21386444h716.42772888v-716.42772888zM748.47939698 559.97620158H271.29775694c-2.69388447 0-4.87811535-3.13073064-4.87811535-6.91673142v-55.69788745c0-3.7859999 2.18423088-6.9167314 4.87811536-6.9167314h477.18164003c2.69388447 0 4.87811535 3.13073064 4.87811535 6.9167314v55.69788745c0 3.7859999-2.18423088 6.9167314-4.87811535 6.91673142z m0-278.1982068H271.29775694c-2.69388447 0-4.87811535-3.13073064-4.87811535-6.98953882v-55.62508005c0-3.85880818 2.18423088-6.98953882 4.87811536-6.98953881h477.18164003c2.69388447 0 4.87811535 3.13073064 4.87811535 6.98953881V274.78845595999996c0 3.85880818-2.18423088 6.98953882-4.87811535 6.98953882z m0 139.06269969H271.29775694c-2.69388447 0-4.87811535-3.13073064-4.87811535-6.9167314v-55.69788746c0-3.7859999 2.18423088-6.9167314 4.87811536-6.91673141h477.18164003c2.69388447 0 4.87811535 3.13073064 4.87811535 6.91673141v55.69788746c0 3.7859999-2.18423088 6.9167314-4.87811535 6.9167314z" horiz-adv-x="1024" />
<glyph glyph-name="INTEGER" unicode="&#59153;" d="M894.24040413 820.84617615H129.75959587C102.45670987 820.84617615 75.15382385 781.1659815200001 75.15382385 741.48578776v-714.97157552C75.15382385-13.093174119999958 102.45670987-52.84617615000002 129.75959587-52.84617615000002h764.48080825c27.30288601 0 54.60577202 39.68019462 54.60577203 79.36038839V741.48578776C948.84617615 781.09317412 921.54329013 820.84617615 894.24040413 820.84617615zM876.03848041 26.514212240000006H147.96151959V741.48578776h728.07696082v-714.97157552zM628.49231335 319.92922778l46.59692603 5.82461511c0-11.64923107 5.82461597-40.77231006 34.94769409-40.7723092 11.64923107 0 40.77231006 0 40.7723092 46.59692518 0 11.64923107 0 46.59692517-34.94769409 46.59692516-5.82461597 0-11.64923107 0-23.29846215-5.8246151l5.82461511 46.59692516c11.64923107 0 40.77231006 5.82461597 40.77231006 40.77231006 0 11.64923107 0 29.12307812-29.12307813 29.12307813s-34.94769409-29.12307812-34.94769409-40.77231006l-46.59692603 5.82461596C634.31692932 471.36923523 640.14154529 529.61539234 715.86154858 529.61539234c23.29846302 0 75.72000415 0 75.72000415-69.89538819 0-23.29846302-11.64923107-46.59692517-34.94769409-58.24615711 17.47384704-5.82461597 46.59692517-11.64923107 46.59692517-69.89538817 0-23.29846302-5.82461597-46.59692517-23.29846215-64.07077222s-40.77231006-29.12307812-64.07077308-29.12307899c-81.54461926 0-87.36923523 58.24615711-87.36923523 81.54462012zM570.24615711 238.38460766000003H395.50768665c0 17.47384704 5.82461597 40.77231006 17.47384704 58.24615711 11.64923107 17.47384704 29.12307812 40.77231006 58.24615625 69.89538819 17.47384704 17.47384704 34.94769409 34.94769409 40.77231006 46.59692517 5.82461597 11.64923107 29.12307812 69.89538819-23.29846302 69.89538818-11.64923107 0-23.29846302-5.82461597-29.12307811-11.64923108-5.82461597-5.82461597-5.82461597-17.47384704-5.82461598-34.9476941l-52.42154114 5.82461598c5.82461597 29.12307812 5.82461597 87.36923523 87.36923523 87.36923523 87.36923523 0 81.54461926-58.24615711 81.54462013-81.54462012 0-46.59692517-40.77231006-93.1938512-58.24615711-110.66769739s-34.94769409-46.59692517-40.77231006-52.42154114H570.24615711V238.38460766000003zM337.26152954 238.38460766000003h-52.42154114V448.07077222c-17.47384704-17.47384704-40.77231006-34.94769409-64.07077221-40.7723092v46.59692516c11.64923107 5.82461597 69.89538819 58.24615711 75.72000329 75.72000416h40.77231006v-291.23078468z" horiz-adv-x="1024" />
<glyph glyph-name="integer" unicode="&#59153;" d="M894.24040413 820.84617615H129.75959587C102.45670987 820.84617615 75.15382385 781.1659815200001 75.15382385 741.48578776v-714.97157552C75.15382385-13.093174119999958 102.45670987-52.84617615000002 129.75959587-52.84617615000002h764.48080825c27.30288601 0 54.60577202 39.68019462 54.60577203 79.36038839V741.48578776C948.84617615 781.09317412 921.54329013 820.84617615 894.24040413 820.84617615zM876.03848041 26.514212240000006H147.96151959V741.48578776h728.07696082v-714.97157552zM628.49231335 319.92922778l46.59692603 5.82461511c0-11.64923107 5.82461597-40.77231006 34.94769409-40.7723092 11.64923107 0 40.77231006 0 40.7723092 46.59692518 0 11.64923107 0 46.59692517-34.94769409 46.59692516-5.82461597 0-11.64923107 0-23.29846215-5.8246151l5.82461511 46.59692516c11.64923107 0 40.77231006 5.82461597 40.77231006 40.77231006 0 11.64923107 0 29.12307812-29.12307813 29.12307813s-34.94769409-29.12307812-34.94769409-40.77231006l-46.59692603 5.82461596C634.31692932 471.36923523 640.14154529 529.61539234 715.86154858 529.61539234c23.29846302 0 75.72000415 0 75.72000415-69.89538819 0-23.29846302-11.64923107-46.59692517-34.94769409-58.24615711 17.47384704-5.82461597 46.59692517-11.64923107 46.59692517-69.89538817 0-23.29846302-5.82461597-46.59692517-23.29846215-64.07077222s-40.77231006-29.12307812-64.07077308-29.12307899c-81.54461926 0-87.36923523 58.24615711-87.36923523 81.54462012zM570.24615711 238.38460766000003H395.50768665c0 17.47384704 5.82461597 40.77231006 17.47384704 58.24615711 11.64923107 17.47384704 29.12307812 40.77231006 58.24615625 69.89538819 17.47384704 17.47384704 34.94769409 34.94769409 40.77231006 46.59692517 5.82461597 11.64923107 29.12307812 69.89538819-23.29846302 69.89538818-11.64923107 0-23.29846302-5.82461597-29.12307811-11.64923108-5.82461597-5.82461597-5.82461597-17.47384704-5.82461598-34.9476941l-52.42154114 5.82461598c5.82461597 29.12307812 5.82461597 87.36923523 87.36923523 87.36923523 87.36923523 0 81.54461926-58.24615711 81.54462013-81.54462012 0-46.59692517-40.77231006-93.1938512-58.24615711-110.66769739s-34.94769409-46.59692517-40.77231006-52.42154114H570.24615711V238.38460766000003zM337.26152954 238.38460766000003h-52.42154114V448.07077222c-17.47384704-17.47384704-40.77231006-34.94769409-64.07077221-40.7723092v46.59692516c11.64923107 5.82461597 69.89538819 58.24615711 75.72000329 75.72000416h40.77231006v-291.23078468z" horiz-adv-x="1024" />
<glyph glyph-name="Text" unicode="&#59154;" d="M913.89848206 820.84617615a34.94769409 34.94769409 0 0 0 34.94769409-34.94769409v-803.79696412a34.94769409 34.94769409 0 0 0-34.94769409-34.94769409H110.10151794a34.94769409 34.94769409 0 0 0-34.94769409 34.94769409V785.89848206A34.94769409 34.94769409 0 0 0 110.10151794 820.84617615z m-43.68461762-78.63231171H153.78613556v-716.42772888h716.42772888V742.21386444zM771.26820554 602.42308807c2.40265396 0 4.36846176-3.27634632 4.36846177-7.28076931v-58.24615711c0-4.00442299-1.9658078-7.28076931-4.36846177-7.28076931H566.24173326v-404.81079047h-72.80769574V529.61539234h-222.79154985c-1.82019212 0-3.42196199 1.82019212-4.07723125 4.44126916L266.27402592 536.8961616500001v58.24615711c0 4.00442299 1.9658078 7.28076931 4.36846175 7.28076931z" horiz-adv-x="1024" />
<glyph glyph-name="text" unicode="&#59154;" d="M913.89848206 820.84617615a34.94769409 34.94769409 0 0 0 34.94769409-34.94769409v-803.79696412a34.94769409 34.94769409 0 0 0-34.94769409-34.94769409H110.10151794a34.94769409 34.94769409 0 0 0-34.94769409 34.94769409V785.89848206A34.94769409 34.94769409 0 0 0 110.10151794 820.84617615z m-43.68461762-78.63231171H153.78613556v-716.42772888h716.42772888V742.21386444zM771.26820554 602.42308807c2.40265396 0 4.36846176-3.27634632 4.36846177-7.28076931v-58.24615711c0-4.00442299-1.9658078-7.28076931-4.36846177-7.28076931H566.24173326v-404.81079047h-72.80769574V529.61539234h-222.79154985c-1.82019212 0-3.42196199 1.82019212-4.07723125 4.44126916L266.27402592 536.8961616500001v58.24615711c0 4.00442299 1.9658078 7.28076931 4.36846175 7.28076931z" horiz-adv-x="1024" />
<glyph glyph-name="checkbox" unicode="&#59155;" d="M866.93751812-52.84617615000002h-709.87503624A81.83585062 81.83585062 0 0 0 75.15382385 28.989674469999954V739.01032553C75.15382385 784.15109736 111.84890264 820.84617615 157.06248188 820.84617615h709.87503624C912.15109736 820.84617615 948.84617615 784.22390477 948.84617615 739.01032553v-710.02065106c0-45.14077182-36.6950788-81.83585062-81.90865803-81.83585062z m0 791.85650168h-709.87503624v-710.02065106h709.87503624V739.01032553zM731.36958784 490.59046698L500.35076893 231.39506884000002a41.13634797 41.13634797 0 0 0-52.85838732-4.51407658 40.62669438 40.62669438 0 0 0-8.00884685 6.11584647l-134.33019916 134.69423707a40.91792488 40.91792488 0 1 0 57.80931092 57.95492662l105.78958204-106.008006L672.9050085 549.200662a41.42757932 41.42757932 0 0 0 58.39177193-58.61019502z" horiz-adv-x="1024" />
@@ -50,16 +53,16 @@ Created by iconfont
<glyph glyph-name="textarea" unicode="&#59156;" d="M910.59785054 840.53275226c17.18711503 0 31.08003351-17.76001902 31.08003443-39.67359147v-780.08019883c0-21.84195878-13.89291848-39.60197872-31.08003443-39.60197872H113.40214946c-16.90066304-0.35806476-30.79358152 17.40195426-31.08003443 39.60197872V800.85916078C82.32211503 822.70112046 96.21503351 840.53275226 113.40214946 840.53275226h797.19570108z m-41.39230253-85.93557699H154.72283922v-687.48461503h714.55432157v687.48461503h-0.07161278z m-31.08003352-471.8579298v-144.72983468c0-20.05163497-13.89291848-36.16455571-31.00842074-36.16455481H682.86857247l155.25694202 180.89438949zM279.04297328 694.44227128c5.72903804 0 10.38388179-5.37097329 10.3838827-12.03098006v-331.85455345c-0.07161277-6.73162046-4.72645652-12.17420652-10.3838827-12.03098098h-51.77618524a9.45291304 9.45291304 0 0 0-7.30452355 3.50903669 13.53485372 13.53485372 0 0 0-3.07935824 8.59355706V682.4112912200001c0.14322554 6.73162046 4.72645652 12.17420652 10.38388179 12.03098006h51.77618524z" horiz-adv-x="1024" />
<glyph glyph-name="DOUBLE" unicode="&#59157;" d="M979.36948695 820.84617615H145.39042378C115.60545716 820.84617615 85.82049052 781.13288702 85.82049052 741.41959874v-714.83919748c0-39.71328913 29.78496663-79.4265774 59.56993326-79.42657741h833.97906317c29.78496663 0 59.56993327 39.71328913 59.56993327 79.42657741V741.41959874c0 39.71328913-29.78496663 79.4265774-59.56993327 79.42657741zM959.51284282 26.58040126000003H165.24706793V741.41959874h794.26577489v-714.83919748zM428.38731928 201.1600184c34.94769409 0 61.55559794 13.34366526 80.06198979 39.87214243 18.42696606 26.60790385 27.64044865 64.33552745 27.64044951 113.18287254C536.16918524 453.49825491 502.09518349 503.13986652 434.10603247 503.13986652c-35.66253314 0-62.90584936-13.34366526-81.8093745-39.95156908C333.63141195 436.58039444 324.10022273 397.97907763 324.10022273 347.46377451c0-97.53583684 34.78884078-146.30375611 104.28709655-146.30375611z m3.09763613 255.19759353c27.79930196 0 41.77837961-34.78884078 41.77838046-104.36652235 0-69.33940245-14.29678425-104.04881658-42.89035193-104.04881657-29.22898091 0-43.84347093 33.67686846-43.84347091 101.03060624 0 71.64277289 15.0116233 107.38473268 44.95544238 107.38473269zM822.10486354 229.11817368000004c20.17435076 18.74467268 30.34095236 42.7314986 30.34095322 72.11933282 0 26.68732964-8.41921691 47.81479941-25.09879911 63.38240844-16.759008 15.56760903-39.63386247 23.35141355-68.54513589 23.35141354-8.89577684 0-18.58581937-0.47655908-29.14955425-1.35025142l4.1301818 61.47617128h106.82874694v50.11816984H683.90261857L672.78289796 337.13831959000004a489.26771728 489.26771728 0 0 0 53.69236676 3.41534276c42.09608621 0 63.06470267-15.09104996 63.06470268-45.43200232a43.04920523 43.04920523 0 0 0-14.85276999-34.39170836c-9.84889584-8.49864356-23.51026685-12.70825201-40.98411476-12.70825201-23.11313444 0-44.95544324 6.11584647-65.44749975 18.42696606v-52.58039445c19.30065841-8.41921691 43.04920523-12.62882621 71.24564045-12.62882621 34.70941412 0 62.27043699 9.3723359 82.44478688 28.03758193zM567.14554998 203.22510972999999a35.02712075 35.02712075 0 0 1 25.49593153-10.48430823 35.18597406 35.18597406 0 0 1 37.09221122 36.61565215c0 10.40488157-3.49476941 19.06237844-10.48430823 26.05191726a35.18597406 35.18597406 0 0 1-25.8136373 10.40488156 36.61565214 36.61565214 0 0 1-25.9724906-10.16660159 34.39170836 34.39170836 0 0 1-10.8814415-26.21077058c0-10.56373489 3.49476941-19.30065841 10.56373488-26.21077057z" horiz-adv-x="1117" />
<glyph glyph-name="double" unicode="&#59157;" d="M979.36948695 820.84617615H145.39042378C115.60545716 820.84617615 85.82049052 781.13288702 85.82049052 741.41959874v-714.83919748c0-39.71328913 29.78496663-79.4265774 59.56993326-79.42657741h833.97906317c29.78496663 0 59.56993327 39.71328913 59.56993327 79.42657741V741.41959874c0 39.71328913-29.78496663 79.4265774-59.56993327 79.42657741zM959.51284282 26.58040126000003H165.24706793V741.41959874h794.26577489v-714.83919748zM428.38731928 201.1600184c34.94769409 0 61.55559794 13.34366526 80.06198979 39.87214243 18.42696606 26.60790385 27.64044865 64.33552745 27.64044951 113.18287254C536.16918524 453.49825491 502.09518349 503.13986652 434.10603247 503.13986652c-35.66253314 0-62.90584936-13.34366526-81.8093745-39.95156908C333.63141195 436.58039444 324.10022273 397.97907763 324.10022273 347.46377451c0-97.53583684 34.78884078-146.30375611 104.28709655-146.30375611z m3.09763613 255.19759353c27.79930196 0 41.77837961-34.78884078 41.77838046-104.36652235 0-69.33940245-14.29678425-104.04881658-42.89035193-104.04881657-29.22898091 0-43.84347093 33.67686846-43.84347091 101.03060624 0 71.64277289 15.0116233 107.38473268 44.95544238 107.38473269zM822.10486354 229.11817368000004c20.17435076 18.74467268 30.34095236 42.7314986 30.34095322 72.11933282 0 26.68732964-8.41921691 47.81479941-25.09879911 63.38240844-16.759008 15.56760903-39.63386247 23.35141355-68.54513589 23.35141354-8.89577684 0-18.58581937-0.47655908-29.14955425-1.35025142l4.1301818 61.47617128h106.82874694v50.11816984H683.90261857L672.78289796 337.13831959000004a489.26771728 489.26771728 0 0 0 53.69236676 3.41534276c42.09608621 0 63.06470267-15.09104996 63.06470268-45.43200232a43.04920523 43.04920523 0 0 0-14.85276999-34.39170836c-9.84889584-8.49864356-23.51026685-12.70825201-40.98411476-12.70825201-23.11313444 0-44.95544324 6.11584647-65.44749975 18.42696606v-52.58039445c19.30065841-8.41921691 43.04920523-12.62882621 71.24564045-12.62882621 34.70941412 0 62.27043699 9.3723359 82.44478688 28.03758193zM567.14554998 203.22510972999999a35.02712075 35.02712075 0 0 1 25.49593153-10.48430823 35.18597406 35.18597406 0 0 1 37.09221122 36.61565215c0 10.40488157-3.49476941 19.06237844-10.48430823 26.05191726a35.18597406 35.18597406 0 0 1-25.8136373 10.40488156 36.61565214 36.61565214 0 0 1-25.9724906-10.16660159 34.39170836 34.39170836 0 0 1-10.8814415-26.21077058c0-10.56373489 3.49476941-19.30065841 10.56373488-26.21077057z" horiz-adv-x="1117" />
<glyph glyph-name="Visualization" unicode="&#59148;" d="M890.75293208 344.28671087c112.98430632 0 223.34753557-73.4298705 274.65710524-182.64141453 0.35741951-0.7942657 0.67512615-1.58853139 0.91340526-2.42251085l0.47655907-1.19139812c0.59569948-1.98566467 0.9928319-3.97132848 1.19139897-6.07613357 0.55598574-2.06509132 0.7942657-4.16989556 0.75455281-6.27469978 0-3.13734989-0.55598574-5.75842695-0.91340612-7.46609789a15.40875573 15.40875573 0 0 0-1.38996517-5.67900028 18.86381224 18.86381224 0 0 0-1.5885314-3.93161559C1114.10046764 20.504268550000006 1003.73723838-52.84617615000002 890.75293208-52.84617615000002c-112.94459342 0-223.30782268 73.46958425-274.61739147 182.68112829a20.96861646 20.96861646 0 0 0-0.83397946 2.26365753 16.71929425 16.71929425 0 0 0-1.19139812 3.45505566 31.88977086 31.88977086 0 0 0-0.59569948 3.93161559 75.69352804 75.69352804 0 0 0-0.63541325 4.40817551 16.83843466 16.83843466 0 0 0-0.0397129 3.57419607s0.43684618 4.16989556 0.91340526 6.27469978c-0.07942666-0.51627284-0.0397129 1.46939183 0.95311899 4.36846175l0.35741953 0.91340525a17.67241325 17.67241325 0 0 0 1.35025228 3.2962032C667.44510941 270.93626703999996 777.80833868 344.28671087 890.75293208 344.28671087z m0-61.63502373c-81.01510879 0-164.33358889-41.22239387-201.98178669-134.90604178l-0.19856622-0.71483903c0-0.39713328-0.07942666-0.7942657-0.1985662-1.46939185l0.1985662-1.42967809 0.23827997-0.91340611c38.00561733-93.96164077 121.12553035-136.01801409 201.94207294-136.01801409 81.01510879 0 165.20728124 43.08891813 202.85547905 136.73285313a9.09434304 9.09434304 0 0 0 0.2382791 0.99283276l0.19856708 1.07225858-0.23827997 1.7473847a1.82681136 1.82681136 0 0 0-0.11913956 0.47655907l-0.11914042 0.47655993c-37.52905825 93.5247946-121.72122984 133.95292277-202.81576528 133.95292277zM1010.32964479 820.84617615C1053.77598244 820.84617615 1089.31937602 784.58794352 1089.31937602 740.26791353v-340.7400174c0-18.98295178-15.24990327-34.55056081-33.83572262-34.55056168a34.31228171 34.31228171 0 0 0-33.87543468 34.55056168v340.7400174c0 6.35412644-5.04358792 11.51685388-11.27857393 11.51685388H175.51660218a11.43742723 11.43742723 0 0 1-11.27857479-11.51685388v-633.10924966c0-6.35412644 5.04358792-11.51685388 11.27857479-11.51685303h348.60324857c18.62553227 0 33.83572177-15.52789613 33.83572176-34.55056167 0-18.98295178-15.21018951-34.51084792-33.83572176-34.51084791H175.47688841C132.03055076 26.58040126000003 96.48715719 62.83863386999997 96.48715719 107.15866387999995V740.26791353C96.48715719 784.58794352 132.03055076 820.84617615 175.47688841 820.84617615H1010.28993103z m-121.72123068-631.71928362c30.89693895 0 55.99573721-26.091631 55.99573719-58.17996807s-25.09879825-58.1799681-55.99573719-58.17996808c-30.89693895 0-56.0354501 26.091631-56.0354501 58.17996808s25.13851202 58.1799681 55.9957372 58.17996807z m-21.7231684 338.03951368c10.08717495-15.88531565 5.55986073-36.93335876-10.08717582-47.13967412l-218.02595479-143.72239196a45.59085563 45.59085563 0 0 0-24.10596634-6.83068548 43.68461762 43.68461762 0 0 0-23.5499806 6.83068548L434.76495084 435.15071551l-89.11661993-52.26268784a33.08116984 33.08116984 0 0 0-45.94827515 12.50968581 34.03428883 34.03428883 0 0 0 12.31111958 46.58368838l100.87175295 59.05366045a44.47888331 44.47888331 0 0 0 45.9879889-0.55598658l155.23924584-98.29038964 206.23110805 135.2237484a33.31944895 33.31944895 0 0 0 46.54397463-10.24602828z" horiz-adv-x="1256" />
<glyph glyph-name="visualization" unicode="&#59148;" d="M890.75293208 344.28671087c112.98430632 0 223.34753557-73.4298705 274.65710524-182.64141453 0.35741951-0.7942657 0.67512615-1.58853139 0.91340526-2.42251085l0.47655907-1.19139812c0.59569948-1.98566467 0.9928319-3.97132848 1.19139897-6.07613357 0.55598574-2.06509132 0.7942657-4.16989556 0.75455281-6.27469978 0-3.13734989-0.55598574-5.75842695-0.91340612-7.46609789a15.40875573 15.40875573 0 0 0-1.38996517-5.67900028 18.86381224 18.86381224 0 0 0-1.5885314-3.93161559C1114.10046764 20.504268550000006 1003.73723838-52.84617615000002 890.75293208-52.84617615000002c-112.94459342 0-223.30782268 73.46958425-274.61739147 182.68112829a20.96861646 20.96861646 0 0 0-0.83397946 2.26365753 16.71929425 16.71929425 0 0 0-1.19139812 3.45505566 31.88977086 31.88977086 0 0 0-0.59569948 3.93161559 75.69352804 75.69352804 0 0 0-0.63541325 4.40817551 16.83843466 16.83843466 0 0 0-0.0397129 3.57419607s0.43684618 4.16989556 0.91340526 6.27469978c-0.07942666-0.51627284-0.0397129 1.46939183 0.95311899 4.36846175l0.35741953 0.91340525a17.67241325 17.67241325 0 0 0 1.35025228 3.2962032C667.44510941 270.93626703999996 777.80833868 344.28671087 890.75293208 344.28671087z m0-61.63502373c-81.01510879 0-164.33358889-41.22239387-201.98178669-134.90604178l-0.19856622-0.71483903c0-0.39713328-0.07942666-0.7942657-0.1985662-1.46939185l0.1985662-1.42967809 0.23827997-0.91340611c38.00561733-93.96164077 121.12553035-136.01801409 201.94207294-136.01801409 81.01510879 0 165.20728124 43.08891813 202.85547905 136.73285313a9.09434304 9.09434304 0 0 0 0.2382791 0.99283276l0.19856708 1.07225858-0.23827997 1.7473847a1.82681136 1.82681136 0 0 0-0.11913956 0.47655907l-0.11914042 0.47655993c-37.52905825 93.5247946-121.72122984 133.95292277-202.81576528 133.95292277zM1010.32964479 820.84617615C1053.77598244 820.84617615 1089.31937602 784.58794352 1089.31937602 740.26791353v-340.7400174c0-18.98295178-15.24990327-34.55056081-33.83572262-34.55056168a34.31228171 34.31228171 0 0 0-33.87543468 34.55056168v340.7400174c0 6.35412644-5.04358792 11.51685388-11.27857393 11.51685388H175.51660218a11.43742723 11.43742723 0 0 1-11.27857479-11.51685388v-633.10924966c0-6.35412644 5.04358792-11.51685388 11.27857479-11.51685303h348.60324857c18.62553227 0 33.83572177-15.52789613 33.83572176-34.55056167 0-18.98295178-15.21018951-34.51084792-33.83572176-34.51084791H175.47688841C132.03055076 26.58040126000003 96.48715719 62.83863386999997 96.48715719 107.15866387999995V740.26791353C96.48715719 784.58794352 132.03055076 820.84617615 175.47688841 820.84617615H1010.28993103z m-121.72123068-631.71928362c30.89693895 0 55.99573721-26.091631 55.99573719-58.17996807s-25.09879825-58.1799681-55.99573719-58.17996808c-30.89693895 0-56.0354501 26.091631-56.0354501 58.17996808s25.13851202 58.1799681 55.9957372 58.17996807z m-21.7231684 338.03951368c10.08717495-15.88531565 5.55986073-36.93335876-10.08717582-47.13967412l-218.02595479-143.72239196a45.59085563 45.59085563 0 0 0-24.10596634-6.83068548 43.68461762 43.68461762 0 0 0-23.5499806 6.83068548L434.76495084 435.15071551l-89.11661993-52.26268784a33.08116984 33.08116984 0 0 0-45.94827515 12.50968581 34.03428883 34.03428883 0 0 0 12.31111958 46.58368838l100.87175295 59.05366045a44.47888331 44.47888331 0 0 0 45.9879889-0.55598658l155.23924584-98.29038964 206.23110805 135.2237484a33.31944895 33.31944895 0 0 0 46.54397463-10.24602828z" horiz-adv-x="1256" />
<glyph glyph-name="Agent" unicode="&#59149;" d="M948.84617615 81.39041337000003C948.84617615 7.438596159999975 888.2493711-52.84617615000002 813.92311444-52.84617615000002c-74.32625667 0-134.92306171 60.28477231-134.92306172 134.23658952 0 68.74086603 52.35913441 125.6868853 119.4462254 133.36289632v142.50546391H543.20329866v-143.31674956c58.78701363-14.44712674 102.62764846-67.46153128 102.62764761-130.33617686 0-73.95181721-60.62800883-134.23658951-134.92306171-134.23658951-74.32625667 0-134.92306171 60.28477231-134.92306172 134.23658951 0 63.65472829 44.87034271 117.16838485 104.78067557 130.86663353L480.79670134 357.25877360000004H225.95936428v-145.06413426c64.52842063-8.83053317 114.60971452-64.27879461 114.60971452-130.80422597 0-72.61007489-59.7231127-132.02115485-132.70762705-132.0211557C134.84573361-50.66194527000005 75.15382385 8.780337629999963 75.15382385 81.39041337000003c0 59.09904721 39.53457894 109.42996713 93.60989513 126.15493441v178.67008603A28.7070342 28.7070342 0 0 0 197.37714352 415.20329866H480.79670134v85.21620729c-70.26982765 18.28513268-122.28572638 82.00226769-122.28572554 157.57665615C358.5109758 747.76805129 431.93233633 820.84617615 522.20347842 820.84617615c90.23993832 0 163.66129968-73.07812485 163.66129969-162.88121699 0-82.68874073-62.31298681-151.21118367-142.66147945-161.50827174V415.20329866h283.41955782a28.7070342 28.7070342 0 0 0 28.61342454-28.98786485v-177.01631099c54.20012878-17.44264411 93.60989512-68.17920642 93.60989513-127.80870945z m-661.35390775 0a79.66202043 79.66202043 0 0 1-159.26163415 0 79.66202043 79.66202043 0 0 1 159.26163415 0zM623.92623075 657.9961621a101.50432924 101.50432924 0 0 1-101.72275233 101.22350027c-56.16593657 0-101.75395611-45.33839267-101.75395526-101.22350027a101.50432924 101.50432924 0 0 1 101.72275233-101.22349944c56.19714035 0 101.75395611 45.30718889 101.75395526 101.22349944z m-35.60296336-574.39031492c0 42.24926565-34.94769409 77.00974043-77.41538283 77.00974044-42.46768874 0-77.41538284-34.76047394-77.41538284-77.00974044 0-42.24926565 34.94769409-77.04094337 77.3841799-77.04094338 42.49889252 0 77.44658661 34.79167773 77.44658577 77.04094338z m303.01522987-2.18423088c0 42.21806271-34.94769409 77.00974043-77.41538282 77.00974044-42.46768874 0-77.41538284-34.79167773-77.41538284-77.04094337 0-42.24926565 34.94769409-77.00974043 77.38417905-77.00974045 42.49889252 0 77.44658661 34.76047394 77.44658661 77.00974045z" horiz-adv-x="1024" />
<glyph glyph-name="agent" unicode="&#59149;" d="M948.84617615 81.39041337000003C948.84617615 7.438596159999975 888.2493711-52.84617615000002 813.92311444-52.84617615000002c-74.32625667 0-134.92306171 60.28477231-134.92306172 134.23658952 0 68.74086603 52.35913441 125.6868853 119.4462254 133.36289632v142.50546391H543.20329866v-143.31674956c58.78701363-14.44712674 102.62764846-67.46153128 102.62764761-130.33617686 0-73.95181721-60.62800883-134.23658951-134.92306171-134.23658951-74.32625667 0-134.92306171 60.28477231-134.92306172 134.23658951 0 63.65472829 44.87034271 117.16838485 104.78067557 130.86663353L480.79670134 357.25877360000004H225.95936428v-145.06413426c64.52842063-8.83053317 114.60971452-64.27879461 114.60971452-130.80422597 0-72.61007489-59.7231127-132.02115485-132.70762705-132.0211557C134.84573361-50.66194527000005 75.15382385 8.780337629999963 75.15382385 81.39041337000003c0 59.09904721 39.53457894 109.42996713 93.60989513 126.15493441v178.67008603A28.7070342 28.7070342 0 0 0 197.37714352 415.20329866H480.79670134v85.21620729c-70.26982765 18.28513268-122.28572638 82.00226769-122.28572554 157.57665615C358.5109758 747.76805129 431.93233633 820.84617615 522.20347842 820.84617615c90.23993832 0 163.66129968-73.07812485 163.66129969-162.88121699 0-82.68874073-62.31298681-151.21118367-142.66147945-161.50827174V415.20329866h283.41955782a28.7070342 28.7070342 0 0 0 28.61342454-28.98786485v-177.01631099c54.20012878-17.44264411 93.60989512-68.17920642 93.60989513-127.80870945z m-661.35390775 0a79.66202043 79.66202043 0 0 1-159.26163415 0 79.66202043 79.66202043 0 0 1 159.26163415 0zM623.92623075 657.9961621a101.50432924 101.50432924 0 0 1-101.72275233 101.22350027c-56.16593657 0-101.75395611-45.33839267-101.75395526-101.22350027a101.50432924 101.50432924 0 0 1 101.72275233-101.22349944c56.19714035 0 101.75395611 45.30718889 101.75395526 101.22349944z m-35.60296336-574.39031492c0 42.24926565-34.94769409 77.00974043-77.41538283 77.00974044-42.46768874 0-77.41538284-34.76047394-77.41538284-77.00974044 0-42.24926565 34.94769409-77.04094337 77.3841799-77.04094338 42.49889252 0 77.44658661 34.79167773 77.44658577 77.04094338z m303.01522987-2.18423088c0 42.21806271-34.94769409 77.00974043-77.41538282 77.00974044-42.46768874 0-77.41538284-34.79167773-77.41538284-77.04094337 0-42.24926565 34.94769409-77.00974043 77.38417905-77.00974045 42.49889252 0 77.44658661 34.76047394 77.44658661 77.00974045z" horiz-adv-x="1024" />
<glyph glyph-name="Datacenter1" unicode="&#59150;" d="M357.84858287 555.3217476699999H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.35470202c0 11.2734497 9.365635 20.39627222 20.95127295 20.39627222h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.39627222v-13.35470202c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223z m2e-8-162.09486242H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.38938903c0 11.23876183 9.365635 20.36158435 20.95127295 20.36158434h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.36158434v-13.38938903c0-11.23876183-9.365635-20.39627222-20.95127294-20.39627223z m0-162.44173852H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627222v13.35470204c0 11.2734497 9.365635 20.39627222 20.95127295 20.39627133h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.39627133v-13.35470203c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223z m0-162.44173853H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.35470202c0 11.2734497 9.365635 20.39627222 20.95127295 20.39627222h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.39627222v-13.35470202c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223z m493.95053479 324.88347705h-140.55390173a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.38938903c0 11.23876183 9.365635 20.36158435 20.95127296 20.36158434h140.55390173c11.58563795 0 20.95127295-9.12282251 20.95127294-20.36158434v-13.38938903c0-11.23876183-9.365635-20.39627222-20.95127294-20.39627223z m0-162.44173852h-140.55390173a20.67377259 20.67377259 0 0 0-20.95127296 20.39627222v13.35470204c0 11.2734497 9.365635 20.39627222 20.95127296 20.39627133h140.55390173c11.58563795 0 20.95127295-9.12282251 20.95127294-20.39627133v-13.35470204c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627222z m0-162.44173853h-140.55390173a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.35470202c0 11.2734497 9.365635 20.39627222 20.95127296 20.39627222h140.55390173c11.58563795 0 20.95127295-9.12282251 20.95127294-20.39627222v-13.35470202c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223zM460.0380686-66.93798828000001H137.27053174A76.48602039 76.48602039 0 0 0 61.06201172 9.652094860000034V758.34790514C61.06201172 800.5973263 95.26392396 834.93798828 137.27053174 834.93798828h322.76753686c42.00660779 0 76.20852002-34.34066198 76.20852002-76.59008314v-748.69581028A76.48602039 76.48602039 0 0 0 460.0380686-66.93798828000001zM137.27053174 781.86605541a23.48346327 23.48346327 0 0 1-23.41408751-23.51815027v-748.69581028c0-12.97313891 10.51032348-23.55283814 23.4140875-23.55283814h322.76753687a23.48346327 23.48346327 0 0 1 23.41408839 23.55283814V758.34790514a23.48346327 23.48346327 0 0 1-23.41408839 23.55283814H137.27053174zM886.72946826-66.93798828000001h-243.09026356a76.48602039 76.48602039 0 0 0-76.20852002 76.59008314V578.18083533c0 42.21473327 34.20191224 76.59008314 76.20852002 76.59008312h243.09026356c42.00660779 0 76.20852002-34.34066198 76.20852002-76.59008312v-568.52874047A76.48602039 76.48602039 0 0 0 886.72946826-66.93798828000001zM643.6392047 601.69898559a23.48346327 23.48346327 0 0 1-23.37939964-23.51815026v-568.52874047c0-12.97313891 10.47563648-23.55283814 23.37939964-23.55283814h243.09026356a23.48346327 23.48346327 0 0 1 23.41408751 23.55283814V578.18083533a23.48346327 23.48346327 0 0 1-23.4140875 23.51815026h-243.09026357z" horiz-adv-x="1024" />
<glyph glyph-name="datacenter1" unicode="&#59150;" d="M357.84858287 555.3217476699999H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.35470202c0 11.2734497 9.365635 20.39627222 20.95127295 20.39627222h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.39627222v-13.35470202c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223z m2e-8-162.09486242H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.38938903c0 11.23876183 9.365635 20.36158435 20.95127295 20.36158434h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.36158434v-13.38938903c0-11.23876183-9.365635-20.39627222-20.95127294-20.39627223z m0-162.44173852H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627222v13.35470204c0 11.2734497 9.365635 20.39627222 20.95127295 20.39627133h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.39627133v-13.35470203c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223z m0-162.44173853H217.29468116a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.35470202c0 11.2734497 9.365635 20.39627222 20.95127295 20.39627222h140.55390174c11.55095008 0 20.95127295-9.12282251 20.95127294-20.39627222v-13.35470202c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223z m493.95053479 324.88347705h-140.55390173a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.38938903c0 11.23876183 9.365635 20.36158435 20.95127296 20.36158434h140.55390173c11.58563795 0 20.95127295-9.12282251 20.95127294-20.36158434v-13.38938903c0-11.23876183-9.365635-20.39627222-20.95127294-20.39627223z m0-162.44173852h-140.55390173a20.67377259 20.67377259 0 0 0-20.95127296 20.39627222v13.35470204c0 11.2734497 9.365635 20.39627222 20.95127296 20.39627133h140.55390173c11.58563795 0 20.95127295-9.12282251 20.95127294-20.39627133v-13.35470204c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627222z m0-162.44173853h-140.55390173a20.67377259 20.67377259 0 0 0-20.95127296 20.39627223v13.35470202c0 11.2734497 9.365635 20.39627222 20.95127296 20.39627222h140.55390173c11.58563795 0 20.95127295-9.12282251 20.95127294-20.39627222v-13.35470202c0-11.2734497-9.365635-20.39627222-20.95127294-20.39627223zM460.0380686-66.93798828000001H137.27053174A76.48602039 76.48602039 0 0 0 61.06201172 9.652094860000034V758.34790514C61.06201172 800.5973263 95.26392396 834.93798828 137.27053174 834.93798828h322.76753686c42.00660779 0 76.20852002-34.34066198 76.20852002-76.59008314v-748.69581028A76.48602039 76.48602039 0 0 0 460.0380686-66.93798828000001zM137.27053174 781.86605541a23.48346327 23.48346327 0 0 1-23.41408751-23.51815027v-748.69581028c0-12.97313891 10.51032348-23.55283814 23.4140875-23.55283814h322.76753687a23.48346327 23.48346327 0 0 1 23.41408839 23.55283814V758.34790514a23.48346327 23.48346327 0 0 1-23.41408839 23.55283814H137.27053174zM886.72946826-66.93798828000001h-243.09026356a76.48602039 76.48602039 0 0 0-76.20852002 76.59008314V578.18083533c0 42.21473327 34.20191224 76.59008314 76.20852002 76.59008312h243.09026356c42.00660779 0 76.20852002-34.34066198 76.20852002-76.59008312v-568.52874047A76.48602039 76.48602039 0 0 0 886.72946826-66.93798828000001zM643.6392047 601.69898559a23.48346327 23.48346327 0 0 1-23.37939964-23.51815026v-568.52874047c0-12.97313891 10.47563648-23.55283814 23.37939964-23.55283814h243.09026356a23.48346327 23.48346327 0 0 1 23.41408751 23.55283814V578.18083533a23.48346327 23.48346327 0 0 1-23.4140875 23.51815026h-243.09026357z" horiz-adv-x="1024" />
<glyph glyph-name="menu-assets" unicode="&#59142;" d="M926.75021473 834.93798828H97.24978527A36.24414081 36.24414081 0 0 1 61.06201172 798.69384747v-829.38769494c0-20.01037323 16.23376758-36.24414081 36.18777355-36.24414081h829.50042946a36.24414081 36.24414081 0 0 1 36.18777355 36.24414081V798.69384747A36.24414081 36.24414081 0 0 1 926.75021473 834.93798828z m-27.84542078-838.8573927H124.47516632v226.37087012h774.42962763v-226.37087012z m0 281.61077368H124.47516632V501.80754944h774.42962763v-224.11618018z m0 279.35608375H124.47516632V770.3974887100001h774.42962763V557.04745301zM317.53299255 621.24974909a55.69084155 55.69084155 0 0 1 93.40053082 25.02705834 55.80357605 55.80357605 0 0 1-93.28779631 53.99982411 55.91631055 55.91631055 0 0 1-0.11273451-79.02688245zM317.53299255 354.68903076000004a55.69084155 55.69084155 0 0 1 93.45689808 25.02705835 55.8599433 55.8599433 0 1 1-93.45689808-25.0834256zM317.53299255 59.83195366999996a55.69084155 55.69084155 0 0 1 93.40053082 25.02705835 55.8599433 55.8599433 0 1 1-93.40053082-25.02705835z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 191 KiB

After

Width:  |  Height:  |  Size: 191 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

32
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

5
nezha-fronted/src/assets/css/theme.scss
View File

@@ -37,6 +37,11 @@ $--button-gray-border-color: $--primary-border-color; // 灰色按钮边框色
$--button-gray-hover-border-color: $--button-gray-border-color; // 灰色按钮hover边框色
$--button-gray-active-border-color-tint-percent: 30%; // 灰色按钮在focus时边框色相对于主题色变浅的幅度
$--danger-color: #DE5D3F; //全局警告色红色
$--success-color: #23BF9A; //全局正常色绿色
$--warning-color: var(--theme-color); //全局警告橙色
$--suspended-color: #9e9c98; //全局停用色灰色
:export {
themeColor: $--theme-color
}

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

@@ -274,7 +274,7 @@ li{
//background-color: $btn-normal-background-color-hover;
}
.nz-btn.nz-btn-style-pure-white:hover:not(.nz-btn-disabled) {
background-color: #dedede;
background-color: $--primary-border-color;
}
.nz-btn.nz-btn-size-normal-new{
@@ -448,12 +448,12 @@ li{
.el-textarea .el-input__count { /*防止字数限制提示信息遮挡内容和滚动条*/
right: 20px;
}
.no-resize .el-textarea__inner {
/*.no-resize .el-textarea__inner {
padding: 5px 20px 5px 15px;
}
.el-textarea__inner {
padding: 5px 60px 5px 15px;
}
}*/
.el-radio__input .el-radio__inner:hover {
border-color: $btn-normal-background-color-active-new;
}
@@ -1697,23 +1697,6 @@ li{
display: inline-block;
margin-right: 5px;
}
.red {
//background-color: #d64f40 !important;
background-color: $danger-color !important;
}
.green {
//background-color:#50d050 !important;
background-color:$success-color !important;
}
.gray {
background-color: $suspended-color !important;
}
.dark-red {
background-color: #aa0000 !important;
}
.orange {
background-color: #ffa500 !important;
}
.clickable:hover{
cursor:pointer;
@@ -1742,12 +1725,12 @@ li{
line-height: 30px !important;
}*/
.el-textarea:not(.not-fixed-height) textarea {
/*.el-textarea:not(.not-fixed-height) textarea {
height: 140px !important;
}
.nz-message .el-textarea textarea {
height: 70px !important;
}
}*/
/*el-data-picker选中背景色*/
.el-date-table td.current:not(.disabled) span {
background-color: $global-text-color-active;
@@ -2124,9 +2107,6 @@ li{
// border-radius: 4px;
// padding: 7px 10px;
//}
/deep/ .el-input--mini .el-input__icon{
line-height: 24px;
}
.right-box-small-title{
font-family: Roboto-Regular;
font-size: 14px;
@@ -2152,23 +2132,6 @@ li{
border-radius: 2px;
cursor: pointer;
}
.nz-icon-copy {
padding: 2px 6px;
color: $global-text-color-active;
background-color: #FDF5E9;
border-radius: 2px;
cursor: pointer;
}
.nz-icon-minus-position{
display: inline-flex;
flex-direction: column;
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
height: 70px;
justify-content: space-around;
}
.right-box-form .half-form-item-other{
display: inline-block;
width: calc(50% - 30px);
@@ -2195,19 +2158,6 @@ li{
.right-box .right-box-form-minus-box .nz-icon-minus{
color: #FA901C;
cursor: pointer;
}
.right-box .right-box-form-delete .nz-btn-size-alien{
border: none;
border-radius: 0px 0 6px 6px;
padding-bottom: 8px;
padding-top: 3px;
height: 45px;
}
.right-box .right-box-form-delete .nz-btn-size-alien:hover{
background: #D8D7D7;
}
.right-box .right-box-form-delete .nz-icon-delete{
}
.nz-icon-caret-right{
font-size: 12px;

2
nezha-fronted/src/components/charts/chart-list-group.vue
View File

@@ -48,8 +48,6 @@
<template>
<div class="list-width chart-group" :id="'listContainer' + groupId" ref="listContainer"><!--v-drag-->
<span class="temp-dom"></span>
<draggable v-model="dataList" :disabled="panelLock" :move="move" @end="end" @start="start"
:scroll-sensitivity="150"
:options="{

22
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -1,7 +1,7 @@
<style lang="scss" scoped>
.chartBox {
float:left;
padding: 0px 10px 10px 0;
padding: 0 0 10px 0;
position:relative;
box-sizing: border-box;
}
@@ -44,18 +44,10 @@
height: 5px;
box-sizing: inherit;
}
.temp-dom {
visibility: hidden;
font-size: 14px;
position: fixed;
}
</style>
<template>
<div class="list-width" id="listContainer" ref="listContainer"><!--v-drag-->
<span class="temp-dom"></span>
<draggable v-model="dataList" :disabled="panelLock" :move="move" @end="end" @start="start"
:scroll-sensitivity="150"
:options="{
@@ -560,7 +552,7 @@ export default {
from: params.from
}
// alert-rule单独处理
if (param.from == this.$CONSTANTS.fromRoute.alertRule) {
if (param.from == fromRoute.alertRule) {
this.dataList = []
this.dataList.push({
id: -10,
@@ -609,7 +601,7 @@ export default {
return
}
// endpoint单独处理
if (param.from == this.$CONSTANTS.fromRoute.endpoint) {
if (param.from == fromRoute.endpoint) {
this.dataList = []
// this.dataList.push({
// id: -8,
@@ -670,7 +662,7 @@ export default {
})
return
}
if (param.from == this.$CONSTANTS.fromRoute.chartTemp) {
if (param.from == fromRoute.chartTemp) {
this.dataList = this.panelDataList
this.$nextTick(() => {
this.dataList.forEach((item, index) => {
@@ -730,12 +722,12 @@ export default {
this.dataList.forEach((item, index) => {
this.setChartSize(item, index)// 设置该图表宽度
this.$set(item, 'from', params.from)
if (param.from == this.$CONSTANTS.fromRoute.asset) {
if (param.from == fromRoute.asset) {
if (item.type == 'assetInfo') {
this.$set(item, 'draggable', true)
this.$set(item, 'resizable', true)
}
} else if (param.from == this.$CONSTANTS.fromRoute.project) {
} else if (param.from == fromRoute.project) {
if (item.type == 'projectInfo') {
this.$set(item, 'draggable', true)
this.$set(item, 'resizable', true)
@@ -856,7 +848,7 @@ export default {
return
}
if (chartItem.type === 'assetInfo') {
if (chartItem.from != this.$CONSTANTS.fromRoute.endpoint) {
if (chartItem.from != fromRoute.endpoint) {
this.$set(chartItem, 'draggable', true)
this.$set(chartItem, 'resizable', true)
}

2
nezha-fronted/src/components/charts/chart.scss
View File

@@ -202,7 +202,7 @@
position: relative;
}
.resize-box {
border: 1px solid #d8dce1;
border: 1px solid #E7EAED;
position: absolute;
box-sizing: border-box;
width: 100%;

28
nezha-fronted/src/components/common/bottomBox/bottomBox.vue
View File

@@ -21,7 +21,7 @@
<!--机柜-->
<cabinet-tab v-if="from === fromRoute.dc && targetTab === 'cabinet'" :tabs="tabs.dc.cabinet" v-show="subResizeShow" :obj="obj" @changeTab="changeTab"></cabinet-tab>
<!--告警信息-->
<alert-message-tab v-if="((from === fromRoute.rule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
<alert-message-tab v-if="((from === fromRoute.alertRule || from === fromRoute.asset || from === fromRoute.endpoint || from === fromRoute.project ) && targetTab === 'alertMessage')" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></alert-message-tab>
<!--asset页的endpoint列表-->
<endpoint-tab v-if="from === fromRoute.asset && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" @changeTab="changeTab"></endpoint-tab>
<!--endpoint-query-->
@@ -42,9 +42,12 @@
<!--user列表的两个日志-->
<operation-log-tab v-if="from === fromRoute.user && targetTab === 'operationLogTab'" :from="from" :obj="obj" :tabs="tabs.user.operationLog" @changeTab="changeTab"></operation-log-tab>
<terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab"></terminal-log-tab>
<!-- asset列表的3个 -->
<panel-tab-new v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab="targetTab" @changeTab="changeTab"></alertMessageTabNew>
<endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
<!--module列表的tab-->
<endpointTabNew v-if="from === fromRoute.module && targetTab === fromRoute.endpoint" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></endpointTabNew>
<endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
<alertMessageTabNew v-if="from === fromRoute.module && targetTab === 'moduleAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" @changeTab="changeTab" :targetTab="targetTab"></alertMessageTabNew>
<panel-tab-new v-if="from === fromRoute.module && targetTab === 'panel'" v-show="subResizeShow" :detail="detail" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--endpoint列表的tab-->
@@ -65,7 +68,6 @@ import alertMessageTabNew from './tabs/alertMessageTabNew'
import endpointQuery from './tabs/endpointQuery'
import endpointTab from './tabs/endpointTab'
import endpointTabNew from './tabs/endpointTabNew'
import panelTab from './tabs/panelTab'
import panelTabNew from './tabs/panelTabNew'
import terminalLogRecordTab from './tabs/terminalLogRecordTab'
import terminalLogMonitorTab from './tabs/terminalLogMonitorTab'
@@ -81,7 +83,6 @@ export default {
cabinetTab,
alertMessageTab,
endpointTab,
panelTab,
terminalLogRecordTab,
terminalLogMonitorTab,
operationLogTab,
@@ -120,6 +121,23 @@ export default {
]
// module tab
},
asset: {
panel: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: true },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: 'Endpoints', active: false }
],
alertMessage: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
{ prop: 'endpointTab', name: 'Endpoints', active: false }
],
endpoint: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: 'Endpoints', active: true }
]
},
module: {
moduleTabTitle: [
{ prop: 'endpoint', name: this.$t('asset.endpoint') },

7
nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
View File

@@ -34,7 +34,7 @@
></element-set>
</transition>
<div class="sub-container">
<div class="nz-table2">
<div :class="targetTab === 'panel' ? 'bottom-panel' : 'nz-table2'">
<slot></slot>
</div>
<div class="pagination-bottom">
@@ -177,6 +177,11 @@ export default {
transition: .4s height;
}
.bottom-panel {
padding-top: 15px;
background-color: white;
}
.resize-modal {
width: calc(100% - 240px);
opacity: 0.6;

54
nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
View File

@@ -8,6 +8,24 @@
class="full-width-height"
>
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-if="from === fromRoute.asset" v-slot:top-tool-right>
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
<export-excel
id="asset-list"
:params="searchLabel"
:permissions="{import: 'panel_chart_add', export: 'panel_view'}"
class="top-tool-export margin-r-10"
export-file-name="asset-charts"
export-url="visual/panel/export"
import-url="visual/panel/import"
@afterImport="getTableData"
>
<template slot="optionZone">
<button id="asset-create-asset" v-has="'panel_chart_add'" :title="$t('overall.createAsset')" class="top-tool-btn" @click.stop="addChart">
<i class="nz-icon nz-icon-create-square"></i></button>
</template>
</export-excel>
</template>
<template v-slot>
<div class="panel">
<!--图表-->
@@ -30,11 +48,13 @@
</template>
<script>
import ChartBox from '../../../page/dashboard/chartBox'
import ChartList from '../../../charts/chart-list'
import chartBox from '../../../page/dashboard/chartBox'
import chartList from '../../../charts/chart-list'
import bus from '../../../../libs/bus'
import exportXLSX from '@/components/common/exportXLSX'
import subDataListMixin from '@/components/common/mixin/subDataList'
import nzBottomDataList from '@/components/common/bottomBox/nzBottomDataList'
import { fromRoute } from '@/components/common/js/constants'
export default {
name: 'panelTabNew',
@@ -47,6 +67,7 @@ export default {
},
data () {
return {
fromRoute,
panelLock: true,
showTopBtn: false, // top按钮
visible: false,
@@ -75,7 +96,9 @@ export default {
},
elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
panel: '',
sync: 0
sync: 0,
name: '',
remark: ''
},
pageObj: {
pageNo: 1,
@@ -113,9 +136,10 @@ export default {
}
},
components: {
'chart-box': ChartBox,
'chart-list': ChartList,
nzBottomDataList
chartBox,
chartList,
nzBottomDataList,
'export-excel': exportXLSX
},
methods: {
// 刷新
@@ -221,9 +245,14 @@ export default {
}
this.$refs.pickTime.$refs.timePicker.searchTime = this.searchTime
},
getVarType (from) {
if (from === this.fromRoute.asset) {
return 1
}
},
// 公用操作
getTableData (linkId) {
if (this.from == this.$CONSTANTS.fromRoute.rule || this.from == this.$CONSTANTS.fromRoute.endpoint) {
if (this.from === this.fromRoute.alertRule || this.from === this.fromRoute.endpoint) {
this.getData(this.filter)
} else {
if (this.from == this.$CONSTANTS.fromRoute.chartTemp) {
@@ -240,7 +269,7 @@ export default {
this.getData(this.filter)
}
} else {
this.$get('panel', { type: this.from, link: linkId }).then(response => {
this.$get('visual/panel', { type: this.from, link: linkId }).then(response => {
if (response.code === 200) {
this.panelData = response.data.list
if (this.panelData.length > 0) {
@@ -336,20 +365,20 @@ export default {
this.$refs.queryPanel.focus()
},
syncChart: function () {
if (this.from == this.$CONSTANTS.fromRoute.asset || this.from == this.$CONSTANTS.fromRoute.model) {
if (this.from == this.fromRoute.asset || this.from == this.fromRoute.model) {
this.$confirm(this.$t('tip.syncTip'), {
confirmButtonText: this.$t('tip.yes'),
cancelButtonText: this.$t('tip.no'),
type: 'warning'
}).then(() => {
const param = {
modelId: this.from == this.$CONSTANTS.fromRoute.model ? this.obj.id : null,
assetId: this.from == this.$CONSTANTS.fromRoute.asset ? this.obj.id : null
modelId: this.from == this.fromRoute.model ? this.obj.id : null,
assetId: this.from == this.fromRoute.asset ? this.obj.id : null
}
this.$put('/model/syncChart', param).then(response => {
if (response.code == 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.syncSuccess') })
if (this.from == this.$CONSTANTS.fromRoute.asset) {
if (this.from == this.fromRoute.asset) {
this.refresh()
}
} else {
@@ -478,7 +507,6 @@ export default {
/* begin-chart list*/
.table-list {
margin-top: 6px;
overflow-y: auto;
height: calc(100% - 56px);
}

202
nezha-fronted/src/components/common/clickSearch.vue
View File

@@ -1,202 +0,0 @@
<template>
<div class="search-box__container">
<div v-for="(data, type, index) in titleSearchListCopy" v-if="data.show" :key="index" class="search-content-box">
<label class="search-title">{{data.label}}:</label>
<el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValueOut[data.key]">
<template v-for="(item, j) in data.children">
<el-checkbox v-if="j < 20" v-show="!data.showMore || j < data.index" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
</template>
</el-checkbox-group>
<div v-for="(item, j) in data.children" v-else-if="data.type === 'dropdownCheckBox'" :key="j" class="nz-label-search">
<el-cascader
:ref="`${type}_cascader`"
:options="item.children"
:placeholder="item.name"
:props="{ multiple: true, label: 'name', value: 'id' }"
popper-class="click-search-dropdown"
size="mini"
@change="casChange(type, data.key)"
></el-cascader>
</div>
<span v-show="contentWidth <= data.width" class="search-more" @click="changShowMore(index)">更多 <i :class="data.showMore?'el-icon-arrow-down':'el-icon-arrow-up'"/></span>
</div>
</div>
</template>
<script>
export default {
name: 'clickSearch',
props: {
titleSearchList: {
/*
* project: {
label: 'Project', // 显示的label
key: 'projectIds', // 搜索使用的key
type: 'checkBox', // 类型
children: [] // 需要展示的子集
showMore: false, // 是否需要显示更多
index: 最大宽度的个数, // 是否需要显示更多
},
* */
type: Object,
default () {
return {
project: {
label: 'Project', // 显示的label
key: 'projectIds', // 搜索使用的key
type: 'checkBox', // 类型
children: [], // 需要展示的子集
show: false,
showMore: false,
index: 10 // 是否需要显示更多
}
}
}
},
selectValue: {
type: Object
}
},
computed: { },
watch: {
titleSearchList: {
immediate: true,
deep: true,
handler (n) {
this.titleSearchListCopy = JSON.parse(JSON.stringify(n))
this.$nextTick(() => {
this.needMore()
})
}
},
selectValue: {
immediate: true,
deep: true,
handler (n) {
this.selectValueOut = { ...n }
}
},
selectValueOut: {
immediate: true,
deep: true,
handler (n) {
this.$emit('reload', this.selectValueOut)
}
}
},
data () {
return {
selectValueOut: {},
contentWidth: 0, // 搜索框内部区域的宽度
titleSearchListCopy: {}
}
},
mounted () {
window.addEventListener('resize', this.needMore)
},
methods: {
casChange (type, key) {
const cascs = this.$refs[`${type}_cascader`]
if (type === 'assetLabel') { // label特殊处理，组织成{“id”:[“张三”,"lw"],"id":["李四"]}
const values = {}
cascs.forEach(c => {
const nodes = c.getCheckedNodes()
nodes.forEach(n => {
const metaId = n.data.metaId
if (values[`${metaId}`]) {
values[`${metaId}`].push(n.data.name)
} else {
values[`${metaId}`] = [n.data.name]
}
})
})
this.selectValueOut[key] = JSON.stringify(values)
} else {
const values = new Set()
cascs.forEach(c => {
const nodes = c.getCheckedNodes()
nodes.forEach(n => values.add(n.data.id))
})
this.selectValueOut[key] = [...values]
}
},
needMore (key) {
/* setTimeout(() => {
this.contentWidth = this.$refs.searchContent[0].$el.offsetWidth
Object.keys(this.titleSearchListCopy).forEach(key => {
this.titleSearchListCopy[key].width = 0
this.titleSearchListCopy[key].showMore = false
this.titleSearchListCopy[key].children.forEach((item, i) => {
/!* (基础宽度 + 文字宽度) 总和 》 文本长时 显示更多 *!/
this.titleSearchListCopy[key].width += 60 + item.name.length * 12
if (this.titleSearchListCopy[key].width > this.contentWidth && !this.titleSearchListCopy[key].showMore) {
this.titleSearchListCopy[key].showMore = true
this.titleSearchListCopy[key].index = i - 1
}
})
}, 100)
}) */
},
changShowMore (key) {
this.titleSearchListCopy[key].showMore = !this.titleSearchListCopy[key].showMore
}
},
destroyed () {
window.removeEventListener('resize', this.needMore)
}
}
</script>
<style lang="scss" scoped>
.search-box__container {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #E7EAED;
background-color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
padding: 15px 0 15px 17px;
}
.search-title {
position: absolute;
width: 130px;
left: 0;
line-height: 18px;
font-size: 14px;
color: #666666;
letter-spacing: 0;
font-weight: 500;
overflow: hidden;
}
.search-content-box {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
padding-left: 130px;
padding-right: 80px;
width: calc(100vw - 333px);
box-sizing: border-box;
}
.search-more {
position: absolute;
right: 0;
top: 50%;
height: 22px;
line-height: 22px;
padding: 0 8px;
transform: translateY(-50%);
font-size: 12px;
color: #333333;
box-sizing: border-box;
border: 1px solid $--primary-border-color;
border-radius: 2px;
i {
color: #999;
font-size: 12px;
}
}
</style>

267
nezha-fronted/src/components/common/labelFilter/clickSearch.vue Normal file
View File

@@ -0,0 +1,267 @@
<template>
<div :style="{'height': height + 'px'}" class="search-box__container">
<div v-for="(data, type, index) in titleSearchListCopy" v-if="data.show" :key="index" ref="searchContentBox" class="search-content-box">
<label class="search-title">{{data.label}}:</label>
<el-checkbox-group v-if="data.type === 'checkBox'" ref="searchContent" v-model="selectValueOut[data.key]">
<template v-for="(item, j) in data.children">
<el-checkbox v-show="!data.showMore || j < data.index" :key="j" :label="item.value">{{item.key || item.name || item.label}}</el-checkbox>
</template>
</el-checkbox-group>
<dropdown
v-for="(item, j) in data.children"
v-else-if="data.type === 'dropdownCheckBox'"
:key="j"
:ref="`${type}_cascader`"
:collapse-tags="true"
:item="item"
@blur="casFocus"
@change="casChange(type, data.key)"
@focus="casFocus"
></dropdown>
<span v-show="contentWidth <= data.width" class="search-more" @click="changShowMore(type)">更多 <i :class="data.showMore?'el-icon-arrow-down':'el-icon-arrow-up'"/></span>
</div>
</div>
</template>
<script>
import dropdown from '@/components/common/labelFilter/dropdown'
export default {
name: 'clickSearch',
components: {
dropdown
},
props: {
titleSearchList: {
/*
* project: {
label: 'Project', // 显示的label
key: 'projectIds', // 搜索使用的key
type: 'checkBox', // 类型
children: [] // 需要展示的子集
showMore: false, // 是否需要显示更多
index: 最大宽度的个数, // 是否需要显示更多
},
* */
type: Object,
default () {
return {
project: {
label: 'Project', // 显示的label
key: 'projectIds', // 搜索使用的key
type: 'checkBox', // 类型
children: [], // 需要展示的子集
show: false,
showMore: false,
index: 10 // 是否需要显示更多
}
}
}
},
selectValue: {
type: Object
}
},
computed: {
height () {
const paddingHeight = 30
const checkBoxRowHeight = 31
const labelRowHeight = 38
let checkBoxRowCount = 0
let labelRowCount = 0
Object.keys(this.titleSearchListCopy).forEach(type => {
if (this.titleSearchListCopy[type].type === 'checkBox') {
checkBoxRowCount++
} else if (this.titleSearchListCopy[type].type === 'dropdownCheckBox') {
labelRowCount++
}
})
return paddingHeight + checkBoxRowHeight * checkBoxRowCount + labelRowHeight * labelRowCount + 2
}
},
watch: {
titleSearchList: {
immediate: true,
deep: true,
handler (n) {
this.titleSearchListCopy = JSON.parse(JSON.stringify(n))
this.$nextTick(() => {
this.needMore()
})
}
},
selectValue: {
immediate: true,
deep: true,
handler (n) {
this.selectValueOut = { ...n, change: 0 }
}
},
selectValueOut: {
immediate: true,
deep: true,
handler (n) {
this.$emit('reload', n)
}
}
},
data () {
return {
selectValueOut: {},
contentWidth: 0, // 搜索框内部区域的宽度
titleSearchListCopy: {}
}
},
mounted () {
window.addEventListener('resize', this.needMore)
},
methods: {
casChange (type, key) {
this.$nextTick(() => {
const cascs = this.$refs[`${type}_cascader`]
if (type === 'assetLabel') { // label特殊处理，组织成{“id”:[“张三”,"lw"],"id":["李四"]}
const values = {}
cascs.forEach(c => {
const nodes = c.$refs.cascader.getCheckedNodes()
nodes.forEach(n => {
const metaId = n.data.metaId
if (values[metaId]) {
values[metaId].push(n.data.name)
} else {
values[metaId] = [n.data.name]
}
})
})
const valuesStr = JSON.stringify(values)
this.selectValueOut[key] = valuesStr === '{}' || !valuesStr ? null : valuesStr
} else {
const values = new Set()
cascs.forEach(c => {
const nodes = c.$refs.cascader.getCheckedNodes()
nodes.forEach(n => values.add(n.data.id))
})
this.selectValueOut[key] = [...values]
}
this.selectValueOut.change++
})
},
casFocus (item, isFocus, e) {
this.$set(item, 'isFocus', isFocus)
},
needMore (key) {
// setTimeout(() => {
this.$nextTick(() => {
this.contentWidth = this.$refs.searchContentBox[0].offsetWidth - 210
Object.keys(this.titleSearchListCopy).forEach(key => {
this.titleSearchListCopy[key].width = 0
this.titleSearchListCopy[key].showMore = false
let index = -1
this.titleSearchListCopy[key].children.forEach((item, i) => {
/* (基础宽度 + 文字宽度) 总和大于文本长时 显示更多 */
if (index === -1) {
if (this.titleSearchListCopy[key].width < this.contentWidth) {
this.titleSearchListCopy[key].width += this.getDomWidth(this.titleSearchListCopy[key], item, i)
} else {
this.titleSearchListCopy[key].showMore = true
this.titleSearchListCopy[key].index = i - 1
index = i
}
}
})
})
})
},
computeDistance (str) {
let width = 0
const html = document.querySelector('.temp-dom')
html.innerText = str
width = html.offsetWidth
return width
},
getDomWidth (parentData, item, index) {
let width
if (parentData.type === 'dropdownCheckBox') {
width = this.computeDistance(`${item.name}:`)
const marginRight = 20
width = width + 182 + marginRight// 182是label框的宽度除去name外的部分
} else {
width = this.computeDistance(item.name)
width = width > 150 ? 150 : width
const paddingLeft = 10
const checkBox = 14
const marginRight = 30
width = width + paddingLeft + checkBox + marginRight
}
return width
},
changShowMore (key) {
this.titleSearchListCopy[key].showMore = !this.titleSearchListCopy[key].showMore
}
},
destroyed () {
window.removeEventListener('resize', this.needMore)
}
}
</script>
<style lang="scss" scoped>
.search-box__container {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 15px 0 15px 17px;
box-sizing: border-box;
border: 1px solid #E7EAED;
background-color: #FFFFFF;
overflow-x: hidden;
overflow-y: auto;
}
.search-title {
position: absolute;
width: 130px;
top: 7px;
left: 0;
line-height: 18px;
font-size: 14px;
color: #666666;
letter-spacing: 0;
font-weight: 500;
overflow: hidden;
}
.search-content-box {
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
padding: 5px 80px 5px 130px;
width: calc(100vw - 333px);
box-sizing: border-box;
/deep/ .el-checkbox__label {
max-width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow-x: hidden;
vertical-align: text-bottom;
}
}
.search-more {
position: absolute;
right: 4px;
top: 4px;
height: 22px;
line-height: 22px;
padding: 0 8px;
font-size: 12px;
color: #333333;
box-sizing: border-box;
border: 1px solid $--primary-border-color;
border-radius: 2px;
cursor: pointer;
i {
color: #999;
font-size: 12px;
}
}
</style>

61
nezha-fronted/src/components/common/labelFilter/dropdown.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<div
:class="{'is-focus': item.isFocus, 'is-hover': isHover}"
class="nz-label-search"
>
<div class="nz-label-search__label"><span>{{item.name}}:</span></div>
<el-cascader
ref="cascader"
v-bind="$attrs"
:collapse-tags="collapseTags"
:options="item.children"
:props="{ multiple: true, label: 'name', value: 'id' }"
placeholder=""
popper-class="click-search-dropdown"
size="mini"
@blur="$emit('blur', item, false, $event)"
@change="$emit('change')"
@focus="$emit('focus', item, true, $event)"
></el-cascader>
</div>
</template>
<script>
export default {
name: 'dropdown',
props: {
item: Object,
size: String,
collapseTags: {
type: Boolean,
default: false
}
},
methods: {
casHover (item, isHover, e) {
return this.$set(item, 'isHover', isHover)
}
},
computed: {
isHover () {
if (this.ready) {
return this.$refs.cascader.inputHover
} else {
return false
}
}
},
data () {
return {
ready: false
}
},
mounted () {
setTimeout(() => { this.ready = true }, 1000)
}
}
</script>
<style scoped>
</style>

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

@@ -274,7 +274,7 @@ const en = {
null: 'None'
},
width: 'Width', // "宽"
high: 'High', // "高"
high: 'Height', // "高"
metric: 'Metric', // "指标"
option: 'Option',
addMetric: 'Add metric', // "添加指标"

3
nezha-fronted/src/components/common/login.vue
View File

@@ -77,7 +77,8 @@ export default {
if (this.loading) {
return
}
if (this.license.valid && this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
// if (this.license.valid && this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
this.loading = true
this.$post('sys/login', this.loginData).then(res => {
if (res.code == 200) {

6
nezha-fronted/src/components/common/mixin/dataList.js
View File

@@ -127,8 +127,12 @@ export default {
}
},
edit (u) {
this.object = JSON.parse(JSON.stringify(u))
this.$get(`${this.url}/${u.id}`).then(response => {
if (response.code === 200) {
this.object = response.data
this.rightBox.show = true
}
})
},
esc () {
this.rightBox.show = false

5
nezha-fronted/src/components/common/mixin/table.js
View File

@@ -41,8 +41,8 @@ export default {
this.$emit('cli', row)
break
}
case 'copy': {
this.$emit('copy', row)
case 'duplicate': {
this.$emit('duplicate', row)
break
}
default:
@@ -57,7 +57,6 @@ export default {
},
dragend () {
this.$nextTick(() => {
console.info(1)
this.$refs.dataTable.doLayout()
})
},

2
nezha-fronted/src/components/common/multipleTime.vue
View File

@@ -69,7 +69,7 @@
}
.nz-icon-compare{
background: #FFFFFF;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
border-radius: 2px;
padding: 6px 8px;
}

2
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -3,7 +3,7 @@
<time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange"></time-picker>
<multipleTime ref="multipleTime" v-if="showMultiple" :stepSearchTime="searchTime" @change="dateChange(searchTime)" class="multiple-time"/>
<chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
<div v-show="useRefresh" class="top-tool-btn-group">
<div v-show="useRefresh" class="top-tool-btn-group margin-r-10">
<button :id="id+'-refresh'" class="top-tool-btn" @click="refreshDataFunc">
<i class="global-active-color nz-icon nz-icon-refresh" style="font-size: 14px"></i>&nbsp;
<span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>

6
nezha-fronted/src/components/common/project/L5/topoTooltip.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="tooltip-box" style="display: flex;" v-if="(isChart||chartData.tooltipShow)&&chartData.expressArr.length">
<span class="temp-dom"></span>
<div class="tooltip-box-chart" style="" v-if="isChart||(chartData.displayChart&&chartData.tooltipShow&&chartData.expressArr.length)">
<line-chart-block v-show="isChart || chartData.type !== 'table'"
:key="'inner' + chartData.id"
@@ -324,11 +323,6 @@ export default {
</script>
<style lang="scss" scoped>
.temp-dom {
visibility: hidden;
font-size: 14px;
position: fixed;
}
.tooltip-box{
background: #FFFFFF;
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.11);

2
nezha-fronted/src/components/common/project/L5/topologyTopTool.vue
View File

@@ -204,7 +204,7 @@ export default {
.top-tool-item{
cursor: pointer;
background: #FFFFFF;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
border-radius: 2px;
padding: 8px 11px;
line-height: 14px;

4
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -2458,7 +2458,7 @@ export default {
.el-dropdown-title {
background: #FFFFFF;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
border-radius: 2px;
width: 66px;
height: 28px;
@@ -2615,7 +2615,7 @@ export default {
.top-tool-btn{
height: 32px;
width: 32px;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
outline: none;
border-radius: 2px;
background-color: #F9F9F9;

4
nezha-fronted/src/components/common/project/topologyPrev.vue
View File

@@ -2450,7 +2450,7 @@
.el-dropdown-title {
background: #FFFFFF;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
border-radius: 2px;
width: 66px;
height: 28px;
@@ -2607,7 +2607,7 @@
.top-tool-btn{
height: 32px;
width: 32px;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
outline: none;
border-radius: 2px;
background-color: #F9F9F9;

4
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -1130,7 +1130,7 @@ export default {
.add-endpoint{
display: inline-block;
background: #F9F9F9;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
border-radius: 2px;
width: 28px;
height: 28px;
@@ -1141,7 +1141,7 @@ export default {
.top-tool-btn{
height: 32px;
width: 32px;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
outline: none;
border-radius: 2px;
background-color: #F9F9F9;

173
nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
View File

@@ -8,12 +8,12 @@
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="assetEditForm" :model="editAsset" :rules="rules" label-position="top" label-width="120px">
<el-form ref="form" :model="editAsset" :rules="rules" label-position="top" label-width="120px">
<el-form-item :label="$t('overall.name')" prop="name">
<el-input v-model="editAsset.name" size="small"/>
</el-form-item>
<el-form-item :label="$t('overall.type')" prop="typeId">
<select-asset-type id="asset-type" :asset-type-data="typeData" :show-type="editAsset.type" size="small"
<select-asset-type id="asset-type" :asset-type-data="options.typeOptions" :show-type="editAsset.type" size="small"
@selectAssetType="selectType">
<template v-slot:trigger>
<el-input v-model="editAsset.type.name" :clearable="true" :readonly="true" placeholder="" size="small"></el-input>
@@ -27,12 +27,12 @@
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
value-key="id">
<el-option v-for="p in parentAssetData" :key="p.id" :label="p.name" :value="p.id"></el-option>
<el-option v-for="p in options.parentAssetOptions" :key="p.id" :label="p.name" :value="p.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('asset.state')" prop="stateId">
<el-select v-model="editAsset.stateId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="state in stateData" :key="state.id" :label="state.name" :value="state.id"></el-option>
<el-option v-for="state in options.stateOptions" :key="state.id" :label="state.name" :value="state.id"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('asset.manageIp')" prop="manageIp">
@@ -47,18 +47,18 @@
<el-form-item :label="$t('asset.brandAndModel')" class="placeholder-emphasize" prop="brandAndModel">
<el-cascader
v-if="!vmLock"
v-model="brandAndModelData"
:options="brandData"
v-model="editAsset.brandAndModel"
:placeholder="lockModelInputValue"
:props="modelCascProp"
popper-class="prevent-clickoutside"
:options="options.brandAndModelOptions"
:props="{ label: 'name', value: 'id' }"
popper-class="prevent-clickoutside limit-height"
size="small"
style="width: 100%;"
></el-cascader>
<el-input v-else v-model="lockModelInputValue" disabled size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('asset.location')" prop="location">
<location-cascader v-if="!vmLock" ref="locationCascader" :dc-option="dcData" :default-model-u-size="1" @change="setLocationData"></location-cascader>
<location-cascader v-if="!vmLock" ref="locationCascader" :dc-option="options.dcOptions" :default-model-u-size="1" @change="setLocationData"></location-cascader>
<el-input v-else v-model="lockLocationInputValue" disabled size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('asset.purchaseDate')" prop="purchaseDate">
@@ -80,7 +80,6 @@
<div class="form__labels-label">
<span>{{label.name}}</span>
<div>
<el-checkbox v-model="label.action" :false-label="0" :label="$t('overall.delete')" :true-label="1" size="small" style="padding-right: 20px;"></el-checkbox>
<span @click="removeLabel(label)"><i class="nz-icon nz-icon-minus"></i></span>
</div>
</div>
@@ -162,7 +161,7 @@
<button class="form__create-btn" type="button" @click.stop><i class="nz-icon nz-icon-create-square"></i></button>
<el-cascader
v-if="labelCascShow"
:options="fieldGroupData"
:options="options.fieldGroupOptions"
:props="labelCascProp"
class="hide-input"
popper-class="prevent-clickoutside"
@@ -218,7 +217,7 @@
<div class="form__sub-title">SNMP</div>
<el-form-item :label="$t('asset.snmpCredential')" prop="snmpCredentialId">
<el-select v-model="editAsset.snmpCredentialId" class="right-box__select" popper-class="right-box-select-dropdown prevent-clickoutside" size="small" value-key="id">
<el-option v-for="snmp in snmpCredentialData" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
<el-option v-for="snmp in options.snmpCredentialOptions" :key="snmp.id" :label="snmp.name" :value="snmp.id"></el-option>
</el-select>
</el-form-item>
</template>
@@ -250,24 +249,6 @@ export default {
props: {
obj: {
type: Object
},
dcData: {
type: Array
},
brandData: {
type: Array
},
stateData: {
type: Array
},
typeData: {
type: Array
},
snmpCredentialData: {
type: Array
},
fieldGroupData: {
type: Array
}
},
data () {
@@ -282,9 +263,18 @@ export default {
lockModelInputValue: '', // model锁定时的显示内容
lockLocationInputValue: '', // location锁定时显示的内容
cabinetData: [],
parentAssetData: [],
metaData: [], // 下拉选项列表
options: { // 下拉选项的option数据
cabinetOptions: [],
metaOptions: [],
dcOptions: [],
stateOptions: [],
snmpCredentialOptions: [],
brandAndModelOptions: [],
modelOptions: [],
fieldGroupOptions: [],
parentAssetOptions: [],
typeOptions: []
},
labelCascShow: true, // 用来控制label的cascader的重新渲染
rules: {
name: [
@@ -306,6 +296,9 @@ export default {
stateId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
brandAndModel: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
dcId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
@@ -325,8 +318,7 @@ export default {
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
},
brandAndModelData: [],
modelCascProp: {
/* modelCascProp: {
lazy: true,
value: 'id',
label: 'name',
@@ -342,7 +334,7 @@ export default {
}
})
}
},
}, */
labelCascProp: {
lazy: true,
value: 'id',
@@ -356,7 +348,7 @@ export default {
leaf: level >= 1,
disabled: vm.editAsset.fields.some(a => a.id === item.id)
}))
vm.metaData = meta
vm.options.metaOptions = meta
resolve(meta)
}
})
@@ -370,6 +362,7 @@ export default {
immediate: true,
handler (n) {
this.editAsset = JSON.parse(JSON.stringify(n))
this.editAsset.brandAndModel = [this.editAsset.brand.id, this.editAsset.model.id]
this.editAsset.stateId = n.state ? n.state.id : ''
this.editAsset.typeId = n.type ? n.type.id : ''
this.$nextTick(() => {
@@ -400,11 +393,11 @@ export default {
deep: true,
immediate: true,
handler (n) {
if (n) {
if (n && n !== -1) {
if (this.vmLock) {
if (this.parentAssetData.length === 0) {
if (this.options.parentAssetOptions.length === 0) {
this.getParentAsset().then(res => {
const asset = this.parentAssetData.find(a => a.id === n)
const asset = this.options.parentAssetOptions.find(a => a.id === n)
if (asset) {
this.editAsset.brandId = asset.brand.id
this.editAsset.modelId = asset.model.id
@@ -418,7 +411,7 @@ export default {
}
})
} else {
const asset = this.parentAssetData.find(a => a.id === n)
const asset = this.options.parentAssetOptions.find(a => a.id === n)
if (asset) {
this.editAsset.brandId = asset.brand.id
this.editAsset.modelId = asset.model.id
@@ -438,6 +431,12 @@ export default {
},
mounted () {
this.getParentAsset()
this.getModelData()
this.getStateData()
this.getDcData()
this.getTypeTreeData()
this.getSnmpCredentialData()
this.getFieldGroupData()
},
methods: {
clickOutside () {
@@ -482,7 +481,7 @@ export default {
return new Promise(resolve => {
this.$get(this.url, { pageSize: -1, vmh: 1 }).then(response => {
if (response.code === 200) {
this.parentAssetData = response.data.list
this.options.parentAssetOptions = response.data.list
}
resolve()
})
@@ -493,7 +492,7 @@ export default {
this.editAsset.typeId = type.id ? type.id : ''
},
addLabel ([groupId, metaId]) {
const label = this.metaData.find(m => m.id === metaId)
const label = this.options.metaOptions.find(m => m.id === metaId)
this.editAsset.fields.push({ ...label, value: this.blankLabelValue(label), action: 0 })
this.labelCascShow = false
this.$nextTick(() => {
@@ -509,20 +508,25 @@ export default {
return new Promise(resolve => {
this.$get('cabinet?dcId=' + id).then(response => {
if (response.code === 200) {
this.cabinetData = response.data.list
for (let i = 0; i < this.cabinetData.length; i++) {
this.$set(this.cabinetData[i], 'children', this.dcData)
this.options.cabinetOptions = response.data.list
for (let i = 0; i < this.options.cabinetOptions.length; i++) {
this.$set(this.options.cabinetOptions[i], 'children', this.options.dcOptions)
}
}
resolve(this.cabinetData)
resolve(this.options.cabinetOptions)
})
})
},
save () {
if (this.prevent_opt.save) { return } ;
if (this.prevent_opt.save) { return }
this.prevent_opt.save = true
this.$refs.assetEditForm.validate((valid) => {
if (this.editAsset.brandAndModel.length === 2) {
this.editAsset.brandId = parseInt(this.editAsset.brandAndModel[0])
this.editAsset.modelId = parseInt(this.editAsset.brandAndModel[1])
}
this.$refs.form.validate((valid) => {
if (valid) {
if (this.editAsset.id) {
this.$put(this.url, this.editAsset).then(res => {
@@ -550,6 +554,77 @@ export default {
return false
}
})
},
getStateData () {
return new Promise(resolve => {
this.$get('asset/stateConf?pageSize=-1').then(response => {
if (response.code === 200) {
this.options.stateOptions = response.data.list
}
resolve()
})
})
},
getDcData () {
return new Promise(resolve => {
this.$get('dc', { pageSize: -1 }).then(response => {
if (response.code === 200) {
this.dcData = response.data.list
this.options.dcOptions = response.data.list.map(d => { return { ...d, value: d.id } })
}
resolve()
})
})
},
getTypeTreeData () {
return new Promise(resolve => {
this.$get('asset/typeConf/tree').then(response => {
if (response.code === 200) {
this.options.typeOptions = response.data.list
}
resolve()
})
})
},
getSnmpCredentialData () {
return new Promise(resolve => {
this.$get('snmp/credential', { pageSize: -1 }).then(response => {
if (response.code === 200) {
this.options.snmpCredentialOptions = response.data.list
}
resolve()
})
})
},
getFieldGroupData () {
return new Promise(resolve => {
this.$get('asset/field/group', { pageSize: -1 }).then(response => {
if (response.code === 200) {
this.options.fieldGroupOptions = response.data.list
}
resolve()
})
})
},
getModelData () {
return new Promise(resolve => {
this.$get('asset/model?pageSize=-1').then(response => {
if (response.code === 200) {
this.options.modelOptions = response.data.list
const titleSearchData = {}
this.options.modelOptions.forEach(m => {
if (titleSearchData[m.brand.name]) {
titleSearchData[m.brand.name].children.push(m)
} else {
titleSearchData[m.brand.name] = { ...m.brand, children: [m] }
}
})
this.options.brandAndModelOptions = Object.keys(titleSearchData).map(b => titleSearchData[b])
}
resolve()
})
})
}
}
}

6
nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue
View File

@@ -558,7 +558,7 @@ export default {
}
</script>
<style scoped>
<style lang="scss" scoped>
.nz-icon.nz-icon-shanchu1 {
font-size: 14px;
}
@@ -921,7 +921,7 @@ export default {
.add-endpoint{
display: inline-block;
background: #F9F9F9;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
border-radius: 2px;
width: 28px;
height: 28px;
@@ -932,7 +932,7 @@ export default {
.top-tool-btn{
height: 32px;
width: 32px;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
outline: none;
border-radius: 2px;
background-color: #F9F9F9;

2
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -1377,7 +1377,7 @@ export default {
width: 32px;
border: none;
outline: none;
border-left: 1px solid #DEDEDE;
border-left: 1px solid $--primary-border-color;
background-color: #F9F9F9;
i {

73
nezha-fronted/src/components/common/table/asset/assetTable.vue
View File

@@ -36,18 +36,13 @@
<template v-if="item.prop === 'type'">{{scope.row.type ? scope.row.type.name : '-'}}</template>
<template v-else-if="item.prop === 'state'">{{scope.row.state ? scope.row.state.name : '-'}}</template>
<template v-else-if="item.prop === 'endpointNum'">
<div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(`${$t('asset.down')} / ${$t('asset.suspended')} / ${$t('asset.total')}`, true, $event)" @mouseleave="hideTableTooltip">
<span style="cursor: pointer" @click="$emit('showBottomBox', 'endpointTab', scope.row)"><i class="nz-icon nz-icon-endpoint" style="color: #969dea; padding-right: 8px;"></i><span>{{scope.row.endpointNum ? scope.row.endpointNum : 0}}</span></span>
<!-- <div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(`${$t('asset.down')} / ${$t('asset.suspended')} / ${$t('asset.total')}`, true, $event)" @mouseleave="hideTableTooltip">
<span class="link" style="padding: 2px 8px" @click="showEndpoint(scope.row)">{{scope.row.endpointDownNum}}/{{scope.row.endpointSuspendedNum}}/{{scope.row.endpointNum}}</span>
</div>
</div>-->
</template>
<template v-else-if="item.prop === 'alertNum'">
<div :class="messageStyle(item, scope.row)" @mouseenter="showTableTooltip(scope.row.alertNum+' '+$t('overall.active'), scope.row.alertNum >= 99, $event)" @mouseleave="hideTableTooltip">
<span :id="'asset-alerts-'+scope.row.id" class="link" @click="jumpToAlertMsg(scope.row)">
{{(scope.row.alertNum < 99 ? scope.row.alertNum : 99)}}
<sup v-if="scope.row.alertNum > 99" class="linkSup">+</sup>
{{' ' + $t('overall.active')}}
</span>
</div>
<span style="cursor: pointer" @click="$emit('showBottomBox', 'alertMessageTab', scope.row)"><i :class="scope.row.alertNum ? 'red' : 'green'" class="nz-icon nz-icon-overview-alert" style="padding-right: 8px;"></i><span>{{scope.row.alertNum ? scope.row.alertNum : 0}}</span></span>
</template>
<template v-else-if="item.prop === 'dc'">{{scope.row.dc ? scope.row.dc.name : '-'}}</template>
<template v-else-if="item.prop === 'cabinet'">
@@ -67,15 +62,15 @@
fixed="right">
<div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
<div slot-scope="scope" class="table-operation-items">
<button class="table-operation-item" @click="tableOperation(['detail', scope.row])"><i class="nz-icon nz-icon-view1"></i></button>
<button class="table-operation-item" @click="$emit('showBottomBox', 'panelTab', scope.row)"><i class="nz-icon nz-icon-view1"></i></button>
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
<div class="table-operation-item table-operation-item--more">
<span>…</span><i class="nz-icon nz-icon-arrow-down"></i>
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="['copy', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">Copy</span></el-dropdown-item>
<el-dropdown-item :command="['edit', scope.row]"><i class="nz-icon nz-icon-edit"></i><span class="operation-dropdown-text">{{$t('overall.edit')}}</span></el-dropdown-item>
<el-dropdown-item :command="['cli', scope.row]" :disabled="!scope.row.authUsername"><i class="nz-icon nz-icon-cli"></i><span class="operation-dropdown-text">Connect</span></el-dropdown-item>
<el-dropdown-item :command="['duplicate', scope.row]"><i class="nz-icon nz-icon-override"></i><span class="operation-dropdown-text">{{$t('dashboard.duplicate')}}</span></el-dropdown-item>
<el-dropdown-item :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -94,44 +89,34 @@ export default {
return {
tableTitle: [
{
label: this.$t('overall.id'),
label: 'ID',
prop: 'id',
show: false,
show: true,
width: 110
}, {
label: this.$t('overall.name'),
prop: 'name',
show: true,
width: 110
}, {
label: 'SN',
prop: 'sn',
show: true
}, {
label: this.$t('asset.manageIp'),
prop: 'manageIp',
show: true,
width: 120
}, {
label: this.$t('overall.parent'),
prop: 'parent',
show: true,
show: false,
width: 110
}, {
label: this.$t('overall.type'),
prop: 'type',
show: true,
width: 110
width: 140
}, {
label: this.$t('asset.state'),
prop: 'state',
show: true,
width: 110
}, {
label: this.$t('asset.brand'),
prop: 'brand',
show: true,
width: 120
}, {
label: this.$t('asset.model'),
prop: 'model',
show: true,
width: 110
width: 80
}, {
label: this.$t('overall.dc'),
prop: 'dc',
@@ -142,21 +127,31 @@ export default {
prop: 'cabinet',
show: true,
width: 110
}, {
label: this.$t('asset.manageIp'),
prop: 'manageIp',
show: true,
width: 120
}, {
label: this.$t('asset.alertNum'),
prop: 'alert',
prop: 'alertNum',
show: true,
width: 120
width: 140
}, {
label: this.$t('asset.endpointNum2'),
prop: 'endpointNum',
show: true,
width: 150
width: 140
}, {
label: this.$t('asset.brand'),
prop: 'brand',
show: true,
width: 120
}, {
label: this.$t('asset.model'),
prop: 'model',
show: true,
width: 110
}, {
label: 'SN',
prop: 'sn',
show: true,
width: 110
}, {
label: this.$t('asset.purchaseDate'),
prop: 'purchaseDate',

2
nezha-fronted/src/components/common/table/nzDataList.vue
View File

@@ -136,7 +136,7 @@ export default {
bottomBoxWindow.listResize(vm, e)
},
showBottomBox (targetTab, row) {
console.log(targetTab, row)
// console.log(targetTab, row)
this.bottomBox.targetTab = targetTab
this.bottomBox.object = JSON.parse(JSON.stringify(row))
this.bottomBox.showSubList = true

7
nezha-fronted/src/components/layout/home.vue
View File

@@ -9,6 +9,8 @@
<web-ssh ref="webSsh"></web-ssh>
<!--table悬浮提示容器-->
<span class="el-popover table-tooltip"></span>
<!-- 临时文本dom，用来计算文本长度 -->
<span class="temp-dom"></span>
</div>
</template>
@@ -54,4 +56,9 @@ export default {
transition: all .2s;
}
}
.temp-dom {
visibility: hidden;
font-size: 14px;
position: fixed;
}
</style>

48
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -30,7 +30,7 @@
<delete-button id="asset-list-batch-delete" v-has="'asset_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:search>
<click-search :select-value.sync="selectValue" :title-search-list="titleSearchList" @reload="reloadTable"/>
<click-search ref="clickSearch" :select-value.sync="selectValue" :title-search-list="titleSearchList" @reload="reloadTable"/>
</template>
<template v-slot:default="slotProps">
<asset-table
@@ -38,12 +38,12 @@
v-loading="slotProps.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:height="assetTableHeight"
:table-data="tableData"
@cli="cli"
@del="del"
@edit="edit"
@copy="copy"
@duplicate="duplicate"
@orderBy="tableDataSort"
@reload="getTableData"
@selectionChange="selectionChange"
@@ -57,7 +57,6 @@
<transition name="right-box">
<asset-box v-if="rightBox.show"
ref="assetBox"
:brand-data="brandData"
:dc-data="dcData"
:field-group-data="fieldGroupData"
:from="fromRoute.asset"
@@ -87,7 +86,7 @@ import assetBatchEditBox from '@/components/common/rightBox/asset/assetBatchEdit
import nzDataList from '@/components/common/table/nzDataList'
import dataListMixin from '@/components/common/mixin/dataList'
import assetTable from '@/components/common/table/asset/assetTable'
import clickSearch from '@/components/common/clickSearch'
import clickSearch from '@/components/common/labelFilter/clickSearch'
export default {
name: 'asset',
@@ -108,6 +107,7 @@ export default {
rightBox: {
batchShow: false
},
assetTableHeight: `calc(100% - ${48 + 201 + 20}px)`,
blankObject: {
id: '',
name: '',
@@ -177,7 +177,6 @@ export default {
}]
},
brandData: [],
modelData: [],
stateData: [],
typeData: [],
@@ -224,6 +223,7 @@ export default {
type: 'dropdownCheckBox',
children: [],
show: true,
showMore: false,
width: 0,
index: 0
},
@@ -233,6 +233,7 @@ export default {
type: 'dropdownCheckBox',
children: [],
show: true,
showMore: false,
width: 0,
index: 0
}
@@ -256,23 +257,13 @@ export default {
}
this.$store.commit('addConsole', consoleParam)
},
copy (row) {
this.object = { ...row, id: '' }
duplicate (row) {
this.object = { ...row, id: '', name: `${row.name}-copy` }
this.rightBox.show = true
},
getUserData () {
return new Promise(resolve => {
this.$get('sys/user').then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
resolve()
})
})
},
getStateData () {
return new Promise(resolve => {
this.$get('asset/stateConf').then(response => {
this.$get('asset/stateConf?pageSize=-1').then(response => {
if (response.code === 200) {
this.stateData = response.data.list
}
@@ -282,7 +273,7 @@ export default {
},
getTypeData () {
return new Promise(resolve => {
this.$get('asset/typeConf').then(response => {
this.$get('asset/typeConf?pageSize=-1').then(response => {
if (response.code === 200) {
this.titleSearchList.type.children = response.data.list.map(d => { return { ...d, value: d.id } })
}
@@ -303,9 +294,9 @@ export default {
reloadTable (obj) {
Object.keys(obj).forEach(key => {
if (typeof obj[key] === 'string') {
this.searchCheckBox[key] = obj[key]
this.searchCheckBox[key] = obj[key] ? obj[key] : null
} else {
obj[key].length > 0 ? this.searchCheckBox[key] = obj[key].join(',') : this.searchCheckBox[key] = null
obj[key] && obj[key].length > 0 ? this.searchCheckBox[key] = obj[key].join(',') : this.searchCheckBox[key] = null
}
})
this.getTableData()
@@ -360,19 +351,9 @@ export default {
})
})
},
getBrandData () {
return new Promise(resolve => {
this.$get('asset/brand').then(response => {
if (response.code === 200) {
this.brandData = response.data.list
}
resolve()
})
})
},
getModelData () {
return new Promise(resolve => {
this.$get('asset/model').then(response => {
this.$get('asset/model?pageSize=-1').then(response => {
if (response.code === 200) {
this.modelData = response.data.list
const titleSearchData = {}
@@ -434,7 +415,6 @@ export default {
},
mounted () {
// 初始化数据
this.getBrandData()
this.getModelData()
this.getStateData()
this.getTypeTreeData()

255
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -1,7 +1,4 @@
<style scoped>
.el-row {
margin-bottom: 5px;
}
<style lang="scss" scoped>
.el-row:last-child {
margin-bottom: 0;
}
@@ -38,9 +35,19 @@
}
/*metric样式--begin*/
.element-item {
&:first-of-type {
padding-top: 0;
}
padding: 20px 0;
border-bottom: 1px dashed #dfe7f2;
width: 100%;
border-bottom: 1px dashed $--primary-border-color;
/deep/ .nz-icon-minus {
padding: 0 4px;
}
}
.nz-icon-minus-position {
padding: 24px 0 24px 0;
}
.right-box-form .element-item.form-row-item{
width: calc(100% - 60px);
@@ -53,6 +60,7 @@
padding-left:10px;
margin-left: 10px;
height: 32px;
border-radius: $--primary-border-radius;
line-height: 32px;
background: #E7EAED;
color: #606266;
@@ -131,82 +139,62 @@
position: relative;
top: 1px;
}
</style>
<template>
<div class="mc">
<div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart" v-clickoutside="{obj:editChart,func:clickOutside}">
<transition name="right-box" v-if="from!=='temp'">
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
<div v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
<transition v-if="from !== 'temp'" name="right-box">
<panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>
</transition>
<div class="right-box__header">
<!-- begin--标题-->
<div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
<!-- end--标题-->
<div class="header__title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
<div class="header__operation">
<span v-cancel="{obj: editChart, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
<span v-cancel="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close"></i></span>
</div>
<!-- &lt;!&ndash; begin&#45;&#45;顶部按钮&ndash;&gt;-->
<!-- <div class="right-box-top-btns right-box-form-delete">-->
<!-- <button @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-min-width-82" id="chart-box-delete" type="button" v-if="editChart.id">-->
<!-- <span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>-->
<!-- <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- &lt;!&ndash; end&#45;&#45;顶部按钮&ndash;&gt;-->
</div>
<!-- begin--表单-->
<div class="right-box-form-box right-box__container" ref="scrollbar">
<el-form :model="editChart" :rules="rules" class="right-box-form right-box-form-left" label-position = "top" label-width="120px" ref="chartForm">
<div class="right-box__container">
<div class="container__form">
<el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
<el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
<el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.title')" prop="panelName" v-if="showPanel.type != 'project' && showPanel.type != 'asset' && showPanel.type != 'model' && from!=='temp'">
<!--<el-autocomplete
:fetch-suggestions="panelSuggestion"
@input="inputPanel"
placeholder=""
popper-class="chart-box-autocomplete no-style-class"
size="small"
v-if="!editChart.id"
v-model.trim="editChart.panelName"
value-key="name"
>
</el-autocomplete>-->
<select-panel :filter-panel="filterPanel" :panel-lock="true" :disabled="showPanel.type==='dashboard'" :panelData="panelData" :placement="'bottom-start'" @selectPanel="selectPanel" ref="selectPanel">
<template v-slot:header>
<div class="panel-select-header">
<el-input :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px; margin-right: 5px;" v-model="filterPanel" id="chart-box-panelname"></el-input>
<el-input id="chart-box-panelname" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="small" style="width: 340px; margin-right: 5px;"></el-input>
</div>
</template>
<template v-slot:trigger>
<el-input placeholder="" readonly="readonly" size="small" v-model="panelName" :disabled="showPanel.type==='dashboard'"></el-input>
</template>
</select-panel>
</el-form-item>
<div class="form-items--half-width-group">
<!-- type -->
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="half-form-item" prop="type">
<el-select @change="chartTypeChange" class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.type" value-key="chartType" id="chart-box-type" :disabled="editChart.type==='group'&&editChart.children&&editChart.children.length">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in chartTypeList" :disabled=" item.id==='group' && editChart.isGroup">
<el-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
<el-select id="chart-box-type" v-model="editChart.type" :disabled="editChart.type==='group'&&editChart.children&&editChart.children.length" placeholder="" popper-class="prevent-clickoutside" size="small" value-key="chartType" @change="chartTypeChange">
<el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && editChart.isGroup" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
<!--group-->
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="group">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.groupId" value-key="chartType" id="chart-box-group" :disabled="editChart.type==='group'">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in groupArr">
<el-form-item :label="$t('dashboard.panel.chartForm.group')" class="form-item--half-width" prop="group">
<el-select id="chart-box-group" v-model="editChart.groupId" :disabled="editChart.type==='group'" clearable placeholder="" popper-class="prevent-clickoutside" size="small" value-key="chartType">
<el-option v-for="item in groupArr" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
<!-- varType -->
<el-form-item :label="$t('dashboard.panel.chartForm.varType')" v-if="from === 'temp'">
<el-select class="right-box-row-with-btn" placeholder="" clearable popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.varType" value-key="chartType" id="chart-box-group" :disabled="!!editChart.id">
<el-select id="chart-box-group" v-model="editChart.varType" :disabled="!!editChart.id" class="form-item--end-with-btn" clearable placeholder="" popper-class="chart-box-dropdown-small prevent-clickoutside" size="small" value-key="chartType">
<el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in varTypeArr">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -214,32 +202,31 @@
</el-form-item>
<!-- remark -->
<el-form-item :label="$t('dashboard.panel.chartForm.remark')">
<el-input type="textarea" v-model="editChart.remark" :autosize="{ minRows: 1, maxRows: 6}" class="not-fixed-height no-resize"/>
<el-input v-model="editChart.remark" :autosize="{ minRows: 1, maxRows: 6}" type="textarea"/>
</el-form-item>
<!--title-->
<div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
<div style="margin-bottom: 20px;width: 100%"></div>
<div class="form__sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
<div class="form-items--half-width-group">
<!--width-->
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="half-form-item" prop="span">
<el-select class="right-box-row-with-btn" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.span" value-key="chartSpan" id="chart-box-span">
<el-option :key="item" :label="'span-' + item" :value="item" v-for="item in spanList">
<el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
<el-select id="chart-box-span" v-model="editChart.span" :disabled="editChart.type === 'group'" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" value-key="chartSpan">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
<!--height-->
<el-form-item :label="$t('dashboard.panel.chartForm.high')" class="half-form-item" prop="hight">
<el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width" prop="height">
<el-autocomplete
id="chart-box-height"
:fetch-suggestions="querySearch"
@select="handleSelect"
v-model="editChart.height"
:disabled="editChart.type === 'group'"
:fetch-suggestions="querySearch"
placeholder=""
popper-class="popper-z-index no-style-class"
size="mini"
v-model="editChart.height">
popper-class="popper-z-index prevent-clickoutside"
size="small"
@select="handleSelect">
<template slot-scope="{ item }">
<div class="name">{{ item }}</div>
</template>
@@ -248,61 +235,55 @@
</el-form-item>
<!-- unit -->
<el-form-item :label="$t('dashboard.panel.chartForm.unit')" class="half-form-item" prop="unit" v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'">
<el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected" filterable id="chart-box-unit"
<el-form-item v-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
<el-cascader id="chart-box-unit" v-model="editChart.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" filterable
placeholder=""
popper-class="dc-dropdown"
size="mini"
popper-class="dc-dropdown prevent-clickoutside"
size="small"
style="width: 100%"
v-model="editChart.unit"
@change="unitSelected"
>
</el-cascader>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url" v-if="isUrl">
<el-input maxlength="1024" show-word-limit size="small" type="textarea" v-model="editChart.param.url" id="chart-box-url"></el-input>
<el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
<el-input id="chart-box-url" v-model="editChart.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
</el-form-item>
<el-form-item :label='"Null value"' class="half-form-item" prop="nullType" v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'">
<el-select @change="$forceUpdate()" class="right-box-row-with-btn" placeholder="" popper-class="chart-box-dropdown-small" size="mini" v-model="editChart.param.nullType" id="chart-box-nullType">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in nullTypeList"></el-option>
<el-form-item v-if="editChart.type === 'line' || editChart.type == 'bar' || editChart.type == 'stackArea' || editChart.type == 'table'" :label='"Null value"' class="form-item--half-width" prop="nullType">
<el-select id="chart-box-nullType" v-model="editChart.param.nullType" placeholder="" popper-class="chart-box-dropdown-small prevent-clickoutside" size="small" @change="$forceUpdate()">
<el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'">
<el-select placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.param.statistics" id="chart-box-statistics" @change="$forceUpdate">
<el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
<el-form-item v-if="editChart.type == 'singleStat' || editChart.type == 'pie'|| editChart.type=='table' || editChart.type == 'bar'" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
<el-select id="chart-box-statistics" v-model="editChart.param.statistics" placeholder="" popper-class="chart-box-dropdown-mini prevent-clickoutside" size="small" @change="$forceUpdate">
<el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value">
<span class="panel-dropdown-label-txt" >{{item.label}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
<el-form-item :label='$t("dashboard.panel.chartForm.threshold")' class="half-form-item" prop="param.threshold" v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
<el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
<el-form-item v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'" :label='$t("dashboard.panel.chartForm.threshold")' class="form-item--half-width" prop="param.threshold">
<el-input id="chart-box-threshold" v-model="editChart.param.threshold" size="small" type="input"></el-input>
</el-form-item>
<!--<el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
<el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
</el-form-item>-->
<div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'">
<div v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'" class="form__sub-title">
<span>{{$t('alert.config.expr')}}</span>
<span @click="addExpression" class="float-right" style="height: 19px;display: inline-block;line-height: 1;" v-if="!isSingleStat">
<span class="create-square-box">
<i style="font-size: 17px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i>
</span>
<span v-if="!isSingleStat" @click="addExpression">
<i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
</span>
</div>
<div class="right-box-sub-title" style="margin-bottom: 20px" v-if="editChart.type == 'text'">
<div v-if="editChart.type == 'text'" class="form__sub-title">
<span>{{$t('dashboard.panel.chartForm.content')}}</span>
</div>
<div class="right-box-sub-title" v-if="isAlert">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
<div style="width: 100%" v-if="!isUrl"></div>
<div v-if="isAlert" class="form__sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
<el-row class="element-item" v-if="isAlert">
<alert-chart-param @on-enter-complate="getAlertParam" ref="alertParamBox"></alert-chart-param>
</el-row>
<div id="chart-box-expression-box" style="margin-bottom: 20px">
<div style="margin-bottom: 20px">
<el-row :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of promqlKeys.length" v-if="!isUrl &&!isAlert && editChart.type != 'text'&& editChart.type != 'group'">
<promql-input
:expression-list="expressions"
@@ -316,22 +297,6 @@
@change="expressionChange"
@removeExpression="removeExpression"
></promql-input>
<!--
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
:key="promqlKeys[index-1]"
:expression-list="expressions"
:metric-options="metricOptions"
:metric-store="metricStore"
:index="index-1"
:styleType="2"
:plugins="['metric-selector', 'metric-input', 'remove']"
@change="expressionChange"
@removeExpression="removeExpression"
:showRemove="false"
></promql-input>
-->
<el-row>
<el-col class="legend-title">
{{$t('dashboard.panel.chartForm.legend')}}&nbsp;
@@ -340,7 +305,7 @@
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-popover>
</el-col>
<el-col style="width: calc(100% - 120px);">
<el-col style="width: calc(100% - 160px);">
<el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
</el-col>
</el-row>
@@ -348,14 +313,14 @@
<span class="nz-icon-minus-medium">
<i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
</span>
<span class="nz-icon-copy" v-if="!isSingleStat">
<span v-if="!isSingleStat" class="nz-icon-copy">
<i @click="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
</span>
</div>
</el-row>
</div>
<!--value mapping start-->
<div class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
<div v-if="editChart.type == 'singleStat'||editChart.type == 'table'" class="form__sub-title">
<span>
{{$t('dashboard.panel.chartForm.valMapping.name')}}
<el-popover placement="top" trigger="hover" width="275">
@@ -363,61 +328,60 @@
<i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
</el-popover>
</span>
<span class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
<span class="float-right" @click="addMapping"><i class="nz-icon nz-icon-create-square" style="font-size: 16px; cursor: pointer;"></i></span>
</div>
<div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
<el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" text-color="#FA901C" size="small" class="val-mapping-type" @change="valueMappingChange" id="chart-box-change-valuemapping">
<el-radio-button label="value" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
<el-radio-button label="range" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
<div v-if="editChart.type == 'singleStat'||editChart.type == 'table'" style="margin-bottom: 20px; width: 100%"></div>
<el-form-item v-if="editChart.type == 'singleStat'||editChart.type == 'table'" :label="$t('dashboard.panel.chartForm.type')" prop="span">
<el-radio-group id="chart-box-change-valuemapping" v-model="editChart.param.valueMapping.type" class="val-mapping-type" fill="#FA901C" size="small" text-color="#FA901C" @change="valueMappingChange">
<el-radio-button border class="no-fill" label="value">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
<el-radio-button border class="no-fill" label="range">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
<template v-for="(mapping, index) in editChart.param.valueMapping.mapping">
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.value')" class="half-form-item-other" prop="span" >
<el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
<el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input>
</el-form-item>
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other half-form-item-other-two" prop="span">
<el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text"></el-input>
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other form-item--half-width-other-two" prop="span">
<el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input>
<!--颜色选择器 start-->
<div class="color-show">
<nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac', value:showPicker[index].bac, key:'bac'},{name:'text', value:showPicker[index].text, key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
</div>
<!--颜色选择器 end-->
<span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
<span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
</el-form-item>
</template>
</template>
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
<template v-for="(mapping, index) in editChart.param.valueMapping.mapping">
<div :key="index" class="half-form-item-other" style="display: inline-block;margin-left: 15px">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
<el-input size="mini" type="input" v-model="mapping.from"></el-input>
<div :key="index" class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" class="one-third-form-item-left" prop="span" >
<el-input v-model="mapping.from" size="small" type="input"></el-input>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.to')" prop="span" class="one-third-form-item-right" >
<el-input size="mini" type="input" v-model="mapping.to"></el-input>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.to')" class="one-third-form-item-right" prop="span" >
<el-input v-model="mapping.to" size="small" type="input"></el-input>
</el-form-item>
</div>
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="half-form-item-other-two range" prop="span">
<el-input size="mini" style="display: inline-block;width:calc(100% - 80px);" type="input" v-model="mapping.text" ></el-input>
<el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.text')" class="form-item--half-width-other-two range" prop="span">
<el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input" ></el-input>
<!--颜色选择器 start-->
<div class="color-show">
<nezhaColor :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}" :single="false" :color-val="mapping.color"/>
<nezhaColor :color-val="mapping.color" :single="false" :value-arr="[{name:'bac',value:showPicker[index].bac,key:'bac'},{name:'text',value:showPicker[index].text,key:'text'}]" @colorChange="(val,key)=>{colorChange(mapping,key,val)}"/>
</div>
<!--颜色选择器 end-->
<span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
<span class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px" @click="delMapping(index)"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
</el-form-item>
</template>
</template>
<!--value mapping end-->
<template v-if="editChart.type == 'line' || editChart.type == 'bar' || editChart.type == 'stackArea'">
<div class="right-box-sub-title" >
<div class="form__sub-title" >
<span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
</div>
<div style="margin-bottom: 20px; width: 100%" ></div>
<div style="display: flex;">
<div style="display: flex; margin-bottom: 20px">
<span style="margin-left: 15px;"></span>
<template v-for="(item, index) in sortedOptionKeys">
<div :key="index" style="flex: 1">
@@ -425,9 +389,9 @@
<el-switch
:id="'chart-box-legendValue-'+item.label"
v-model="editChart.param.legendValue[item.key]"
active-color="#ee9d3f"
active-value="on"
inactive-value="off"
active-color="#ee9d3f"
>
</el-switch>
</div>
@@ -440,25 +404,25 @@
</el-form>
</div>
</div>
<!--底部按钮-->
<div class="right-box-bottom-btns right-box__footer">
<button v-cancel="{obj:editChart,func:esc}" id="chart-box-esc" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<div class="right-box__footer">
<button id="chart-box-esc" v-cancel="{obj:editChart,func:esc}" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button v-if="showPanel.type && showPanel.type == 'model'" id="chart-box-Sync" v-has="'panel_chart_edit'" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="SyncSave">
<button v-if="showPanel.type && showPanel.type == 'model'" id="chart-box-Sync" v-has="'panel_chart_edit'" class="footer__btn" @click="SyncSave">
<span>{{$t('overall.SyncSave')}}</span>
</button>
<button @click="preview" id="chart-box-preview" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" v-else-if="from!=='temp'" >
<button v-else-if="from!=='temp'" id="chart-box-preview" class="footer__btn" @click="preview" >
<span>{{$t('overall.preview')}}</span>
</button>
<button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" @click="confirmAdd" >
<button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="confirmAdd" >
<span>{{$t('overall.save')}}</span>
</button>
</div>
<!--preview -->
<chart-preview :panelId="panelId" ref="chartsPreview" :fromEndpoint="fromEndpoint"></chart-preview>
</div>
</div>
</template>
<script>
@@ -1455,27 +1419,6 @@ export default {
this.legends = []
this.elementIds = []
},
inputPanel: function () {
this.isInputPanel = true
},
/* panel搜索建议 */
panelSuggestion (queryString, callback) {
if (!this.isInputPanel) {
callback(JSON.parse(JSON.stringify(this.panelData)))
} else {
let data = []
if (!queryString) {
data = this.panelData
} else {
for (let i = 0; i < this.panelData.length; i++) {
if (this.panelData[i].name.toLowerCase().indexOf(queryString.toLowerCase()) != -1) {
data.push(this.panelData[i])
}
}
}
callback(data)
}
},
// preview -start
// 预览图表

7
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -60,7 +60,7 @@
</el-col>
<el-col
:class="plugins.indexOf('metric-selector') > -1 ?'metric-selector-input-box':'metric-null-input-box'"
:style="{'width':plugins.indexOf('metric-selector') > -1 ? 'calc(100% - 120px)':'100%',height: '100%',}">
:style="{'width':plugins.indexOf('metric-selector') > -1 ? 'calc(100% - 160px)':'100%',height: '100%',}">
<div class="input-box" @click="dropDownVisible=false" v-if="plugins.indexOf('metric-input') > -1">
<!--<editor :styleType="styleType" :metric-list="metricStore" :historyParam="historyParam" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>-->
<el-input v-model="expressionList[index]" @change="metricChange" @input="metricKeyDown" type="textarea"
@@ -630,19 +630,20 @@ export default {
width:100px;
margin-left: 10px;
margin-right: 10px;
height: 33px;
height: 32px;
text-align: left;
padding: 0 0 0 10px;
font-weight: 400;
line-height: 33px;
background: #E7EAED;
border-radius: $--primary-border-radius;
font-family: ArialMT;
font-size: 14px;
color: #333333;
letter-spacing: 0;
}
.metric-selector-input-box{
width: calc(100% - 120px);
width: calc(100% - 160px);
}
.metric-null-input-box{
width: 100%;

8
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -432,7 +432,7 @@
.tooltip-asset {
width: 260px;
height: 150px;
border: 1px solid #DEDEDE;
border: 1px solid $--primary-border-color;
border-radius: 2px;
.tooltip-asset--title {
@@ -443,7 +443,7 @@
color: #333333;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid $--primary-border-color;
box-sizing: border-box;
}
@@ -455,7 +455,7 @@
display: flex;
height: 75px;
box-sizing: border-box;
border-bottom: 1px solid #DEDEDE;
border-bottom: 1px solid $--primary-border-color;
}
.tooltip-asset--row + .tooltip-asset--row {
@@ -471,7 +471,7 @@
padding-left: 10px;
line-height: 75px;
font-size: 14px;
border-right: 1px solid #DEDEDE;
border-right: 1px solid $--primary-border-color;
color: #333333;
box-sizing: border-box;
}

43
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -1,22 +1,24 @@
<template>
<div class="panel list-page">
<div class="main-list">
<div class="main-container">
<div class="top-tools">
<div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
<button @click="toAdd" class="nz-btn nz-btn-style-light nz-btn-size-small" id="panel-add-panel"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
<div v-if="panelData.length == 0" class="top-tool-left" style="margin-left: 10px;">
<button id="panel-add-panel" class="nz-btn nz-btn-style-light nz-btn-size-small" @click="toAdd"><i class="nz-icon nz-icon-create-square"></i>&nbsp;&nbsp;{{$t("dashboard.panel.createPanelTitleSec")}}</button>
</div>
<template v-else>
<div class="top-tool-main-left">
<select-panel :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'" :show-panel="showPanel"
@deletePanel="del" @editPanel="edit" @selectPanel="panelChange" ref="selectPanel" style="width: 300px;display: inline-block">
<div class="top-tool-left">
<select-panel ref="selectPanel" :filter-panel="filterPanel" :panel-data="panelData" :panel-lock="panelLock" :placement="'bottom-start'"
:show-panel="showPanel" style="width: 300px;display: inline-block" @deletePanel="del" @editPanel="edit" @selectPanel="panelChange">
<template v-slot:header>
<div class="panel-select-header">
<el-input id="panel-list-search" v-model="filterPanel" :placeholder="$t('overall.search')" clearable size="mini" style="width: 340px;"></el-input>
<span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" class="panel-select-add" v-has="'panel_add'" id="panel-list-toadd"><i class="nz-icon nz-icon-plus"></i></span>
<span id="panel-list-toadd" v-has="'panel_add'" :title='$t("dashboard.panel.createPanelTitleSec")' class="panel-select-add" @click="toAdd"><i class="nz-icon nz-icon-plus"></i></span>
</div>
</template>
<template v-slot:trigger>
<el-input v-model="showPanel.name" class="panel-name" placeholder="" readonly="readonly" size="small">
<i class="el-icon-menu" slot="prefix"></i>
<i slot="prefix" class="el-icon-menu"></i>
</el-input>
</template>
</select-panel>
@@ -63,46 +65,49 @@
</el-dropdown-menu>
</el-dropdown>-->
</div>
<div class="top-tool-main-right">
<div class="top-tool-right">
<div class="top-tool-search margin-r-20">
<el-input id="queryPanel" ref="queryPanel" v-model="filter.searchName" class="query-input-inactive" clearable size="small" @blur="blurInput" @clear="clearInput" @focus="focusInput">
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" @click="focusInput" style="float: right"></i>
<i slot="suffix" class="el-input__icon nz-icon nz-icon-search" style="float: right" @click="focusInput"></i>
</el-input>
</div>
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" id="panel"></pick-time>
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
<export-excel
id="panel"
export-file-name="chart"
export-url="/visual/panel/export"
import-url="/visual/panel/import"
:params="filter"
:permissions="{
import: 'panel_chart_import',
export: 'panel_chart_export'
}"
class="top-tool-export"
export-file-name="chart"
export-url="/visual/panel/export"
import-url="/visual/panel/import"
@afterImport="dateChange"
class="top-tool-export margin-l-10"
>
<template slot="optionZone">
<button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_add'"
id="panel-add-chart" class="top-tool-btn">
<button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')"
class="top-tool-btn" @click="addChart">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</template>
</export-excel>
<button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-table-edit'></i></button>
<button id="chart-temp-add" class="top-tool-btn margin-l-10" type="button" @click="addChartByTemp"><i class='nz-icon nz-icon-lock'></i></button>
<button id="panel-lock" class="top-tool-btn margin-l-10" type="button" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
</div>
</template>
</div>
<div class="table-list" id="tableList">
<div id="tableList" class="table-list">
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
<div class="box-content">
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock" :class="{'show-top':showTopBtn}" @on-add-group-item-chart="addGroupItem"></chart-list>
<chart-list ref="chartList" :class="{'show-top':showTopBtn}" :from="$CONSTANTS.fromRoute.panel" :panel-lock="panelLock" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" @on-add-group-item-chart="addGroupItem"></chart-list>
</div>
</div>
</div>
</div>
</div>
<button :class="{'to-top-is-hover': tableHover}" @click="toTop(scrollbarWrap)" class="to-top" style="bottom: 0;" v-show="showTopBtn"><i class="nz-icon nz-icon-top"></i></button>
<transition name="right-box">

2
nezha-fronted/src/components/page/monitor/endpoint/endpointList.vue
View File

@@ -81,7 +81,7 @@ import dataListMixin from '@/components/common/mixin/dataList'
import endpointTable from '@/components/common/table/settings/endpointTable'
import EditEndpointBoxNew from '@/components/common/rightBox/editEndpointBoxNew'
import batchModifyEndpoint from '@/components/common/rightBox/batchModifyEndpoint'
import clickSearch from '@/components/common/clickSearch'
import clickSearch from '@/components/common/labelFilter/clickSearch'
export default {
beforeRouteLeave (to, from, next) { // 路由离开之前触发