轮播
轮播组件将数据以轮播或滚动的样式进行展示，支持多种展示模式，包括卡片轮播、横向滚动、竖向滚动等
一、效果展示
1. 卡片轮播
2. 卡片滚动(横向)
3. 卡片滚动(竖向+序号)
4. 卡片滚动(高亮)
二、添加轮播组件
点击组件栏中的"轮播"组件，即可在画布中添加轮播组件。
三、轮播配置
1. 卡片轮播
卡片轮播模式将数据以卡片形式进行轮播展示。
1.1 滚动配置
配置轮播的滚动参数，包括滚动速度、滚动方向等。
1.2 卡片样式配置
配置卡片的显示样式，包括背景、边框、圆角、边距等。
1.3 行配置
配置内容之间的行高和文字间距，控制卡片内容的布局。
1.4 标题字段配置
配置标题字段的显示样式，包括字体大小、颜色、对齐方式等。
- 字段：显示当前正在配置的字段名称，例如："title"与“1.6 数据格式”中的“title”字段对应
1.5 内容字段配置
配置内容字段的显示样式，包括字段映射、标签样式和数值样式设置。
1.5.1 字段映射管理
- 新增：点击"+新增"按钮可添加新的内容字段映射项
- 字段列表：显示已配置的内容字段映射项，包含以下信息：
- 选中：通过单选按钮选择当前要配置的字段
- 列名称：显示字段在卡片中的显示名称，例如："订单数量"、"订单金额"、"发货数量"等
- 列映射：显示字段对应的数据源字段名，例如："orderNum"、"orderAmount"、"deliveryNum"等
- 操作：
- 编辑：点击编辑图标可修改字段映射配置
- 删除：点击删除图标可删除该字段映射项
1.5.2 标签样式配置
配置字段标签的显示样式，选中某个字段后，可在"label"区域配置该字段标签的样式。
设置字体大小、行高、字体样式等
1.5.3 数值样式配置
配置字段数值的显示样式，选中某个字段后，可在"value"区域配置该字段数值的样式。
- 组合显示：控制数值是否启用组合显示模式，开启后可设置前缀文本和后缀文本样式
- 开启：数值可与前缀文本组合显示
- 关闭：仅显示数值本身
提示：内容字段配置中的"列映射"字段名需要与数据格式中返回的字段名保持一致，才能正确显示数据。例如，数据中有
orderNum字段，则列映射应设置为orderNum。
1.6 数据格式
[
{
"title": "销售物料汇总数据",
"orderNum": 1247,
"orderAmount": 28475000,
"deliveryNum": 1189,
"signNum": 1156,
"outAmount": 26789000
},
{
"title": "采购物料汇总数据",
"orderNum": 892,
"orderAmount": 15680000,
"deliveryNum": 856,
"signNum": 823,
"outAmount": 14875000
},
{
"title": "库存物料汇总数据",
"orderNum": 2156,
"orderAmount": 3440,
"deliveryNum": 2340,
"signNum": 2340,
"outAmount": 7100000
},
{
"title": "质量物料汇总数据",
"orderNum": 110,
"orderAmount": 33330000,
"deliveryNum": 1100,
"signNum": 110,
"outAmount": 111110000
}
]
2. 卡片滚动(横向)
卡片横向滚动模式将数据以横向滚动的方式展示。
2.1 基础配置
配置组件的基础参数，包括显示设置、布局等。
2.2 滚动配置
配置滚动的相关参数，包括滚动速度、滚动方向、滚动方式等。
2.3 卡片配置
配置卡片的显示样式，包括背景、边框、间距等。
2.4 内容字段配置
配置内容字段的显示样式，包括字段映射、整体配置、标签样式和数值样式设置。
2.4.1 字段映射管理
- 显示序号：控制是否在列表中显示序号列，通过开关控制显示/隐藏
- 新增：点击"+新增"按钮可添加新的内容字段映射项
- 字段列表：显示已配置的内容字段映射项，包含以下信息：
- 选中：通过单选按钮选择当前要配置的字段
- 列名称：显示字段在卡片中的显示名称，例如："客户名称"、"排名"、"合同额"等
- 列映射：显示字段对应的数据源字段名，例如："customerName"、"rank"、"contractAmount"等
- 操作：
- 编辑：点击编辑图标可修改字段映射配置
- 删除：点击删除图标可删除该字段映射项
2.4.2 整体配置
选中某个字段后，可在"整体配置"区域配置该字段的整体显示设置。
- 排列方式：设置字段内容的排列方向
- 可选：水平方向(左-右)、垂直方向(上-下)等
- 对齐方式：设置水平和垂直对齐
- 宽度：设置字段的宽度，支持通过滑块或输入框调整（单位：px）
- 设置为0时表示自动宽度
- 高度：设置字段的高度，支持通过滑块或输入框调整（单位：px）
- 边距：设置边距
- 省略显示：控制文本超出显示范围时是否使用省略号显示，通过开关控制
- 开启：文本超出时显示省略号
- 关闭：文本正常显示
- 省略行数：当开启省略显示时，设置文本省略的行数，支持通过滑块或输入框调整
- 千分符：控制数值是否显示千分位分隔符，通过开关控制
- 开启：数值显示千分位分隔符（如：1,000）
- 关闭：数值不显示千分位分隔符
2.4.3 标签样式配置
配置字段标签的显示样式，选中某个字段后，可在"label"区域配置该字段标签的样式。
- 显示：控制标签是否显示，通过复选框控制
- 勾选：显示标签
- 未勾选：隐藏标签
- 其他样式设置：字体大小、行高、字体样式等
2.4.4 数值样式配置
配置字段数值的显示样式，选中某个字段后，可在"value"区域配置该字段数值的样式。
- 显示：控制数值是否显示，通过复选框控制
- 勾选：显示数值
- 未勾选：隐藏数值
- 值类型：设置数值的数据类型
- 非数组：普通数值类型
- 数组：数组类型数值
- 边距：设置边距
- 字体大小：设置数值的字体大小，支持通过输入框或上下箭头调整（单位：px）
- 行高：设置数值的行高，支持通过输入框或上下箭头调整（单位：px）
- 字体样式：字体大小、颜色等
- 组合显示：控制数值是否启用组合显示模式，开启后可设置前缀文本和后缀文本样式
- 开启：数值可与前缀/后缀文本组合显示
- 关闭：仅显示数值本身
提示：内容字段配置中的"列映射"字段名需要与数据格式中返回的字段名保持一致，才能正确显示数据。例如，数据中有
customerName字段，则列映射应设置为customerName。
2.5 数据格式
[
{
"rank": 1,
"customerName": "北京华信科技有限公司",
"contractAmount": 8000
},
{
"rank": 2,
"customerName": "上海(中国)智远信息技术股份有限公司",
"contractAmount": 7800
},
{
"rank": 3,
"customerName": "深圳市鼎盛软件有限公司",
"contractAmount": 6880
},
{
"rank": 4,
"customerName": "广州恒信数据服务有限公司",
"contractAmount": 5600
},
{
"rank": 5,
"customerName": "杭州云帆科技发展有限公司",
"contractAmount": 4900
},
{
"rank": 6,
"customerName": "成都睿智科技有限公司",
"contractAmount": 4700
},
{
"rank": 7,
"customerName": "南京博思信息技术有限公司",
"contractAmount": 4500
},
{
"rank": 8,
"customerName": "苏州新创软件有限公司",
"contractAmount": 4200
},
{
"rank": 9,
"customerName": "重庆智联科技有限公司",
"contractAmount": 3900
},
{
"rank": 10,
"customerName": "武汉华腾信息技术有限公司",
"contractAmount": 3600
}
]
3. 卡片滚动(竖向+序号)
卡片竖向滚动模式将数据以竖向滚动的方式展示，并显示序号。
提示：卡片滚动(竖向+序号)的配置方式与"2. 卡片滚动(横向)"相同，区别在于滚动方向为竖向，并增加了序号显示功能。
4. 卡片滚动(高亮)
卡片高亮滚动模式在滚动过程中对当前卡片进行高亮显示。
提示：卡片滚动(高亮)的配置方式与"2. 卡片滚动(横向)"相同，区别在于增加了高亮显示效果。
4.1 数据格式
[
{
"projectName": "苏州地铁5号线工程",
"status": "一期",
"paymentMethod": "分期",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966786720503390209"
},
{
"projectName": "南京软件园研发楼",
"status": "二期",
"paymentMethod": "一次性付款",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966786777713696769"
},
{
"projectName": "重庆智慧交通枢纽",
"status": "三期",
"paymentMethod": "分期",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966786804406247425"
},
{
"projectName": "武汉光谷科技园",
"status": "一期",
"paymentMethod": "分期",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966786837256036353"
},
{
"projectName": "上海浦东新区道路改造",
"status": "二期",
"paymentMethod": "一次性付款",
"type": [
"建筑工程",
"市政工程",
"道路工程"
],
"id": "1966786864602898433"
},
{
"projectName": "深圳南山创新中心",
"status": "三期",
"paymentMethod": "分期",
"type": [
"建筑工程",
"市政工程",
"道路工程"
],
"id": "1966786897117143041"
},
{
"projectName": "成都高新产业园",
"status": "一期",
"paymentMethod": "分期",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966786931179085826"
},
{
"projectName": "杭州滨江智慧社区",
"status": "二期",
"paymentMethod": "一次性付款",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966786962128855042"
},
{
"projectName": "广州南沙港区扩建",
"status": "三期",
"paymentMethod": "分期",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966787000406073346"
},
{
"projectName": "天津生态城住宅项目",
"status": "一期",
"paymentMethod": "分期",
"type": [
"建筑工程",
"市政工程"
],
"id": "1966787029329993729"
}
]