Ricon组态可视化编辑器 - 所见即所得的工业画布

Ricon组态可视化编辑器 – 所见即所得的工业画布

编辑器功能详解

Ricon组态系统提供了强大的可视化编辑器，让您能够轻松创建专业的工业监控画面。编辑器采用直观的拖拽式操作，无需编程经验即可上手。

🎯 核心编辑功能

1. 组件库管理

编辑器提供了丰富的组件库，涵盖以下类别：

基础组件

• 📊 图表组件 – ECharts图表（柱状图、折线图、饼图等）
• 📝 文本组件 – 支持字体、颜色、大小等配置
• 🔘 按钮组件 – 支持点击事件、写值、画面跳转、脉冲信号
• 🖼️ 图片组件 – 支持静态图片、图片切换、状态图片
• 📅 日期组件 – 当前日期显示
• 🌤️ 天气组件 – 天气信息展示
• 📺 视频组件 – 视频播放、监控画面
• 🔄 动画组件 – 旋转、流动条、闪烁等

图元组件

• ⚡ 电气图元 – 丰富的工业电气图元库
• 🔌 开关组件 – 开关图标、开关状态
• 💡 指示灯 – 状态指示灯
• 🔧 工业设备 – 各类工业设备图元

高级组件

• 📊 表格组件 – 数据表格展示
• 🌐 iframe组件 – 嵌入网页、ECharts、表格
• 📡 数据绑定 – 硬件设备数据点绑定
• 🎯 条件配置 – 数据条件判断和状态变化
• ⚙️ 事件行为 – 组件交互事件配置

2. 图层管理

• 支持多层级图层管理
• 图层上下移动
• 图层显示/隐藏控制
• 图层锁定保护

3. 对齐工具

• 水平对齐（左对齐、居中、右对齐）
• 垂直对齐（顶部、居中、底部）
• 等间距分布
• 组件尺寸统一

4. 撤销/恢复系统

基于ArrayStack实现的完整操作历史记录：

• 支持无限撤销/恢复
• 快捷键：Ctrl+Z（撤销）、Ctrl+Y（恢复）
• 操作历史可视化

⌨️ 快捷键支持

🎨 编辑操作流程

┌─────────────────────────────────────────────┐
│ 1. 打开编辑器 │
│ http://www.ricon.cloud:81/editor.html │
├─────────────────────────────────────────────┤
│ 2. 添加组件 │
│ 从左侧组件库拖拽到画布 │
├─────────────────────────────────────────────┤
│ 3. 编辑属性 │
│ 选中组件，在右侧属性面板配置 │
├─────────────────────────────────────────────┤
│ 4. 数据绑定 │
│ 配置硬件设备数据点连接 │
├─────────────────────────────────────────────┤
│ 5. 保存作品 │
│ Ctrl+S 或点击保存按钮 │
├─────────────────────────────────────────────┤
│ 6. 预览效果 │
│ Ctrl+P 或点击预览按钮 │
└─────────────────────────────────────────────┘

📁 导入/导出功能

导出场景

// 场景JSON结构示例
{
"stageId": "BY0001",
"stageName": "车间监控",
"width": 1920,
"height": 1080,
"children": [
{
"type": "text",
"name": "标题",
"x": 100,
"y": 50,
"text": "生产监控中心",
"fontSize": 24,
"color": "#333"
}
]
}

导入场景

• 支持JSON格式场景文件导入
• 自动解析组件配置
• 保持原有布局和属性

🔧 属性配置面板

组件属性采用JSON配置，支持以下属性类型：

🎯 实战案例

创建工业监控面板

创建工艺流程画面

立即体验

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