基于微信小程序的智慧路燈管控平臺設計與實現

霍英，賴煜，張培炎

摘要：為了實現城市照明系統精細化，智慧城市設施智能化的目的，設計基于微信小程序的智慧路燈管控平臺slampx。微信小程序可以實時顯示路燈狀態，并且在小程序界面當中可以對路燈進行管理與控制，無須安裝App就能解決傳統照明系統能源消耗大、運維費用昂貴、遠程控制不靈活等問題;微信小程序通過OneNet平臺實時接收路燈狀態數據，并將路燈數據渲染到騰訊地圖與u-charts數據分析圖上，用戶便可根據分析內容與路燈狀態進行管控。

關鍵詞：城市照明;微信小程序;U-charts圖表;數據實時推送

中圖分類號：TP311? ? ?文獻標識碼：A

文章編號：1009-3044（2021）21-0078-03

開放科學（資源服務）標識碼（OSID）：

1引言

城市照明系統是智慧城市的重要組成部分，對于減少資源消耗、促進智慧城市設施智能化、提高人們生活水平發揮著重要的作用。但是隨著城市路燈的不斷投入使用，加大了能源消耗與維修費用，同時對照明系統提出了更高的要求。而微信小程序是一種用戶不需要下載安裝即可使用的應用，實現了應用“觸手可及”的理念。系統中的微信小程序方便用戶遠程管理并控制路燈，提供了數據查看、維修管理和遠程控制功能，使用戶可以隨時隨地查看路燈數據狀態并對其進行有效管控。小程序使用戶隨用隨停，實時能夠對路燈進行管理，無須按App，降低城市照明管理成本、實現城市照明系統精細化。

2? 系統功能結構設計

2.1服務端系統功能

如圖1所示服務端具備如下功能：

1） 微信小程序通過OneNet平臺建立數據傳輸以及終端設備管理請求，實現網絡連接，并且OneNet平臺提供HTTP數據推送功能，可以主動將終端設備相關數據與消息以多種方式實時發送給Nginx數據庫，對數據進行更新。

2） 利用Nginx作為反向代理服務器，將用戶的大量指令與請求分配至多臺服務器處理，為后臺提供負載平衡與緩沖服務;并且緩存從OneNet平臺接收的路燈數據由GateWayWorker建立TCP長連接推送至微信小程序平臺實時展示。

2.2小程序端主要功能介紹

如圖2所示小程序端具有如下功能：

1） 實況顯示模塊：結合騰訊地圖實時顯示路燈的狀態信息，并且可以進行單個或批量的路燈信息添加或者刪除，還可對區域信息進行添加、修改和刪除。

2） 數據統計模塊：能夠直觀地表示路燈的亮燈率、月用電量、故障統計等參數信息，并且利用折線圖觀察其變化情況。

3） 維修管理模塊：實時地顯示了維修信息，能夠精準地定位到路燈的區域信息，及時反映故障路燈的維修要求、設備編號以及地理位置。

4） 路燈控制模塊：可以進行模式與區域的選擇，模式分為自適應模式、節能模式和正常模式。

3系統實現的關鍵技術

3.1騰訊地圖API

利用騰訊地圖查看管控區域路燈的實時數據，每盞路燈運行的狀態。騰訊位置服務為微信小程序提供了基礎的標點記位能力，線和圓圖界面繪制接口等地圖組件和位置顯示、地點選擇等地圖API位置服務能力支持。服務端系統根據配置的接口HTTP推送服務，把路燈地理位置實時更新至數據庫反饋給小程序端系統，小程序端系統調用騰訊地圖開發平臺進行逆地址解析，能把坐標到坐標所在的位置進行文字描述轉換，確保經緯度的準確性。路燈狀態顯示通過WebService API的IP定位技術，獲取路燈當前所在地理位置并且分析路燈參數信息實現路燈運行狀態顯示為正常（綠色）、關閉（黃色）、故障（紅色）三種，點擊單個路燈可以進行調控且可以查看各種參數信息與歷史統計信息，形成地圖信息區域化，有效提高路燈管理效率。

3.2路燈狀態數據可視化展示

智慧路燈管控平臺小程序主要運用u-charts圖表技術實現對路燈數據可視化展示，制作了電流、電壓、功率表等路燈數據統計折線圖，用來展示出不同時間段的路燈狀態波動情況，讓用戶更加直觀、清晰地獲取小程序平臺所監控路燈的實時參數數據，有利于用戶掌握實時路燈動態信息，為智慧管控提供可靠、形象的數據支持。

本小程序實現u-charts圖標數據可視化渲染主要分為以下三個步驟：

1） 在微信小程序目錄中引入下載的u-charts組件代碼庫。

2） 在微信小程序目錄中創建Components組件，結合u-charts庫將其封裝成MainCharts小程序組件。

3） 在數據可視化頁面中進行調用MainCharts組件，根據需求靈活配置參數即可實現數據圖表繪制。

本系統引用的u-charts可視化渲染插件庫對于微信小程序有良好的支持性，其配置靈活、可擴展性強、插件體積小、性能優良，且圖標樣式支持用戶自定義，可動態傳入數據參數，滿足本系統繪制數據可視化圖表的需求。

假設在多個小程序頁面都引入u-charts插件庫來編寫數據展示功能，無疑會造成增加代碼量、損耗小程序運行性能、代碼可維護性差的問題。所以在數據可視化圖表的代碼編寫原則上主要還是遵循組件模塊化開發，目的是增強小程序代碼的易擴展性、滿足高內聚低耦合性。在微信小程序的Componets自定義目錄下創建了命名為MainCharts的組件，該組件由wxml、wxss、js與json文件組成。首先在小程序邏輯層js文件中將u-charts插件庫進行引入，在組件中使用小程序提供的created函數，在組件創建時獲取用戶手機設備的屏幕寬高，用變量保存并在圖表構建時傳入，實現圖表寬高自適應。在小程序提供的methods方法函數中編寫調用插件的方法ShowCharts，該方法提供兩個傳遞參數，分別是圖表的ID名與路燈狀態數據，然后在函數中構造u-Charts的實例化對象，在實例化json對象中，編寫u-charts插件提供的Api參數可配置項，其中包括通用基礎配置項、數據列表配置、坐標軸配置項等，例如圖表類型type，圖表渲染數據series.data，圖表x、y軸xAxis、yAxis等一系列可選選項，到此，邏輯層基本編寫完畢。在視圖層的wxml文件中使用canvas畫布標簽進行嵌入渲染，在標簽中傳遞canvas-id屬性，標記唯一的圖表id，并且在wxss文件中編寫相關的圖表樣式。