产品文档

轮播表格

组件说明

轮播表格组件整体结构如组件结构图所示，组件支持列表内容支持超链接配置，同时也支持图片格式的列表内容，轮播表格通过轮播动画的方式，将数据信息以列表的形式展示在可视化应用中。

效果案例

An image

样式

在样式中可以设置组件的基本属性、全局、行配置和列配置。

1. 基本属性

An image

  • 位置尺寸
     位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

2. 全局

An image

  • 行数
     默认显示4行数据，在此可自由配置显示数据行数。
  • 行间距
     数据行之间间距。
  • 动画
     列表数据实际条数多于展示数据时，可以启用组件动画进行行数据轮播。 当行数据少于或等于展示数据时，启用动画也不对仅有数据做轮播

3. 行配置

An image

  • 表头设置
     表头内是配置轮播表格内表头的配置项。分为边框显隐、行高、文本样式、对齐方式和背景。
  • 行
     针对数据行背景填充自定义配置。
  • 选中高亮
     当鼠标点击选中某一行数据时的颜色变化。分为单选和多选两种选中高亮方式。

4. 列配置

An image

  • 序号列
     轮播表格内序列号自定义配置项
配置项说明
标题默认为"#"，可自定义为其他符号。
起始值默认起始值为1，只能配置为数字。
列宽序列号列列宽。
列间距序列号列与最左侧组件边框间距。
对齐方式分为左侧、局中和右侧对齐三种方式。
  • 列
     组件默认显示三列数据，在此可对每一列进行自定义配置，如想增加一列数据，首先需要增加一列，然后在数据内增加对应列数据即可。
配置项说明
映射在对接数据时需要进行字段映射，即把已有数据以映射的方式映射到组件字段
列宽指定列列宽度。
列间距指定列与其他列列间距。
偏移指定列列偏移量。
对齐方式分为左侧、局中和右侧对齐三种方式。
内容类型状态配置类型

数据

点击查看数据结构
[
  {
    "accidentType": "car",
    "status": "已解决",
    "time": "07:33:40",
    "content": "左侧OBU无响应"
  },
  {
    "accidentType": "config",
    "status": "处理中",
    "time": "07:31:22",
    "content": "金链路5G基站信号丢失,中山路5G基站信号丢失"
  },
  {
    "accidentType": "accident",
    "status": "已解决",
    "time": "07:30:48",
    "content": "闯红灯"
  },
  {
    "accidentType": "car",
    "status": "已解决",
    "time": "07:14:40",
    "content": "左侧OBU无响应"
  },
  {
    "accidentType": "config",
    "status": "已解决",
    "time": "07:06:40",
    "content": "金链路监控信号丢失"
  },
  {
    "accidentType": "car",
    "status": "已解决",
    "time": "06:55:40",
    "content": "智慧出租00031闯红灯"
  },
  {
    "accidentType": "accident",
    "status": "处理中",
    "time": "06:33:40",
    "content": "左侧OBU无响应"
  },
  {
    "accidentType": "car",
    "status": "已解决",
    "time": "05:33:40",
    "content": "左侧OBU无响应"
  }
]