在实际开发过程中,我们经常遇到客户有这样的需求:实际值比计划值多/少我要能直观的看到对比!
我主要是通过js写一个方法来比较两个值的大小,因为我后台传过来是String类型的,所以我用parseInt处理一下再进行比较!
<el-col :span="6">
<div class="grid-content bg-purple" style="padding-top: 8px;">
<span class="item" >Target:</span><span class="contrastDates" v-model="this.energyTarget" id="energyTarget1" :visible.sync="addDialogVisible" contenteditable="false"
>{{ this.energyTarget }}</span><span class="item">kwh/ton</span>
<br>
<span class="item">Actual:</span><span class="dates" v-model="energyActual" id="energyActual" contenteditable="true"
>{{ this.energyActual }}</span><span class="item">kwh/ton</span>
<br>
<span class="item">Utility</span>
</div>
</el-col>
data里的数据:
data() {
return {
energyActual:"",
energyTarget:"",
/**
* 查询KPI中Target数据,往后台传参数的包,后台拿到两个参数直接数据库查看再把数据返回就可以!
*/
energyTargetValuePackage: {
areaName:"XXX",
kpiName:"Energy",
},
}}
根据数值改变颜色的方法
//根据数值改变字体颜色
changeColor(){
// energy 实际>计划,爆红色
if(parseInt(this.energyActual) > parseInt(this.energyTarget)){
document.getElementById("energyActual").style.color = "#FF9999"
}else {
document.getElementById("energyActual").style.color = "#42b983"
};
},
调用方法,必须用setTimeout才可以显示颜色!这一点特别注意!
mounted: function () {
setTimeout(() => {
this.changeColor();
}, 1000)
},
从后台获取数据的方法第一个getTargetValueByLine是我的方法名,第二个getTargetValueByLine是我的ajax函数名:
getTargetValueByLine() {
getTargetValueByLine(this.energyTargetValuePackage)
.then((res) => {
this.change = res.data.ltc.join(",");
this.energyTarget = parseInt(this.change);
});}
效果图展示