143 lines
5.8 KiB
Vue
143 lines
5.8 KiB
Vue
<script setup>
|
||
import {NSkeleton, NStatistic, NRow, NCol, NSpace, NCard, NButton, NTag, NDatePicker, NFlex, NSelect, NText, NH2} from "naive-ui";
|
||
import {computed, ref} from "vue";
|
||
import {format} from "date-fns";
|
||
import {useNow} from "@vueuse/core";
|
||
import {ru} from "date-fns/locale";
|
||
import {useAuthStore} from "../../../Stores/auth.js";
|
||
import {storeToRefs} from "pinia";
|
||
import {RiAddCircleLine} from 'vue-icons-plus/ri'
|
||
import {TbAlertCircle} from 'vue-icons-plus/tb'
|
||
import {useReportStore} from "../../../Stores/report.js";
|
||
import ReportSelectDate from "../../../Components/ReportSelectDate.vue";
|
||
import DepartmentSelect from "../../../Components/DepartmentSelect.vue";
|
||
import UnwantedEventModal from "./UnwantedEventModal.vue";
|
||
import DatePickerQuery from "../../../Components/DatePickerQuery.vue";
|
||
|
||
const props = defineProps({
|
||
mode: {
|
||
type: String,
|
||
default: 'fillable' // 'fillable', 'readonly'
|
||
},
|
||
isShowDepartmentSelect: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
})
|
||
|
||
const departments = [
|
||
{
|
||
label: 'Все отделения',
|
||
value: 0
|
||
}
|
||
]
|
||
const authStore = useAuthStore()
|
||
const reportStore = useReportStore()
|
||
const {user, availableDepartments} = storeToRefs(authStore)
|
||
const {reportInfo} = storeToRefs(reportStore)
|
||
|
||
const isFillableMode = computed(() => props.mode.toLowerCase() === 'fillable')
|
||
const isReadonlyMode = computed(() => props.mode.toLowerCase() === 'readonly')
|
||
|
||
const openUnwantedEventModal = ref(false)
|
||
|
||
const selectDepartment = ref(0)
|
||
|
||
const currentDate = computed(() => {
|
||
const formatted = format(useNow().value, 'PPPPpp', {
|
||
locale: ru
|
||
})
|
||
|
||
return formatted.charAt(0).toUpperCase() + formatted.slice(1)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<NCard>
|
||
<NFlex vertical>
|
||
<div class="grid grid-cols-[auto_1fr_auto] items-center">
|
||
<NSpace align="center">
|
||
<NTag v-if="isFillableMode" type="info" :bordered="false">
|
||
{{ reportStore.reportInfo.department.department_name }}
|
||
</NTag>
|
||
<DepartmentSelect v-if="isReadonlyMode" />
|
||
<NTag v-if="reportStore.reportInfo.report.userName" type="warning">
|
||
Ответственный: {{ reportStore.reportInfo.report.userName }}
|
||
</NTag>
|
||
</NSpace>
|
||
|
||
<div class="col-3 w-full">
|
||
<DatePickerQuery class="text-lg!"
|
||
:is-head-or-admin="reportStore.reportInfo.report?.isHeadOrAdmin"
|
||
v-model:date="reportStore.timestampCurrentRange"
|
||
:is-one-day="reportStore.reportInfo.report?.isOneDay" />
|
||
</div>
|
||
</div>
|
||
|
||
<NFlex justify="space-between" align="center" :wrap="false">
|
||
<NRow class="grow">
|
||
<NCol :span="4">
|
||
<NStatistic label="Коек">
|
||
<template #default>
|
||
<NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
|
||
<span v-else>{{ reportStore.reportInfo?.department?.beds }}</span>
|
||
</template>
|
||
</NStatistic>
|
||
</NCol>
|
||
<NCol :span="5">
|
||
<NStatistic label="Загруженность">
|
||
<template #default>
|
||
<NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
|
||
<span v-else>{{ reportStore.reportInfo?.department?.percentLoadedBeds }}%</span>
|
||
</template>
|
||
</NStatistic>
|
||
</NCol>
|
||
<NCol :span="5">
|
||
<NStatistic label="Поступило">
|
||
<template #default>
|
||
<NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
|
||
<span v-else>{{ reportStore.reportInfo?.department?.recipientCount }}</span>
|
||
</template>
|
||
</NStatistic>
|
||
</NCol>
|
||
<NCol :span="5">
|
||
<NStatistic label="Выбыло">
|
||
<template #default>
|
||
<NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
|
||
<span v-else>{{ reportStore.reportInfo?.department?.extractCount }}</span>
|
||
</template>
|
||
</NStatistic>
|
||
</NCol>
|
||
<NCol :span="5">
|
||
<NStatistic label="Состоит">
|
||
<template #default>
|
||
<NSkeleton v-if="reportStore.isLoadReportInfo" round class="w-[70px]! mt-2 h-[29px]!" />
|
||
<span v-else>{{ reportStore.reportInfo?.department?.currentCount }}</span>
|
||
</template>
|
||
</NStatistic>
|
||
</NCol>
|
||
</NRow>
|
||
|
||
<NButton type="error" secondary @click="openUnwantedEventModal = true">
|
||
<template #icon>
|
||
<TbAlertCircle />
|
||
</template>
|
||
Нежелательные события ({{ reportStore.unwantedEvents.length }})
|
||
</NButton>
|
||
</NFlex>
|
||
</NFlex>
|
||
</NCard>
|
||
|
||
<UnwantedEventModal v-model:open="openUnwantedEventModal" />
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.n-statistic__label),
|
||
:deep(.n-statistic-value__content) {
|
||
@apply text-center;
|
||
}
|
||
:deep(.n-statistic-value) {
|
||
@apply flex justify-center items-center;
|
||
}
|
||
</style>
|