117 lines
3.5 KiB
Vue
117 lines
3.5 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import {useVueFlow, VueFlow} from '@vue-flow/core'
|
||
import AppLayout from "../../Layouts/AppLayout.vue";
|
||
|
||
const props = defineProps({
|
||
path: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
})
|
||
|
||
|
||
const elements = ref([
|
||
// Ноды (блоки)
|
||
{
|
||
id: '1',
|
||
type: 'input',
|
||
label: 'Поступление',
|
||
position: { x: 100, y: 50 },
|
||
data: {
|
||
patient: 'Иванов И.И.',
|
||
time: '09:00',
|
||
status: 'arrival'
|
||
},
|
||
class: 'node-arrival'
|
||
},
|
||
{
|
||
id: '2',
|
||
label: 'Первичный осмотр',
|
||
position: { x: 300, y: 50 },
|
||
data: {
|
||
doctor: 'Петров П.П.',
|
||
diagnosis: 'Предварительный',
|
||
duration: '30 мин'
|
||
},
|
||
class: 'node-examination'
|
||
},
|
||
{
|
||
id: '3',
|
||
label: 'Анализы',
|
||
position: { x: 500, y: 50 },
|
||
data: {
|
||
tests: ['Кровь', 'Моча', 'УЗИ'],
|
||
lab: 'Лаборатория №1'
|
||
},
|
||
class: 'node-tests'
|
||
},
|
||
{
|
||
id: '4',
|
||
label: 'Лечение',
|
||
position: { x: 300, y: 200 },
|
||
data: {
|
||
procedures: ['Капельница', 'Уколы'],
|
||
ward: 'Палата 304'
|
||
},
|
||
class: 'node-treatment'
|
||
},
|
||
{
|
||
id: '5',
|
||
type: 'output',
|
||
label: 'Выписка',
|
||
position: { x: 100, y: 350 },
|
||
data: {
|
||
outcome: 'Выздоровление',
|
||
date: '2024-01-15'
|
||
},
|
||
class: 'node-discharge'
|
||
},
|
||
])
|
||
|
||
const edges = ref([
|
||
{ id: 'e1-2', source: '1', target: '2', label: 'Направлен' },
|
||
{ id: 'e2-3', source: '2', target: '3', label: 'На анализы' },
|
||
{ id: 'e3-4', source: '3', target: '4', label: 'Результаты' },
|
||
{ id: 'e4-5', source: '4', target: '5', label: 'Завершено' }
|
||
])
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout>
|
||
<div class="h-[calc(100vh-48px)]">
|
||
<VueFlow v-model:nodes="elements" v-model:edges="edges" :fit-view-on-init="true">
|
||
<template #node-custom="{ data, label }">
|
||
<div class="patient-node">
|
||
<div class="node-icon">
|
||
<span v-if="data.status === 'arrival'">🏥</span>
|
||
<span v-else-if="data.doctor">👨⚕️</span>
|
||
<span v-else-if="data.tests">🧪</span>
|
||
<span v-else-if="data.procedures">💉</span>
|
||
<span v-else>✅</span>
|
||
</div>
|
||
<div class="node-info">
|
||
<strong>{{ label }}</strong>
|
||
<div v-if="data.patient" class="patient-name">
|
||
{{ data.patient }}
|
||
</div>
|
||
<div v-if="data.time" class="node-time">
|
||
⏰ {{ data.time }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</VueFlow>
|
||
</div>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* Цвета для разных типов нод */
|
||
.node-arrival { border-color: #4CAF50; }
|
||
.node-examination { border-color: #2196F3; }
|
||
.node-tests { border-color: #FF9800; }
|
||
.node-treatment { border-color: #9C27B0; }
|
||
.node-discharge { border-color: #607D8B; }
|
||
</style>
|