[Изменено]: столбец Выбыло в статистике #3

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

@@ -11,65 +11,67 @@ const props = defineProps({
         type: [Number, String],
         default: ''
     },
-    needCompletedToPlan: {
-        type: [Number, String],
-        default: null
-    },
-    planOfYear: {
-        type: [Number, String],
-        default: null
-    },
-    progressCompletedToPlan: {
-        type: [Number, String],
-        default: null
+    plan: {
+        type: Object,
+        default: () => ({
+            actual_to_date: 0,
+            cumulative_plan: 0,
+            current_mouth_dept: 0,
+            debt_from_year: 0,
+            month_plan: 0,
+            outcome_in_current_mouth: 0,
+            total_debt: 0,
+            year_plan: 0,
+        })
     }
 })
 </script>
 
 <template>
     <NFlex align="center" justify="center" class="relative!">
-        <NTooltip v-if="needCompletedToPlan && !isTotalRow"
-                  trigger="hover"
-                  :arrow="false"
-        >
-            <template #trigger>
-                <NTag :type="typePlan(planOfYear, needCompletedToPlan)"
-                    round
-                    :bordered="false"
-                    size="tiny"
-                    class="absolute! -left-1.5 bottom-2.5 text-xs"
-                >
-                    {{ needCompletedToPlan }}
-                </NTag>
-            </template>
-            Требуется выписать в текущем месяце
-        </NTooltip>
+<!--        <NTooltip v-if="needCompletedToPlan && !isTotalRow"-->
+<!--                  trigger="hover"-->
+<!--                  :arrow="false"-->
+<!--        >-->
+<!--            <template #trigger>-->
+<!--                <NTag :type="typePlan(planOfYear, needCompletedToPlan)"-->
+<!--                    round-->
+<!--                    :bordered="false"-->
+<!--                    size="tiny"-->
+<!--                    class="absolute! -left-1.5 bottom-2.5 text-xs"-->
+<!--                >-->
+<!--                    {{ needCompletedToPlan }}-->
+<!--                </NTag>-->
+<!--            </template>-->
+<!--            Требуется выписать в текущем месяце-->
+<!--        </NTooltip>-->
         <div>
             {{ value }}
         </div>
-        <NTooltip v-if="progressCompletedToPlan && !isTotalRow"
+        <NTooltip v-if="plan && !isTotalRow"
                   trigger="hover"
                   :arrow="false"
         >
             <template #trigger>
-                <NTag :type="percentType(progressCompletedToPlan)"
+                <NTag :type="percentType(plan.cumulative_percent)"
                       round
                       :bordered="false"
                       size="tiny"
                       class="absolute! -right-1.5 bottom-2.5 text-xs"
                 >
-                    {{ progressCompletedToPlan }}%
+                    {{ plan.cumulative_percent }}%
                 </NTag>
             </template>
             <NFlex align="center" justify="start" :wrap="false" size="small">
-                <NTag size="small" round type="default" :bordered="false">Месячный</NTag>
-                <NTag v-if="needCompletedToPlan === 0" size="small" round type="success" :bordered="false">Выполнен</NTag>
+                <NTag size="small" round type="info" :bordered="false">План на месяц: {{ plan.month_plan }}</NTag>
+                <NTag v-if="plan.current_mouth_dept === 0" size="small" round type="success" :bordered="false">Выполнен</NTag>
                 <NTag v-else size="small" round type="warning" :bordered="false">Не выполнен</NTag>
             </NFlex>
-            Прогресс выполнения плана
+            Сначала года + текущий месяц:
             <br>План:
-            <span class="font-medium">{{ planOfYear }}</span>, требуется выписать еще:
-            <span class="font-medium">{{ needCompletedToPlan }}</span>
+            <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>