251 lines
10 KiB
Vue
251 lines
10 KiB
Vue
<script setup>
|
||
import AppLayout from "../../Layouts/AppLayout.vue";
|
||
import {useReportStore} from "../../Stores/report.js";
|
||
import {h, onMounted, ref, watch} from "vue";
|
||
import {useAuthStore} from "../../Stores/auth.js";
|
||
import {NCard, NFlex, NNumberAnimation, NStatistic, NTabPane, NTabs, NTag} from "naive-ui";
|
||
import DatePickerQuery from "../../Components/DatePickerQuery.vue";
|
||
import AppPanel from "../../Components/AppPanel.vue";
|
||
import AppContainer from "../../Components/AppContainer.vue";
|
||
import PatientTypeSection from "./Components/PatientSection.vue";
|
||
import PatientTypeSectionItem from "./Components/PatientSectionItem.vue";
|
||
import PatientDataTable from "./Components/PatientDataTable.vue";
|
||
import {format, formatDistanceStrict} from 'date-fns';
|
||
import { ru } from 'date-fns/locale';
|
||
import TooltipColumn from "./Components/DataTableColumns/TooltipColumn.vue";
|
||
import ActionsColumn from "./Components/DataTableColumns/ActionsColumn.vue";
|
||
import OperationsColumn from "./Components/DataTableColumns/OperationsColumn.vue";
|
||
import ReportWidget from "./Components/ReportWidget.vue";
|
||
|
||
const props = defineProps({
|
||
department: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
report: {
|
||
type: Object,
|
||
default: {}
|
||
},
|
||
metrikaItems: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
patients: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
|
||
inDepartmentHistories: {
|
||
type: Object,
|
||
default: { data: [] }
|
||
},
|
||
plannedHistories: {
|
||
type: Object,
|
||
default: { data: [] }
|
||
},
|
||
emergencyHistories: {
|
||
type: Object,
|
||
default: { data: [] }
|
||
},
|
||
recipientHistories: {
|
||
type: Object,
|
||
default: { data: [] }
|
||
},
|
||
dischargedHistories: {
|
||
type: Object,
|
||
default: { data: [] }
|
||
},
|
||
deceasedHistories: {
|
||
type: Object,
|
||
default: { data: [] }
|
||
},
|
||
transferredHistories: {
|
||
type: Object,
|
||
default: { data: [] }
|
||
},
|
||
dates: {
|
||
type: Array,
|
||
default: []
|
||
}
|
||
})
|
||
|
||
const reportStore = useReportStore()
|
||
const authStore = useAuthStore()
|
||
const userDepartment = authStore.userDepartment
|
||
const loading = ref(false)
|
||
|
||
const columns = [
|
||
{
|
||
title: 'ФИО',
|
||
key: 'full_name',
|
||
width: 280
|
||
},
|
||
{
|
||
title: 'Возраст',
|
||
key: 'birth_date',
|
||
render: (row) => formatDistanceStrict(new Date(row.birth_date), new Date(), { locale: ru }),
|
||
width: 75,
|
||
},
|
||
{
|
||
title: 'Д/р',
|
||
key: 'birth_date',
|
||
minWidth: 94,
|
||
maxWidth: 100,
|
||
width: 94,
|
||
resizable: false,
|
||
render: (row) => format(new Date(row.birth_date), 'dd.MM.yyyy')
|
||
},
|
||
{
|
||
title: 'Д/п',
|
||
key: 'latest_migration.ingoing_date',
|
||
minWidth: 134,
|
||
maxWidth: 144,
|
||
width: 134,
|
||
resizable: false,
|
||
render: (row) => format(new Date(row.latest_migration.ingoing_date), 'dd.MM.yyyy HH:mm')
|
||
},
|
||
{
|
||
title: 'Диагноз',
|
||
key: 'latest_migration.diagnosis_code',
|
||
width: 75,
|
||
resizable: false,
|
||
render: (row) => h(TooltipColumn, { triggerText: row.latest_migration.diagnosis_code, contentText: row.latest_migration.diagnosis_name })
|
||
},
|
||
{
|
||
title: 'Операции',
|
||
key: 'latest_migration.operations',
|
||
width: 140,
|
||
className: 'relative',
|
||
render: (row) => h(OperationsColumn, { operations: row.latest_migration.operations })
|
||
},
|
||
{
|
||
title: '',
|
||
key: 'actions',
|
||
align: 'end',
|
||
render: (row) => {
|
||
return h(
|
||
ActionsColumn,
|
||
{
|
||
row: row,
|
||
isMis: true
|
||
}
|
||
)
|
||
}
|
||
}
|
||
]
|
||
|
||
const syncPageProps = () => reportStore.initializeFromPage(props)
|
||
|
||
onMounted(syncPageProps)
|
||
|
||
watch(() => props, (newProps) => {
|
||
reportStore.initializeFromPage(newProps)
|
||
}, {
|
||
deep: true,
|
||
immediate: true
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<!-- <template #headerSuffix>-->
|
||
<!-- <StatisticRecipientPlanOfYear :plan="reportStore.reportInfo.department.recipientPlanOfYear" :progress="reportStore.reportInfo.department.progressPlanOfYear" />-->
|
||
<!-- </template>-->
|
||
<!-- <ReportForm :mode />-->
|
||
|
||
<AppContainer>
|
||
<AppPanel>
|
||
<NFlex justify="space-between" align="center">
|
||
<NTag type="info" :bordered="false">
|
||
{{ userDepartment.name_full }}
|
||
</NTag>
|
||
<DatePickerQuery :date="dates" :is-head-or-admin="true" class="text-lg!" />
|
||
</NFlex>
|
||
</AppPanel>
|
||
<div class="grid grid-cols-[1fr_auto] gap-x-2">
|
||
<AppPanel>
|
||
<NFlex justify="space-between" align="center">
|
||
|
||
</NFlex>
|
||
</AppPanel>
|
||
<NFlex :wrap="false" :size="8">
|
||
<ReportWidget :to="deceasedHistories.data.length">
|
||
Умерло
|
||
</ReportWidget>
|
||
<ReportWidget :to="deceasedHistories.data.length">
|
||
<NSpace vertical :size="0">
|
||
<div>Летальность</div>
|
||
<div>%</div>
|
||
</NSpace>
|
||
</ReportWidget>
|
||
<ReportWidget :to="deceasedHistories.data.length">
|
||
<NSpace vertical :size="0">
|
||
<div>Операций</div>
|
||
<div>Э / П</div>
|
||
</NSpace>
|
||
</ReportWidget>
|
||
</NFlex>
|
||
</div>
|
||
<AppPanel>
|
||
<NTabs type="segment">
|
||
<NTabPane name="mis" tab="МИС">
|
||
<PatientTypeSection>
|
||
<PatientTypeSectionItem label="Планово" :counter="plannedHistories.data.length">
|
||
<PatientDataTable :data="plannedHistories.data" :columns="columns" />
|
||
</PatientTypeSectionItem>
|
||
<PatientTypeSectionItem label="Экстренно" :counter="emergencyHistories.data.length">
|
||
<PatientDataTable :data="emergencyHistories.data" :columns="columns" />
|
||
</PatientTypeSectionItem>
|
||
<PatientTypeSectionItem label="Находятся на контроле" :counter="recipientHistories.data.length">
|
||
<PatientDataTable :data="recipientHistories.data" :columns="columns" />
|
||
</PatientTypeSectionItem>
|
||
<PatientTypeSectionItem label="Находятся в реанимации" :counter="recipientHistories.data.length">
|
||
<PatientDataTable :data="recipientHistories.data" :columns="columns" />
|
||
</PatientTypeSectionItem>
|
||
<PatientTypeSectionItem label="Выбывшие" :counter="dischargedHistories.data.length + deceasedHistories.data.length">
|
||
<NTabs type="segment" animated>
|
||
<NTabPane name="1" :tab="`Выписанные (${dischargedHistories.data.length})`">
|
||
<PatientDataTable :data="dischargedHistories.data" :columns="columns" />
|
||
</NTabPane>
|
||
<NTabPane name="2" :tab="`Умершие (${deceasedHistories.data.length})`">
|
||
<PatientDataTable :data="deceasedHistories.data" :columns="columns" />
|
||
</NTabPane>
|
||
<NTabPane name="3" :tab="`Переведенные (${transferredHistories.data.length})`">
|
||
<PatientDataTable :data="transferredHistories.data" :columns="columns" />
|
||
</NTabPane>
|
||
</NTabs>
|
||
</PatientTypeSectionItem>
|
||
</PatientTypeSection>
|
||
</NTabPane>
|
||
<NTabPane name="nurse" tab="Мед. сестра">
|
||
<PatientTypeSection>
|
||
<PatientTypeSectionItem label="Планово" :counter="plannedHistories.length">
|
||
<PatientDataTable :data="plannedHistories" :columns="columns" />
|
||
</PatientTypeSectionItem>
|
||
<PatientTypeSectionItem label="Экстренно" :counter="emergencyHistories.length">
|
||
<PatientDataTable :data="emergencyHistories" :columns="columns" />
|
||
</PatientTypeSectionItem>
|
||
<PatientTypeSectionItem label="Поступившие" :counter="recipientHistories.length">
|
||
<PatientDataTable :data="recipientHistories" :columns="columns" />
|
||
</PatientTypeSectionItem>
|
||
<PatientTypeSectionItem label="Выбывшие" :counter="recipientHistories.length">
|
||
<NTabs type="segment" animated>
|
||
<NTabPane name="1" tab="Выписанные">
|
||
<PatientDataTable :data="recipientHistories" :columns="columns" />
|
||
</NTabPane>
|
||
<NTabPane name="2" tab="Умершие">
|
||
<PatientDataTable :data="recipientHistories" :columns="columns" />
|
||
</NTabPane>
|
||
<NTabPane name="3" tab="Переведенные">
|
||
<PatientDataTable :data="recipientHistories" :columns="columns" />
|
||
</NTabPane>
|
||
</NTabs>
|
||
</PatientTypeSectionItem>
|
||
</PatientTypeSection>
|
||
</NTabPane>
|
||
</NTabs>
|
||
</AppPanel>
|
||
</AppContainer>
|
||
</AppLayout>
|
||
</template>
|