5分钟快速上手Ricon组态系统版本v1.0.2 | 更新时间2026年4月目录系统概述环境准备快速开始核心功能通信配置常见问题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 88Web服务器Nginx 1.18、Apache 2.4、IIS 10网络支持WebSocket协议推荐配置浏览器Chrome 最新版Web服务器Nginx服务器内存2GB带宽10Mbps2.2 快速部署上传文件- 将Ricon组态系统文件上传到Web服务器的根目录或子目录配置Web服务器Nginx配置示例server{listen80;server_name localhost;root /path/to/ricon;index editor.html;location /{try_files$uri$uri/ /editor.html;}}Apache配置示例VirtualHost *:80ServerName localhost DocumentRoot /path/to/riconDirectory /path/to/riconAllowOverride All Require all granted/Directory/VirtualHost启动服务- 启动Web服务器访问系统- 打开浏览器访问http://your-server/editor.html3. 快速开始3.1 访问系统编辑器地址http://your-server/editor.html监控地址http://your-server/view.html?stageIdyour-stage-id文档中心http://your-server/docs/index.html3.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,// 关联的场景IDTS: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组态系统 - 让可视化组态更简单立即体验 演示地址: http://www.ricon.cloud:81 官网地址: http://www.ricon.cloud
Ricon组态系统快速入门指南
发布时间：2026/6/19 19:20:13
5分钟快速上手Ricon组态系统版本v1.0.2 | 更新时间2026年4月目录系统概述环境准备快速开始核心功能通信配置常见问题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 88Web服务器Nginx 1.18、Apache 2.4、IIS 10网络支持WebSocket协议推荐配置浏览器Chrome 最新版Web服务器Nginx服务器内存2GB带宽10Mbps2.2 快速部署上传文件- 将Ricon组态系统文件上传到Web服务器的根目录或子目录配置Web服务器Nginx配置示例server{listen80;server_name localhost;root /path/to/ricon;index editor.html;location /{try_files$uri$uri/ /editor.html;}}Apache配置示例VirtualHost *:80ServerName localhost DocumentRoot /path/to/riconDirectory /path/to/riconAllowOverride All Require all granted/Directory/VirtualHost启动服务- 启动Web服务器访问系统- 打开浏览器访问http://your-server/editor.html3. 快速开始3.1 访问系统编辑器地址http://your-server/editor.html监控地址http://your-server/view.html?stageIdyour-stage-id文档中心http://your-server/docs/index.html3.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,// 关联的场景IDTS: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组态系统 - 让可视化组态更简单立即体验 演示地址: http://www.ricon.cloud:81 官网地址: http://www.ricon.cloud
