From 1120bef05a401c03a2c9b1b6d6c2b7fe917d69e9 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Fri, 4 Dec 2020 17:42:07 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E6=94=B9=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5=E9=9D=A2=E6=96=87=E5=AD=97=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E6=9C=AA=E8=A2=AB=E5=8A=A0=E8=BD=BD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/charts/chartPreview.vue     | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index e9c0436af..72b7f575c 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -123,7 +123,7 @@
           <div class="line-area" ref="singleStatArea"  id="singleStatArea"  style="margin-top:0px; text-align:center;
       vertical-align: middle;
       display:table-cell;
-      font-size:30px;">
+      font-size:30px;" :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff'}">
             {{serieSingleStat}}
             <div class="chart-no-data" v-show="noData">No Data</div>
           </div>
@@ -143,7 +143,7 @@
           </el-table-column>
           <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
             <template slot-scope="scope">
-              {{scope.row.value}}
+              <div :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
             </template>
           </el-table-column>
         </el-table>
@@ -252,6 +252,7 @@
         pageHeight:40,
         hasLegendOptions:false,
         screenLegendOptions:[],
+        mapping:{},
       };
     },
     computed: {
@@ -553,7 +554,7 @@
                     this.setData(_chartItem, series, legend);
                   }else if(chartItem.type ==='singleStat'){
                     if(Number(singleStatRlt)){
-                      let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));
+                      let singleStatTmp =parseFloat(Number(singleStatRlt).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:[];
@@ -563,7 +564,12 @@
                         }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);
+                        this.mapping=mapping;
+                        if(this.mapping&&!this.mapping.color){
+                          this.mapping.color={bac:'#fff',text:'#000'}
+                        }
+                        console.log(mapping)
+                        this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):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);
                       }
@@ -1042,8 +1048,8 @@
             }else{
               mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
             }
-            item.value = mapping?mapping.text:this.unit.compute(value,null,2);
-            console.log('value',value,'mapping',mapping)
+            this.mapping=mapping;
+            item.value = mapping?mapping.text.replace('{{value}}', item.value):this.unit.compute(value,null,2);
           }
           return item;
         })