画面组态编辑 - 版本历史

Xinye.wang：/* 使用过程中碰到的问题 */ 删除重复内容

2021-08-11T11:01:01Z

使用过程中碰到的问题：删除重复内容

←上一版本		2021年8月11日 (三) 11:01的版本
第74行：		第74行：
	# 组件选择不到：建议复杂组件输入好相应的名称，在左侧点击展开方便查找；深度太浅的组件也没有在大的盒子里，只能从左侧尝试点击item来找到；有些盒子内的组件占满了盒子，这时候只能通过点击盒子内的组件，然后到左侧点击选中的父级item(可能要点两次)		# 组件选择不到：建议复杂组件输入好相应的名称，在左侧点击展开方便查找；深度太浅的组件也没有在大的盒子里，只能从左侧尝试点击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">		# 数据订阅逻辑：首先由一个变量出发（目前是三种类型，<code>PLC</code>变量是通过PLC读过来的，<code>LOC</code>变量是内部变量没有地址，<code>SCR</code>变量是画面级别的内部Props，只能在被当做template调用时赋值）多个触发器之间是顺序判断相当于<syntaxhighlight lang="javascript">
	if (触发器1) {		if (触发器1) {
	设置属性A;		设置属性A;

Xinye.wang：使用一些代码块

2021-08-11T11:00:36Z

使用一些代码块

←上一版本		2021年8月11日 (三) 11:00的版本
第35行：		第35行：

	* 文字：静态/动态文字展示，可配置颜色大小等，可订阅变量来输出，也可以添加点击事件		* 文字：静态/动态文字展示，可配置颜色大小等，可订阅变量来输出，也可以添加点击事件
	* 时间展示：展示当前HMI时间，可配置格式化例如 ~~：YYYY~~-MM-DD HH:mm:ss.SSS为2021-07-29 18:55:33.730		* 时间展示：展示当前HMI时间，可配置格式化例如：<code>YYYY-MM-DD HH:mm:ss.SSS</code> 为2021-07-29 18:55:33.730
	* 进度条：简单的进度条，根据进度展示进度，可配置颜色、宽度、和表盘类型的进度		* 进度条：简单的进度条，根据进度展示进度，可配置颜色、宽度、和表盘类型的进度
	* 菜单：提供了树形可折叠菜单，方便导航、跳转画面		* 菜单：提供了树形可折叠菜单，方便导航、跳转画面
第74行：		第74行：
	# 组件选择不到：建议复杂组件输入好相应的名称，在左侧点击展开方便查找；深度太浅的组件也没有在大的盒子里，只能从左侧尝试点击item来找到；有些盒子内的组件占满了盒子，这时候只能通过点击盒子内的组件，然后到左侧点击选中的父级item(可能要点两次)		# 组件选择不到：建议复杂组件输入好相应的名称，在左侧点击展开方便查找；深度太浅的组件也没有在大的盒子里，只能从左侧尝试点击item来找到；有些盒子内的组件占满了盒子，这时候只能通过点击盒子内的组件，然后到左侧点击选中的父级item(可能要点两次)
	# 一个组件的数据订阅：多个订阅之间互不影响，都是独立执行的，也可以多个订阅同时订阅一个变量。		# 一个组件的数据订阅：多个订阅之间互不影响，都是独立执行的，也可以多个订阅同时订阅一个变量。
	# 数据订阅逻辑：首先由一个变量出发（目前是三种类型 ~~，PLC~~ 变量是通过PLC读过来的 ~~，LOC~~ 变量是内部变量没有地址 ~~，SCR~~ 变量是画面级别的内部Props，只能在被当做template调用时赋值）多个触发器之间是顺序判断相当于 if (触发器1){ then 设置属性A; 设置属性B} else if (触发器2) { then 设置属性C; } else if (触发器3){ then ... } else{ ....} 最后一条如果没有写条件的相当于走到了else 层		# 数据订阅逻辑：首先由一个变量出发（目前是三种类型，<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">
	# Bool值的一些问题：在SCADA中bool类型的触发条件和设定变量值时 ~~是true和false~~ ，而对于Word取位的判断则需要用1和0判断（后续可能要优化）		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判断（后续可能要优化）
	# 数据订阅的一个触发条件可以同时设置多个属性，例如可以同时设置颜色和背景色；事件也可以设置“回调”多个变量值（不过更推荐“同时设置多个变量值”的功能）		# 数据订阅的一个触发条件可以同时设置多个属性，例如可以同时设置颜色和背景色；事件也可以设置“回调”多个变量值（不过更推荐“同时设置多个变量值”的功能）
	# 取反功能：在回调里设置类型“将变量在固定值中切换”，然后添加两个值，分别 ~~是true和false~~		# 取反功能：在回调里设置类型“将变量在固定值中切换”，然后添加两个值，分别是<code>true</code>和<code>false</code>
	# 可见性设置：如果需要配置一块元素的可见性，订阅一 ~~个bool~~ 的变量 ~~，true~~ 时可见 ~~，false~~ 不可见，则可以只需要设置一个触发器“触发条件选空，设置属性’显示‘->’为变量值'"(推荐这么设置，当然设置两个条件去做也是没问题的）		# 可见性设置：如果需要配置一块元素的可见性，订阅一个<code>bool</code> 的变量，<code>true</code> 时可见，<code>false</code> 不可见，则可以只需要设置一个触发器“触发条件选空，设置属性’显示‘->’为变量值'"(推荐这么设置，当然设置两个条件去做也是没问题的）

Xinye.wang：图片宽度设定为1100像素，保证能在15村笔记本上看全

2021-08-11T10:46:49Z

图片宽度设定为1100像素，保证能在15村笔记本上看全

←上一版本		2021年8月11日 (三) 10:46的版本
第1行：		第1行：
	== 面板概述 ==		== 面板概述 ==
	[[File:组态画板介绍.png\|~~1286x1286px~~\|无框]]		[[File:组态画板介绍.png\|1100x1100px\|无框]]

	== 组件-盒子 ==		== 组件-盒子 ==
第23行：		第23行：

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

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

	= 组件概述 =		= 组件概述 =

Xinye.wang：/* 面板概述 */ 图片略微缩小

2021-08-11T10:45:13Z

面板概述：图片略微缩小

←上一版本		2021年8月11日 (三) 10:45的版本
第1行：		第1行：
	== 面板概述 ==		== 面板概述 ==
	[[File:组态画板介绍.png\|~~1920x1920像素~~]]		[[File:组态画板介绍.png\|1286x1286px\|无框]]

	== 组件-盒子 ==		== 组件-盒子 ==

2021年8月11日 (三) 10:19 Xyy

2021-08-11T10:19:29Z

←上一版本		2021年8月11日 (三) 10:19的版本
第1行：		第1行：
	=== 面板概述 ===		== 面板概述 ==
	[[File:组态画板介绍.png\|1920x1920像素]]		[[File:组态画板介绍.png\|1920x1920像素]]

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

第13行：		第13行：
	[[File:盒子-事件.png\|无\|有框]]		[[File:盒子-事件.png\|无\|有框]]

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

2021年8月11日 (三) 10:16 Xyy

2021-08-11T10:16:19Z

←上一版本		2021年8月11日 (三) 10:16的版本
第1行：		第1行：
	=== 面板概述 ===		=== 面板概述 ===
	[[File:组态画板介绍.png\| ~~无\|缩略图~~]]		[[File:组态画板介绍.png\|1920x1920像素]]

	=== 组件-盒子 ===		=== 组件-盒子 ===
第23行：		第23行：

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

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

	= 组件概述 =		= 组件概述 =

Xyy：创建页面，内容为“=== 面板概述 === 缩略图 === 组件-盒子 === 画面内的所有组件有层级关系，使用“盒子”来实现封装…”

2021-08-11T10:13:11Z

创建页面，内容为“=== 面板概述 === 无|缩略图 === 组件-盒子 === 画面内的所有组件有层级关系，使用“盒子”来实现封装…”

新页面

=== 面板概述 ===
[[File:组态画板介绍.png|无|缩略图]]

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

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

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

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

例如制作一个大组件：

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

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

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

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

= 组件概述 =

=== 基础组件 ===

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

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

=== 图表组件 ===

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

=== 交互组件 ===

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

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

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

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