告警信息是一個常用的功能。在 AWTK 開源串口屏中，內置告警信息模型，只需設計用戶界面即可實現告警信息的顯示和管理。

1. 功能

告警信息是一個常用的功能，MCU 在設備異常時，會發送告警信息到串口屏，串口屏可以顯示告警信息，也可以對告警信息進行管理（保存或清除）。基本工作原理：

MCU 端設置屬性名為 log_message，數據類型為字符串，數據格式為"告警級別|時間|設備|告警信息"數據。

串口屏收到數據后，會把告警信息放到一個名為** log_message **的模型（數據）中。

1. 界面通過綁定規則將 log_message 模型中的數據關聯到控件上。

告警級別可以是：調試(0);信息(1);警告(2);錯誤(3)。

告警信息中如果出現“|”字符，則整個告警信息需用用英文雙引號引起來。

下面演示一下具體的實現方法。

2. 創建項目

從模板創建項目，將 hmi/template_app 拷貝 hmi/log_message 即可。

第一個項目最好不要放到其它目錄，因為放到其它目錄需要修改配置文件中的路徑，等熟悉之后再考慮放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。

3. 制作界面

用 AWStudio 打開上面 log_message 目錄下的 project.json 文件。里面有一個空的窗口，在上面設計類似下面的界面：

中間是一個列表視圖，列表視圖中放一個列表項，列表項中放 5 個文本控件，分別用來顯示序數、告警級別、時間、設備、告警信息。

4. 添加綁定規則

第一次用到列表視圖，有幾點需要特別說明一下：

列表視圖中的滾動視圖需要指定v-for-items屬性:

4.0.1 幾個特殊的變量

index 特指序數。

item 特指當前的數據。[0]表示第一個數據，[1]表示第二個數據，以此類推。比如在這里 item.[0]表示告警級別，item.[1]表示時間，item.[2]表示設備，item.[3]表示告警信息。

selected_index 表示當前選中的序數（可在列表視圖之外綁定）。

items 表示當前列表視圖中的數據個數（可在列表視圖之外綁定）。

4.0.2 幾個特殊的命令

set_selected 設置當前選中的序數（在列表項中使用）。

save 保存數據到文件（在列表視圖之外的按鈕上綁定）。

reload 重新加載數據（在列表視圖之外的按鈕上綁定）。

clear 清除所有數據（在列表視圖之外的按鈕上綁定）。

remove 刪除指定序數的數據（在列表視圖之外的按鈕上綁定）。

4.1序數

4.2告警級別

前面提到告警級別是正數，可以通過 item.[0]來獲取它。它的意義對應為：debug(0)、info(1)、warning(2)、error(3)，我們需要用 one_of 函數將它轉換為對應的字符串。

4.3 時間

時間是一個字符串，可以通過 item.[1]來獲取。

4.4 設備

設備是一個字符串，可以通過 item.[2] 來獲取。

4.5告警信息

告警信息是一個字符串，可以通過 item.[3]來獲取。

4.6 列表項為了配合刪除選中的告警信息，需要在列表項加兩個綁定規則。

4.7刪除當前選擇的告警信息

4.8清除所有告警信息

4.9 保存告警信息

4.10重新加載告警信息

4.11退出應用程序

4.12指定窗口的模型

指定窗口的模型為 log_message。

5. 添加告警信息

修改 design/default/data/settings.json 文件，啟用告警信息：

{ "name": "hmi_log_message1", "log_message": { "enable": true, /*是否啟用告警信息*/ "fields": [ "level" /*告警級別*/, "time" /*日期時間*/, "device" /*設備*/, "message" /*信息*/ ], "fields_seperator": "|", /*字段之間的分隔符*/ "max_rows": 1000 /*告警信息最大行數*/ }}

6. 編譯運行

運行 bin 目錄下的 demo 程序。

7. 使用 MCU 模擬器與之進行交互

運行 mcu/simulator 目錄下的 mcu_sim 程序，連接到 Localhost:2233。

• 通過模擬器發送數據，可以看到串口屏界面，自動添加告警信息。

測試數據：

3|2030-11-23:15:55:01|大門|長時間關閉

8. 注意

• 本項目并沒有編寫界面相關的代碼，AWStudio 在 src/pages 目錄下生成了一些代碼框架，這些代碼并沒有用到，可以刪除也可以不用管它，但是不能加入編譯。

實際使用時，在 demo_app4/design/default/ui/home_page.xml 基礎上進行調整即可，無需重復上面的過程，但是最好了解其中的原理。