查看“画面组态编辑”的源代码

== 面板概述 ==
[[File:组态画板介绍.png|1100x1100px|无框]]

== 组件-盒子 ==
画面内的所有组件有层级关系，使用“盒子”来实现封装一组元素，可订阅一些变量来实现整个盒子内的子元素显示/隐藏（页面的最顶层也是一个大的“盒子”，所有的子组件其实都是盒子的children）

[[File:组件-盒子.png]]

盒子可设置的属性包括宽高、位置、层的位置（深度）、边框、背景色，订阅变量后，可以动态变化这些属性；
[[File:盒子属性.png|无|有框]]
[[File:盒子-订阅.png|无|有框]]
可设置盒子的加载、消失、点击事件
[[File:盒子-事件.png|无|有框]]

== 模板画面 ==
目前SCADA项目里所有画面都能够作为模板被其他画面引用。使用场景1：一个全局的Layout模板，给所有画面作为模板使用；使用场景2：自定义一个复杂组件库，如同博图里的Faceplate，只需传入特定参数/变量即可。

例如制作一个大组件：

1.点击左上角的“+”创建一个画面，名称最好有一定规律或者识别性例如: Partial-xxx或者Template-xxx

2.创建画面专属的参数，此处叫“屏幕变量”（需要点击画面中空白位置或者刚进入画面时才会出现）

3.创建此组件的各个元素，所有订阅变量应该都是订阅动态此画面的“屏幕变量”
[[File:盒子-模板.png|无|缩略图|1100x1100像素]]
[[File:盒子-模板2.png|无|缩略图|1100x1100像素]]
保存完毕后，即可开始使用这个大组件了：

在任意画面新建一个组件“盒子”，即可使用，注意填写对应入参对应值或者变量。
[[File:盒子-模板使用.png|无|缩略图|1100x1100px]]

= 组件概述 =

=== 基础组件 ===

* 文字：静态/动态文字展示，可配置颜色大小等，可订阅变量来输出，也可以添加点击事件
* 时间展示：展示当前HMI时间，可配置格式化例如：<code>YYYY-MM-DD HH:mm:ss.SSS</code>为2021-07-29 18:55:33.730
* 进度条：简单的进度条，根据进度展示进度，可配置颜色、宽度、和表盘类型的进度
* 菜单：提供了树形可折叠菜单，方便导航、跳转画面
* antd图标：一个icon库，里面有常规网页使用的icon元素
* 图片：能够调用后台导入的图片资源作展示到画面
* 变量查询表格：能跟查询一段时间内所组态的变量的数据，每一行代表的是聚合时间，每一列是一个变量
* 标签页：可以将多个画面集成在此组件中，通过切换标签页的方式来实现切换查看
* 弹框：将画面以弹框的方式展现出来，同时可以绑定弹框的“确认”和“取消”按钮触发的事件
* 当前报警：特殊组件，根据报警规则展示对应的当前报警信息，可定义多组，每一组通过一个规则 + 一个变量来实现报警，变量代表订阅哪一个PLC报警变量，而规则是描述该变量每一个bit所代表的意义
* 报警历史：特殊组件，根据时间来筛选报警的历史信息
* 用户管理：特殊组件，管理用户的组件
* 批次中心：特殊组件，查看、导出批次报表

=== 工业组件 ===
除了管道能特殊的设置流向之外，其他组件都只能配置颜色

=== 图表组件 ===

* 动态趋势图：可配置多个变量来展示当前的实时数据趋势
* 仪表盘：展示单个变量的值
* 变量查询趋势图：可以搜索和查询一段时间内所组态的变量数据，转化为趋势图，每一个变量在图上代表一根趋势线

=== 交互组件 ===

* 输入框：可控制变量的输入/输出，如果需要变量同时有输入和输出，则需要在数据订阅里配置该变量，然后再事件的onChange将变量设置成过程值
* 时间触发器：可以输入时间，预设范围配置 “1.days” = 今天, “1.hour” = 一小时前到现在，以此类推
* 消息提醒：弹框消息
* 按钮：跟文本差不多，可以配置点击事件
* 滑动条：可配置输入/输出变量，onChange事件可以将值写入变量
* 选择器：下拉框，一般搭配“文本列表”使用，可输入/输出
* 开关：特定样式的开/关，可输入/输出

=== 基本图形 ===
可组合完成不同的图形，有些需要调整“旋转”值来使用

= 使用过程中碰到的问题 =

# 组件选择不到：  建议复杂组件输入好相应的名称，在左侧点击展开方便查找；  深度太浅的组件也没有在大的盒子里，只能从左侧尝试点击item来找到；  有些盒子内的组件占满了盒子，这时候只能通过点击盒子内的组件，然后到左侧点击选中的父级item(可能要点两次)
# 一个组件的数据订阅：多个订阅之间互不影响，都是独立执行的，也可以多个订阅同时订阅一个变量。
# 数据订阅逻辑：  首先由一个变量出发（目前是三种类型，<code>PLC</code>变量是通过PLC读过来的，<code>LOC</code>变量是内部变量没有地址，<code>SCR</code>变量是画面级别的内部Props，只能在被当做template调用时赋值）  多个触发器之间是顺序判断相当于  if (触发器1){ then 设置属性A; 设置属性B} else if (触发器2) { then 设置属性C; } else if (触发器3){ then ... } else{ ....}<syntaxhighlight lang="javascript">
if (触发器1) {
  设置属性A;
  设置属性B
} else if (触发器2) {
  设置属性C; 
} else if (触发器3) {
  ...
} else { 
  ...
}
</syntaxhighlight>最后一条如果没有写条件的相当于走到了else分支
# Bool值的一些问题：在SCADA中bool类型的触发条件和设定变量值时是<code>true</code>和<code>false</code>，而对于Word取位的判断则需要用1和0判断（后续可能要优化）
# 数据订阅的一个触发条件可以同时设置多个属性，例如可以同时设置颜色和背景色；事件也可以设置“回调”多个变量值（不过更推荐“同时设置多个变量值”的功能）
# 取反功能：在回调里设置类型“将变量在固定值中切换”，然后添加两个值，分别是<code>true</code>和<code>false</code>
# 可见性设置：如果需要配置一块元素的可见性，订阅一个<code>bool</code>的变量，<code>true</code>时可见，<code>false</code>不可见，则可以只需要设置一个触发器“触发条件选空，设置属性’显示‘->’为变量值'"(推荐这么设置，当然设置两个条件去做也是没问题的）