项目概述
Ricon组态系统是一款基于Web的可视化组态编辑和监控平台，专为工业控制和数据可视化设计。它采用现代化的Web技术栈，提供直观的拖拽式编辑体验和强大的实时监控能力。
技术架构
| 技术 | 版本 | 用途 |
|---|---|---|
| Konva.js | 5.x | 2D画布渲染引擎，组件绘制和交互 |
| Layui | 2.x | 前端UI框架，弹窗、表单、表格 |
| jQuery | 3.x | DOM操作和事件处理 |
| ECharts | 5.3.2 | 数据可视化图表库 |
核心特性
🎨 可视化编辑
- 拖拽式编辑 - 直观的拖拽操作，所见即所得
- 丰富组件库 - 基础组件、工业图元、装饰元素
- 图层管理 - 完整的图层控制和组件对齐工具
- 撤销/恢复 - 基于ArrayStack的完整操作历史
- 导入/导出 - 支持JSON格式的场景文件
📊 实时监控
- WebSocket通信 - 毫秒级实时数据更新
- 动态图表 - ECharts集成，支持多种图表类型
- 动画效果 - 旋转、流动、闪烁等丰富的动画
- 状态指示 - 颜色变化、图片切换等视觉反馈
- 历史数据 - 数据查询和趋势分析
🔧 企业级功能
- 响应式设计 - 适配桌面、平板、移动设备
- 模板系统 - 场景模板保存和快速复用
- 权限控制 - 完整的用户权限管理体系
- 多协议支持 - WebSocket、MQTT、HTTP等多种通信协议
立即体验
👉 演示地址 : http://www.ricon.cloud:81
🌐 官网地址: http://www.ricon.cloud
功能模块
编辑器模块
- 编辑器入口:
editor.html - 支持快捷键操作（Ctrl+S保存、Ctrl+P预览、Ctrl+Z撤销）
- 图层管理面板
- 组件属性配置面板
监控模块
- 监控入口:
view.html?stageId=场景ID - WebSocket实时数据推送
- ECharts动态图表展示
- 视频监控集成
预览模块
- 预览入口:
preview.html - 实时预览编辑效果
- 支持全屏模式
应用场景
🏭 工业控制
- 生产车间监控系统
- 设备状态实时监测
- 工艺流程可视化
🏢 智慧园区
- 园区能源管理
- 安防监控集成
- 环境监测系统
💧 水务管理
- 污水处理监控
- 水质监测分析
- 泵站远程控制
🌞 新能源
- 光伏电站监控
- 风力发电监测
- 储能系统管理
系统优势
技术领先
- 采用Web原生技术，无需安装客户端
- 支持跨平台访问（Windows、Linux、Mac）
- 移动端自适应适配
性能优异
- 动态模块加载，按需加载资源
- Canvas 2D高性能渲染
- 内存泄漏防护机制
安全可靠
- XSS防护机制
- CSRF令牌验证
- 内容安全策略
扩展性强
- 模块化组件架构
- 支持自定义组件开发
- 丰富的API接口
快速开始
环境要求
- 浏览器: Chrome 80+ / Edge 80+ / Firefox 75+
- Web服务器: Nginx / Apache / IIS
访问地址
- 📝 编辑器: http://www.ricon.cloud:81/editor.html
- 👁️ 预览: http://www.ricon.cloud:81/preview.html
- 📊 监控: http://www.ricon.cloud:81/view.html?stageId=场景ID
👉 演示地址 : http://www.ricon.cloud:81
🌐 官网地址 : http://www.ricon.cloud