随着我国用电量的不断增大,高压电缆被广泛使用,对其进行有效监测就显得尤为重要。在众多高压电缆在线监测技术中接地环流监测法使用较为广泛。国内外接地环流在线监测系统的架构平台有CS架构和BS架构两种,其中CS架构需安装指定的客户端软件且不易更新,而BS架构结合GIS（Geographic Information System,地理信息系统）技术的很少。针对这些问题,建立了一套基于BS架构的高压电缆接地环流在线监测系统的前端,系统前端以基于React等技术的Dva框架作为基石,使用Ant Design of React设计前端UI组件,采用Ant Design Pro作为脚手架。系统采用有着强大图形处理表达以及独特地理空间分析能力的GIS技术设计出高压电缆线路的绘制模块和监测设备的标记模块,将数据库中经纬度坐标的数据值以地图的形式进行展现;利用React技术中的虚拟DOM树机制在不同的前端界面中设计出不同的定时器函数,实现界面中实时数据的快速动态渲染;基于高质量React组件,设计出良好且统一视觉风格的选择输入框、分页表单和曲线图等前端界面,实现线路设备信息管理模块和历史数据显示模块的高可视化效果;系统在不同的前端操作上设计不同的逻辑界面,使其具有良好的UED（User Experience Design,用户体验设计）和易于拓展的交互逻辑。同时,系统制定了完整的测试步骤,充分测试系统的功能完善性、稳定性、安全性和兼容性。相比于传统维护电缆安全的人工巡检、计划检修模式,系统能通过前端工作人员选择的刷新时间间隔,自动向服务器发送请求获取到数据库中的最新数据,从而实现对电缆线路的连续实时监测,及时发现故障,达到保障电网安全的目的。