【產品應用】AWTK開源串口屏開發(10)-告警信息的高級用法

原創 ZLG致遠電子 2024-02-23 11:40

別讓AI算力卡脖子！dsPIC33AK性能暴增指南 汽車電子架構重構與智能連接革命

告警信息是串口屏常用的功能，之前我們介紹了告警信息的基本用法，實現了告警信息的顯示和管理。本文介紹一下實現查詢告警信息和查看告警信息詳情的方法。

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 h:m:s’)}	無

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 /*告警信息最大行數*/ ? ?}}