使用说明书

一、系统概述

1.1 系统简介

Ricon组态系统是一个基于浏览器的可视化组态编辑与监控平台，用户无需安装客户端，只需通过浏览器即可完成：

• 组态画面设计（编辑器）

• 实时监控（运行视图）

• 历史数据查看、视频监控、天气信息等扩展功能

1.2 适用对象

• 运维人员：配置和查看监控画面

• 管理人员：查看关键运行状态和报表

• 开发/实施人员：负责系统集成与高级配置

1.3 基本页面

• editor.html：画面编辑器（编辑模式）

• preview.html：画面预览（仅查看，不含通信）

• view.html：运行监控页面（实时数据）

二、登录与访问

2.1 访问地址格式

部署完成后，一般访问路径如下（以 http://server/ricon 为例）：

• 编辑器页面 http://server/ricon/editor.html?userId={userId}&token={token}&stageId={stageId}

• 运行监控页面 http://server/ricon/view.html?userId={userId}&token={token}&stageId={stageId}

• 预览页面 http://server/ricon/preview.html

2.2 URL 参数说明

• userId：当前登录用户编号（必填）

• token：认证令牌，用于访问后台接口（必填）

• stageId：场景ID

  • 新建场景时可不传或为空

  • 编辑/查看已有场景时必须由上层业务系统传入

通常情况下，业务系统在菜单或按钮中拼接上述 URL 和参数，普通用户只需点击即可打开相应页面。

三、编辑器使用说明（editor.html）

3.1 打开编辑器

3.2 创建新场景

3.3 组件操作

3.3.1 添加组件

3.3.2 移动与缩放

• 移动：选中组件后，直接拖拽即可移动位置。

• 缩放：选中组件后，拖拽组件四个角或边上的控制点即可改变宽高。

• 对齐辅助：移动过程中可根据对齐线进行精确对齐。

3.3.3 常用快捷键

3.4 属性面板配置

选中组件后，右侧属性面板将显示该组件的详细属性，一般包括：

• 位置与大小：X/Y 坐标、宽度、高度、旋转角度等

• 外观样式：颜色、边框、透明度、字体等

• 数据绑定：绑定设备数据点或变量

• 事件与行为（部分组件支持）：

  • 打开链接

  • 跳转到其他场景

  • 写入变量（写值、点动等）

  • 显示/隐藏其他组件

3.4.1 数据绑定示例

硬件设备树的数据来源由后台接口提供，具体对接方式见技术文档。

3.5 场景通信配置（简要说明）

详细技术配置请参考《Ricon组态通信配置使用说明.md》，本章节仅说明使用入口。

3.6 保存和预览

3.6.1 保存场景

3.6.2 预览场景

四、运行监控使用说明（view.html）

4.1 打开监控页面

访问示例：

代码块

1.http://server/ricon/view.html?userId=U001&token=xxx&stageId=123

页面加载过程：

4.2 界面说明

典型运行页面包括：

• 画面区域：展示当前场景的所有组件。

• 状态区域（可选）：

  • 通信连接状态（如 WebSocket 状态灯）

  • 系统时间、标题栏等。

• 操作按钮：

  • 全屏/退出全屏

  • 刷新画面

4.3 常用操作

• 全屏显示：点击界面上的全屏按钮，或使用浏览器的全屏功能。

• 刷新画面：当数据异常或配置变更后，可点击“刷新”按钮重新加载场景。

• 切换画面：若上层系统支持多个场景，可通过菜单或按钮切换不同 stageId。

4.4 实时数据展示

运行时常见组件效果：

• 数值显示：实时功率、电流、电压、流量等。

• 指示灯：设备运行/故障、开/关等状态指示。

• 图表：历史/实时趋势曲线、柱状图等。

• 图片切换：根据状态展示不同图片（如阀门开/关界面）。

• 动画：旋转、流动条、闪烁等动态效果。

五、常见问题与简单排查

5.1 页面打不开或提示无权限

可能原因：

• URL 拼写错误或缺少必要参数（userId、token、stageId）。

• token 已过期或无效。

• 浏览器被代理或网络受限。

建议处理：

• 重新从业务系统菜单进入，不手动拼 URL。

• 若仍有问题，请联系系统管理员或技术支持。

5.2 画面保存失败

表现：

• 点击“保存”后，提示“操作失败”或无反应。

可能原因：

• 后端保存接口不可用。

• 用户 token 无效或权限不足。

• 场景数据异常。

建议处理：

5.3 运行画面数据不更新

表现：

• 画面加载正常，但数值不变化、指示灯不亮等。

可能原因：

• 通信方式未配置或配置错误（WebSocket/MQTT/HTTP）。 +- 后端数据源未发送数据或接口报错。 +- 组件未正确绑定数据点。

简单检查：

5.4 组件不显示或显示异常

• 检查是否误调节了组件透明度、颜色等属性。

• 检查浏览器控制台是否有 JavaScript 报错。

• 确认 Web 服务器上的图片、字体等静态资源已完整部署。

六、角色与权限建议

为了更好地管理和使用 Ricon组态系统，推荐如下角色划分：

• 普通监控用户：

  • 打开运行页面（view.html）查看数据，不修改画面。

• 配置/运维人员：

  • 使用编辑器（editor.html）创建和调整场景。

  • 负责画面布局、组件选择、简单的数据绑定。

• 系统实施/开发人员：

  • 负责 config/apiClient.js 等配置文件维护。

  • 对接后台接口、设备数据、变量树等。

  • 配置通信方式（WebSocket/MQTT/HTTP）。

  • 

    扩展自定义组件或特殊业务逻辑。

七、推荐阅读的配套文档

为更好地理解和使用系统，建议配合以下文档一起阅读：

• Ricon组态插件集成详细说明书.md 面向开发/实施人员，说明如何与后端接口对接、如何集成到业务系统中。

• Ricon组态通信配置使用说明.md 详细说明通信配置（WebSocket/MQTT/HTTP）的使用方法和数据格式。

技术文档

演示地址：http://1.15.10.177/