# 设置UI引擎前端页面时间线组件属性
时间线组件是UI引擎提供的高效工具之一，用于可视化展示时间流信息（如设备运行记录、工艺流程节点或报警事件历史）。通过灵活的属性配置和交互功能，时间线组件能够帮助用户快速了解事件的时间序列和状态变化。
#### 前提条件
已在当前页面添加"时间线"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。
#### 配置入口
1. 在页面设计器的中心画布区，单击选中"时间线"组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535562607.png)，即可展开"属性"设置面板。
 
#### 基础信息
此部分配置定义时间线组件的核心布局模式、交互状态与数据内容。
| 属性名称  | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | 是否支持变量绑定 |
|:---|:---|:---|
| 垂直布局  | 控制时间线的布局方向，默认关闭。 - 开启：垂直布局  - 关闭：水平布局                                                                                                                                                                                                                                                                                                                                                                                                             | 是        |
| 选中值   | 当前被选中或激活的时间线节点索引。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | 是        |
| 步骤条数据 | 用于渲染时间线节点的数据集合，类型为对象数组。数组中的每个对象代表一个时间节点，需配置以下属性： - name：必填，节点的名称或标题，用于描述该节点的含义（如"设备启动"、"工序1完成"）。  - time：可选，节点对应的时间，格式为"YYYY-MM-DD HH:mm"，最小精度到分钟，不支持秒级时间（如"2024-07-01 10:00"）。  - error：可选，标识该节点是否处于异常或错误状态。  - disabled：可选，标识该节点是否处于禁用状态。   | 是        |
   
配置示例：
```
{
  "垂直布局": 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 ``` | 时间线节点单击事件。 - index：单击节点的数字索引。    - node：单击节点的完整数据对象。   |
| onChange    | (...args: any) =\> void                             | 组件值发生变化时触发。 仅部分组件支持此事件，具体参数由组件实现决定。适用于输入框、下拉选择器等表单组件。                                                                                                                                                                                                                                                                                            |
| onFocus     | (e: Event) =\> void                                 | 元素获得焦点时触发。 传递标准的浏览器"Event"或"MouseEvent"对象，适用于输入框等表单元素。                                                                                                                                                                                                                                                                                           |
| onMousemove | (e: Event) =\> void                                 | 鼠标在组件区域内移动时触发。 实时追踪鼠标在组件区域内的移动轨迹，兼容所有可视化组件，适用于拖拽、悬浮提示、轨迹追踪等场景。                                                                                                                                                                                                                                                                                    |