Back to List
Visit Site
Railway Station Network Equipment Monitoring System
Network management system for real-time monitoring and fault management of IT infrastructure including servers, network equipment, and sensors at railway stations
Provides various features including drag-and-drop dashboards, network topology editor, and real-time fault notifications.
1 / 3
Roles
PlanningDesignFrontendBackend
Tech Stack
React 18
TypeScript
Redux Toolkit
React Flow
ECharts
Ant Design
Styled Components
Vite
WebSocket
Key Features
- Customizable Dashboard: Freely arrange and personalize 12 types of widgets with drag-and-drop
- Network Topology Editor: Node-based diagram for visualizing and editing network equipment connection structure
- Real-time Fault Alerts: Real-time fault detection and voice notification system via WebSocket
- Rack Layout Management: Diagram editor for visually managing equipment placement within server racks
- Report Generation: Generate and download facility status and detailed reports in PDF, Excel, HTML formats
Key Achievements
- React Flow-Based Diagram Editors: Implemented 3 types of node-based editors (topology, rack layout, route map) to visualize complex infrastructure structures
- Redux Toolkit State Management: Systematically managed complex state with 10+ page-specific independent slices and async thunks
- React Grid Layout Widget System: Implemented dashboard widget system with drag-and-drop, resizing, and auto-arrangement capabilities
- WebSocket Real-time Notifications: Built real-time monitoring system providing instant popup and voice alerts upon fault occurrence
- Light/Dark Theme Support: Implemented dynamic theme switching using Styled Components and theme system
- ECharts Data Visualization: Visualized performance and fault data with 10+ chart components including pie, line, and bar charts
- Tree-Based Hierarchical Navigation: Implemented searchable tree component for regional headquarters-station-equipment hierarchy
#EMS
#Monitoring
#React Flow
#Dashboard
#Real-time
#Railway