仅介绍常用组件以及组件部分样式设置以及数据源设置

图表类组件

1.公共配置

图例设置

2.柱状图&&折线图

柱状图与折线图独有设置为 X 轴设置、Y 轴设置、折线(图柱)设置

a. X 轴设置&&Y 轴设置

b.图柱设置

对图柱进行显示上的设置，图柱动态数据来源于 studio 中全局变量

c.折线设置

此部分主要对折线进行显示上的设置，折线动态数据来源于 studio 中全局变量

折线图最多保存 1000 条或两小时内数据，保存数据量可在系统设置中设置

2.饼图

饼图独有设置为饼图配置与饼图数据

a.饼图配置

b.饼图数据

参考折线图/柱状图绑定 studio 参数部分

---

信息类组件

样式部分就不一一缀叙

1.脚本输出&&文字组件

日志组件仅支持绑定 string 类型组件，其最大保存数据量支持在全局设置中修改

文字组件支持绑定 string、number 类型参数

2.标签选择器组件

标签选择器组件支持绑定当前画布内除标签选择器外所有组件，用来切换绑定组件的显示与隐藏

标签选择器组件仅支持绑定单个组件，若想绑定多个组件，请将组件进行分组，绑定分组

3.基础分页表格

分页表格组件支持绑定 number 类型参数，用来展示 studio 运行数据，其最大保存数据量支持在全局设置中修改，分页表格首列为时间列，默认宽度自适应，支持行列指示、列宽自适应、首列固定等状态参数进行选择

---

装饰类组件

样式部分就不一一缀叙

此类组件主要为装饰类，包括边框组件、装饰组件、标题组件以及小组件类，用户可自行选择

小组件中数字计数组件、数字翻牌组件、倒计时组件绑定参数类型为 number 类型

小组件中通用天气组件拖入即可展示当前天气，系统默认 key 值存在使用次数限制，建议使用过程中，将 key 值设置为用户申请的高德应用 key

---

图片类组件

样式部分就不一一缀叙

图像组件支持用户自定义上传图片充当组件

图片属性：

名称	说明
拉伸填充	将图片或视频拉伸或压缩，以填充容器，不保持宽高比
自适应	在保持宽高比的情况下，缩放图片，使其能够完全包含在容器中，容器可能会留出空白区域
覆盖	在保持宽高比的情况下，缩放图片，使其能够完全覆盖容器，容器可能会有部分内容被裁剪
对比自适应	在保持宽高比的情况下，缩小图片，使其不超过容器的大小，如果缩小后的大小小于原始大小，则按原始大小显示
默认值	不对图片或视频进行任何调整，它们会按原始大小显示在容器中

---

套件组件

样式部分就不一一缀叙

运行控制组组件中包括运行状态图标、暂停图标、运行图标、循环运行图标

---

设备类组件

样式部分就不一一缀叙

设备类组件为 IO 组件，绑定的参数为数组格式参数,数组长度应为 16，每一项应为 1 或 0，1 表示此点红色，0 表示此点白色

统计类组件

样式部分就不一一缀叙

1.竖向产量柱状图&&横向产量柱状图

此组件展示的为历史产量，需要联动数据库进行展示，首先选定数据源表，其次选定展示的参数即可 竖/横向产量柱状图效果图

源表：需要绑定的数据库源表 参数：设置需要统计的时间以及时间数量，例时间为1h，数量为12，则统计12h内的数据

2.数据折线图

此组件展示的为数据库中每一列的数据，首先选定数据源表，其次为每一列选定数据源(来源于哪一列) 数据折线图效果图

折线：可编辑需要展示的折线宽度、大小等参数，可增加、删除折线个数 源表：需要绑定的数据库源表 数据：将源表中某一列的数据绑定至 折线-1 警示线：可在折线图中设置异常线和报警线

3.单次统计表格

统计表格数据来源需先绑定 studio 中变量，其次根据绑定的变量绑定每一列的数据源，绑定的变量格式为 JSON 字符串,如： [{GB = 0.000000,SXLJ = 0.000000,QHLH = 0.000000,焊点编号 = 1.000000,result = 0.000000,HXLJ = 0.000000,}, {GB = 0.000000,SXLJ = 0.000000,QHLH = 0.000000,焊点编号 = 2.000000,result = 0.000000,HXLJ = 0.000000,}, {GB = 0.000000,SXLJ = 0.000000,QHLH = 0.000000,焊点编号 = 3.000000,result = 0.000000,HXLJ = 0.000000,},]

result 结果列默认绑定，在studio创建中，应加入结果列result

单次统计表格效果图

数据源：绑定studio中的全局变量，固定格式如上所示（需注意每层列数应保持一致！） 表头：绑定其中一列数据，更改对应的表头名称

4.配方表格

配方表格用来展示 studio 配方，用户拖进画布后无需进行过多设置即可在预览页正常使用

配方文件修改方式：单击表格数据->修改

图示	名称	说明
	编辑按钮	编辑修改配方表格名称
	刷新按钮	studio 修改配方表格后，需刷新 HMI 才会同步显示
	新增按钮	新增配方文件，用户选择本地配方文件上传
	选择按钮	studio 使用当前配方文件
	删除按钮	删除当前配方文件
	保存按钮	修改配方文件后点击保存

5.历史查询表格

历史查询表格表格支持查询历史数据，支持重复性查询，运行时首先绑定源表，然后选择查询条件，进行查询 历史查询表格效果图 选择表源：选择studio工程中写入的数据库 状态选择：可选择查看ALL/OK/NG的结果 起始时间、截止时间：可选择某一时间段内的数据 查询：更新上述参数后，需点击查询，HMI界面才会更新 导出：将当前显示的表格导出 重复性查询：点击后出现重复性数据折线图，统计重复性

6.事件通知表格

事件通知表格拖入看板即可使用，无需进行数据配置，运行时会自动写入事件，并进行轮播展示(如 studio TCP Server 状态切换等) 事件通知表格效果图

7.参数修改框

可以绑定studio设置的某个全局变量参数，在运行页面可以通过保存看板变量图标或者按钮绑定保存变量事件来更改绑定参数的值，将绑定的全局变量参数更改为输入框中的内容 参数修改框效果图

输入框配置：设置输入框的默认值 参数：绑定studio中需要修改的全局变量参数 别名：修改名称

8.良率统计

良率统计组件用于显示运行后 OK、NG 以及良率显示，支持文字显示以及饼图显示 OK、NG 占比 良率统计组件数据来源于 studio 存储在数据库中数据，需选定源表 良率统计效果图

源表：绑定studio工程中写入的数据库

9.系统信息

显示基本系统信息，如CPU、内存占用情况等 系统信息效果图

10.良率查询

良率查询在绑定数据源表后，可以查询过往时间的良率情况 良率查询效果图

源表：绑定studio工程中写入的数据库 时间：选择查询的起始日期和截止日期

通用类组件组件

1.图标组件

样式部分就不一一缀叙

图标组件目前内置六种图标供用户选择，分为五种运行图标与一种页面图标

运行图标分别为暂停图标、运行图标、循环运行图标、运行状态、保存看板变量 运行图标与 studio 关联，控制着 studio 程序的运行，用户可直接拖入画布中使用，无需过多设置

图示	名称	说明
	暂停图标	暂停studio中正在运行的程序
	运行图标	将整个studio中程序运行一次
	循环运行图标	循环运行studio程序运行栏的程序
	运行状态图标	程序运行时为绿色，程序未运行时是红色
	保存看板变量图标

页面图标为全屏切换图标，页面图标与页面显示状相关，可直接拖入画布中使用

图示	名称	说明
	全屏切换图标	运行时切换运行页面全屏/退出全屏显示

---

2.图像组件

样式部分就不一一缀叙

图示	名称	说明	设置图
	1D图像
	2D图像
	3D图像	3D 图组件组件，用户可以选择不同 sceneID 展示不同 3D 图，用户可直接拖入画布中使用，无需过多设置

3.方形按钮组件

样式部分就不一一缀叙 方形按钮组件含有两种状态，可以设置默认显示状态以及状态切换条件(单击、双击、右键等)，每种状态都有自己独有样式以及事件

事件模块包括触发事件、动作、以及目标

名称	说明
触发事件	包括单击、双击、右键、鼠标移入、鼠标移出。
动作	看板跳转、暂停、单步运行、循环运行、保存看板变量、全屏、退出全屏
目标	动作目标：目前仅有看板跳转动作含有目标选项(跳转至哪一个看板)