46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<script setup>
|
|
import {NNumberAnimation, NTag, NFlex} from "naive-ui"
|
|
import {computed} from "vue";
|
|
const props = defineProps({
|
|
plan: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
progress: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
|
|
const percentProgress = computed(() => {
|
|
if (!Number(props.plan) && !Number(props.progress)) return 0
|
|
return (props.progress * 100) / props.plan
|
|
})
|
|
|
|
const percentColor = computed(() => {
|
|
if (percentProgress.value < 50) return 'color: var(--color-red-500);' // Ужасно
|
|
if (percentProgress.value >= 50 && percentProgress.value < 80) return 'color: var(--color-amber-500);' // Плохо
|
|
if (percentProgress.value >= 80) return 'color: var(--color-emerald-500);' // Хорошо
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<NTag round :bordered="true">
|
|
<NFlex align="center" justify="center">
|
|
<div>
|
|
План:
|
|
<span :style="percentColor">
|
|
<NNumberAnimation show-separator :from="0" :to="progress" />
|
|
</span>
|
|
из
|
|
<NNumberAnimation show-separator :from="0" :to="plan" />
|
|
</div>
|
|
</NFlex>
|
|
</NTag>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|