NEZ-1812 style：value mapping修改icon选择器样式

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

@@ -65,7 +65,8 @@
     border-radius: 5px;
     display: flex;
     align-items: center;
-    height: 30px;
+    height: 32px;
+    box-sizing: border-box;
   }
 
   .color-show .color-text {

nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss

@@ -148,32 +148,40 @@
         padding-left: 10px;
         box-sizing: border-box;
       }
+      .mapping-display-input{
+        input{
+          padding-left: 42px;
+        }
+        .el-input__prefix{
+          display: flex;
+          align-items: center;
+          left: 10px;
+        }
+      }
       .mapping-iconSelect {
-        display: flex;
+        width: 22px;
-        justify-content: space-between;
+        height: 22px;
-        align-items: center;
-        width: 76px;
-        height: 32px;
-        padding:0px 5px;
         box-sizing: border-box;
-        border: 1px solid $--border-color-light;
+        border: 1px dotted #fa901c;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
-        .mapping-icon{
+        i{
-          font-size: 18px;
+          font-size: 12px;
-          margin-left: 6px;
+          color: #fa901c;
-        }
-        span{
-          font-size: 14px;
-          color: $--color-text-placeholder;
-        }
-        .el-icon-arrow-down{
-          transition: transform .2s;
-          color: $--color-text-placeholder;
-        }
-        .el-icon-arrow-down.is-active{
-          transform: rotate(-180deg);
         }
       }
+      .mapping-icon{
+        font-size: 18px;
+        width: 22px;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
     }
     .thresholds-add{
       border: 1px solid $--border-color-light;
@@ -261,19 +269,14 @@
       height: 100%;
       width: calc(60% - 10px);
     }
-    //.el-select__tags > span {
-    //  display: flex;
-    //  width: 100%;
-    //  overflow-x: auto;
-    //}
   }
 }
 
 
 .mapping-iconPop{
   .mapping-iconList{
-    width: 285px;
+    width: 240px;
-    height: 175px;
+    height: 130px;
     overflow-y: auto;
     display: flex;
     flex-wrap: wrap;
@@ -293,10 +296,10 @@
       i{
         font-size: 18px;
       }
-      &:nth-of-type(6n+1){
+      &:nth-of-type(5n+1){
         margin-left: 0;
       }
-      &:nth-of-type(-n+6){
+      &:nth-of-type(-n+5){
         margin-top: 0;
       }
     }

nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss

@@ -111,7 +111,7 @@
 .color-show{
   display: inline-block;
   position: relative;
-  top: 1px;
+  top: 0px;
 }
 .topology-box{
   width: 100%;

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -668,26 +668,29 @@
                   <div>
                     <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
                   </div>
-                  <el-popover
-                    placement="top-start"
-                    trigger="manual"
-                    popper-class="mapping-iconPop no-style-class"
-                    v-clickoutside="()=>{closeChoose(index)}"
-                    v-model="isChoose[index]"
-                    >
-                    <ul class="mapping-iconList">
-                      <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
-                        <i :class="subItem.value"></i>
-                      </li>
-                    </ul>
-                    <div class="mapping-iconSelect" slot="reference" @click="chooseIcon(isChoose[index],index)">
-                      <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
-                      <span v-else>{{$t('el.select.placeholder')}}</span>
-                      <i class="el-icon-arrow-down" :class="{'is-active':isChoose[index]}"></i>
-                    </div>
-                  </el-popover>
                   <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                    <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
+                    <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
+                      <el-popover
+                        slot="prefix"
+                        placement="top-start"
+                        trigger="manual"
+                        popper-class="mapping-iconPop no-style-class"
+                        v-clickoutside="()=>{closeChoose(index)}"
+                        v-model="isChoose[index]"
+                        >
+                        <ul class="mapping-iconList">
+                          <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
+                            <i :class="subItem.value"></i>
+                          </li>
+                        </ul>
+                        <div slot="reference" @click="chooseIcon(isChoose[index],index)">
+                          <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
+                          <div v-else class="mapping-iconSelect">
+                            <i class="nz-icon nz-icon-create-square"></i>
+                          </div>
+                        </div>
+                      </el-popover>
+                    </el-input>
                   </el-form-item>
                   <nezhaColor
                     :color-val="item.color"

nezha-fronted/src/components/common/rightBox/chart/publicConfig.js

@@ -60,6 +60,8 @@ export default {
       ],
       mappingIconList: [
         {
+          value: undefined
+        }, {
           value: 'nz-icon nz-icon-Router'
         }, {
           value: 'nz-icon nz-icon-Computer'
@@ -315,7 +317,7 @@ export default {
     // icon点击
     iconActive (item, subItem, index) {
       if (item.icon === subItem.value) {
-        this.chartConfig.param.valueMapping[index].icon = ''
+        this.chartConfig.param.valueMapping[index].icon = undefined
         this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
       } else {
         this.chartConfig.param.valueMapping[index].icon = subItem.value

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -630,32 +630,36 @@
                   <div>
                     <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
                   </div>
-                  <el-popover
-                    placement="top-start"
-                    trigger="manual"
-                    popper-class="mapping-iconPop no-style-class"
-                    v-clickoutside="()=>{closeChoose(index)}"
-                    v-model="isChoose[index]"
-                    >
-                    <ul class="mapping-iconList">
-                      <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
-                        <i :class="subItem.value"></i>
-                      </li>
-                    </ul>
-                    <div class="mapping-iconSelect" slot="reference" @click="chooseIcon(isChoose[index],index)">
-                      <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
-                      <span v-else>{{$t('el.select.placeholder')}}</span>
-                      <i class="el-icon-arrow-down" :class="{'is-active':isChoose[index]}"></i>
-                    </div>
-                  </el-popover>
                   <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                    <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/>
+                    <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
+                      <el-popover
+                        slot="prefix"
+                        placement="top-start"
+                        trigger="manual"
+                        popper-class="mapping-iconPop no-style-class"
+                        v-clickoutside="()=>{closeChoose(index)}"
+                        v-model="isChoose[index]"
+                        >
+                        <ul class="mapping-iconList">
+                          <li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
+                            <i :class="subItem.value"></i>
+                          </li>
+                        </ul>
+                        <div slot="reference" @click="chooseIcon(isChoose[index],index)">
+                          <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
+                          <div v-else class="mapping-iconSelect">
+                            <i class="nz-icon nz-icon-create-square"></i>
+                          </div>
+                        </div>
+                      </el-popover>
+                    </el-input>
                   </el-form-item>
                   <nezhaColor
                     :color-val="item.color"
                     :single="false"
                     :value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
                     @colorChange="(val,key)=>{colorChange(val, key, index)}"
+                    style="margin-right:1px"
                   />
                 </el-row>
               </transition-group>