REAL SHOWCASE SOURCEclinical-flow-sheet-nursing

1 个文件 · 68 行 · TypeScript

// ===== showcase/src/examples/components/clinical_flow_sheet.ts ===== import {  RenderClinicalFlowSheet,  RenderPageHeader,  RenderStackPanel,  RenderText,  type ClinicalFlowSheetEventItem,  type ClinicalFlowSheetFluidRecord,  type ClinicalFlowSheetTextCell,  type ClinicalFlowSheetTrack,  type ClinicalFlowSheetValueCell,  type ClinicalFlowSheetVitalSeries,} from 'ds-ui' const base = new Date(2026, 6, 15, 0, 0, 0, 0)const at = (hours: number): Date => new Date(base.getTime() + hours * 60 * 60 * 1000) function createTracks(): ClinicalFlowSheetTrack[] {  const events: ClinicalFlowSheetEventItem[] = [    { id: 'admit', label: '入院', at: at(2), color: { r: 21, g: 90, b: 168, a: 1 } },    { id: 'surgery', label: '手术', kind: 'range', start: at(30), end: at(35), lane: 0, color: { r: 234, g: 88, b: 12, a: 1 } },    { id: 'transfusion', label: '输血', kind: 'range', start: at(44), end: at(46), lane: 1, color: { r: 220, g: 38, b: 38, a: 1 } },  ]  const vitals: ClinicalFlowSheetVitalSeries[] = [    { id: 'temperature', label: '体温', unit: '℃', color: { r: 220, g: 38, b: 38, a: 1 }, min: 35, max: 41, points: [      { at: at(2), value: 37.4 }, { at: at(10), value: 38.1, symbol: 'triangle' }, { at: at(18), value: 37.2 }, { at: at(30), value: 36.8 }, { at: at(38), value: 37.6 }, { at: at(50), value: 37.1 }, { at: at(62), value: 36.9 },    ] },    { id: 'pulse', label: '脉搏', color: { r: 21, g: 128, b: 61, a: 1 }, min: 40, max: 140, points: [      { at: at(2), value: 78 }, { at: at(10), value: 96 }, { at: at(18), value: 82 }, { at: at(30), value: 88 }, { at: at(38), value: 104 }, { at: at(50), value: 84 }, { at: at(62), value: 80 },    ] },  ]  const bloodPressure: ClinicalFlowSheetValueCell[] = [{ at: at(6), value: '126/78' }, { at: at(18), value: '118/72' }, { at: at(38), value: '132/84', tone: 'warning' }, { at: at(58), value: '122/76' }]  const fluid: ClinicalFlowSheetFluidRecord[] = [    { id: 'iv-1', at: at(5), direction: 'input', category: '静脉输液', amount: 500, unit: 'ml' },    { id: 'urine-1', at: at(11), direction: 'output', category: '尿量', amount: 420, unit: 'ml' },    { id: 'blood-1', at: at(45), direction: 'input', category: '悬红', amount: 200, unit: 'ml' },  ]  const notes: ClinicalFlowSheetTextCell[] = [{ at: at(2), text: '责任护士 A' }, { at: at(35), text: '术后回房' }, { at: at(46), text: '输血观察' }]  return [    { id: 'events', title: '临床事件', type: 'event-lane', data: events },    { id: 'vitals', title: '生命体征', type: 'vital-chart', data: vitals },    { id: 'bp', title: '血压', type: 'value-row', data: bloodPressure },    { id: 'fluid', title: '入出量', type: 'fluid-balance', data: fluid },    { id: 'notes', title: '备注/签名', type: 'text-row', data: notes },  ]} export function createClinicalFlowSheetExample(): RenderStackPanel {  const status = new RenderText('点击或双击时间网格中的事件、生命体征点和记录单元格。', { role: 'secondary' })  const sheet = new RenderClinicalFlowSheet({    title: '护理体温单',    subtitle: '李安然 · 心内科 · 18 床',    height: 560,    rowHeaderWidth: 136,    timeScale: { start: at(0), end: at(72), stepHours: 4, columnWidth: 58, operationStart: at(30) },    tracks: createTracks(),    onCellActivate: hit => { status.text = `已激活:${hit.label ?? hit.kind}` },    onSelectionChange: selection => { if (selection) status.text = `已选择轨道:${selection.trackId} · ${selection.kind}` },  })   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 10, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'ClinicalFlowSheet 护理体温单', description: '面向临床时间轴的可滚动轨道组件,统一呈现事件、生命体征、血压、入出量和护理记录。' }))  panel.addChild(status)  panel.addChild(sheet, 1)  panel.padding = 12  return panel}