add frontend

2026-06-19 17:42:09 +08:00
parent 49973271e5
commit 5f69ce1a95
53 changed files with 6591 additions and 0 deletions
@@ -0,0 +1,71 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePolling } from '@/composables/usePolling'
+import * as encountersApi from '@/api/encounters'
+import * as clinicalApi from '@/api/clinical'
+import VitalsPanel from '@/components/patient/VitalsPanel.vue'
+import ScoresPanel from '@/components/patient/ScoresPanel.vue'
+import AlertsList from '@/components/patient/AlertsList.vue'
+import OrdersPanel from '@/components/patient/OrdersPanel.vue'
+import SepsisBundlePanel from '@/components/patient/SepsisBundlePanel.vue'
+import Skeleton from '@/components/ui/Skeleton.vue'
+
+const route = useRoute()
+const encounter = ref(null)
+const loading = ref(true)
+const observations = ref([])
+const news2 = ref(null)
+const sepsisBundle = ref(null)
+const orders = ref([])
+
+async function loadAll() {
+  const id = route.params.encounterId
+  loading.value = true
+  try {
+    const [enc, obs, n2, bundle, ord] = await Promise.all([
+      encountersApi.fetchEncounter(id),
+      encountersApi.fetchObservations(id),
+      clinicalApi.fetchCurrentNews2(id).catch(() => null),
+      clinicalApi.fetchSepsisBundle(id).catch(() => null),
+      clinicalApi.fetchOrders(id).catch(() => ({ items: [] })),
+    ])
+    encounter.value = enc
+    observations.value = obs
+    news2.value = n2
+    sepsisBundle.value = bundle
+    orders.value = ord.items ?? ord
+  } finally {
+    loading.value = false
+  }
+}
+
+usePolling(loadAll, 5_000)
+
+watch(() => route.params.encounterId, loadAll)
+</script>
+
+<template>
+  <Skeleton v-if="loading && !encounter" :rows="6" />
+  <div v-else-if="encounter" class="space-y-6">
+    <div class="flex items-center gap-4">
+      <RouterLink to="/ward" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+        &larr; Ward
+      </RouterLink>
+      <h1 class="text-xl font-bold dark:text-white">
+        {{ encounter.patient?.firstName }} {{ encounter.patient?.lastName }}
+      </h1>
+    </div>
+
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <ScoresPanel :news2="news2" :encounter="encounter" />
+      <VitalsPanel :observations="observations" />
+      <AlertsList :encounter-id="route.params.encounterId" />
+    </div>
+
+    <div class="grid gap-4 md:grid-cols-2">
+      <OrdersPanel :orders="orders" />
+      <SepsisBundlePanel v-if="sepsisBundle" :bundle="sepsisBundle" />
+    </div>
+  </div>
+</template>