122 lines
4.0 KiB
Vue
122 lines
4.0 KiB
Vue
<script setup>
|
||
import {NFlex, NSpace, NTag, NTooltip, NEl} from 'naive-ui'
|
||
import {percentType} from "../../../Utils/numbers.js";
|
||
import {computed, ref} from "vue";
|
||
|
||
const props = defineProps({
|
||
isTotalRow: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
value: {
|
||
type: [Number, String],
|
||
default: ''
|
||
},
|
||
plan: {
|
||
type: Object,
|
||
default: () => ({
|
||
year_plan: 0,
|
||
month_plan: 0,
|
||
period_plan: 0,
|
||
debt_at_period_start: 0,
|
||
cumulative_plan: 0,
|
||
debt_from_year: 0,
|
||
actual_year_to_date: 0,
|
||
cumulative_percent: 0,
|
||
is_calculate_debt: false,
|
||
})
|
||
},
|
||
startOfYear: {
|
||
type: String
|
||
}
|
||
})
|
||
|
||
// План за период + непогашенный долг, накопленный до начала периода
|
||
const planWithDebt = computed(() => {
|
||
const periodPlan = Number(props.plan?.period_plan ?? 0)
|
||
const periodDebt = Number(props.plan?.debt_from_year ?? 0)
|
||
|
||
return props.plan?.is_calculate_debt ? periodPlan + periodDebt : periodPlan
|
||
})
|
||
|
||
// % выполнения плана за период с учётом долга
|
||
const periodPercent = computed(() => {
|
||
if (!planWithDebt.value) return 0
|
||
|
||
return Math.round((Number(props.value) * 100) / planWithDebt.value)
|
||
})
|
||
|
||
// Цвет долга с начала года (на дату конца выбранного периода)
|
||
const typePlan = computed(() => {
|
||
if (props.plan.debt_from_year > 20) return 'error'
|
||
if (props.plan.debt_from_year > 10) return 'warning'
|
||
return 'success'
|
||
})
|
||
|
||
const planTooltipShow = ref(false)
|
||
|
||
const valueStyle = computed(() => {
|
||
if (planTooltipShow.value) {
|
||
return {
|
||
fontWeight: '700',
|
||
color: 'var(--primary-color)'
|
||
}
|
||
}
|
||
})
|
||
</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>-->
|
||
<NEl :style="valueStyle">
|
||
{{ value }}
|
||
</NEl>
|
||
<!-- <div class="absolute inset-x-1/2 inset-y-0 w-[22px] h-[22px] -translate-x-[11px] -translate-y-[2px]" />-->
|
||
<NTooltip v-if="plan && !isTotalRow"
|
||
trigger="hover"
|
||
:arrow="false"
|
||
@update-show="show => planTooltipShow = show"
|
||
>
|
||
<template #trigger>
|
||
<NTag :type="percentType(periodPercent)"
|
||
round
|
||
:bordered="false"
|
||
size="tiny"
|
||
class="absolute! -right-1.5 bottom-2.5 text-xs"
|
||
>
|
||
{{ periodPercent }}%
|
||
</NTag>
|
||
</template>
|
||
<NSpace vertical>
|
||
<NFlex align="center" justify="start" :wrap="false" size="small">
|
||
<NTag type="info">План: {{ plan.period_plan }}</NTag>
|
||
</NFlex>
|
||
<NTag :type="typePlan">Долг с {{ startOfYear }}: {{ plan.debt_from_year }}</NTag>
|
||
</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>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|