设置UI引擎前端页面时间线组件属性
时间线组件是UI引擎提供的高效工具之一，用于可视化展示时间流信息（如设备运行记录、工艺流程节点或报警事件历史）。通过灵活的属性配置和交互功能，时间线组件能够帮助用户快速了解事件的时间序列和状态变化。
前提条件
已在当前页面添加“时间线”组件，具体操作请参见为UI引擎前端页面添加物料组件。
配置入口
- 在页面设计器的中心画布区，单击选中“时间线”组件。
- 在右侧设置面板中，单击
，即可展开“属性”设置面板。
基础信息
此部分配置定义时间线组件的核心布局模式、交互状态与数据内容。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
垂直布局 |
控制时间线的布局方向，默认关闭。
|
是 |
|
选中值 |
当前被选中或激活的时间线节点索引。 |
是 |
|
步骤条数据 |
用于渲染时间线节点的数据集合，类型为对象数组。数组中的每个对象代表一个时间节点，需配置以下属性：
|
是 |
配置示例：
{
"垂直布局": false, // 关闭垂直布局，采用水平布局展示时间线
"选中值": 1, // 激活第二个时间线节点（索引从0开始计数）
"步骤条数据": [
{
"name": "订单创建", // 必填：节点名称，描述核心业务动作
"time": "2024-08-15 09:30", // 可选：节点时间，符合“YYYY-MM-DD HH:mm”格式
"error": false, // 可选：节点为正常状态
"disabled": false // 可选：节点处于可交互状态
},
{
"name": "支付完成",
"time": "2024-08-15 09:35",
"error": false,
"disabled": false
},
{
"name": "库存扣减异常", // 异常类节点
"time": "2024-08-15 09:36",
"error": true, // 可选：标记节点为异常/错误状态
"disabled": false
},
{
"name": "物流发货",
"time": "", // 可选：暂未产生时间，留空
"error": false,
"disabled": true // 可选：节点未执行，处于禁用状态
},
{
"name": "客户签收",
"time": "",
"error": false,
"disabled": true
}
]
}
其他
如下属性适用于UI引擎所有组件，用于精细化控制。
|
属性名称 |
说明 |
是否支持变量绑定 |
|---|---|---|
|
元素id值 |
对应HTML标签的“id”属性，同一页面内必须唯一。 |
是 |
|
样式类 |
对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。 |
是 |
|
ref引用类 |
对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。 如果为“数据源表单”组件，会自动填充默认值。 |
是 |
组件事件
时间线组件提供关键交互事件，支持业务流程的精准控制与反馈。
|
事件名称 |
类型定义 |
说明 |
|---|---|---|
|
onClick |
(index: number, node: TimelineItem) => void |
时间线节点单击事件。
|
|
onChange |
(...args: any) => void |
组件值发生变化时触发。 仅部分组件支持此事件，具体参数由组件实现决定。适用于输入框、下拉选择器等表单组件。 |
|
onFocus |
(e: Event) => void |
元素获得焦点时触发。 传递标准的浏览器“Event”或“MouseEvent”对象，适用于输入框等表单元素。 |
|
onMousemove |
(e: Event) => void |
鼠标在组件区域内移动时触发。 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。 |
