feat：chart type为singleStat 是 value Mapping 可以设置字体颜色 和背景颜色

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

@@ -41,7 +41,7 @@
           </el-dropdown>
         </div>
         <div class="mt-10 single-stat-container" v-cloak  v-show="firstShow" >
-          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="single-stat-content" >
+          <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="single-stat-content" :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}">
             {{serieSingleStat}}
             <div class="chart-no-data" v-show="noData">No Data</div>
           </div>
@@ -58,7 +58,7 @@
             <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
           </div>
           <div class="single-stat-screen-container"  >
-            <div id="chartScreenContainer"  ref="chartScreenContainer" class="single-stat-content" >
+            <div id="chartScreenContainer"  ref="chartScreenContainer" class="single-stat-content" :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}">
               {{serieSingleStat}}
               <div class="chart-no-data" v-show="noData">No Data</div>
             </div>
@@ -112,6 +112,7 @@ export default {
       seriesItem: [], // 保存信息
       seriesItemScreen:[],//全屏数据
       serieSingleStat:'',
+      mapping:'',//满足valueMapping时 mapping的值
       images: '',
       loading:Object,
       items: {
@@ -409,8 +410,24 @@ export default {
           this.data = chartItem;
           this.unit = chartDataFormat.getUnit(this.data.unit);
           if(Number(seriesItem)){
-            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
+            let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
+            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.mapping=mapping;
+              if(this.mapping&&!this.mapping.color){
+                this.mapping.color={bac:'#fff',text:'#000'}
+              }
+              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;
           }
@@ -439,6 +456,10 @@ export default {
               }else{
                 mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
               }
+              this.mapping=mapping;
+              if(this.mapping&&!this.mapping.color){
+                this.mapping.color={bac:'#fff',text:'#000'}
+              }
               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);

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

@@ -249,8 +249,7 @@
   .chart-single-stat {
     width: 100%;
     .single-stat-container {
-      padding-left: 8px;
+      padding: 8px;
-      padding-right: 8px;
       display: table;
       text-align: center;
       width: calc(100% - 16px);
@@ -262,6 +261,18 @@
       }
     }
   }
+  .single-stat-screen-container{
+    height: 100%;
+    .single-stat-content{
+      font-size: 30px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      flex-direction: column;
+      height: 100%;
+    }
+  }
   .chart-container.chart-detail {
     height: 100%;
     position: relative;

nezha-fronted/src/components/common/js/tools.js

@@ -72,8 +72,10 @@ export const clickoutside = {
         if (binding.arg) {
           binding.value(e, binding.arg);
         } else {
+          if(binding.value){
             binding.value(e);
           }
+        }
 
       }
     }

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

@@ -58,9 +58,91 @@
   .save-chart-box{
     z-index: 2900;
   }
+  .mc{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 410;
+  }
+  /deep/ .el-color-picker{
+    position: absolute;
+  }
+  .range /deep/ .el-color-picker{
+   left: -17px;
+  }
+  .color-content{
+    height: 0;
+    width: 0;
+    overflow: hidden;
+    position: absolute;
+    top: -280px;
+    left: 140px;
+  }
+  .color-tab{
+    position: absolute;
+    top: -268px;
+    left: -14px;
+    height: 28px;
+    border-radius: 5px 5px 0 0;
+    width: 312px;
+    border: 1px solid #EBEEF5;
+    border-bottom: none;
+    background-color: #FFF;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  }
+  .color-tab div{
+    text-align: center;
+    flex: 1;
+    color: #909399;
+    transition: all .3s cubic-bezier(.645,.045,.355,1);
+    background: #E4E7ED;
+    cursor: pointer;
+  }
+  .color-tab div:first-child{
+    border-right-color: #DCDFE6;
+  }
+  .color-tab div:hover{
+    color: #409EFF;
+  }
+  .color-tab .color-active{
+    color: #409EFF;
+    background-color: #FFF;
+  }
+  .color{
+    position: relative;
+  }
+  .color-show{
+    border: 1px solid #E7EAED;
+    border-radius: 5px;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+  }
+  .color-show-left{
+    width: 28px;
+    height: 28px;
+    border-radius: 5px;
+    text-align: center;
+    line-height: 28px;
+  }
+  .color-arrows{
+    color: #fff;
+    font-weight: bold;
+  }
+  .color-arrows .nz-icon{
+    font-size: 12px;
+  }
 </style>
 <template key="chartBox">
-  <div v-clickoutside="clickOutside" class="right-box right-box-add-chart z-top right-box-chart" :class="boxClass">
+  <div class="mc" @click.self="clickOutside">
+    <div class="right-box right-box-add-chart z-top right-box-chart" :class="boxClass">
       <transition name="right-box">
         <panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
       </transition>
@@ -200,7 +282,7 @@
               @removeExpression="removeExpression"
               :showRemove="false"
             ></promql-input>
-<!--
+            <!--
                       <promql-input
                         :ref="'promql-'+(index-1)"
                         :id="promqlKeys[index-1]"
@@ -215,7 +297,7 @@
                         @removeExpression="removeExpression"
                         :showRemove="false"
                       ></promql-input>
--->
+            -->
             <el-row>
               <template v-if="editChart.type != 'singleStat'">
                 <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
@@ -263,7 +345,36 @@
                 <el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
               </el-form-item>
               <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other  half-form-item-other-two">
-              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);"></el-input>
+                <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 80px);"></el-input>
+                <!--颜色选择器 start-->
+                <div class="color-show" @click="colorPickerClick(index)" v-clickoutside="(e)=>{colorOut(index,e)}">
+                  <div class="color-show-left" :style="{background:mapping.color.bac}">
+                     <span class="color-arrows" :style="{color:mapping.color.text}">
+                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                    T
+                </span>
+                  </div>
+                </div>
+                <div class="color-content" ref="color-content">
+                  <el-color-picker
+                    v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
+                    :ref="'colorPickerBac'+index"
+                    @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
+                  >
+                  </el-color-picker>
+                  <!--<el-color-picker-->
+                    <!--v-model="mapping.color.text"-->
+                    <!--:ref="'colorPickerText'+index"-->
+                    <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
+                  <!--&gt;-->
+                  <!--</el-color-picker>-->
+                </div>
+                <div v-show="showPicker[index].bac ||  showPicker[index].text" class="color-tab">
+                  <div @click="changeShowPicker(index ,'text')" :class="{'color-active':showPicker[index].text}">Text</div>
+                  <div @click="changeShowPicker(index , 'bac')" :class="{'color-active':showPicker[index].bac}">Background</div>
+                </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>
@@ -278,8 +389,37 @@
                   <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-other-two">
+              <el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other-two range">
-              <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);" ></el-input>
+                <el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 80px);" ></el-input>
+                <!--颜色选择器 start-->
+                <div class="color-show" @click="colorPickerClick(index)" v-clickoutside="(e)=>{colorOut(index,e)}">
+                  <div class="color-show-left" :style="{background:mapping.color.bac}">
+                     <span class="color-arrows" :style="{color:mapping.color.text}">
+                  <!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                       <!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac ||  showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
+                    T
+                </span>
+                  </div>
+                </div>
+                <div class="color-content" ref="color-content">
+                  <el-color-picker
+                    v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
+                    :ref="'colorPickerBac'+index"
+                    @active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
+                  >
+                  </el-color-picker>
+                  <!--<el-color-picker-->
+                  <!--v-model="mapping.color.text"-->
+                  <!--:ref="'colorPickerText'+index"-->
+                  <!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
+                  <!--&gt;-->
+                  <!--</el-color-picker>-->
+                </div>
+                <div v-show="showPicker[index].bac ||  showPicker[index].text" class="color-tab">
+                  <div @click="changeShowPicker(index ,'text')" :class="{'color-active':showPicker[index].text}">Text</div>
+                  <div @click="changeShowPicker(index , 'bac')" :class="{'color-active':showPicker[index].bac}">Background</div>
+                </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>
@@ -332,6 +472,7 @@
       <!--preview -->
       <chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
     </div>
+  </div>
 </template>
 
 <script>
@@ -461,6 +602,7 @@
         sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
         textShow:false,
         metricOptions: [],
+        showPicker:[],
         //metricStore: []
       }
     },
@@ -1131,7 +1273,7 @@
         param.last=0;
         param.url='';
         param.threshold='';
-        param.valueMapping={type:'text',mapping:[{value:'',text:''}]};
+        param.valueMapping={type:'text',mapping:[{value:'',text:'',color:{bac:'#fff',text:'#000'}}]};
         param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'};
         param.nullType='connected';
         this.$set(this.editChart, "param", param);
@@ -1188,9 +1330,10 @@
             statistics:'',
             valueMapping:{
               type:'value',
-              mapping:[{text:'',value:''}]
+              mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
             }
           }
+          this.showPicker=[{bac:false,text:false}];
         }else {
           this.setIsOtherChart();
           if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
@@ -1201,9 +1344,10 @@
               statistics:'',
               valueMapping:{
                 type:'value',
-                mapping:[{text:'',value:''}]
+                mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
               }
             }
+            this.showPicker=[{bac:false,text:false}];
           }
           /*if(this.$refs.chartTag){
             this.$refs.chartTag.forEach((item, index) => {
@@ -1371,18 +1515,66 @@
       },
       valueMappingChange:function(value){
         if(this.editChart.param.valueMapping.type == 'value'){
-          this.editChart.param.valueMapping.mapping =[{text:'',value:''}];
+          this.editChart.param.valueMapping.mapping =[{text:'',value:'',color:{bac:'#fff',text:'#000'}}];
+          this.showPicker=[{bac:false,text:false}]
         }else{
-          this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:''}];
+          this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}}];
+          this.showPicker=[{bac:false,text:false}]
         }
       },
       addMapping:function(){
         if(this.editChart.param.valueMapping.type == 'value'){
-          this.editChart.param.valueMapping.mapping .push({text:'',value:''});
+          this.editChart.param.valueMapping.mapping .push({text:'',value:'',color:{bac:'#fff',text:'#000'}});
+          this.showPicker.push({bac:false,text:false})
         }else{
-          this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:''});
+          this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}});
+          this.showPicker.push({bac:false,text:false})
         }
       },
+      colorPickerClick(index){
+        if(this.showPicker[index].bac|| this.showPicker[index].text){//再次点击关闭
+          this.showPicker[index].bac=false;
+          this.showPicker[index].text=false;
+          return
+        }
+        this.showPicker[index].bac=true;
+        this.$refs['colorPickerBac'+ index][0].showPicker=true;
+      },
+      changeShowPicker(index,atr){
+        this.$refs['colorPickerBac'  + index][0].showPicker=true;
+        this.showPicker[index].bac=false;
+        this.showPicker[index].text=false;
+        this.showPicker[index][atr]=true;
+        // atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
+      },
+      colorChange(mapping,flag,val){
+        if(flag){
+          mapping.color['bac']=this.colorRGBtoHex(val)
+        }else{
+          mapping.color['text']=this.colorRGBtoHex(val)
+        }
+      },
+      colorRGBtoHex(color) {
+        let rgb = color.split(',');
+        let r = parseInt(rgb[0].split('(')[1]);
+        let g = parseInt(rgb[1]);
+        let b = parseInt(rgb[2].split(')')[0]);
+        let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+        return hex;
+      },
+      colorOut(index,e){
+        let flag=false;
+        e.path.forEach((item)=>{
+          if(item.className==='el-color-dropdown el-color-picker__panel' || item.className==='color-tab'){
+            flag=true
+          }
+        })
+        if(flag){
+          return
+        }
+        this.showPicker[index].bac=false;
+        this.showPicker[index].text=false;
+      },
       delMapping:function(index){
         this.editChart.param.valueMapping.mapping.splice(index,1)
       },
@@ -1437,6 +1629,15 @@
         immediate: true,
         handler(n) {
           //console.log(n);
+          if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
+            n.param.valueMapping.mapping.forEach(item=>{
+              this.showPicker.push({bac:false,text:false})
+              if(!item.color){
+                item.color={bac:'#fff',text:'#000'};
+              }
+            })
+          }
+
           if(n.title){
             this.isEdit=true;
           }
@@ -1449,11 +1650,11 @@
           } else if(n.type === 'alertList'){
             this.setIsAlertList();
           } else if(n.type === 'singleStat'){
-            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
+            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]})
             this.setIsSingleStat();
           } else if(n.type  === 'table'){
             n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
-            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
+            n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]});
           }else {
             this.setIsOtherChart();
             n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})
@@ -1508,5 +1709,8 @@
   .val-mapping-type .no-fill span{
     background-color: unset !important;
   }
+  .el-color-picker__panel{
+    border-radius: 0 0 5px 5px;
+  }
 </style>