DirectSurface UIDirectSurface UI
开始使用
文档/组件手册

ClinicalFlowSheet 临床时间流表

通用布局能力：RenderClinicalFlowSheet 实例统一支持 width、height、min/max、margin 和槽位对齐；行列与时间轴尺寸仍由流表配置计算。详见组件通用布局属性。

RenderClinicalFlowSheet 是面向护理体温单、生命体征趋势、临床事件和入出量记录的时间轨道组件。框架负责时间轴、轨道布局、虚拟可见区、Canvas 绘制、滚动、命中、选择和 Tooltip；业务通过 tracks、时间范围和可选 renderer 注入具体内容。

LIVE CANVAS可运行组件示例
ON-DEMAND RUNTIME交互式示例将在进入视区时启动避免文档首屏同时初始化多个 Canvas Runtime

API 总览

import {  ClinicalFlowSheetController,  RenderClinicalFlowSheet,  type ClinicalFlowSheetTimeScale,  type ClinicalFlowSheetTrack,  type ClinicalFlowSheetTrackRenderer,} from 'ds-ui'
API 类型 用途
RenderClinicalFlowSheet class 临床时间网格和轨道渲染组件。
ClinicalFlowSheetController class 保存 viewport、hover 和 selection，并向组件广播变化。
ClinicalFlowSheetTimeScale type 起止时间、步长、列宽、护理日和表头配置。
ClinicalFlowSheetTrack type 一条业务轨道，包含稳定 ID、标题、类型、数据和尺寸。
ClinicalFlowSheetTrackRenderer interface 自定义轨道的测量、绘制和命中协议。

何时使用

  • 护理体温单、生命体征观察单和临床时间轴。
  • 需要把事件、趋势点、数值、评分、入出量和备注对齐到统一时间列。
  • 数据跨度较长，需要横向滚动和可见列裁剪。
  • 不同业务模板需要复用同一时间网格，但轨道数据和绘制方式不同。

普通折线趋势图应使用 Charts；表格型明细应使用 DataGrid；需要自由文档排版时使用 MedicalRecordEditor。

最小示例

const events: ClinicalFlowSheetEventItem[] = []const vitalSeries: ClinicalFlowSheetVitalSeries[] = []const sheet = new RenderClinicalFlowSheet({  title: '护理体温单',  subtitle: '心内科 · 18 床',  height: 620,  timeScale: {    start: new Date('2026-07-15T00:00:00'),    end: new Date('2026-07-18T00:00:00'),    stepHours: 4,    columnWidth: 58,  },  tracks: [    { id: 'events', title: '临床事件', type: 'event-lane', data: events },    { id: 'vitals', title: '生命体征', type: 'vital-chart', data: vitalSeries },  ],})

构造参数

参数 类型 默认值 说明
title string 'Clinical Flow Sheet' 主标题。
subtitle string 'Timeline' 副标题。
timeScale ClinicalFlowSheetTimeScale 必填 时间范围、列步长和表头规则。
tracks ClinicalFlowSheetTrack[] 必填 轨道定义。
renderers ClinicalFlowSheetTrackRenderer[] 内置 renderer 追加或覆盖业务轨道 renderer。
controller ClinicalFlowSheetController 内部创建 外部共享 viewport、hover 和 selection。
rowHeaderWidth number 132 左侧轨道标题区宽度。
headerHeight number 按视觉模式 时间表头高度。
trackGap number 0 轨道间距。
height number 按视觉模式 期望高度。
readonly boolean false 是否只读。
visualMode 'screen' | 'clinical-sheet' 自动 屏幕工作台或纸式体温单视觉模式。
tooltip ClinicalFlowSheetTooltipOptions undefined Tooltip 延迟和内容工厂。
onHitChange (hit) => void undefined hover 命中变化。
onSelectionChange (selection) => void undefined 选择变化。
onCellActivate (hit) => void undefined 双击或键盘激活单元。

内置轨道类型

类型 典型数据
event-lane 入院、手术、输血等点事件或时间范围。
vital-chart 体温、脉搏等连续生命体征序列。
value-row / scored-value-row 血压、血氧、疼痛评分等离散记录。
score-chart-row 评分随时间变化的趋势。
daily-summary-row 按自然日或护理日汇总的值。
fluid-balance / fluid-summary-row 入量、出量记录和汇总。
legend-row 图例和业务说明。
text-row 备注、签名和值班记录。

动态更新

sheet.setTracks(nextTracks)
sheet.setTimeScale(nextTimeScale)
sheet.registerRenderer(customRenderer)
sheet.unregisterRenderer('custom-track')

轨道和时间范围更新会触发布局。大量实时数据应在业务层批量生成新数组后一次替换，避免逐点重建页面结构。

交互和性能

  • 横向滚动浏览时间，纵向滚动浏览轨道。
  • 只绘制可见时间列和轨道，长时间范围不需要一次绘制全部内容。
  • 点击更新 selection，双击或键盘激活触发 onCellActivate。
  • 自定义 renderer 的 hitTest() 应与实际绘制区域一致。
  • 页面销毁时，如果 controller 由业务创建，应由业务释放；组件内部创建的 controller 会随组件释放。

相关文档