I am trying to assign different colors based on the percentage of each of the 5 batteries. However, the issue I'm facing is that the color spread is not specific to each individual battery.
I suspect this issue arises because the bmss data is being received all at once. Unfortunately, I am unsure of how to resolve this. Currently, I have managed to change the battery color according to the percentage and display it in green. View image of all batteries
The main problem lies with the colormap. Color-coded battery image
Link to code sandbox for reference
Vue Data
<template>
<div id="charging_div" class="frame">
<div>
<div id="charging_top_div">
<div v-for="(bms, index) in bmss" :key="index">
<div id="charging_left_div">
<ProgressBattery :bmss="bms" />
<span>{{ bmss[index].soc }}</span>
</div>
</div>
</div>
<div class="accumulate">
<p>{{ time }} kW</p>
<p>{{ power }} kW</p>
</div>
<div id="charging_bottom_div">
<button id="harging_btn" v-on:click="click_stopCharging_btn">
Stop Charging
</button>
</div>
</div>
</div>
</template>
<script>
import ProgressBattery from "./ProgressBattery.vue";
export default {
name: "connect",
components: {
ProgressBattery,
},
data() {
return {
time: "",
power: "",
bmss: [
{
soc: 5,
},
{
soc: 45,
},
{
soc: 20,
},
{
soc: 100,
},
{
soc: 30,
},
],
};
},
Vue Fetching
<template>
<div id="progress-bar-battery">
<div class="box">
<span v-if="this.bmss.soc >= 100" class="item" id="v100"></span>
<span v-if="this.bmss.soc >= 90" class="item" id="v90"></span>
<span v-if="this.bmss.soc >= 80" class="item" id="v80"></span>
<span v-if="this.bmss.soc >= 70" class="item" id="v70"></span>
<span v-if="this.bmss.soc >= 60" class="item" id="v60"></span>
<span v-if="this.bmss.soc >= 50" class="item" id="v50"></span>
<span v-if="this.bmss.soc >= 40" class="item" id="v40"></span>
<span v-if="this.bmss.soc >= 30" class="item" id="v30"></span>
<span v-if="this.bmss.soc >= 20" class="item" id="v20"></span>
<span v-if="this.bmss.soc >= 10" class="item" id="v10"></span>
</div>
</div>
</template>
<script>
export default {
name: "ProgressBattery",
props: {
bmss: {
type: Object,
required: true,
default: function () {
return [{ soc: 0 }];
},
},
},
mounted() {
if (this.bmss.soc >= 61) {
for (let i = 1; i < 11; i++) {
document.getElementById(`v${i}0`).style.backgroundColor = "#4ee533";
console.log(this.bmss.soc + "Green" + `v${i}0`);
}
} else if (this.bmss.soc >= 21 && this.bmss.soc <= 60) {
for (let i = 1; i < 7; i++) {
document.getElementById(`v${i}0`).style.background = "#FFA500";
console.log(this.bmss.soc + "Orange" + `v${i}0`);
}
} else if (this.bmss.soc <= 20 && this.bmss.soc >= 0) {
for (let i = 1; i < 3; i++) {
document.getElementById(`v${i}0`).style.background = "#FF0000";
console.log(this.bmss.soc + "Red" + `v${i}0`);
}
}
console.log(this.bmss.soc);
},
};
</script>