Профиль хирургии

resources/js/Layouts/Components/Statistic/StatisticRecipientPlanOfYear.vue

@@ -0,0 +1,45 @@
+<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>