课题研究|门店客流分析WEB系统的设计和实现（3）

3、总体设计

3.1架构设计

本课题所属项目为团队项目，由WEB端，微信小程序端和后端一共三部分组成。其中本课题负责的是WEB端的设计和实现，即总体架构图（图3.2）中的标注部分。

图3.1 总体架构图

WEB端功能可以分为3大块，分别是用户，分析和管理模块。

用户模块由用户登录和角色管理组成。系统管理员可以通过角色管理功能管理门店管理员的权限。

分析模块是本课题最重要的组成部分，由客流热点分析，客流趋势分析，客流属性分析三部分组成。

管理模块由门店，顾客，设备信息管理组成。

图3.2 WEB系统功能图

​3.2主要技术选择

（1）前端框架

本课题的目标是一个具有多种功能的WEB系统，并提供一定的后续扩展空间。目前主流前端框架主要有vue和react。vue特点：易用灵活，性能高，渲染速度快，体积小，语法简单易入门，适合开发周期短的小型应用[5]。react特点：状态机可轻松创建交互界面，基于组件，跨平台性，更大的规模、更好的可测试性，适合开发周期长的大型项目[6]。结合本课题的开发周期较小和图表快速渲染的特点，选择vue作为前端框架。此外对于重复使用的部分可以实现为组件（比如菜单，页面顶部，底部等），降低系统耦合度，易于功能的调整和拓展。

（2）可视化图表

客流趋势及属性分析需要直观，可交互的可视化图表，采用Javascript 的图表库——ECharts作为可视化图表组件进行图表绘制。ECharts可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），可以提供直观，生动，可交互，可高度个性化定制的数据可视化图表。客流趋势选用折线图表示客流趋势变化，客流属性分析则选用饼图表示顾客的属性分布比例。

（3）地图组件

客流热点分析需要在WEB地图上展示客流热点的地域特征。现在主流的地图组件有百度地图API，高德地图（AMAP）API和leaflet等。这里选择百度地图API作为地图组件。百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，能够在网站中构建功能丰富、交互性强的地图应用程序。适用于PC或移动设备端的基于浏览器的开发。JS版本还为用户开放了开源库，简化开发。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如提供了诸如热力图，点标记等接口。由此可以实现门店标记和客流热力图的绘制，直观看到区域热点的分布。

参考文献

[1] 张开生,刘泽新,郭碧筱,杨帆.基于CNN公交客流检测系统的设计[J].石河子大学学报(自然科学版),2019,37(05):654-660.

[2] 马黎.大型商业综合体智能客流分析系统与各个智能化子系统的集成应用[J].自动化应用,2019(08):117-118+130.

[3] 周慧娟,张强,刘羽,王旭阳,柳颖.基于YOLO2的地铁进站客流人脸检测方法[J].计算机与现代化,2019(10):76-82.

[4] Shuang Liu, Wenxia Liu, Chenfei Qu, and Chao Long. 2019. Short-term Passenger Flow Forecast of Public Buildings Based on Time Series Analysis. In Proceedings of the 3rd International Conference on Computer Science and Application Engineering (CSAE 2019). Association for Computing Machinery, New York, NY, USA, Article 142, 1–5. DOI:https://doi.org/10.1145/3331453.3361635

[5] 朱二华.基于Vue.js的Web前端应用研究[J].科技与创新,2017(20):119-121.

[6] Thomas Rathfux, Jasmin Thöner, Hermann Kaindl, and Roman Popp. 2018. Combining Design-time Generation of Web-pages with Responsive Design for Improving Low-vision Accessibility. In Proceedings of the ACM SIGCHI Symposium on Engineering Interactive Computing Systems (EICS ’18). Association for Computing Machinery, New York, NY, USA, Article 10, 1–7. DOI:https://doi.org/10.1145/3220134.3220141

[7] Zhikun Wang, Changxiu Hu, Jinglei Lin, Zhiyuan Cui, Meng Huang, and Shuai Liu. 2018. Development of a Performance Evaluation System Based on Baidu Map Fixed-point Observation Data. In Proceedings of the 2nd International Conference on Computer Science and Application Engineering (CSAE ’18). Association for Computing Machinery, New York, NY, USA, Article 157, 1–5. DOI:https://doi.org/10.1145/3207677.3278083

[8] 卢健,张倩,左世祥,张晓峰,曾克勤,陈建华.Web地图热力图原理及应用[J].科技创新与应用,2019(35):174-176.

[9] 赵婷,华一新,李响,李翔,杨飞.一种基于Heat Map的地理标签数据可视化表达的研究[J].测绘工程,2016,25(06):28-32.