编辑器功能详解
Ricon组态系统提供了强大的可视化编辑器，让您能够轻松创建专业的工业监控画面。编辑器采用直观的拖拽式操作，无需编程经验即可上手。
🎯 核心编辑功能
1. 组件库管理
编辑器提供了丰富的组件库，涵盖以下类别：
基础组件
- 📊图表组件- ECharts图表（柱状图、折线图、饼图等）
- 📝文本组件- 支持字体、颜色、大小等配置
- 🔘按钮组件- 支持点击事件、写值、画面跳转、脉冲信号
- 🖼️图片组件- 支持静态图片、图片切换、状态图片
- 📅日期组件- 当前日期显示
- 🌤️天气组件- 天气信息展示
- 📺视频组件- 视频播放、监控画面
- 🔄动画组件- 旋转、流动条、闪烁等
图元组件
- ⚡电气图元- 丰富的工业电气图元库
- 🔌开关组件- 开关图标、开关状态
- 💡指示灯- 状态指示灯
- 🔧工业设备- 各类工业设备图元
高级组件
- 📊表格组件- 数据表格展示
- 🌐iframe组件- 嵌入网页、ECharts、表格
- 📡数据绑定- 硬件设备数据点绑定
- 🎯条件配置- 数据条件判断和状态变化
- ⚙️事件行为- 组件交互事件配置
2. 图层管理
- 支持多层级图层管理
- 图层上下移动
- 图层显示/隐藏控制
- 图层锁定保护
3. 对齐工具
- 水平对齐（左对齐、居中、右对齐）
- 垂直对齐（顶部、居中、底部）
- 等间距分布
- 组件尺寸统一
4. 撤销/恢复系统
基于ArrayStack实现的完整操作历史记录：
- 支持无限撤销/恢复
- 快捷键：Ctrl+Z（撤销）、Ctrl+Y（恢复）
- 操作历史可视化
⌨️ 快捷键支持
| 功能 | 快捷键 | 说明 |
|---|---|---|
| 保存 | Ctrl + S | 保存当前场景 |
| 预览 | Ctrl + P | 预览场景效果 |
| 撤销 | Ctrl + Z | 撤销上一步操作 |
| 恢复 | Ctrl + Y | 恢复撤销的操作 |
| 复制 | Ctrl + C | 复制选中组件 |
| 粘贴 | Ctrl + V | 粘贴组件 |
| 删除 | Delete | 删除选中组件 |
| 全选 | Ctrl + A | 选中所有组件 |
| 放大 | Ctrl + 滚轮上 | 放大画布视图 |
| 缩小 | Ctrl + 滚轮下 | 缩小画布视图 |
| 全屏 | F11 | 切换全屏模式 |
| 适应屏幕 | Ctrl + 0 | 自适应画布大小 |
🎨 编辑操作流程
┌─────────────────────────────────────────────┐ │ 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配置，支持以下属性类型：
| 属性类型 | 说明 |
|---|---|
| input | 文本输入框 |
| color | 颜色选择器 |
| selectAdvanced | 下拉选择框 |
| slider | 滑块 |
| hardwareInputNew | 硬件设备选择 |
| whereStatusColorTable | 状态颜色配置表 |
| fontNew | 字体配置 |
| BORDER | 边框配置 |
| RotatImage | 旋转图片选择 |
| valueZoomTableNew | 数据缩放配置表 |
🎯 实战案例
创建工业监控面板
- 从组件库拖拽仪表盘组件到画布
- 在属性面板配置数据绑定
- 设置阈值和颜色映射
- 添加指示灯组件显示设备状态
- 配置动态图表展示趋势数据
创建工艺流程画面
- 使用工业图元组件绘制设备
- 添加流动动画模拟物料流转
- 设置状态切换显示不同颜色
- 添加按钮组件实现远程控制
立即体验
👉演示地址: http://www.ricon.cloud:81
🌐官网地址: http://www.ricon.cloud