Ricon组态系统快速入门指南-171主机测评

技术文档

👉 演示地址：http://www.ricon.cloud:81 👉 官网地址：http://www.ricon.cloud

1. 系统概述

1.1 产品简介

Ricon组态系统是一个基于Web技术的可视化组态编辑和实时监控平台，支持在浏览器中直接进行组态画面编辑、实时数据监控和场景管理。

1.2 核心优势

✅ 零部署成本 – 纯Web架构，浏览器直接访问
✅ 实时数据监控 – 支持WebSocket、MQTT、HTTP多种通信方式
✅ 丰富的组件库 – 内置200+工业组件和图元
✅ 高性能渲染 – 基于Konva.js的Canvas 2D渲染引擎
✅ 易于集成 – 标准的RESTful API和WebSocket协议
✅ 响应式设计 – 支持PC、平板、移动端多种设备

1.3 适用场景

🏭 工业监控 – 生产线监控、设备状态展示
🏢 楼宇自控 – 智能楼宇、能耗监控
🌊 水务管理 – 污水处理、供水监控
⚡ 电力系统 – 电力监控、配电管理
🚦 交通管控 – 智慧交通、信号控制
🌐 物联网应用 – IoT设备监控、数据可视化

2. 环境准备

2.1 系统要求

最低要求：

浏览器：Chrome 90+、Edge 90+、Firefox 88+
Web服务器：Nginx 1.18+、Apache 2.4+、IIS 10+
网络：支持WebSocket协议

推荐配置：

浏览器：Chrome 最新版
Web服务器：Nginx
服务器内存：2GB+
带宽：10Mbps+

2.2 快速部署

上传文件 – 将Ricon组态系统文件上传到Web服务器的根目录或子目录

配置Web服务器

Nginx配置示例：

server {
listen 80;
server_name localhost;
root /path/to/ricon;
index editor.html;

location / {
try_files $uri $uri/ /editor.html;
}
}

Apache配置示例：

<VirtualHost *:80>
ServerName localhost
DocumentRoot /path/to/ricon
<Directory /path/to/ricon>
AllowOverride All
Require all granted
</Directory>
</VirtualHost>

启动服务 – 启动Web服务器

访问系统 – 打开浏览器访问 http://your-server/editor.html

3. 快速开始

3.1 访问系统

编辑器地址： http://your-server/editor.html
监控地址： http://your-server/view.html?stageId=your-stage-id
文档中心： http://your-server/docs/index.html

3.2 创建第一个场景

打开编辑器 – 访问编辑器页面

设置画布 – 点击顶部工具栏的"画布设置"按钮，设置画布大小和背景

添加组件 – 从左侧组件库中拖拽组件到画布上

基础组件：文本、按钮、图片等
图元组件：电气符号、开关、指示灯等
高级组件：图表、表格、iframe等

配置组件属性 – 选中组件后，在右侧属性面板中设置属性

位置和大小：X、Y坐标，宽度和高度
样式：颜色、字体、边框等
数据绑定：绑定硬件数据点
事件：点击事件、悬停效果等

保存场景 – 点击顶部工具栏的"保存"按钮，输入场景名称并保存

预览场景 – 点击顶部工具栏的"预览"按钮，查看场景效果

监控场景 – 复制保存后生成的监控地址，在新标签页中打开

3.3 基本操作

快捷键：

Ctrl + S – 保存场景
Ctrl + P – 预览场景
Ctrl + Z – 撤销操作
Ctrl + Y – 恢复操作
Ctrl + A – 全选组件
Delete – 删除组件
Ctrl + 滚轮 – 缩放画布
空格键 + 鼠标拖拽 – 平移画布右键菜单：
选中组件后，右键点击可打开上下文菜单
支持复制、粘贴、删除、上移、下移等操作

4. 核心功能

4.1 编辑器功能

4.1.1 画布操作

画布缩放：鼠标滚轮缩放（需按住Ctrl键）
画布平移：空格键+鼠标拖拽
网格显示：显示/隐藏网格，辅助定位
对齐辅助线：拖拽组件时显示对齐辅助线

4.1.2 组件操作

拖拽添加：从组件库拖拽组件到画布
选中移动：点击选中组件，拖拽移动位置
调整大小：拖拽组件边角调整大小
多选操作：Ctrl+点击多选，框选多选
对齐操作：左对齐、右对齐、居中对齐等
图层操作：上移一层、下移一层、置顶、置底

4.1.3 属性配置

通用属性：位置、大小、旋转、透明度
样式属性：颜色、字体、边框、填充
数据绑定：硬件数据点选择、数据缩放、条件判断
事件配置：点击事件、悬停效果、自定义事件

4.1.4 场景管理

场景保存：保存场景到服务器
场景加载：加载已保存的场景
模板管理：保存场景为模板，从模板创建场景
导入导出：导入/导出场景JSON文件

4.2 监控功能

4.2.1 实时数据更新

WebSocket：实时双向通信，低延迟
MQTT：发布/订阅模式，适合IoT设备
HTTP轮询：兼容性好，实现简单

4.2.2 动画效果

旋转动画：风机、电机等旋转设备
流动动画：水流、电流等流动效果
闪烁动画：报警灯、指示灯闪烁
渐变动画：颜色渐变、透明度变化

4.2.3 状态指示

颜色状态：根据数据值显示不同颜色
图片状态：根据数据值切换图片
数值显示：实时数值显示，支持单位

4.3 通信功能

4.3.1 WebSocket配置

连接地址：WebSocket服务器地址
心跳间隔：保持连接的心跳间隔
重连机制：自动重连配置

4.3.2 MQTT配置

连接地址：MQTT broker地址
主题订阅：订阅的数据主题
QoS等级：服务质量等级

4.3.3 HTTP配置

轮询间隔：数据轮询的时间间隔
请求参数：HTTP请求参数

5. 通信配置

5.1 配置方法

打开通信配置 – 在编辑器中，点击顶部工具栏的"通信配置"按钮

选择通信方式 – 选择WebSocket、MQTT或HTTP

填写配置信息 – 根据选择的通信方式填写相应的配置

测试连接 – 点击"测试连接"按钮，测试通信连接是否成功

保存配置 – 点击"保存"按钮，保存通信配置

5.2 数据格式

WebSocket数据格式：

{
"MESSAGETYPE": "01", // 消息类型：01=数据更新
"MESSAGECONTENT": { // 数据内容
"d1a001": 25.5, // 数据点键值对
"d2a001": 100,
"d3a001": "运行"
},
"STAGEID": "场景ID", // 关联的场景ID
"TS": 1699123456789 // 时间戳
}

HTTP轮询响应格式：

{
"MESSAGETYPE": "01",
"MESSAGECONTENT": {
"d1a001": 25.5,
"d2a001": 100
},
"STAGEID": "场景ID",
"TS": 1699123456789
}

5.3 故障排查

通信连接失败：

检查通信地址是否正确

检查网络连接是否正常

检查服务器是否运行

检查防火墙设置

数据不更新：

检查数据点绑定是否正确

检查通信配置是否正确

检查服务器是否发送数据

检查浏览器控制台是否有错误

6. 常见问题

6.1 安装部署

Q: 页面空白，无法显示？ A:

检查Web服务器配置是否正确

查看浏览器控制台错误信息

确认所有资源文件路径正确

检查浏览器兼容性

Q: 图片无法加载？ A:

检查图片路径（相对路径或绝对路径）

确认图片文件是否存在

检查Web服务器静态资源配置

查看浏览器Network面板请求状态

6.2 功能使用

Q: 组件无法拖拽？ A:

确认Konva库是否正确加载

检查画布是否正常初始化

查看浏览器控制台是否有错误

尝试刷新页面

Q: 保存失败？ A:

检查API接口地址配置

确认用户token是否有效

查看网络请求响应信息

检查场景JSON数据格式

Q: 数据不更新？ A:

检查WebSocket/MQTT/HTTP连接状态

确认数据点绑定是否正确

查看数据更新方法是否被调用

检查数据格式是否符合预期

6.3 性能问题

Q: 场景加载慢？ A:

优化场景组件数量

压缩图片资源

使用图片缓存

检查网络带宽

Q: 画面卡顿？ A:

减少动画数量

优化数据更新频率

使用图层分组

检查浏览器性能

7. 技术支持

文档中心：访问 http://your-server/docs/index.html
技术问题：参考各文档的故障排查章节
功能建议：欢迎提出改进建议

Ricon组态系统 – 让可视化组态更简单！

案例

在这里插入图片描述

目录