项目描述: 该项目是基于 React 开发的路口车辆检测平台,将摄像头流接入算法层进行检测分析,对异常事件进行整合消费。主要的模块有数据运营,路口管理,区域管理,报表中心。
项目技术: react,react-router,react-konva,antd,mobx
项目成绩:
1.项目在开发过程中需要封装一个canvas组件,用于绘制俯视道路图,并能通过传参的方式对道路图进行修改。通过调研选择react-konva这个库,先限定画布的大小,然后通过计算得出每条道路的位置及长度,以group为单位绘制。通过旋转进而组合多个路口。整个组件分为若干个独立模块,限定props格式,易于使用和修改。
2.页面方面,将同一板块的多个相似页面进行组件抽离,通过传入的type决定渲染内容,这样做一是减少了重复代码,二是在后期版本更新迭代时,也能迅速找到修改位置,提高了代码的可为维护性。
3.数据运营模块涉及多个数据可视化,我采用了echarts-react,以多个模块的方式封装成一整个可视化组件。并通过websocket获取实时数据,更新组件数据。
4.canvas组件导出道路俯视图后,在中心测大屏