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 会随组件释放。