Ricon组态系统快速入门指南

最新推荐文章于 2026-06-20 16:04:58 发布

原创最新推荐文章于 2026-06-20 16:04:58 发布 · 188 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#物联网 #组态软件 #运维 #组态 #前端

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 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
}