告警信息是串口屏常用的功能,之前我们介绍了告警信息的基本用法,实现了告警信息的显示和管理。本文介绍一下实现查询告警信息和查看告警信息详情的方法。
1. 功能
之前我们介绍了告警信息的基本用法,实现了告警信息的显示和管理。本文介绍告警信息的两种高级用法:
查询告警信息。如果告警信息比较多,我们需要通过查询,来快速找到我们想要的告警信息。
查看告警信息的详情。如果某条告警信息比较长,而且窗口比较小,我们需要通过查看详情,来查看完整的告警信息。
虽然说是高级用法,其实也很简单,并不需要编写代码,设计界面并添加绑定规则即可。
2. 创建项目
从模板创建项目,将 hmi/template_app 拷贝 hmi/log_message 即可。
第一个项目最好不要放到其它目录,因为放到其它目录需要修改配置文件中的路径,等熟悉之后再考虑放到其它目录。路径中也不要中文和空格,避免不必要的麻烦。
3. 制作界面
用 AWStudio 打开上面 log_message 目录下的 project.json 文件。里面有一个空的窗口,在上面设计类似下面的界面:
- 主窗口
- 详情窗口
4. 添加绑定规则
告警信息的显示和管理在前文已经介绍过了,这里只介绍查询和查看详情的绑定规则。
4.1 查询的数据绑定
4.1.1 告警级别
绑定属性 | 绑定规则 | 说明 |
v-data:value | {query.level} | 无 |
4.1.2 告警开始日期
绑定属性 | 绑定规则 | 说明 |
v-data:value | {query.start_date} | 无 |
4.1.3 告警结束日期
绑定属性 | 绑定规则 | 说明 |
v-data:value | {query.end_date} | 无 |
4.1.4告警设备
绑定属性 | 绑定规则 | 说明 |
v-data:value | {query.device} | 无 |
4.1.5关键字
绑定属性 | 绑定规则 | 说明 |
v-data:value | {query.keywords} | 无 |
4.1.6查询命令
绑定属性 | 绑定规则 | 说明 |
v-on:click | {query,Args=clear} | 参数clear表示清除查询 |
4.1.7查询命令
绑定属性 | 绑定规则 | 说明 |
v-on:click | {query} | 无 |
4.1.8 指定窗口的模型
指定窗口的模型为log_message
4.2 查看详情的数据绑定
4.2.1 告警级别
绑定属性 | 绑定规则 | 说明 |
v-data:value | {one_of(‘调试;信息;警告;错误’, level)} | 无 |
4.2.2 告警日期时间
绑定属性 | 绑定规则 | 说明 |
v-data:value | {date_time_format(time, ‘Y-M-D hs’)} | 无 |
4.2.3告警设备
绑定属性 | 绑定规则 | 说明 |
v-data:value | {device} | 无 |
4.2.4关键字
绑定属性 | 绑定规则 | 说明 |
v-data:value | {message} | 无 |
4.2.5 指定窗口的模型
- 指定窗口的模型为log_message
查看详情的窗口的名称 (xml 文件与窗口名同名)是固定,必须为log_message_detail
5. 启用告警信息
修改 design/default/data/settings.json 文件,启用告警信息:
{ "name": "hmi_log_message3", "log_message": { "enable": true, /*是否启用告警信息*/ "fields": [ "level" /*告警级别*/, "time" /*日期时间*/, "device" /*设备*/, "message" /*信息*/ ], "fields_seperator": "|", /*字段之间的分隔符*/ "max_rows": 1000 /*告警信息最大行数*/ }}
6. 编译运行
运行 bin 目录下的 demo 程序。
7. 注意
本项目并没有编写界面相关的代码,AWStudio 在 src/pages 目录下生成了一些代码框架,这些代码并没有用到,可以删除也可以不用管它,但是不能加入编译。
实际使用时,在 demo_log_message3 基础上进行调整即可,无需重复上面的过程,但是最好了解其中的原理。
-
开源
+关注
关注
3文章
3075浏览量
41844 -
串口屏
+关注
关注
8文章
501浏览量
36766
发布评论请先 登录
相关推荐
评论