43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<script setup>
|
|
import {NNumberAnimation, NTag, NFlex} from "naive-ui"
|
|
import {computed} from "vue";
|
|
import {percentType} from "../../../Utils/numbers.js";
|
|
|
|
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 Math.round((props.progress * 100) / props.plan)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<NTag round :bordered="true">
|
|
<NFlex align="center" justify="center">
|
|
<div>
|
|
План:
|
|
<NNumberAnimation show-separator :from="0" :to="progress" />
|
|
из
|
|
<NNumberAnimation show-separator :from="0" :to="plan" />
|
|
</div>
|
|
<NTag :type="percentType(percentProgress)" round :bordered="false" size="small">
|
|
{{ percentProgress }}%
|
|
</NTag>
|
|
</NFlex>
|
|
</NTag>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|