编辑器

• 可视化编辑：用户可以通过简单的拖拽和放置，添加元素，如文本、变量、视频、图表、控制按钮、参数配置等。
• 实时预览：用户可以在编辑过程中实时预览组态效果，以便更好地进行调整和配置。
• 丰富的内容：编辑器还提供了丰富的模板和样式，可以满足不同用户的需求。
• 响应式设计：编辑器通常支持响应式设计，可以根据不同的屏幕大小和设备类型，自动调整组态布局和样式。
• 导入和导出：用户可以将编辑好的组态页面导出为XML文件，并分享给其他人；导入到编辑器中。

功能区介绍

数据配置

数据配置在页面中叫数据绑定，根据不同的元件所绑定的内容以及效果不一样；

如变量元件，则需要通过设置设备、属性等要素；从而实时读取到属性的值。

功能说明

在本系统中组态的数据配置主要分三类：采集数据配置、控制数据配置、图表数据配置。

采集数据配置：通过设置某台设备的属性实时展示具体的值。

控制数据配置：通过绑定某台设备的控制属性从而在组态页面中实现对设备的控制。

图表数据配置：通过设置某台设备的属性采用图表形式表达数据值。

采集数据配置

案例一：实时数据值展示

操作步骤：

• 拖动一个基础元件中的【变量组件】到工作区；
• 点击变量元件，单击右侧【数据绑定】；设置数据源：选择设备、选择属性{只能选择组态外部绑定的产品所拥有的设备}；
• 单击数据源“保存”按钮和组态右上方“保存”按钮，点击“预览”按钮，查看配置效果。

案例二：启动/停止文字切换展示

在操作这个之前，最好先增加一个开关按钮，这样可以一边控制，一边显示切换的内容。

参考下方，【案例一：开关按钮下发控制】

操作步骤：

• 拖动一个基础元件中的【Title组件】到工作区；双击修改文字为“启动”；
• 单击【Title组件】自动选中；进入右侧配置区域；
• 单击【数据绑定】；在“数据动效”处设置，点击“显示/隐藏”右侧的编辑按钮；
• 在弹出框中：选择设备、选择属性；属性设置完成；
• 然后根据具体的参数值，设置显示文字；这里就拿开关量0/1举例；1为显示启动标签，0为显示停止标签；
• 设置完成参数之后，记得勾选“显示/隐藏”前面的复选框☑；
• 最后，单击下方和右上方“保存”按钮，设置完成；单击“预览”按钮，查看配置效果。

点击开关控制效果展示。

控制数据配置

案例一：开关按钮下发控制

操作步骤：

• 拖动一个控制元件中的【开关组件】到工作区；
• 单击【开关组件】进入右侧配置区域；设置数据源：选择设备，选择属性；
• 在“数据动效”处设置，点击“状态设置”，在弹出框中：设置开启的值为1和图片；设置关闭的值为0和图片；状态设置完成；
• 在“数据交互”处设置，点击“单击”右侧的编辑按钮；
• 在弹出框中：设置事件为单击，动作为参数设置，命令下发方式为自定义命令，单向/双向为单向；命令处不能做任何修改；直接单击“保存”即可。
• 设置完成参数之后，记得勾选“状态设置”前面的复选框☑和“单击”前面的复选框☑；
• 最后，单击下方“保存”按钮，设置完成；
• 单击“预览”按钮，查看配置效果。

案例二：固定参数下发控制

操作步骤：

• 拖动一个基础元件中的【Title组件】到工作区；
• 进入右侧配置区域，单击【数据绑定】；在“数据交互”处设置，点击“按下”右侧的编辑按钮；
• 在下发表格中，选择设备，单向/双向为单向；填写下发的属性及属性对应的值；直接单击“保存”即可。
• 设置完成参数之后，记得勾选“按下”前面的复选框☑；
• 最后，单击下方“保存”按钮，设置完成；
• 单击“预览”按钮，操作查看配置效果。

图表数据配置

案例一：折线图历史数据

注意：柱状图数据设置同理。

操作步骤：

• 拖动一个图表元件中的【折线图组件】到工作区；
• 进入右侧配置区域；单击【数据绑定】；设置数据源：选择设备、选择属性；
• 在“展示类型”处，选择数据类型为历史，时间周期为1天，聚合方式为空，限制数为50；
• 最后，单击下方和右上方“保存”按钮，设置完成；
• 单击“预览”按钮，查看配置效果。

案例二：仪表盘数据展示

操作步骤：

• 拖动一个图表元件中的【仪表盘组件】到工作区；
• 单击【仪表盘组件】自动选中；进入右侧配置区域；
• 单击【数据绑定】；设置数据源：选择设备、选择属性；
• 在“展示类型”处，为仪表盘设置参数；数据类型为实时，时间周期为1分，聚合方式为空，间隔时间为1秒，单位为℃；
• 最后，单击下方“保存”按钮，设置完成；
• 单击“预览”按钮，查看配置效果。

样式配置

组态样式配置是指通过设置设计器中各个组件的样式属性，来改变它们的表现形式和外观。每个组件都有一些样式属性，如颜色、大小、字体、背景、边框等。通过改变这些属性，可以改变组件的外观和行为。

功能说明

在本系统中，样式配置分为三类：样式、文本、调整图形。

样式

样式的内容设置主要有：外观模板，填充颜色/渐变，线条（即边框颜色），线条大小，透明度，边框圆角，阴影等。

文本

文本的样式设置主要有：字体，加粗，加斜，下划线，字体大小，水平对齐方式（左对齐、居中对齐、右对齐），垂直对齐方式（上对齐、居中对齐、下对齐），字体颜色，透明度，字体间距等属性设置。

调整图形

调整图形的样式设置主要有：组件层次（移到最前、移到最后、上移一层、下移一层），组件的大小（宽、高），组件的位置（左、上），组件的角度（可旋转），组件翻转（水平、垂直），对齐方式等属性设置。

多页面管理

组态多页面管理是指对组态上的各个页面进行管理和组织的操作。通常情况下，一个组态可以包含多个页面，每个页面可以展示不同的数据、信息或结果。

从长图可知，整个页面是由4个子页面构成：

数据监控为一页；参数设置为一页；手动操作为一页；I/O监控为一页。

多页面管理的实现

多页面管理，是由组态设计器中多页管理来进行，为每个页面独立创建；最后再来完成页面的跳转。

多页面的跳转

在页面管理中，通常会存在一些链接操作，用于在多个页面之间进行切换、跳转或整合。这些链接操作可以是基于手动选择的。

操作如下：

• 右键文本框，在弹出的菜单中，选择“编辑链接”；
• 在弹出的编辑链接框中，选择对应的页面；点击应用，保存组态即可。