80 lines
2.6 KiB
Vue
80 lines
2.6 KiB
Vue
<script setup>
|
|
import {NFlex, NTag, NTooltip} from 'naive-ui'
|
|
import {percentType, typePlan} from "../../../Utils/numbers.js";
|
|
|
|
const props = defineProps({
|
|
isTotalRow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
value: {
|
|
type: [Number, String],
|
|
default: ''
|
|
},
|
|
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>-->
|
|
<div>
|
|
{{ value }}
|
|
</div>
|
|
<NTooltip v-if="plan && !isTotalRow"
|
|
trigger="hover"
|
|
:arrow="false"
|
|
>
|
|
<template #trigger>
|
|
<NTag :type="percentType(plan.cumulative_percent)"
|
|
round
|
|
:bordered="false"
|
|
size="tiny"
|
|
class="absolute! -right-1.5 bottom-2.5 text-xs"
|
|
>
|
|
{{ 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>
|
|
</NTooltip>
|
|
</NFlex>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|