编辑器功能详解Ricon组态系统提供了强大的可视化编辑器让您能够轻松创建专业的工业监控画面。编辑器采用直观的拖拽式操作无需编程经验即可上手。 核心编辑功能1. 组件库管理编辑器提供了丰富的组件库涵盖以下类别基础组件图表组件- ECharts图表柱状图、折线图、饼图等文本组件- 支持字体、颜色、大小等配置按钮组件- 支持点击事件、写值、画面跳转、脉冲信号️图片组件- 支持静态图片、图片切换、状态图片日期组件- 当前日期显示️天气组件- 天气信息展示视频组件- 视频播放、监控画面动画组件- 旋转、流动条、闪烁等图元组件⚡电气图元- 丰富的工业电气图元库开关组件- 开关图标、开关状态指示灯- 状态指示灯工业设备- 各类工业设备图元高级组件表格组件- 数据表格展示iframe组件- 嵌入网页、ECharts、表格数据绑定- 硬件设备数据点绑定条件配置- 数据条件判断和状态变化⚙️事件行为- 组件交互事件配置2. 图层管理支持多层级图层管理图层上下移动图层显示/隐藏控制图层锁定保护3. 对齐工具水平对齐左对齐、居中、右对齐垂直对齐顶部、居中、底部等间距分布组件尺寸统一4. 撤销/恢复系统基于ArrayStack实现的完整操作历史记录支持无限撤销/恢复快捷键CtrlZ撤销、CtrlY恢复操作历史可视化⌨️ 快捷键支持功能快捷键说明保存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. 保存作品 │ │ CtrlS 或点击保存按钮 │ ├─────────────────────────────────────────────┤ │ 6. 预览效果 │ │ CtrlP 或点击预览按钮 │ └─────────────────────────────────────────────┘ 导入/导出功能导出场景// 场景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