文档

快速入门

更新时间:
一键部署

本章节介绍了两个应用案例的搭建步骤,分别是“车间生产看板”和“耗水态势监控”。

组态概览介绍

一:概览页

点击“立即使用”按钮进入可视化开发页面,创建新的组态应用,点击“页面模板”按钮进入项目案例页面。

imageimage

二:项目案例

项目案例中展示了工业组态在各个行业中的代表性页面以及典型的案例搭建。

image

点击“预览”按钮查看案例详情:

image

三:可视化开发

在可视化开发页面中创建组态应用,并且可对应用进行分享、导出、编辑或删除等操作。

image.png

四:资源管理

资源管理中的资源类型包括图片、3D模型、视频、矢量(SVG)。

image.png

详细使用可见素材(版本号>=2.4.0)模块。

五:系统设置

展示组态系统的基本信息。

image.png

案例一:车间生产看板

步骤一: 创建应用

  • 点击“新建”,输入应用名称,点击“确定”。

  • 进入应用后,默认页面为“自定义新增页1”,首次进入编辑器会自动弹出选择页面模板,点击弹窗中的空白画布卡片的“创建新页面”按钮,或者点击选择某个页面模板点击“创建”。image.png

  • 或者通过点击右上角+号新建页面。image.png

  • 创建应用也可通过在编辑器内点击应用下拉列表,点击“创建新应用”。image.png

步骤二: 配置和搭建页面操作

  • 配置页面:点击页面空白处,在右侧面板设置页面宽高、刷新频率、背景图片等配置。

  • 从组件列表中,拖拽组件到画布上,后可通过拖拽、缩放或编辑属性继续调整位置。

    image.png
  • 选中该组件可在右侧面板修改样式设置文字内容(例如:30)和组件样式,如下图所示。详细说明,请参见官方组件章节。

    p6929166666666.png

  • 为组件的属性绑定数据源,点击选中对应数据的文字组件,通过点击右侧属性面板的“文字内容”后的数据源按钮,配置数据。选择数据源种类为“设备属性点”,选择对应的设备属性点,点击确定。

    image

步骤三:发布应用

应用编辑保存后,可将应用发布,发布后可通过访问URL地址,在HMI、电视、大屏中使用。

步骤一:选择编辑器页面右上角发布图标,鼠标 移至图标会出现“发布”气泡提示,点击发布图标。

image

步骤二:点击发布图标后,会出现确认发布当前版本弹窗,确认发布当前版本可点击确认,取消发布可点击取消。

  • 若提示有未发布的自定义组件,可以一键发布所有应用中未发布的自定义组件,或者逐一点击自定义组件进行发布。

  • 开启免登访问:点击“开启免登访问”,支持第三方应用无需登录也可以直接使用组态页面。使用权限与开发者相同。可以选择免登访问应用或某个页面;

image.png

注意:开启/关闭免登访问需在发布后方可生效。

开启免登访问、应用自定义URL后点击“确定”按钮,可点击复制应用分享的URL,或者直接点击链接跳转到发布页面,通过访问URL,进入发布后的应用页面:

image.png

点击免登访问链接处“重置”按钮,URL携带token重置,重置成功后旧链接失效:

image

重置成功后旧链接打开的页面全部失效。

案例二:耗水态势监控

1

如何使用边缘组态搭建出如下应用?详细步骤如下:

操作1:切图&垫图

  • 把背景图,以及对应的花纹素材贴图等按2x的尺寸从sketch等切出。注意标题文字等尽量用组态工具还原,方便后续维护修改。

  • 做好背景图,先垫上去。

  • 把完整的设计稿作为一张图片垫在非背景的最底层,把透明度调到约10%,用于瞄准还原。在完成所有设计后删除该参考图层。

操作2: 搭建基本元素

  • 使用贴图,文字组件等先放置固定的不随数据源变化的内容。

  • 导入到客户环境后,再把需要关联数据源的组件进行管理。

操作3: 搭建tab交互图表

  1. 一个Tab单元由两个图片+两个热区组成。两个图片是tab的两个状态,热区是透明度为0的矩形组件。注意,“透明度为0”不是“不可见”。“透明度为0”的组件,点击交互仍然生效,会在交互上遮盖下方的组件。“不可见”的组件,点击交互失效并且不会覆盖下方组件。

  2. 为这个tab单元的4个组件命名,否则后面点击显隐的交互不容易对应。如“tab热区-班次水费排名”,“tab热区-设备水费排名”,“tab图片-班次耗水排名”,“tab图片-班次水费排名”。

  3. 放置两个iframe组件。一个是“耗水”一个是“水费”。命名也需要注意。然后分别绑定两个IP地址做区分。做好对齐等工作。

  4. 先在右侧栏将“水费”相关的tab图片与图表可见性设为“不可见”(初始状态不可见),注意热区不需要设置不可见。然后选择”水费“的热区,点击右侧栏“交互”-“点击”-“显示隐藏”,显示“tab图片-班次水费排名”,“图表-班次水费排名”,隐藏“tab图片-班次耗水排名”,“图表-班次耗水排名”。

  5. 然后选择“耗水”的热区,进行反向的操作。

  6. 点击保存,预览,看看效果是否符合预期。

操作4: 搭建自定义卡片

  1. 了解设计稿上需要几种自定义卡片。在此份设计稿中,需要两种——总表和子表。

  2. 在画布上使用素材/文字组件等勾勒出总表的形状,调整样式后,框选全部点击右键“创建自定义组件”,进入组件工作台。

  3. 为需要动态配置的数据源设置“自定义属性”,后续导入到客户环境后还需要修改配置成“设备模型”。

  4. 将自定义组件的对应文字组件关联上对应的“自定义属性”。

  5. 保存发布自定义组件。

  6. 在画布上复制,修改对应的自定义组件的名称,显示数据等。

  7. 重复1-6做出子表的自定义组件,并放到合适的位置上

操作5:绘制管道连线

  1. 将卡片放到合适的画布位置。

  2. 使用连线组件点击锚点完成连线。

  3. 调整样式。

  4. 重复1-3完成所有连线。

操作6:完善页面其他部分

任务2-5的重复。

操作7: 预览测试&导出

  1. 点击保存,然后点击预览。

  2. 检查各部分交互,数据连接是否符合预期。

  3. 点击发布,固化版本。

  4. 回到组态列表页,点击导出,获得.scada的文件。

  5. 发送给现场实施的同学,然后在客户环境里导入。注意选择“导入全部资源”,否则客户环境的画面会出现空缺。

  6. 现场实施的同学再进行数据源重绑定等工作。

搭建效果:

2