组件系统概述Ricon组态系统提供了丰富的组件库涵盖工业可视化所需的各种组件类型支持灵活的配置和扩展。 组件分类基础组件Basic Components组件类型说明配置文件文本组件支持字体、颜色、大小配置basic.json按钮组件支持点击事件、写值、跳转basic.json图片组件支持静态图片、状态切换basic.json日期组件当前日期时间显示basic.json天气组件实时天气信息展示basic.json视频组件视频播放、监控画面basic.json表格组件数据表格展示basic.jsoniframe组件嵌入网页、图表basic.json图表组件Chart Components基于ECharts 5.3.2构建图表类型说明应用场景折线图数据趋势展示温度、压力趋势柱状图数据对比分析产量对比饼图占比关系展示能源消耗占比面积图数据累积展示流量累计仪表盘实时数值显示转速、压力雷达图多维数据展示设备状态评分图元组件Graphic Components工业电气图元库分类说明数量电气图元开关、接触器、继电器等50设备图元泵、风机、阀门等30管道图元管道、弯头、三通等20仪表图元压力表、温度计等15动画组件Animation Components组件类型说明配置参数旋转组件图片旋转动画速度、方向流动组件流动条动画速度、颜色闪烁组件闪烁提示效果频率、颜色脉冲组件脉冲扩散效果半径、速度 组件配置组件JSON结构{id:text_001,type:text,name:文本组件,icon:text.svg,category:basic,defaultConfig:{x:0,y:0,width:200,height:30,text:默认文本,fontSize:14,color:#333333,bold:false},properties:[{name:text,label:文本内容,type:input},{name:fontSize,label:字体大小,type:slider,min:10,max:48},{name:color,label:文字颜色,type:color}]}数据绑定配置{dataBind:{enabled:true,dataKey:d1a001,dataSource:hardware,scale:{enabled:true,inputMin:0,inputMax:1000,outputMin:0,outputMax:100},condition:{enabled:true,rules:[{operator:,value:80,color:#dc3545},{operator:,value:60,color:#ffc107}]}}} 组件开发添加新组件步骤┌─────────────────────────────────────────────┐ │ 1. 创建编辑模块 │ │ modules/edit/edit-xxx.html │ │ modules/edit/editXxx.js │ ├─────────────────────────────────────────────┤ │ 2. 注册组件 │ │ assets/json/basic.json │ │ 配置图标、默认属性、属性面板 │ ├─────────────────────────────────────────────┤ │ 3. 实现渲染逻辑 │ │ assets/js/core/stageOperation.js │ │ assets/js/core/stageView.js │ ├─────────────────────────────────────────────┤ │ 4. 实现动画处理 │ │ assets/js/core/moduleAnimation.js │ ├─────────────────────────────────────────────┤ │ 5. 实现数据更新 │ │ assets/js/core/stageView.js │ └─────────────────────────────────────────────┘组件开发示例// 自定义组件创建逻辑functioncreateCustomComponent(config){// 创建Konva节点constgroupnewKonva.Group({x:config.x,y:config.y,width:config.width,height:config.height});// 添加子元素constrectnewKonva.Rect({width:config.width,height:config.height,fill:config.fill,stroke:config.stroke,strokeWidth:2});group.add(rect);// 添加文本consttextnewKonva.Text({text:config.text,x:10,y:10,fontSize:config.fontSize,fill:config.color});group.add(text);returngroup;} 组件最佳实践性能优化建议图层分组- 将静态组件和动态组件分开管理缓存复用- 复用相同配置的组件实例懒加载- 按需加载非可见区域组件事件节流- 避免频繁的事件触发组件复用技巧使用模板功能保存常用配置导出组件配置JSON复用使用复制粘贴快速创建相似组件数据绑定最佳实践合理命名数据点如d1a001表示设备1的温度配置数据缩放适应显示范围设置合理的更新频率组件展示基础组件展示文本组件支持富文本配置按钮组件支持多种交互事件图片组件支持状态切换日期组件自动更新时间图表组件展示实时折线图动态更新数据点仪表盘实时数值显示饼图数据占比分析图元组件展示电气图元标准工业符号设备图元泵、风机等管道图元连接管线动画组件展示旋转动画设备运转效果流动动画物料流动效果闪烁动画告警提示立即体验演示地址: http://www.ricon.cloud:81官网地址: http://www.ricon.cloud
