68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup>
|
|
import {NFlex, NTag, NTooltip} from 'naive-ui'
|
|
import {percentType} from "../../../Utils/numbers.js";
|
|
|
|
const props = defineProps({
|
|
isTotalRow: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
value: {
|
|
type: [Number, String],
|
|
default: ''
|
|
},
|
|
needCompletedToPlan: {
|
|
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="percentType(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>
|
|
Прогресс выполнения плана
|
|
</NTooltip>
|
|
</NFlex>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|