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

1. 功能

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

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

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

1. 界面通過綁定規(guī)則將 log_message 模型中的數(shù)據(jù)關(guān)聯(lián)到控件上。

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

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

下面演示一下具體的實現(xiàn)方法。

2. 創(chuàng)建項目

從模板創(chuàng)建項目，將 hmi/template_app 拷貝 hmi/log_message 即可。

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

3. 制作界面

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

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

4. 添加綁定規(guī)則

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

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

4.0.1 幾個特殊的變量

index 特指序數(shù)。

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

selected_index 表示當(dāng)前選中的序數(shù)（可在列表視圖之外綁定）。

items 表示當(dāng)前列表視圖中的數(shù)據(jù)個數(shù)（可在列表視圖之外綁定）。

4.0.2 幾個特殊的命令

set_selected 設(shè)置當(dāng)前選中的序數(shù)（在列表項中使用）。

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

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

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

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

4.1序數(shù)

4.2告警級別

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

4.3 時間

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

4.4 設(shè)備

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

4.5告警信息

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

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

4.7刪除當(dāng)前選擇的告警信息

4.8清除所有告警信息

4.9 保存告警信息

4.10重新加載告警信息

4.11退出應(yīng)用程序

4.12指定窗口的模型

指定窗口的模型為 log_message。

5. 添加告警信息

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

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

6. 編譯運行

運行 bin 目錄下的 demo 程序。

7. 使用 MCU 模擬器與之進(jìn)行交互

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

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

測試數(shù)據(jù)：

3|2030-11-23:15:55:01|大門|長時間關(guān)閉

8. 注意

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

實際使用時，在 demo_app4/design/default/ui/home_page.xml 基礎(chǔ)上進(jìn)行調(diào)整即可，無需重復(fù)上面的過程，但是最好了解其中的原理。