主题
5.2 事件交互配置
5.2.1 显示事件(数据驱动)
显示事件根据数据点值的变化,自动改变组件的显示状态。
配置入口:选中组件 → 右侧面板「显示事件」→ 点击「添加事件」
事件类型一览:
| 事件类型 | 作用 | 典型应用 |
|---|---|---|
| 显示值 | 将数据点值显示在文本中 | 温度显示:25.6°C |
| 文本值切换 | 根据值切换显示的文本内容 | 0→停止,1→运行 |
| 显示时间 | 显示当前系统时间 | 实时时钟 |
| 可见切换 | 根据数据点值切换组件可见/隐藏 | 报警时显示提示框 |
| 可见度 | 根据数值范围设置组件可见性 | 值在 0~100 范围内可见 |
| 透明度 | 根据数值范围调整组件透明度 | 越接近上限越透明 |
| 动画 | 数值进入范围时触发动画 | 超限时闪烁报警 |
| 背景色 | 数值范围切换背景颜色 | 正常绿色、异常红色 |
| 图片切换 | 根据值切换背景图片 | 0→停机图,1→运行图 |
| 文本颜色切换 | 根据值切换文字颜色 | 高温红色、低温蓝色 |
互斥规则:
- 「显示值」「文本值切换」「显示时间」三者互斥
- 「可见切换」「可见度」「透明度」三者互斥
- 「图片切换」「文本颜色切换」「背景色」各自只能有一个
5.2.2 点击事件(用户交互)
点击事件响应用户的鼠标操作,执行预设动作。
触发模式:
| 模式 | 说明 |
|---|---|
| 点击 | 鼠标单击时触发 |
| 按下 | 鼠标按下时触发 |
| 松开 | 鼠标松开时触发 |
事件类型一览:
| 事件类型 | 作用 | 典型应用 |
|---|---|---|
| 设定数据 | 向指定数据点写入值 | 点击按钮将 Y0 设为 1 |
| 跳转画面 | 切换到当前组态的另一个画面 | 画面导航 |
| 转到组态 | 跳转到另一个组态工程 | 产线切换 |
| 全屏切换 | 进入或退出浏览器全屏模式 | 大屏展示 |
| 执行脚本 | 执行自定义 JavaScript 代码 | 复杂逻辑处理 |
互斥规则:
- 「跳转画面」与「转到组态」互斥
- 「执行脚本」只能配置一个
- 「全屏切换」只能配置一个
5.2.3 脚本程序
脚本类型:
| 类型 | 触发时机 | 用途 |
|---|---|---|
| 启动脚本 | 组态画面加载时执行一次 | 初始化变量 |
| 循环脚本 | 按设定时间间隔循环执行 | 定时刷新 |
常用内置函数:
| 函数 | 说明 | 示例 |
|---|---|---|
| get(name) | 读取数据点当前值 | get('温度1') |
| set(name, value) | 向数据点写入值 | set('01M', 1) |
| log(msg, type) | 页面内消息提示,type 可为 success / warning / error | log('温度过高!', 'warning') |
| webPush(title, body) | 操作系统级推送通知 | webPush('温度报警', '当前温度: ' + get('温度1')) |
| set_to_bus(name, value) | 仅写入本地数据总线,不下发设备 | set_to_bus('临时变量', 100) |
| cloud_compute(data, func) | 提交云端计算并回调结果 | cloud_compute(data, function(res){ log(res) }) |
| post_aes(data) | 加密方式请求服务器接口 | post_aes(data).then(...) |
| ElMessage(options) | Element Plus 原生消息组件 | ElMessage({ message: 'OK' }) |
注意:脚本运行在受限沙箱中(使用
new Function而非eval),只有上表列出的函数可用。alert()、getTag()、setTag()等均不存在。