40 lines
787 B
Vue
40 lines
787 B
Vue
<template>
|
|
<span :class="classes" :title="title" v-text="formatted"></span>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['value', 'warning', 'critical', 'full'],
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
formatted() {
|
|
return this.value;
|
|
},
|
|
percent() {
|
|
return Math.floor((this.value / this.full) * 100);
|
|
},
|
|
title() {
|
|
return `тек. ${this.value} / опт. склад ${this.warning} / полн. ${this.full}, ${this.percent}%`;
|
|
},
|
|
classes() {
|
|
return {
|
|
warning: this.value >= this.warning && this.value < this.critical,
|
|
bad: this.value >= this.critical,
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'style';
|
|
.warning {
|
|
color: $waring-color;
|
|
}
|
|
.bad {
|
|
color: $error-color;
|
|
}
|
|
</style>
|