点击变色、超限报警、图元联动、下发指令------传统开发要写代码的交互，ricon 全部可视化配置。
交互开发的"无底洞"
做过 SCADA 前端的工程师都懂：
- "温度超过 80℃ 变红"------写 watcher
- "点按钮弹出确认框，确认后下发指令"------写 event handler
- "告警时先闪烁 2 秒，再弹窗"------写 setTimeout 链
- "点击图元 A，刷新图元 B 的数据"------写组件通信
每个交互都不复杂，但加起来就是几千行代码。更别说客户改需求："不要弹窗，改成侧边栏滑出"------又要重写。
ricon 的解法是：把交互抽象成"触发 × 行为"的可视化编排。
核心模型：Trigger × Action
┌──────────────────────────────────┐
│ 交互编排系统 │
├──────────────────────────────────┤
│ 11 种触发（Trigger） │
│ × │
│ 18 种行为（Action） │
│ + │
│ 条件（Condition）+ 顺序 + 延时 │
└──────────────────────────────────┘
↓
任意组合，可视化配置11 种触发方式
| 分类 | 触发方式 | 典型场景 |
|---|---|---|
| 生命周期 | 画面加载 | 初始化数据、自动请求 |
| 鼠标交互 | 单击 / 双击 / 鼠标进入 / 鼠标离开 | 点击弹详情、悬停高亮 |
| 数据变化 | 值变化 / 值域进入 / 值域离开 | 越限告警、状态切换 |
| 周期 | 定时器 | 周期轮询、定时刷新 |
| 键盘 | 按键 | 快捷操作 |
| 其他 | 拖拽、右键 | 自定义操作 |
18 种行为类型
| 分类 | 行为 | 典型场景 |
|---|---|---|
| 画面导航 | 打开画面 / 关闭画面 / 返回 | 主子画面跳转 |
| 弹窗 | 弹窗 / 关闭弹窗 / 提示框 | 告警弹窗、确认框 |
| 属性控制 | 修改属性 / 显隐切换 / 状态切换 | 点击变色、隐藏面板 |
| 数据操作 | 数据请求 / 变量赋值 / 数据推送 | 主动刷新、本地变量更新 |
| 设备控制 | 下发控制指令 | 启停设备、参数下发 |
| 告警 | 播放告警音 / 上报告警 | 声光报警 |
| 高级 | 执行 JavaScript / 执行 window 函数 / 发送消息 | 自定义逻辑、宿主联动 |
| 跳转 | URL 跳转 | 跳转外部系统 |
条件系统
每个行为都可以附加条件：
- 关系运算：>、<、=、>=、<=、!=
- 代码条件：JavaScript 表达式（复杂逻辑）
- 滞环规则 ：
>80触发、<78解除（避免阈值抖动）
顺序 + 延时编排
多个行为可以组合：
触发：值变化（温度 > 90）
↓
行为1：变色（红色） ------ 立即
行为2：播放告警音 ------ 延时 0ms
行为3：弹窗（严重告警） ------ 延时 2000ms
行为4：上报告警记录 ------ 延时 0ms这就是"先闪烁 2 秒再弹窗"------可视化配置，不写一行代码。
实战场景：4 个真实交互案例
案例 1：温度超限三级告警
业务需求：
- 温度 > 80℃ → 变黄色提示
- 温度 > 90℃ → 变红色 + 告警灯闪烁
- 温度 > 95℃ → 弹窗 + 告警音 + 上报
传统开发：约 100 行 JS 代码 + 状态机
ricon 配置：
| 触发 | 条件 | 行为 |
|---|---|---|
| 值变化 | > 80（滞环 < 78） | 修改属性：变色黄 |
| 值变化 | > 90（滞环 < 88） | 修改属性：变红 + 状态切换（闪烁） |
| 值变化 | > 95 | 顺序：弹窗 → 延时 500ms → 播放告警音 → 上报告警 |
配置时间：5 分钟。
案例 2：设备远程控制（带回执）
业务需求：
- 点击"启动"按钮 → 二次确认 → 下发指令 → 等待回执 → 显示结果
ricon 配置：
触发：单击（启动按钮）
↓
行为1：弹窗（确认启动？） [类型：确认框]
↓ （用户点确认）
行为2：下发控制指令
- 指令：SET pump.01.status 1
- 通道：WebSocket
- 等待回执：是
- 超时：5s
↓
回执处理：
- 成功 → 提示"启动成功"
- 失败 → 提示"启动失败：" + msg
- 超时 → 提示"设备无响应"全程零代码。
案例 3：点击设备弹详情
业务需求：点击产线上任意一台电机，弹出该电机的实时参数面板。
ricon 配置：
触发：单击（电机图元）
↓
行为：弹窗
- 弹窗画面：设备详情子画面
- 参数：{ deviceId: ${this.dataId} }
- 尺寸：600×400
- 模态：非模态（可同时看主画面）子画面通过 deviceId 参数动态绑定数据。1 个弹窗模板，复用到 50 台设备。
案例 4：画面跳转（主子画面）
业务需求：从总览画面点击某条产线，进入该产线的子画面。
ricon 配置：
触发：单击（产线图元）
↓
行为：打开画面
- 目标 stageId：line-01-detail
- 打开方式：替换当前画面
- 传递参数：{ lineId: "01" }子画面顶部放一个"返回"按钮，配置"返回"行为即可。
高级玩法：JavaScript 增强
零代码是默认，代码是增强------当可视化配置不够用时，可以用 JavaScript：
触发：值变化
↓
行为：执行 JavaScript
↓
代码：
const temp = event.value;
const prediction = predictNextHour(temp); // 调用预测算法
$stage.push({ "temp.predict": prediction });
if (prediction > 100) {
$stage.emit("ai-warning", { level: "high" });
}适用场景：
- 复杂计算（如预测、统计）
- 调用外部库（如算法 SDK）
- 与宿主系统复杂联动
性能优化：事件总线 + 防抖
ricon 的交互系统经过工业场景验证：
- 事件总线：图元间通信用发布订阅，避免 prop drilling
- 滞环防抖：阈值附近反复变化不会触发无限告警
- 行为合并：同一行为连续触发自动合并，避免抖动
实测：500 个图元 + 200 个交互规则，画面依然流畅。
与传统开发的对比
| 维度 | 传统前端开发 | ricon 交互编排 |
|---|---|---|
| 开发周期 | 每个交互 0.5-2 天 | 5 分钟配置 |
| 维护成本 | 改需求要改代码 | 改需求改配置 |
| 学习成本 | 需要前端工程师 | 业务工程师就能配 |
| 测试成本 | 写测试用例 | 编辑器内即时验证 |
| 一致性 | 看个人水平 | 平台保证 |
配置即文档
ricon 的交互配置自带文档属性 ------客户、实施、开发三方看同一份可视化配置，沟通成本指数级下降。
不再有"我以为你说的是......"的扯皮。
结语
交互是工业可视化的灵魂，但不该是开发的负担。
ricon 的 11 × 18 交互编排系统，把"写代码"变成"配规则"，让业务工程师也能做出专业的工业交互。
快速体验
- 🌐 官网地址：https://www.ricon.cloud/
- 🚀 在线演示：https://www.ricon.cloud/editor/