diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index de6c3b4e0..92f5fa4b6 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/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;
}
diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index c924b8883..fd7ed51af 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/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;
}
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index f7c2bc6b2..044618dd8 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/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:{
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 8c84b446b..dea7900aa 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -204,6 +204,48 @@
+
+
+ {{$t('dashboard.panel.chartForm.valMapping.name')}}
+
+
+
+
+
+ {{$t('dashboard.panel.chartForm.valMapping.value')}}
+ {{$t('dashboard.panel.chartForm.valMapping.range')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -959,9 +1001,11 @@
this.editChart.span = 12;
this.editChart.height = 400+'';
this.editChart.unit=2;
- !this.editChart.param && (this.$set(this.editChart, "param", []));
- this.editChart.param.url='';
- this.editChart.param.threshold='';
+ let param = {};
+ param.url='';
+ 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;
+ }