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,43 @@
+<script setup>
+import { computed } from 'vue'
+import Badge from '@/components/ui/Badge.vue'
+
+const props = defineProps({ patient: { type: Object, required: true } })
+
+const riskVariant = computed(() => {
+  const score = props.patient.news2Score ?? 0
+  if (score >= 7) return 'critical'
+  if (score >= 5) return 'warning'
+  return 'success'
+})
+</script>
+
+<template>
+  <tr>
+    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
+      {{ patient.room ?? '—' }}
+    </td>
+    <td class="px-4 py-3">
+      <div class="text-sm font-medium text-gray-900 dark:text-white">
+        {{ patient.firstName }} {{ patient.lastName }}
+      </div>
+      <div class="text-xs text-gray-500 dark:text-gray-400">{{ patient.mrn }}</div>
+    </td>
+    <td class="whitespace-nowrap px-4 py-3 text-right">
+      <Badge :variant="riskVariant">{{ patient.news2Score ?? '—' }}</Badge>
+    </td>
+    <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-gray-700 dark:text-gray-300">
+      {{ patient.qsofaScore ?? '—' }}
+    </td>
+    <td class="whitespace-nowrap px-4 py-3">
+      <Badge v-if="patient.sepsisActive" variant="critical">Active</Badge>
+      <span v-else class="text-sm text-gray-400">No</span>
+    </td>
+    <td class="whitespace-nowrap px-4 py-3">
+      <Badge v-if="patient.openAlertCount > 0" :variant="patient.openAlertCount > 2 ? 'critical' : 'warning'">
+        {{ patient.openAlertCount }}
+      </Badge>
+      <span v-else class="text-sm text-gray-400">0</span>
+    </td>
+  </tr>
+</template>
@@ -0,0 +1,37 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import PatientRow from './PatientRow.vue'
+
+defineProps({ patients: { type: Array, required: true } })
+const router = useRouter()
+
+function goToPatient(encounterId) {
+  router.push({ name: 'PatientDetail', params: { encounterId } })
+}
+</script>
+
+<template>
+  <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+      <thead class="sticky top-0 bg-gray-50 dark:bg-gray-800">
+        <tr>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Room</th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Patient</th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">NEWS2</th>
+          <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">qSOFA</th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Sepsis</th>
+          <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Alerts</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
+        <PatientRow
+          v-for="patient in patients"
+          :key="patient.encounterId"
+          :patient="patient"
+          class="cursor-pointer transition duration-150 hover:bg-gray-50 dark:hover:bg-gray-800"
+          @click="goToPatient(patient.encounterId)"
+        />
+      </tbody>
+    </table>
+  </div>
+</template>