霍英，賴煜，張培炎

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

關(guān)鍵詞：城市照明;微信小程序;U-charts圖表;數(shù)據(jù)實(shí)時(shí)推送

中圖分類號(hào)：TP311? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）21-0078-03

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1引言

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

2? 系統(tǒng)功能結(jié)構(gòu)設(shè)計(jì)

2.1服務(wù)端系統(tǒng)功能

如圖1所示服務(wù)端具備如下功能：

1） 微信小程序通過OneNet平臺(tái)建立數(shù)據(jù)傳輸以及終端設(shè)備管理請(qǐng)求，實(shí)現(xiàn)網(wǎng)絡(luò)連接，并且OneNet平臺(tái)提供HTTP數(shù)據(jù)推送功能，可以主動(dòng)將終端設(shè)備相關(guān)數(shù)據(jù)與消息以多種方式實(shí)時(shí)發(fā)送給Nginx數(shù)據(jù)庫，對(duì)數(shù)據(jù)進(jìn)行更新。

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

2.2小程序端主要功能介紹

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

1） 實(shí)況顯示模塊：結(jié)合騰訊地圖實(shí)時(shí)顯示路燈的狀態(tài)信息，并且可以進(jìn)行單個(gè)或批量的路燈信息添加或者刪除，還可對(duì)區(qū)域信息進(jìn)行添加、修改和刪除。

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

3） 維修管理模塊：實(shí)時(shí)地顯示了維修信息，能夠精準(zhǔn)地定位到路燈的區(qū)域信息，及時(shí)反映故障路燈的維修要求、設(shè)備編號(hào)以及地理位置。

4） 路燈控制模塊：可以進(jìn)行模式與區(qū)域的選擇，模式分為自適應(yīng)模式、節(jié)能模式和正常模式。

3系統(tǒng)實(shí)現(xiàn)的關(guān)鍵技術(shù)

3.1騰訊地圖API

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

3.2路燈狀態(tài)數(shù)據(jù)可視化展示

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

本小程序?qū)崿F(xiàn)u-charts圖標(biāo)數(shù)據(jù)可視化渲染主要分為以下三個(gè)步驟：

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

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

3） 在數(shù)據(jù)可視化頁面中進(jìn)行調(diào)用MainCharts組件，根據(jù)需求靈活配置參數(shù)即可實(shí)現(xiàn)數(shù)據(jù)圖表繪制。

本系統(tǒng)引用的u-charts可視化渲染插件庫對(duì)于微信小程序有良好的支持性，其配置靈活、可擴(kuò)展性強(qiáng)、插件體積小、性能優(yōu)良，且圖標(biāo)樣式支持用戶自定義，可動(dòng)態(tài)傳入數(shù)據(jù)參數(shù)，滿足本系統(tǒng)繪制數(shù)據(jù)可視化圖表的需求。

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