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: ''
|
||
},
|
||
needCompletedToPlan: {
|
||
type: [Number, String],
|
||
default: null
|
||
},
|
||
planOfYear: {
|
||
type: [Number, String],
|
||
default: null
|
||
},
|
||
progressCompletedToPlan: {
|
||
type: [Number, String],
|
||
default: null
|
||
}
|
||
})
|
||
</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="progressCompletedToPlan && !isTotalRow"
|
||
trigger="hover"
|
||
:arrow="false"
|
||
>
|
||
<template #trigger>
|
||
<NTag :type="percentType(progressCompletedToPlan)"
|
||
round
|
||
:bordered="false"
|
||
size="tiny"
|
||
class="absolute! -right-1.5 bottom-2.5 text-xs"
|
||
>
|
||
{{ progressCompletedToPlan }}%
|
||
</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 v-else size="small" round type="warning" :bordered="false">Не выполнен</NTag>
|
||
</NFlex>
|
||
Прогресс выполнения плана
|
||
<br>План:
|
||
<span class="font-medium">{{ planOfYear }}</span>, требуется выписать еще:
|
||
<span class="font-medium">{{ needCompletedToPlan }}</span>
|
||
</NTooltip>
|
||
</NFlex>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|