时间轴

# 时间轴

## 一、功能说明

时间轴组件可用于将数据按时间的先后顺序从上到下排列地展示。效果展示如下

![](/media/202507//1751619334.8677254.png)

上图中，完整展示了两条数据，按时间顺序倒叙排列，鼠标向下滑动，可看到更多的数据。

## 二、前台使用

1、 时间轴

若管理员在表单后台配置了时间轴组件，表单使用者可在表单上以时间轴的方式查看数据。

时间轴上的每条数据基本内容包括：图标、时间、标题、内容。

![](/media/202507//1751619334.8731077.png)

2、 查看详情

![](/media/202507//1751619334.8763087.png)

若管理员在时间轴配置中开启了“打开详情”按钮，表单使用者可通过点击“详情”按钮，打开新的页面，到每条数据的来源表单中去。

3、 类型筛选

![](/media/202507//1751619334.8797226.png)

![](/media/202507//1751619334.8828812.png)

若管理员在时间轴配置中设置了类型，表单使用者可在时间轴中，按照不同的类型筛选查看数据。

4、 回复

![](/media/202507//1751619334.886216.png)

![](/media/202507//1751619334.889444.png)

若管理员在时间轴配置中开启了“回复”按钮，表单使用者可对时间轴上的每条数据发表评论回复。

## 三、后台配置

![](/media/202507//1751619334.8929386.png)

### 1、基本设置

![](/media/202507//1751619334.8977132.png)

#### 1\.1标题

此处标题为组件标题，默认显示为“时间轴组件”，可修改。

#### 1\.2数据源

数据源为时间轴上所展示数据的来源，可选类型为：普通表单（工作流、非工作流）、引用表单、视图表单。

#### 1\.3数据范围

该设置用于筛选数据源的数据，只有符合条件的数据才会在时间轴中展示，如果不设置条件，则数据源中每条数据都会在时间轴中展示。

#### 1\.4时间轴

时间轴上每条数据的时间根据此处所选内容展示，可选类型为：数据源表单中的时间控件字段。

#### 1\.5排序

可设置数据展示顺序，默认为根据时间倒序展示。

#### 1\.6标题

此处为时间轴每条展示数据的标题，设置完成后，每条数据都可按照设置模板显示标题。

![](/media/202507//1751619334.901454.png)

点击标题设置后出现模板设置弹窗，可在弹窗中配置想要的标题模板。

![](/media/202507//1751619334.9047432.png)

#### 1\.7内容

此处为时间轴每条展示数据的内容，点击内容设置后出现内容设置弹窗，具体方式和标题设置一致。设置完成后，每条数据都可按照设置模板显示内容。

基本设置完成后，表单上即可展示一个基本功能的时间轴。

### 2、打开详情配置

![](/media/202507//1751619334.908572.png)

开启该按钮后，前台表单时间轴的每条数据都可以通过点击“详情”按钮进入到具体表单中去。

注意：当数据源为视图表单时，想要使用该功能，需要视图表单中包含Formcode字段；另外，若该视图表单数据来源为工作流表单，则视图表单中还需包含RunningInstanceId字段。

### 3、类型配置

#### 3\.1类型字段

![](/media/202507//1751619334.9115481.png)

点击类型选择框后，可选择数据源表单中的某一字段作为类型字段

设置类型字段后，时间轴数据可根据类型进行筛选

注意：此字段控件类型只能是单选或下拉控件控件

#### 3\.2类型设置

![](/media/202507//1751619334.91456.png)

选择了类型字段后，可点击”类型设置“，弹出类型设置框可对每种类型数据进行详细设置

##### 3\.2\.1勾选类型

![](/media/202507//1751619334.9175482.png)

选择了类型字段后，此处即自动展示所有的类型，默认为全部勾选状态。

勾选的类型在前台展示体现在如下两个方面

1、已勾选的类型的数据会在时间轴上展示，取消勾选的类型的数据不展示

2、在类型搜索框中进行搜索时，只有已勾选的类型才会出现，未勾选的类型不可进行筛选

##### 3\.2\.2图标设置

![](/media/202507//1751619334.9213781.png)

![](/media/202507//1751619334.924238.png)

可设置不同类型的图标，设置的图标在时间轴上展示，不设置展示默认图标

##### 3\.3\.3模板设置

![](/media/202507//1751619334.9290943.png)

可对不同类型的数据进行单独的模板设置。设置方式同基础设置中的标题和内容的设置。

注意：若此处不设置，则使用基础设置中标题和内容设置的模板。若此处设置，则使用此处配置模板。

### 4、回复配置

![](/media/202507//1751619334.9324026.png)

开启回复按钮，则可在时间轴每条数据下进行评论回复。