61 lines
1.7 KiB
Vue
61 lines
1.7 KiB
Vue
<template>
|
|
<b-nav-item-dropdown no-caret right>
|
|
<template slot="button-content">
|
|
<font-awesome-icon icon="tachometer-alt" /> CPU
|
|
<b-progress :value="status" height=".5rem" :variant="percentageClass"></b-progress>
|
|
</template>
|
|
<b-dropdown-header class="text-center">CPU</b-dropdown-header>
|
|
<div class="text-center">
|
|
<small>{{ cpuName }}</small>
|
|
<br />
|
|
<span :class="'badge badge-' + percentageClass">{{ formattedPercentage }}%</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<template v-for="(temp, id) in temperatures">
|
|
<span :class="'badge badge-' + badgeClass(temp.temperature)" :title="temp.name">{{ temp.temperature }}C</span>
|
|
</template>
|
|
</div>
|
|
</b-nav-item-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'cpu_status',
|
|
props: [ 'status', 'cpuName', 'temperatures' ],
|
|
computed: {
|
|
formattedPercentage: function() {
|
|
if (!this.status) {
|
|
return '0.00';
|
|
}
|
|
return parseFloat(this.status).toFixed(2);
|
|
},
|
|
percentageClass: function() {
|
|
if (this.status >= 90) {
|
|
return 'danger';
|
|
} else if (this.status >= 80) {
|
|
return 'warning';
|
|
}
|
|
return 'success'
|
|
},
|
|
},
|
|
methods: {
|
|
badgeClass: function(temp) {
|
|
if (temp >= 90) {
|
|
return 'danger';
|
|
} else if (temp >= 70) {
|
|
return 'warning';
|
|
} else if (temp >= 60) {
|
|
return 'high';
|
|
} else if (temp >= 50) {
|
|
return 'success';
|
|
} else if (temp >= 40) {
|
|
return 'acceptable';
|
|
} else if (temp >= 30) {
|
|
return 'cool';
|
|
}
|
|
return 'cold';
|
|
},
|
|
}
|
|
}
|
|
</script>
|