feat: asset功能、panel样式修复

nezha-fronted/src/assets/css/common.scss

@@ -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;
+}

nezha-fronted/src/assets/css/common/rightBoxCommon.scss

@@ -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;
+}

nezha-fronted/src/assets/css/common/tableCommon.scss

@@ -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;
+}

nezha-fronted/src/assets/css/font/iconfont.svg

@@ -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" />

nezha-fronted/src/assets/css/theme.scss

@@ -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
 }

nezha-fronted/src/assets/stylus/main.scss

@@ -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;

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

@@ -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="{

nezha-fronted/src/components/charts/chart-list.vue

@@ -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)
         }

nezha-fronted/src/components/charts/chart.scss

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

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -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') },

nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue

@@ -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;

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

@@ -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 chartBox from '../../../page/dashboard/chartBox'
-import ChartList from '../../../charts/chart-list'
+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,
+    chartBox,
-    'chart-list': ChartList,
+    chartList,
-    nzBottomDataList
+    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,
+            modelId: this.from == this.fromRoute.model ? this.obj.id : null,
-            assetId: this.from == this.$CONSTANTS.fromRoute.asset ? 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);
   }

nezha-fronted/src/components/common/clickSearch.vue

@@ -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>

nezha-fronted/src/components/common/labelFilter/clickSearch.vue

@@ -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>

nezha-fronted/src/components/common/labelFilter/dropdown.vue

@@ -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>

nezha-fronted/src/components/common/language/en.js

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

nezha-fronted/src/components/common/login.vue

@@ -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) {

nezha-fronted/src/components/common/mixin/dataList.js

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

nezha-fronted/src/components/common/mixin/table.js

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

nezha-fronted/src/components/common/multipleTime.vue

@@ -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;
   }

nezha-fronted/src/components/common/pickTime.vue

@@ -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>

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

@@ -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);

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

@@ -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;

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -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;

nezha-fronted/src/components/common/project/topologyPrev.vue

@@ -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;

nezha-fronted/src/components/common/rightBox/addEndpointBox.vue

@@ -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;

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

@@ -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"
+              v-model="editAsset.brandAndModel"
-              :options="brandData"
               :placeholder="lockModelInputValue"
-              :props="modelCascProp"
+              :options="options.brandAndModelOptions"
-              popper-class="prevent-clickoutside"
+              :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: [],
+      options: { // 下拉选项的option数据
-      parentAssetData: [],
+        cabinetOptions: [],
-      metaData: [], // 下拉选项列表
+        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
+            this.options.cabinetOptions = response.data.list
-            for (let i = 0; i < this.cabinetData.length; i++) {
+            for (let i = 0; i < this.options.cabinetOptions.length; i++) {
-              this.$set(this.cabinetData[i], 'children', this.dcData)
+              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()
+        })
+      })
     }
   }
 }

nezha-fronted/src/components/common/rightBox/batchModifyEndpoint.vue

@@ -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;

nezha-fronted/src/components/common/searchInput.vue

@@ -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 {

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

@@ -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 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>
-            <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>
         </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
+          width: 80
-        }, {
-          label: this.$t('asset.brand'),
-          prop: 'brand',
-          show: true,
-          width: 120
-        }, {
-          label: this.$t('asset.model'),
-          prop: 'model',
-          show: true,
-          width: 110
         }, {
           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',

nezha-fronted/src/components/common/table/nzDataList.vue

@@ -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

nezha-fronted/src/components/layout/home.vue

@@ -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>

nezha-fronted/src/components/page/asset/asset.vue

@@ -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) {
+    duplicate (row) {
-      this.object = { ...row, id: '' }
+      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()

nezha-fronted/src/components/page/dashboard/chartBox.vue

@@ -1,7 +1,4 @@
-<style scoped>
+<style lang="scss" scoped>
-  .el-row {
-    margin-bottom: 5px;
-  }
   .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 v-clickoutside="{obj:editChart, func:clickOutside}" :class="boxClass" class="right-box right-box-chart">
-    <div :class="boxClass" class="right-box right-box-add-chart z-top right-box-chart" v-clickoutside="{obj:editChart,func:clickOutside}">
+    <transition v-if="from !== 'temp'" name="right-box">
-      <transition name="right-box" v-if="from!=='temp'">
+      <panel-box v-if="!showPanel.type" ref="panelBox2" :panel="panel" @reload="panelReload"></panel-box>
-        <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
+    </transition>
-      </transition>
 
-      <div class="right-box__header">
+    <div class="right-box__header">
-        <!-- begin--标题-->
+      <div class="header__title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
-        <div class="right-box-title">{{editChart.id ? $t("dashboard.panel.editChartTitle") : $t("dashboard.panel.createChartTitle")}}</div>
+      <div class="header__operation">
-        <!-- end--标题-->
+        <span v-cancel="{obj: editChart, func: clickOutside}"><i class="nz-icon nz-icon-close"></i></span>
-        <div class="header__operation">
-          <span v-cancel="{obj: editChart, func: esc}"><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>
+    </div>
 
-      <!-- begin--表单-->
+    <div class="right-box__container">
-      <div class="right-box-form-box right-box__container" ref="scrollbar">
+      <div class="container__form">
-        <el-form :model="editChart" :rules="rules" class="right-box-form  right-box-form-left" label-position = "top" label-width="120px" ref="chartForm">
+        <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>
-          <!-- 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">
-                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-              </el-option>
-            </el-select>
           </el-form-item>
 
-          <!--group-->
+          <div class="form-items--half-width-group">
-          <el-form-item :label="$t('dashboard.panel.chartForm.group')" class="half-form-item" prop="group">
+            <!-- type -->
-            <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-form-item :label="$t('dashboard.panel.chartForm.type')" class="form-item--half-width" prop="type">
-              <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in groupArr">
+              <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">
-                <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+                <el-option v-for="item in chartTypeList" :key="item.id" :disabled=" item.id==='group' && editChart.isGroup" :label="item.name" :value="item.id">
-              </el-option>
+                  <span class="panel-dropdown-label-txt" >{{item.name}}</span>
-            </el-select>
+                </el-option>
-          </el-form-item>
+              </el-select>
+            </el-form-item>
+
+            <!--group-->
+            <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,95 +202,88 @@
           </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>
-
-          <!--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">
-                <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-              </el-option>
-            </el-select>
           </el-form-item>
 
-          <!--height-->
+          <div class="form__sub-title">{{$t('dashboard.panel.chartForm.option')}}</div>
-          <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="half-form-item"  prop="hight">
+          <div class="form-items--half-width-group">
-            <el-autocomplete
+            <!--width-->
-              id="chart-box-height"
+            <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
-              :fetch-suggestions="querySearch"
+              <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">
-              @select="handleSelect"
+                <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
-              :disabled="editChart.type === 'group'"
+                  <span class="panel-dropdown-label-txt" > span-{{item}}</span>
-              placeholder=""
+                </el-option>
-              popper-class="popper-z-index no-style-class"
+              </el-select>
-              size="mini"
+            </el-form-item>
-              v-model="editChart.height">
-              <template slot-scope="{ item }">
-                <div class="name">{{ item }}</div>
-              </template>
-              <template slot="append">px</template>
-            </el-autocomplete>
-          </el-form-item>
 
-          <!-- unit -->
+            <!--height-->
-          <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-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width"  prop="height">
-            <el-cascader :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }" :show-all-levels="false" @change="unitSelected"  filterable id="chart-box-unit"
+              <el-autocomplete
-                         placeholder=""
+                id="chart-box-height"
-                         popper-class="dc-dropdown"
+                v-model="editChart.height"
-                         size="mini"
+                :disabled="editChart.type === 'group'"
-                         style="width: 100%"
+                :fetch-suggestions="querySearch"
-                         v-model="editChart.unit"
+                placeholder=""
-            >
+                popper-class="popper-z-index prevent-clickoutside"
-            </el-cascader>
+                size="small"
-          </el-form-item>
+                @select="handleSelect">
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item }}</div>
+                </template>
+                <template slot="append">px</template>
+              </el-autocomplete>
+            </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">
+            <!-- unit -->
-            <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-show="editChart.type !='text' && editChart.type !=='url'&& editChart.type !=='group'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
-          </el-form-item>
+              <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 prevent-clickoutside"
+                           size="small"
+                           style="width: 100%"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </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-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
-            <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-input id="chart-box-url" v-model="editChart.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
-              <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in nullTypeList"></el-option>
+            </el-form-item>
-            </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-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 placeholder="" popper-class="chart-box-dropdown-mini" size="mini" v-model="editChart.param.statistics" id="chart-box-statistics" @change="$forceUpdate">
+              <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 :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
+                <el-option v-for="item in nullTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+              </el-select>
-              </el-option>
+            </el-form-item>
-            </el-select>
-          </el-form-item>
 
-          <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-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-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
+              <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-form-item>
+                <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-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
+                </el-option>
-            <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-select>
-          </el-form-item>-->
+            </el-form-item>
-
-          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'">
-            <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>
           </div>
-          <div class="right-box-sub-title" style="margin-bottom: 20px" v-if="editChart.type == 'text'">
+
+          <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>
+
+          <div v-if="!isUrl&&!isAlert&& editChart.type != 'text'&& editChart.type != 'group'" class="form__sub-title">
+            <span>{{$t('alert.config.expr')}}</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 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 v-if="isAlert" class="form__sub-title">{{$t('dashboard.panel.chartForm.alertParam.param')}}</div>
-          <div style="width: 100%" v-if="!isUrl"></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-->
+          <!--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,102 +328,101 @@
               <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>
-          </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>
-            <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>
-              <!--颜色选择器 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>
-            </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>
-              </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>
-            </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>
-              <!--颜色选择器 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"/>
-              </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>
-            </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" >
-            <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
           </div>
-          <div style="margin-bottom: 20px; width: 100%" ></div>
+          <div v-if="editChart.type == 'singleStat'||editChart.type == 'table'" style="margin-bottom: 20px; width: 100%"></div>
-          <div style="display: flex;">
+          <el-form-item v-if="editChart.type == 'singleStat'||editChart.type == 'table'" :label="$t('dashboard.panel.chartForm.type')" prop="span">
-            <span style="margin-left: 15px;"></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">
-            <template v-for="(item, index) in sortedOptionKeys">
+              <el-radio-button border class="no-fill" label="value">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
-              <div :key="index" style="flex: 1">
+              <el-radio-button border class="no-fill" label="range">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
-                <span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
+            </el-radio-group>
-                <el-switch
+          </el-form-item>
-                  :id="'chart-box-legendValue-'+item.label"
+          <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'" id="chart-box-valueMapping-type1">
-                  v-model="editChart.param.legendValue[item.key]"
+            <template  v-for="(mapping, index) in editChart.param.valueMapping.mapping">
-                  active-value="on"
+              <el-form-item :key="index" :label="$t('dashboard.panel.chartForm.valMapping.value')" class="form-item--half-width-other" prop="span" >
-                  inactive-value="off"
+                <el-input v-model="mapping.value" size="small" style="display: inline-block;;" type="input"></el-input>
-                  active-color="#ee9d3f"
+              </el-form-item>
-                >
+              <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-switch>
+                <el-input v-model="mapping.text" size="small" style="display: inline-block;width:calc(100% - 80px);" type="input"></el-input>
-              </div>
+                <!--颜色选择器 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  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>
-          </div>
+          </template>
-        </template>
+          <template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'" id="chart-box-valueMapping-type2">
-        <template v-if="editChart.type=='text'&&textShow">
+            <template v-for="(mapping, index) in editChart.param.valueMapping.mapping">
-          <rich-text-editor ref="richTextEditor" :edit-data="editChart.param.text"></rich-text-editor>
+              <div :key="index" class="form-item--half-width-other" style="display: inline-block;margin-left: 15px">
-        </template>
+                <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')" 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="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 :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 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="form__sub-title" >
+              <span>{{$t('dashboard.panel.chartForm.legendValue')}}</span>
+            </div>
+            <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">
+                  <span style="margin-right: 10px;color:rgb(102, 102, 102)">{{item.label}}</span>
+                  <el-switch
+                    :id="'chart-box-legendValue-'+item.label"
+                    v-model="editChart.param.legendValue[item.key]"
+                    active-color="#ee9d3f"
+                    active-value="on"
+                    inactive-value="off"
+                  >
+                  </el-switch>
+                </div>
+              </template>
+            </div>
+          </template>
+          <template v-if="editChart.type=='text'&&textShow">
+            <rich-text-editor ref="richTextEditor" :edit-data="editChart.param.text"></rich-text-editor>
+          </template>
 
         </el-form>
       </div>
+    </div>
     <!--底部按钮-->
-    <div class="right-box-bottom-btns right-box__footer">
+    <div class="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">
+      <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
     // 预览图表

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

@@ -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%;

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

@@ -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;
       }

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -1,108 +1,113 @@
 <template>
   <div class="panel list-page">
-    <div class="top-tools">
+    <div class="main-list">
-      <div class="top-tool-main-left" v-if="panelData.length == 0" style="margin-left: 10px;">
+      <div class="main-container">
-        <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 class="top-tools">
-      </div>
+          <div v-if="panelData.length == 0" class="top-tool-left" style="margin-left: 10px;">
-      <template v-else>
+            <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 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">
-            <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>
-              </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>
-              </el-input>
-            </template>
-          </select-panel>
-          <!--<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" >
-            <el-row  :gutter="10" class="el-dropdown-link" style="padding-right: 5px">
-              <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
-              <el-col :span="3" style="padding-left:0px !important;"><i class="nz-icon nz-icon-arrow-down"></i></el-col>
-            </el-row>
-            <el-dropdown-menu class="nz-dashboard-dropdown panel-dropdown-title-space" slot="dropdown"  >
-              &lt;!&ndash;<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>&ndash;&gt;
-              <div ref="dashboardScrollbar" style="height: 100%; overflow: auto">
-                <el-dropdown-item >
-                  <el-row class="panel-list-width" :gutter="10" >
-                    <el-col :span="21"><el-input :placeholder="$t('overall.search')" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable size="mini" v-model="filterPanel"></el-input></el-col>
-                    <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span></el-col>
-                  </el-row>
-                </el-dropdown-item>
-                <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
-                           :scroll-sensitivity="150"
-                           :options="{
-                               group:{name:'chartGroup',pull:'false'},
-                               dragClass:'drag-chart-class',
-                               fallbackClass:'fallback-class',
-                               forceFallback:true,
-                               ghostClass:'chart-ghost',
-                               chosenClass:'choose-class',
-                               scroll:true,
-                               scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
-                               animation:150,
-                               handle:'.panelContent',
-                             }"  >
-                  <el-dropdown-item v-for="item in showPanelList" :key="item.id+1" class="panel-title-li"
-                                    :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
-                    <el-row  :gutter="10" class="panel-list-width" >
-                      <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
-                      <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
-                      <el-col :span="1"><span @click.stop="del(item)" class="panel-dropdown-btn panel-dropdown-btn-delete" v-has="'panel_delete'"><i class="nz-icon nz-icon-delete"></i></span></el-col>
-                      <el-col :span="1">&nbsp;</el-col>
-                      <el-col :span="1"><span @click.stop="edit(item)" class="panel-dropdown-btn" v-has="'panel_toEdit'"><i class="nz-icon nz-icon-edit"></i></span></el-col>
-                    </el-row>
-                  </el-dropdown-item>
-                </draggable>
-              </div>
-            </el-dropdown-menu>
-          </el-dropdown>-->
-        </div>
-        <div class="top-tool-main-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>
-            </el-input>
           </div>
+          <template v-else>
+            <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 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 slot="prefix" class="el-icon-menu"></i>
+                  </el-input>
+                </template>
+              </select-panel>
+              <!--<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" placement="bottom-start" >
+                <el-row  :gutter="10" class="el-dropdown-link" style="padding-right: 5px">
+                  <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
+                  <el-col :span="3" style="padding-left:0px !important;"><i class="nz-icon nz-icon-arrow-down"></i></el-col>
+                </el-row>
+                <el-dropdown-menu class="nz-dashboard-dropdown panel-dropdown-title-space" slot="dropdown"  >
+                  &lt;!&ndash;<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>&ndash;&gt;
+                  <div ref="dashboardScrollbar" style="height: 100%; overflow: auto">
+                    <el-dropdown-item >
+                      <el-row class="panel-list-width" :gutter="10" >
+                        <el-col :span="21"><el-input :placeholder="$t('overall.search')" @click.native.stop="filterPanelFocus($event)" @input="filterPanelFunc" clearable size="mini" v-model="filterPanel"></el-input></el-col>
+                        <el-col :span="3"><span :title='$t("dashboard.panel.createPanelTitleSec")' @click="toAdd" v-has="'panel_toAdd'"><i class="nz-icon nz-icon-plus"></i></span></el-col>
+                      </el-row>
+                    </el-dropdown-item>
+                    <draggable v-model="panelData" @start="start" @end="end" :move="move" :key
+                               :scroll-sensitivity="150"
+                               :options="{
+                                   group:{name:'chartGroup',pull:'false'},
+                                   dragClass:'drag-chart-class',
+                                   fallbackClass:'fallback-class',
+                                   forceFallback:true,
+                                   ghostClass:'chart-ghost',
+                                   chosenClass:'choose-class',
+                                   scroll:true,
+                                   scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
+                                   animation:150,
+                                   handle:'.panelContent',
+                                 }"  >
+                      <el-dropdown-item v-for="item in showPanelList" :key="item.id+1" class="panel-title-li"
+                                        :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
+                        <el-row  :gutter="10" class="panel-list-width" >
+                          <el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-sort4"></i></el-col>
+                          <el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
+                          <el-col :span="1"><span @click.stop="del(item)" class="panel-dropdown-btn panel-dropdown-btn-delete" v-has="'panel_delete'"><i class="nz-icon nz-icon-delete"></i></span></el-col>
+                          <el-col :span="1">&nbsp;</el-col>
+                          <el-col :span="1"><span @click.stop="edit(item)" class="panel-dropdown-btn" v-has="'panel_toEdit'"><i class="nz-icon nz-icon-edit"></i></span></el-col>
+                        </el-row>
+                      </el-dropdown-item>
+                    </draggable>
+                  </div>
+                </el-dropdown-menu>
+              </el-dropdown>-->
+            </div>
+            <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" 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
+              <export-excel
-            id="panel"
+                id="panel"
-            export-file-name="chart"
+                :params="filter"
-            export-url="/visual/panel/export"
+                :permissions="{
-            import-url="/visual/panel/import"
+                  import: 'panel_chart_import',
-            :params="filter"
+                  export: 'panel_chart_export'
-            :permissions="{
+                }"
-              import: 'panel_chart_import',
+                class="top-tool-export"
-              export: 'panel_chart_export'
+                export-file-name="chart"
-            }"
+                export-url="/visual/panel/export"
-            @afterImport="dateChange"
+                import-url="/visual/panel/import"
-            class="top-tool-export margin-l-10"
+                @afterImport="dateChange"
-          >
+              >
-            <template slot="optionZone">
+                <template slot="optionZone">
-              <button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_add'"
+                  <button id="panel-add-chart" v-has="'panel_chart_add'" :title="$t('overall.createChart')"
-                      id="panel-add-chart" class="top-tool-btn">
+                          class="top-tool-btn" @click="addChart">
-                <i class="nz-icon-create-square nz-icon"></i>
+                    <i class="nz-icon-create-square nz-icon"></i>
-              </button>
+                  </button>
-            </template>
+                </template>
-          </export-excel>
+              </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>
+              <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>
-      </template>
+        <div id="tableList" class="table-list">
-    </div>
+          <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
-    <div class="table-list" id="tableList">
+            <div class="box-content">
-      <div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
+              <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 class="box-content">
+            </div>
-          <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>
+          </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">

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

@@ -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) { // 路由离开之前触发