Визуальные правки плана

resources/js/Pages/Statistic/Components/OutcomeColumn.vue

@@ -1,6 +1,9 @@
 <script setup>
-import {NFlex, NTag, NTooltip} from 'naive-ui'
-import {percentType, typePlan} from "../../../Utils/numbers.js";
+import {NFlex, NSpace, NTag, NTooltip} from 'naive-ui'
+import {percentType} from "../../../Utils/numbers.js";
+import {computed} from "vue";
+import {format, toDate} from "date-fns";
+import {ru} from "date-fns/locale";
 
 const props = defineProps({
     isTotalRow: {
@@ -23,8 +26,23 @@ const props = defineProps({
             total_debt: 0,
             year_plan: 0,
         })
+    },
+    endDate: {
+        type: [Number, String],
+        default: null
     }
 })
+
+const formatedMonth = computed(() => {
+    const date = toDate(props.endDate)
+    return date.toLocaleString('ru', { month: 'long' })
+})
+
+const typePlan = computed(() => {
+    if (props.plan.debt_from_year > 20) return 'error'
+    if (props.plan.debt_from_year > 10) return 'warning'
+    return 'success'
+})
 </script>
 
 <template>
@@ -62,14 +80,17 @@ const props = defineProps({
                     {{ plan.cumulative_percent }}%
                 </NTag>
             </template>
-            <NFlex align="center" justify="start" :wrap="false" size="small">
-                <NTag size="small" round type="info" :bordered="false">План на месяц: {{ plan.month_plan }}</NTag>
-            </NFlex>
-            Сначала года + текущий месяц:
-            <br>План:
-            <span class="font-medium">{{ plan.cumulative_plan }}</span>, долг:
-            <span class="font-medium">{{ plan.debt_from_year }}</span> +
-            <span class="font-medium">{{ plan.current_mouth_dept }}</span>
+            <NSpace vertical>
+                <NFlex align="center" justify="start" :wrap="false" size="small">
+                    <NTag type="info">План на {{formatedMonth}}: {{ plan.month_plan }} / {{ plan.current_mouth_dept }}</NTag>
+                </NFlex>
+                <NTag :type="typePlan">Долг с начала года: {{ plan.debt_from_year }}</NTag>
+<!--                Долг с начала года: {{ plan.debt_from_year }}-->
+            </NSpace>
+<!--            <br>План:-->
+<!--            <span class="font-medium">{{ plan.cumulative_plan }}</span>, долг:-->
+<!--            <span class="font-medium">{{ plan.debt_from_year }}</span> +-->
+<!--            <span class="font-medium">{{ plan.current_mouth_dept }}</span>-->
         </NTooltip>
     </NFlex>
 </template>

resources/js/Pages/Statistic/Index.vue

@@ -184,6 +184,7 @@ const columns = ref([
                     isTotalRow: row.isTotalRow,
                     value: row.outcome,
                     plan: row.plan,
+                    endDate: props.date[1]
                 }
             )
         }