摘  要: 生态环境是人类生存的物质基础，也是经济系统运行的基础，生态环境问题是由于人类长期的生产和生活等社会经济行为所引起的生态环境破坏而反作用于人类社会经济生活的不良影响，其实质是经济发展与环境保护、人与自然关系的失调。目前，环境问题已成为全球社会性的问题。如何解决好这一问题，关系到人类社会的生存。因此，采取有效的治理措施，对促进社会经济持续、健康发展具有十分重要的意义。所以，本网站的作用就是致力于监控生态环境并处理污染，主要针对空气、水质、土质和污染四个方面，并根据这四个方面来改善周围环境。本文主要阐述的是利用React+antd框架来搭建一个环境监测管理网站，包括网页制作，数据联调和功能说明等。
关键词：React；antd；管理网站； B/S结构；环境；
目录
引言 4
1.系统概述 5
1.1 系统开发方法 5
1.2 系统开发技术 5
2.系统调研及可行性分析 8
2.1系统调研 8
2.2系统总体目标 9
2.3可行性分析 10
2.3.1项目基本要求 10
2.3.2系统总体目标 10
3.系统分析 11
3.1系统需求分析 11
3.1.1功能需求 11
3.1.2非功能性需求 11
4.系统设计 12
4.1概要设计 12
4.1.1网站结构设计 12
4.1.2功能模块图 13
4.2数据设计 13
5.系统的实现 14
5.1React基础配置 14
5.2页面头部组件设计与实现 17
5.3页面导航条组件设计与实现 18
5.4分析页面组件设计与实现 22
5.5监控页面组件设计与实现 25
5.6工作台页面组件设计与实现 28
5.7项目列表和项目详情页面组件设计与实现 30
5.8人员信息页面组件设计与实现 33
5.9新建项目页面组件设计与实现 33
5.10财务管理页面组件设计与实现 37
5.11排行榜页面组件设计与实现 38
6.系统测试 40
6.1系统测试的重要性和目的 40
6.2测试方法 40
6.3系统模块测试 41
结论 42
参考文献及网站 43
附录：程序源代码获取及使用方式 44