跳到主要内容

时间轴

时间轴是一个用于展示时间序列数据的视图组件，基于数据模型实现时间线形式的数据可视化。它负责按时间顺序展示数据记录、支持自定义时间位置和提供交互操作，可配置工具栏按钮、颜色样式和数据筛选功能。

时间轴元素分层结构为Meta（components.Meta） → Type（components.TimeLine） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建时间轴实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的components.TimeLineType元素，以实现自己的封装。

快速开始​

基础配置示例​

时间轴基础配置
{
  "fullName": "components.TimeLine",
  "type": "components.TimeLine",
  "name": "timeLine1",
  "title": "项目时间轴",
  "config": {
    "requireElements": [
      {
        "title": "项目数据模型",
        "type": "models.Meta",
        "name": "models.ProjectModel",
        "filter": "",
        "orderBy": []
      }
    ],
    "time": ["createTime"],
    "abstract": ["description"],
    "color": ["status"],
    "stylesConfig": {
      "mode": "left"
    },
    "toolLeftBtn": [],
    "toolRightBtn": [],
    "defaultRender": true
  }
}

配置属性说明​

属性名类型说明默认值必填
requireElementsArray绑定的数据模型配置[]是
timestring[]时间字段名数组[]是
abstractstring[]摘要内容字段名数组[]是
colorstring[]颜色字段名数组[]否
stylesConfig.modestring时间位置模式：left/center/right"left"否
toolLeftBtnArray左侧工具栏按钮配置[]否
toolRightBtnArray右侧工具栏按钮配置[]否
defaultRenderboolean是否使用默认渲染true否

变量​

displayRowList​

  • 类型: RowList
  • 说明: 展示的多行数据，包含当前时间轴显示的所有数据记录
  • 只读: 是

activeRow​

  • 类型: RowData
  • 说明: 当前操作的单行数据，在点击时间轴节点时更新
  • 只读: 是

filter​

  • 类型: QFilter
  • 说明: 筛选条件，用于过滤时间轴显示的数据
  • 只读: 是

loading​

  • 类型: Numeric
  • 说明: 加载状态标识，0表示未加载，1表示加载中
  • 只读: 是

方法​

call​

刷新时间轴数据，可传入筛选条件进行数据过滤。

参数详解​

参数名类型说明必填
qFilterstringQ表达式筛选条件字符串否

返回值​

无返回值

使用示例​

刷新时间轴数据
// 无条件刷新
timeLine1.call();

// 带筛选条件刷新
timeLine1.call("Q(status='active')");

getDataList​

获取时间轴数据列表，支持分页加载和权限过滤。

参数详解​

无参数

返回值​

Promise<void>

使用示例​

获取数据列表
await timeLine1.getDataList();

updateConfig​

更新组件配置并重新加载数据。

参数详解​

参数名类型说明必填
configObject新的组件配置对象是

返回值​

无返回值

使用示例​

更新配置
timeLine1.updateConfig({
  time: ["updatedTime"],
  abstract: ["newDescription"],
  stylesConfig: {
    mode: "center"
  }
});

publishEvent​

发送组件事件，通知其他组件或页面。

参数详解​

参数名类型说明必填
namestring事件名称是
exObject额外数据否

返回值​

Promise<void>

使用示例​

发送自定义事件
// 发送简单事件
await timeLine1.publishEvent('customAction');

// 发送带数据的事件
await timeLine1.publishEvent('dataChanged', {
  count: timeLine1.rowDataList.length,
  timestamp: Date.now()
});

subscribeEvent​

订阅组件事件，设置事件回调处理函数。

参数详解​

参数名类型说明必填
namestring事件名称是
evtCbFunction事件回调函数是
unSubscribeExistboolean是否取消已存在的订阅否

返回值​

string - 订阅处理器ID

使用示例​

订阅事件
// 订阅数据刷新事件
const handlerId = timeLine1.subscribeEvent('refresh', () => {
  console.log('时间轴数据已刷新');
});

// 订阅点击事件
timeLine1.subscribeEvent('clickRow', (data) => {
  console.log('点击的行数据:', data.activeRow);
});

unSubscribeEvent​

取消事件订阅。

参数详解​

参数名类型说明必填
idstring订阅处理器ID是

返回值​

boolean - 是否成功取消

使用示例​

取消事件订阅
const handlerId = timeLine1.subscribeEvent('refresh', callback);
// 取消订阅
timeLine1.unSubscribeEvent(handlerId);

setConfig​

设置组件配置，支持部分更新和完全替换。

参数详解​

参数名类型说明必填
nextObject新配置对象是
cleanboolean是否完全替换配置否

返回值​

无返回值

使用示例​

设置配置
// 部分更新配置
timeLine1.setConfig({
  time: ["newTimeField"]
});

// 完全替换配置
timeLine1.setConfig(newConfig, true);

destroy​

销毁组件，清理所有事件监听器和资源。

参数详解​

无参数

返回值​

无返回值

使用示例​

销毁组件
// 页面卸载时销毁组件
timeLine1.destroy();

runCode​

在页面上下文中运行代码字符串。

参数详解​

参数名类型说明必填
codestring要执行的代码字符串是

返回值​

any - 代码执行结果

使用示例​

运行代码
// 执行简单表达式
const result = timeLine1.runCode('2 + 3');

// 访问页面变量
const pageData = timeLine1.runCode('this.somePageVariable');

getPermConfig​

获取当前组件的权限配置信息。

参数详解​

无参数

返回值​

Record<string, any> | undefined - 权限配置对象

使用示例​

获取权限配置
const permConfig = timeLine1.getPermConfig();
if (permConfig) {
  console.log('组件权限配置:', permConfig);
}

属性​

rowDataList​

  • 类型: RowData[]
  • 说明: 时间轴的数据列表，设置时会触发refresh事件
  • 只读: 否

ModelClass​

  • 类型: BaseModel
  • 说明: 绑定的数据模型类
  • 只读: 是

allFieldDict​

  • 类型: Record<string, DataTypeConfig>
  • 说明: 所有字段的字典映射
  • 只读: 是

primaryKey​

  • 类型: string
  • 说明: 主键字段名
  • 只读: 是

fieldDefineList​

  • 类型: DataTypeConfig[]
  • 说明: 字段定义列表
  • 只读: 是

pageNumber​

  • 类型: number
  • 说明: 当前页码
  • 只读: 否

pageSize​

  • 类型: number
  • 说明: 每页数据条数
  • 只读: 否

name​

  • 类型: string
  • 说明: 组件名称标识
  • 只读: 是

title​

  • 类型: string
  • 说明: 组件显示标题
  • 只读: 是

config​

  • 类型: Object
  • 说明: 组件完整配置对象
  • 只读: 否

type​

  • 类型: string
  • 说明: 组件类型标识
  • 只读: 是

fullName​

  • 类型: string
  • 说明: 组件完整名称路径
  • 只读: 是

showTitle​

  • 类型: boolean
  • 说明: 是否显示组件标题
  • 只读: 是

app​

  • 类型: App
  • 说明: 绑定的应用实例
  • 只读: 是

page​

  • 类型: BasePage
  • 说明: 绑定的页面实例
  • 只读: 是

dataTypeList​

  • 类型: BaseDataType[]
  • 说明: 组件变量定义列表
  • 只读: 是

事件​

clickRow​

  • 说明: 点击时间轴节点时触发
  • 数据: activeRow - 被点击的行数据

refresh​

  • 说明: 数据刷新时触发
  • 数据: 无

工具栏按钮事件​

根据配置的toolLeftBtn和toolRightBtn，会动态生成对应的点击事件，事件名为click + 按钮id的驼峰格式。

高级特性​

时间位置模式配置​

时间轴支持三种时间位置模式：

时间位置模式
// 左侧显示时间
stylesConfig: {
  mode: "left"
}

// 居中交替显示
stylesConfig: {
  mode: "center"  // 对应 TIME_POS_TYPES.CENTER = 'alternate'
}

// 右侧显示时间
stylesConfig: {
  mode: "right"
}

工具栏按钮配置​

工具栏按钮配置示例
{
  "toolLeftBtn": [
    {
      "id": "add",
      "name": "新增",
      "type": "primary"
    }
  ],
  "toolRightBtn": [
    {
      "id": "export",
      "name": "导出",
      "type": "default"
    }
  ]
}

数据模型绑定​

数据模型绑定配置
{
  "requireElements": [
    {
      "title": "任务数据模型",
      "type": "models.Meta",
      "name": "models.TaskModel",
      "filter": "Q(isDeleted=false)",
      "orderBy": [["createTime", 1]]
    }
  ]
}

分页加载机制​

组件支持分页加载，通过pageNumber和pageSize属性控制：

分页控制
// 设置每页显示条数
timeLine1.pageSize = 30;

// 重置到第一页
timeLine1.pageNumber = 1;
timeLine1.call();