林中华 林喆

如何提高实验室的使用率，一直是实验室管理者需要思考的问题，当我们在实验室里安装了带有智能人脸识别的摄像头后，这个问题有了解决的方案。本文通过摄像头采集的数据，将实时的人流发送到服务端，由服务端整理再展示到实验室人流量统计系统中，展示的方法是各种图标，让我们可以从各个维度去观察数据，为管理者的决策提供关键的数据依据。

开发软件

本系统基于网页BS结构开发，用户可以不在本地安装软件，只需打开浏览器输入网址，整个系统就会展示出来，这是目前比较流行的模式，像这样的模式最常见的是微信小程序，用完就关闭，完全不需要安装任何的软件，极大减轻了系统的负担。

本系统中，页面会向客户展示各个实验室的使用情况、时间维度，可以分开上课使用、下课使用，还可以展示整个时间段的使用情况。

1. ECharts

ECharts是一个基于JavaScript语言实现的开源可视化库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器（如IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender提供直观、交互丰富且可高度个性化定制的数据可视化图表。

本系统中，主要使用ECharts的制图功能将摄像头获取到的数据制作成可视化视图。

2. Vue

Vue的出现让大部分前端工程师欢呼雀跃，这是之前经历各种繁琐才能亲身体会到的。Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用，Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。它可以使之前几十行的代码变成一行或者一句，因为Vue的設计者已经在后台为开发者完成了其他的工作，开发者只需要专心实现页面逻辑即可。

各组件介绍

1.当前数据模块

系统由当前数据模块、历史数据模块和设置模块组成。

在当前数据模块中，系统调用了ECharts的pie型图表，它可以显示给定数据的比例构成，在Vue的生命周期函数mounted中调用图表生成函数pie（），函数首先会发送请求到后端服务器，获取当前摄像头获取到的数据。数据获取到后，使用let myChart = echarts.init（）初始化，myChart.setOption（）进行图表创建。

实验室使用比例图表中展示了实验室上课、自习及空置的比例，实验室实时人流中显示了各个教学区的人流分布。可以看到五区教室在整个时段的人流始终是大于其他区域，这就给管理者提供了直观的数据参考。

2.设置模块

在设置模块中，分为2个子模块，录入和高级设置，主要使用CSS实现，用户可以修改后端服务器地址，增加管理员和权限。

本文实现了一个实验室人流量统计界面开发，采用了更高效率的Vue和ECharts，开发效率大幅提高。系统界面为使用者的操作提供很强指导性，数据展示很直观，内容上覆盖了当前和历史数据，每部操作都可以让使用者清晰地知道操作结果，有利于做出更好的操作。