应用手册案例演示
场景
循环列表、表单、外部数据源、图表演示等
创建页面
进入设计页面
开始
设备背景图片
上传背景图片
选择背景图片
完成背景图
设置头部
头部背景色
头部文字设置
将文字水平和垂直居中
设置时间 icon
设置时间 icon 样式、位置
设置时钟
将做好的头部组合在一起(防止组件过多时，误操作)
可以解组，在图层中可以清晰的查看组件结构
设备状态栏
设备背景色
设备状态背景色
设置设备状态图标
设置设备状态文字
设置设备状态数量
复制设备状态
修改数据修改位置颜色(停机颜色:ffbf00.报警颜色:ff445f)
设备(重复列表)
设置重复列表
- 设置属性详细说明
- 布局方式
- 水平:数据从左往右排列
- 垂直:数据从上往下排列
- 布局方式
- 设置属性详细说明
- 边距
- 外边距:数据和组件框内的距离
- 列边距:组件与组件之间列间距
- 行边距:组件与组件之间行间距
- 边距
- 设置属性详细说明
- 分页器
- 分页模式
- 手动翻页:页面会显示页码,点击页码分页
- 手动分页可以设置字体颜色、背景、边框
- 自动翻页:可以设置翻页时间间隔
- 分页显示:可以设置分页选中的色、字号、默认色
- 不分页显示:页面没有分页节点
- 时间间隔:翻页时间间隔
- 手动翻页:页面会显示页码,点击页码分页
- 每页数量:每页显示多少条数据
- 演示案例为:自动翻页 ，每页显示 12 条数据,每 5 秒翻到下一页 不显示页码
- 分页模式
- 分页器
设置重复列表数据库
数据类型：对象数组，参照下列静态数据：
[
{
"设备名": "设备 4",
"状态": 2,
"序号": "OD22110004",
"当前产量": "996",
"计划产量": "1309",
"切割速度": "534",
"切割功 率": "65",
"设备状态": "设备温度过高",
"过程": "74"
},
{
"设备名": "设备 10",
"状态": 1,
"序号": "OD22110010",
"当前产量": "939",
"计划产量": "1566",
"切割速度": "314",
"切割功率": "86",
"设备状态": "设备温度过高",
"过程": "79"
},
{
"设备名": "设备 5",
"状态": 2,
"序号": "OD22110005",
"当前产量": "975",
"计划产量": "1985",
"切割速度": "742",
"切割功率": "73",
"设备状态": "舱门未关闭",
"过程": "79"
},
{
"设备名": "设备 1",
"状态": 1,
"序号": "OD22110001",
"当前产量": "1047",
"计划产量": "1639",
"切割速度": "252",
"切割功率": "63",
"设备状态": "设备温度过高",
"过程": "95"
},
{
"设备名": "设备 9",
"状态": 1,
"序号": "OD22110009",
"当前产量": "889",
"计划产量": "1785",
"切割速度": "608",
"切割功率": "73",
"设备状态": "设备温度过高",
"过程": "50"
},
{
"设备名": "设备 8",
"状态": 1,
"序号": "OD22110008",
"当前产量": "1025",
"计划产量": "1840",
"切割速度": "597",
"切割功率": "79",
"设备状态": "设备温度过高",
"过程": "93"
},
{
"设备名": "设备 6",
"状态": 3,
"序号": "OD22110006",
"当前产量": "901",
"计划产量": "1872",
"切割速度": "600",
"切割功率": "82",
"设备状态": "设备温度过高",
"过程": "50"
},
{
"设备名": "设备 2",
"状态": 1,
"序号": "OD22110002",
"当前产量": "1029",
"计划产量": "1446",
"切割速度": "241",
"切割功率": "95",
"设备状态": "舱门未关闭",
"过程": "56"
},
{
"设备名": "设备 7",
"状态": 1,
"序号": "OD22110007",
"当前产量": "1174",
"计划产量": "1758",
"切割速度": "266",
"切割功率": "57",
"设备状态": "设备温度过高",
"过程": "55"
},
{
"设备名": "设备 11",
"状态": 1,
"序号": "OD22110011",
"当前产量": "936",
"计划产量": "1290",
"切割速度": "573",
"切割功率": "71",
"设备状态": "舱门未关闭",
"过程": "88"
},
{
"设备名": "设备 13",
"状态": 1,
"序号": "OD22110013",
"当前产量": "1106",
"计划产量": "1584",
"切割速度": "717",
"切割功率": "54",
"设备状态": "舱门未关闭",
"过程": "69"
},
{
"设备名": "设备 14",
"状态": 3,
"序号": "OD22110014",
"当前产量": "1106",
"计划产量": "1584",
"切割速度": "717",
"切割功率": "54",
"设备状态": "舱门未关闭",
"过程": "60"
},
{
"设备名": "设备 3",
"状态": 2,
"序号": "OD22110013",
"当前产量": "1106",
"计划产量": "1584",
"切割速度": "717",
"切割功率": "54",
"设备状态": "舱门未关闭",
"过程": "51"
}
]
将数据复制到输入框中
进入重复列表编辑页面
设置设备高宽
设备设备背景颜色
取消重复列表背景颜色
设备名称样式
设置字段设备名
设置设备状态
设置字段状态
设置序列号
设置字段序号
设置当前产量、计划产量、切割速度、切割功率
设置字段当前产量、计划产量、切割速度、切割功率
设置过程样式
设置过程字段
设置设备状态样式
设置设备状态字段
设备图表状态(仪表盘)
设置仪表盘背景
设置标题
设备仪表盘
设备在线显示(仪表盘)
通过复制完成离线、在线率
产量显示(折线图)
设备背景和标题(按住 ctrl 可多选组件，使用快捷键 ctrl + c 和 ctrl + v 可以复制所选组件)
位置、数据调整
折线图
配置数据源(当前使用静态数据源)
数据类型：对象数组，参照下列静态数据：
[
{
"时间": "2024-05-01",
"一车间": 13203,
"二车间": 23321
},
{
"时间": "2024-05-02",
"一车间": 12032,
"二车间": 21032
},
{
"时间": "2024-05-03",
"一车间": 11023,
"二车间": 21135
},
{
"时间": "2024-05-04",
"一车间": 10231,
"二车间": 18232
},
{
"时间": "2024-05-05",
"一车间": 14923,
"二车间": 26923
},
{
"时间": "2024-05-06",
"一车间": 12324,
"二车间": 23421
},
{
"时间": "2024-05-07",
"一车间": 12356,
"二车间": 23551
},
{
"时间": "2024-05-08",
"一车间": 10234,
"二车间": 15923
},
{
"时间": "2024-05-09",
"一车间": 9234,
"二车间": 12345
},
{
"时间": "2024-05-10",
"一车间": 15023,
"二车间": 32032
},
{
"时间": "2024-05-11",
"一车间": 12345,
"二车间": 23512
},
{
"时间": "2024-05-12",
"一车间": 18935,
"二车间": 10235
},
{
"时间": "2024-05-13",
"一车间": 12559,
"二车间": 22452
},
{
"时间": "2024-05-14",
"一车间": 12451,
"二车间": 24692
},
{
"时间": "2024-05-15",
"一车间": 12599,
"二车间": 10023
}
]
设置图表显示数据
调整图表样式位置
当车间数据小于 10000 时 线条变红显示数据
条件设置
完成后效果
当 X 轴时间显示过于拥挤时可以调整显示角度
设备总产量(表格、外部数据源)
设备总产量背景图和标题(复制全局设备概览文字和背景 ctrl + c v)
设置外部数据源
设备总产量表格
设置数外部据源
设备总产量样式
产量低的数据标记颜色
统计所有设备的总产量(也可以选择平均值和计数)
统计所有设备的总产量效果图
工厂用电量(柱状图、多维度数组)
调整图表样式位置、加入柱状图、加入标题
设置数据源(当前使用系统提供的参考数据)
选择 X、Y 轴内容
调整图表样式
当前图表不满足多维度统计分析(
例：近一段时间内城市之间的电量趋势图)
-
使用
自定义图例- 自定义名称
-
改修后
-
- 从属性选择(将城市区分开来,加入后缀名)
-
修改后(成功区分)
-
- 扩展(分开设置:需要每个数据单独设置时)
-
修改后
-
- 自定义名称
技巧
可以通过键盘调整组件位置
多利用上方按钮调整组件位置(比如:居中、左对齐等)
组合技巧(将做好的组件组合在一起,有利于后续开发)
