NEZ-1812 style：value mapping调整选择icon样式

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

@@ -149,31 +149,30 @@
         box-sizing: border-box;
       }
       .mapping-iconSelect {
-        .el-input__inner{
-          color: transparent;
-        }
-        .el-input__inner::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
-          color: $--color-text-placeholder;
-        }
-        .el-input__inner::-moz-placeholder { /* Firefox 19+ */
-          color: $--color-text-placeholder;
-        }
-        .el-input__inner:-ms-input-placeholder { /* IE 10+ */
-          color: $--color-text-placeholder;
-        }
-        .el-input__inner:-moz-placeholder { /* Firefox 18- */
-          color: $--color-text-placeholder;
-        }
-      }
-      
-      .mapping-icon{
-        position: absolute;
-        left: 8px;
-        height: 100%;
         display: flex;
+        justify-content: space-between;
         align-items: center;
+        width: 76px;
+        height: 32px;
+        padding:0px 5px;
+        box-sizing: border-box;
+        border: 1px solid $--border-color-light;
+        cursor: pointer;
+        .mapping-icon{
           font-size: 18px;
-        font-style: normal;
+          margin-left: 6px;
+        }
+        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);
+        }
       }
     }
     .thresholds-add{
@@ -192,17 +191,17 @@
       left: 200px;
     }
     .prev-mapping-box{
-      border: 1px solid $--border-color-light;
       display: inline-block;
       min-width: 18px;
-      height: 25px;
-      line-height: 25px;
+      height: 30px;
+      line-height: 30px;
       border-radius: 5px;
       padding: 0 3px;
       text-align: center;
       position: absolute;
       top: 0;
-      left: 250px;
+      left: 230px;
+      box-sizing: border-box;
     }
     .element-item {
       padding: 0;
@@ -269,3 +268,42 @@
     //}
   }
 }
+
+
+.mapping-iconPop{
+  .mapping-iconList{
+    width: 285px;
+    height: 175px;
+    overflow-y: auto;
+    display: flex;
+    flex-wrap: wrap;
+    .mapping-iconItem{
+      width: 40px;
+      height: 40px;
+      border: 1px solid $--button-icon-border-color;
+      background-color: $--right-box-sub-title-background-color;
+      border-radius: 2px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      margin-left: 5px;
+      margin-top: 5px;
+      i{
+        font-size: 18px;
+      }
+      &:nth-of-type(6n+1){
+        margin-left: 0;
+      }
+      &:nth-of-type(-n+6){
+        margin-top: 0;
+      }
+    }
+    .mapping-iconItem.active{
+      border-color: #fa901c ;
+      color: #fa901c;
+    }
+  }
+}
+

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

@@ -668,28 +668,24 @@
                   <div>
                     <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
                   </div>
-                  <div>
-                    <el-select
-                      v-model="item.icon"
-                      size="small"
-                      style="width: 75px"
-                      :placeholder="$t('el.select.placeholder')"
-                      @change="change('valueMapping', index)"
-                      class="mapping-iconSelect"
+                  <el-popover
+                    placement="top-start"
+                    trigger="manual"
+                    popper-class="mapping-iconPop no-style-class"
+                    v-clickoutside="()=>{closeChoose(index)}"
+                    v-model="isChoose[index]"
                     >
-                    <template slot="prefix">
-                      <i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
-                    </template>
-                      <el-option
-                        v-for="item in mappingIconList"
-                        :value="item.value"
-                        :key="item.value"
-                        label=" "
-                      >
-                        <i :class="item.value"></i>
-                      </el-option>
-                    </el-select>
+                    <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-form-item>

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

@@ -3,7 +3,6 @@ import { getUUID, resetZIndex } from '@/components/common/js/common'
 import { randomcolor, ColorReverse } from '@/components/common/js/radomcolor/randomcolor'
 import { isStat } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
-import iconList from '@/assets/css/font/iconfont.json'
 const rz = {
   methods: {
     rz (e) {
@@ -59,7 +58,125 @@ export default {
           value: 'regx'
         }
       ],
-      mappingIconList: this.iconFormat(), // 获取icon列表
+      mappingIconList: [
+        {
+          value: 'nz-icon nz-icon-Router'
+        }, {
+          value: 'nz-icon nz-icon-Computer'
+        }, {
+          value: 'nz-icon nz-icon-a-Networkdevices'
+        }, {
+          value: 'nz-icon nz-icon-Other'
+        }, {
+          value: 'nz-icon nz-icon-a-Virtualmachine'
+        }, {
+          value: 'nz-icon nz-icon-Switch'
+        }, {
+          value: 'nz-icon nz-icon-Server'
+        }, {
+          value: 'nz-icon nz-icon-ADC'
+        }, {
+          value: 'nz-icon nz-icon-Firewall'
+        }, {
+          value: 'nz-icon nz-icon-guide'
+        }, {
+          value: 'nz-icon nz-icon-Silence'
+        }, {
+          value: 'nz-icon nz-icon-fast-silence'
+        }, {
+          value: 'nz-icon nz-icon-mute'
+        }, {
+          value: 'nz-icon nz-icon-overview-alert'
+        }, {
+          value: 'nz-icon nz-icon-overview-endpoint'
+        }, {
+          value: 'nz-icon nz-icon-Alertrule'
+        }, {
+          value: 'nz-icon nz-icon-import-success1'
+        }, {
+          value: 'nz-icon nz-icon-import-failed1'
+        }, {
+          value: 'nz-icon nz-icon-stop'
+        }, {
+          value: 'nz-icon nz-icon-failed'
+        }, {
+          value: 'nz-icon nz-icon-unknown-error'
+        }, {
+          value: 'nz-icon nz-icon-role1'
+        }, {
+          value: 'nz-icon nz-icon-Cabinet1'
+        }, {
+          value: 'nz-icon nz-icon-user1'
+        }, {
+          value: 'nz-icon nz-icon-Datacenter2'
+        }, {
+          value: 'nz-icon nz-icon-overview-project'
+        }, {
+          value: 'nz-icon nz-icon-project'
+        }, {
+          value: 'nz-icon nz-icon-overview-module'
+        }, {
+          value: 'el-icon-share'
+        }, {
+          value: 'el-icon-d-caret'
+        }, {
+          value: 'el-icon-caret-left'
+        }, {
+          value: 'el-icon-caret-right'
+        }, {
+          value: 'el-icon-caret-bottom'
+        }, {
+          value: 'el-icon-caret-top'
+        }, {
+          value: 'el-icon-bottom-left'
+        }, {
+          value: 'el-icon-bottom-right'
+        }, {
+          value: 'el-icon-back'
+        }, {
+          value: 'el-icon-right'
+        }, {
+          value: 'el-icon-bottom'
+        }, {
+          value: 'el-icon-top'
+        }, {
+          value: 'el-icon-top-left'
+        }, {
+          value: 'el-icon-top-right'
+        }, {
+          value: 'el-icon-arrow-left'
+        }, {
+          value: 'el-icon-arrow-right'
+        }, {
+          value: 'el-icon-arrow-down'
+        }, {
+          value: 'el-icon-arrow-up'
+        }, {
+          value: 'el-icon-d-arrow-left'
+        }, {
+          value: 'el-icon-d-arrow-right'
+        }, {
+          value: 'el-icon-video-pause'
+        }, {
+          value: 'el-icon-video-play'
+        }, {
+          value: 'el-icon-refresh'
+        }, {
+          value: 'el-icon-refresh-right'
+        }, {
+          value: 'el-icon-refresh-left'
+        }, {
+          value: 'el-icon-finished'
+        }, {
+          value: 'el-icon-sort'
+        }, {
+          value: 'el-icon-sort-up'
+        }, {
+          value: 'el-icon-sort-down'
+        }, {
+          value: 'el-icon-rank'
+        }
+      ], // 获取icon列表
       letter: [
         'A', 'B', 'C', 'D', 'E', 'F', 'G',
         'H', 'I', 'J', 'K', 'L', 'M', 'N',
@@ -180,25 +297,31 @@ export default {
           value: 'server',
           label: this.$t('dashboard.panel.chartForm.typeVal.server')
         }
-      ]
+      ],
+      isChoose: []
     }
   },
   mixins: [rz],
   methods: {
     isStat,
-    iconFormat () {
-      const iconArr = iconList.glyphs.map(item => {
-        const str = iconList.font_family + ' ' + iconList.css_prefix_text + item.font_class
-        return {
-          value: str
+    // 隐藏icon列表
+    closeChoose (index) {
+      this.$set(this.isChoose, index, false)
+    },
+    // 显示icon列表
+    chooseIcon (value, index) {
+      this.$set(this.isChoose, index, !value)
+    },
+    // icon点击
+    iconActive (item, subItem, index) {
+      if (item.icon === subItem.value) {
+        this.chartConfig.param.valueMapping[index].icon = ''
+        this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
+      } else {
+        this.chartConfig.param.valueMapping[index].icon = subItem.value
+        this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
       }
-      })
-      return iconArr
-      // return [
-      //   {
-      //     value: 'nz-icon nz-icon-overview-alert'
-      //   }
-      // ]
+      this.change()
     },
     expressionChange: function () {
       if (this.expressions.length) {

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

@@ -630,28 +630,24 @@
                   <div>
                     <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
                   </div>
-                  <div>
-                    <el-select
-                      v-model="item.icon"
-                      size="small"
-                      style="width: 75px"
-                      :placeholder="$t('el.select.placeholder')"
-                      @change="change('valueMapping', index)"
-                      class="mapping-iconSelect"
+                  <el-popover
+                    placement="top-start"
+                    trigger="manual"
+                    popper-class="mapping-iconPop no-style-class"
+                    v-clickoutside="()=>{closeChoose(index)}"
+                    v-model="isChoose[index]"
                     >
-                    <template slot="prefix">
-                      <i class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
-                    </template>
-                      <el-option
-                        v-for="item in mappingIconList"
-                        :value="item.value"
-                        :key="item.value"
-                        label=" "
-                      >
-                        <i :class="item.value"></i>
-                      </el-option>
-                    </el-select>
+                    <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-form-item>