NEZ-400 chart 编辑页增加valueMapping功能

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

@@ -1252,6 +1252,20 @@ li{
   display: inline-block;
   width: 400px;
 }
+.right-box-form .one-third-form-item-left{
+  display: inline-block;
+  width: 247px;
+}
+.right-box-form .one-third-form-item-right{
+  display: inline-block;
+  width: 148px;
+  .el-form-item__label{
+    width: 20px !important;
+  }
+  .el-form-item__content{
+    margin-left: 20px !important;
+  }
+}
 .right-box-form>.el-form-item {
   margin-bottom: 18px;
 }

nezha-fronted/src/components/charts/chart-single-stat.vue

@@ -426,7 +426,19 @@ export default {
           this.unit = chartDataFormat.getUnit(this.data.unit);
           if(Number(seriesItem)){
             let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
-            this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+            if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
+              let type=chartItem.param.valueMapping.type;
+              let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
+              let mapping;
+              if(type == 'value'){
+                mapping=mappings.find(item=>{return item.value == singleStatTmp})
+              }else{
+                mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
+              }
+              this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+            }else{
+              this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+            }
           }else {
             this.serieSingleStat =seriesItem;
           }

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

@@ -184,6 +184,14 @@ const en = {
           alertRule:'Alert rule',
           level:'Level',
           state:'State'
+        },
+        valMapping:{
+          name:'Value mapping',
+          from:'From',
+          to:'To',
+          text:'Text',
+          value:'Value',
+          range:'Range',
         }
       },
       chartTableColumn:{

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

@@ -204,6 +204,48 @@
             </template>
           </el-row>
         </el-row>
+        <!--value mapping start-->
+        <div  class="right-box-sub-title" v-if="editChart.type == 'singleStat'">
+          <span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
+          <span  class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
+        </div>
+        <div class="line-100" style="margin-bottom: 20px;" v-if="editChart.type == 'singleStat'"></div>
+        <el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'">
+          <el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" size="small" class="val-mapping-type"  @change="valueMappingChange">
+            <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.param.valueMapping.type == 'value'">
+          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
+            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item" >
+              <el-input size="mini" type="input" v-model="mapping.value"></el-input>
+            </el-form-item>
+            <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item" style="width: 415px;">
+              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 21px);"></el-input>
+              <div  @click="delMapping(index)" style="display: inline-block"><i class="nz-icon nz-icon-minus"></i></div>
+            </el-form-item>
+          </template>
+        </template>
+        <template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'range'">
+          <template  v-for="(mapping,index) in editChart.param.valueMapping.mapping">
+            <div class="half-form-item">
+              <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 :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item" style="width: 415px;">
+              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 21px);" ></el-input>
+              <div @click="delMapping(index)" style="display: inline-block"><i class="nz-icon nz-icon-minus"></i></div>
+            </el-form-item>
+          </template>
+        </template>
+
+        <!--value mapping end-->
+
       </el-form>
     </el-scrollbar>
 
@@ -959,9 +1001,11 @@
         this.editChart.span = 12;
         this.editChart.height = 400+'';
         this.editChart.unit=2;
-        !this.editChart.param && (this.$set(this.editChart, "param", []));
+        let param = {};
-        this.editChart.param.url='';
+        param.url='';
-        this.editChart.param.threshold='';
+        param.threshold='';
+        param.valueMapping={type:'text',mapping:[{value:'',text:''}]};
+        this.$set(this.editChart, "param", param);
         this.elements = [1];
         this.elementTarget = [];
         bus.chartAddInfo.metricTarget = [];
@@ -1141,6 +1185,23 @@
           });
         });
       },
+      valueMappingChange:function(value){
+        if(this.editChart.param.valueMapping.type == 'value'){
+          this.editChart.param.valueMapping.mapping =[{text:'',value:''}];
+        }else{
+          this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:''}];
+        }
+      },
+      addMapping:function(){
+        if(this.editChart.param.valueMapping.type == 'value'){
+          this.editChart.param.valueMapping.mapping .push({text:'',value:''});
+        }else{
+          this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:''});
+        }
+      },
+      delMapping:function(index){
+        this.editChart.param.valueMapping.mapping.splice(index,1)
+      }
     },
     created() {
       this.getSuggestMetric();
@@ -1176,7 +1237,7 @@
         deep: true,
         immediate: true,
         handler(n) {
-          //console.info(n)
+          console.info((JSON.parse(JSON.stringify(n))))
           let panel = this.panelData.find(p => {
             return p.name == n.panelName;
           });
@@ -1224,5 +1285,9 @@
   .chart-box-autocomplete {
     z-index: 3000 !important;
   }
+  .val-mapping-type .no-fill span{
+    background-color: unset !important;
+    color: #FA901C !important;
+  }
 </style>