林中華 林喆

如何提高實驗室的使用率，一直是實驗室管理者需要思考的問題，當(dāng)我們在實驗室里安裝了帶有智能人臉識別的攝像頭后，這個問題有了解決的方案。本文通過攝像頭采集的數(shù)據(jù)，將實時的人流發(fā)送到服務(wù)端，由服務(wù)端整理再展示到實驗室人流量統(tǒng)計系統(tǒng)中，展示的方法是各種圖標(biāo)，讓我們可以從各個維度去觀察數(shù)據(jù)，為管理者的決策提供關(guān)鍵的數(shù)據(jù)依據(jù)。

開發(fā)軟件

本系統(tǒng)基于網(wǎng)頁BS結(jié)構(gòu)開發(fā)，用戶可以不在本地安裝軟件，只需打開瀏覽器輸入網(wǎng)址，整個系統(tǒng)就會展示出來，這是目前比較流行的模式，像這樣的模式最常見的是微信小程序，用完就關(guān)閉，完全不需要安裝任何的軟件，極大減輕了系統(tǒng)的負(fù)擔(dān)。

本系統(tǒng)中，頁面會向客戶展示各個實驗室的使用情況、時間維度，可以分開上課使用、下課使用，還可以展示整個時間段的使用情況。

1. ECharts

ECharts是一個基于JavaScript語言實現(xiàn)的開源可視化庫，可以流暢地運行在PC和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（如IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫ZRender提供直觀、交互豐富且可高度個性化定制的數(shù)據(jù)可視化圖表。

本系統(tǒng)中，主要使用ECharts的制圖功能將攝像頭獲取到的數(shù)據(jù)制作成可視化視圖。

2. Vue

Vue的出現(xiàn)讓大部分前端工程師歡呼雀躍，這是之前經(jīng)歷各種繁瑣才能親身體會到的。Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他大型框架不同的是，Vue被設(shè)計為可以自底向上逐層應(yīng)用，Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。它可以使之前幾十行的代碼變成一行或者一句，因為Vue的設(shè)計者已經(jīng)在后臺為開發(fā)者完成了其他的工作，開發(fā)者只需要專心實現(xiàn)頁面邏輯即可。

各組件介紹

1.當(dāng)前數(shù)據(jù)模塊

系統(tǒng)由當(dāng)前數(shù)據(jù)模塊、歷史數(shù)據(jù)模塊和設(shè)置模塊組成。

在當(dāng)前數(shù)據(jù)模塊中，系統(tǒng)調(diào)用了ECharts的pie型圖表，它可以顯示給定數(shù)據(jù)的比例構(gòu)成，在Vue的生命周期函數(shù)mounted中調(diào)用圖表生成函數(shù)pie（），函數(shù)首先會發(fā)送請求到后端服務(wù)器，獲取當(dāng)前攝像頭獲取到的數(shù)據(jù)。數(shù)據(jù)獲取到后，使用let myChart = echarts.init（）初始化，myChart.setOption（）進(jìn)行圖表創(chuàng)建。

實驗室使用比例圖表中展示了實驗室上課、自習(xí)及空置的比例，實驗室實時人流中顯示了各個教學(xué)區(qū)的人流分布?？梢钥吹轿鍏^(qū)教室在整個時段的人流始終是大于其他區(qū)域，這就給管理者提供了直觀的數(shù)據(jù)參考。

2.設(shè)置模塊

在設(shè)置模塊中，分為2個子模塊，錄入和高級設(shè)置，主要使用CSS實現(xiàn)，用戶可以修改后端服務(wù)器地址，增加管理員和權(quán)限。

本文實現(xiàn)了一個實驗室人流量統(tǒng)計界面開發(fā)，采用了更高效率的Vue和ECharts，開發(fā)效率大幅提高。系統(tǒng)界面為使用者的操作提供很強(qiáng)指導(dǎo)性，數(shù)據(jù)展示很直觀，內(nèi)容上覆蓋了當(dāng)前和歷史數(shù)據(jù)，每部操作都可以讓使用者清晰地知道操作結(jié)果，有利于做出更好的操作。