# demo_react_pipeline_structure

**Repository Path**: piteqiu/demo_react_pipeline_structure

## Basic Information

- **Project Name**: demo_react_pipeline_structure
- **Description**: 系统名称： 基于大数据驱动的管网结构性缺陷预测性维护系统V1.0
功能描述： 基于管道内窥检测视频与传感器历史数据，通过AI模型预测结构缺陷发展趋势（如腐蚀速率）；自动生成预防性维护计划及资源调度方案。解决传统管网维护被动响应缺陷的问题，通过大数据分析预测结构缺陷演化趋势，实现预防性维护决策，延长管网寿命并降低突发事故率。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-08-26
- **Last Updated**: 2025-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于大数据驱动的管网结构性缺陷预测性维护系统 V1.0

## 系统简介

本系统是一个基于大数据分析的管网结构性缺陷预测性维护平台，通过整合CCTV检测视频、传感器历史数据、环境腐蚀参数等多源数据，运用AI模型预测结构缺陷发展趋势，自动生成预防性维护计划及资源调度方案。

### 核心功能

- **总览**: 系统整体运行状态监控和关键指标展示
- **多源数据集成**: 接入CCTV检测视频、传感器历史数据、环境腐蚀参数
- **缺陷智能识别**: 自动识别裂缝、腐蚀、变形等结构性缺陷
- **寿命预测建模**: 基于缺陷特征预测管段剩余使用寿命
- **维护策略生成**: 输出最优维修/更换方案及资源调度计划
- **风险可视化**: 生成管段风险等级空间分布图（红/黄/蓝预警）
- **系统管理**: 用户管理、系统配置、日志查看等管理功能

## 技术栈

- **前端框架**: React 19.1.1
- **UI组件库**: Ant Design 5.14.0
- **路由管理**: React Router DOM 6.27.0
- **图表库**: ECharts + echarts-for-react
- **日期处理**: Day.js
- **HTTP客户端**: Axios
- **构建工具**: Vite 7.1.2
- **开发语言**: JavaScript (ES6+)

## 项目结构

```
pipeline_structure/
├── public/                 # 静态资源
├── src/
│   ├── components/         # 通用组件
│   │   └── Layout.jsx     # 主布局组件
│   ├── pages/             # 页面组件
│   │   ├── Dashboard.jsx          # 总览页面
│   │   ├── DataIntegration.jsx    # 多源数据集成
│   │   ├── DefectDetection.jsx    # 缺陷智能识别
│   │   ├── LifePrediction.jsx     # 寿命预测建模
│   │   ├── MaintenanceStrategy.jsx # 维护策略生成
│   │   ├── RiskVisualization.jsx  # 风险可视化
│   │   ├── SystemManagement.jsx   # 系统管理
│   │   └── LoginPage.jsx          # 登录页面
│   ├── data/
│   │   └── mockData.js    # 模拟数据
│   ├── App.jsx            # 应用入口组件
│   ├── App.css            # 应用样式
│   ├── main.jsx           # 应用入口文件
│   └── index.css          # 全局样式
├── package.json           # 项目配置
├── vite.config.js         # Vite配置
└── README.md             # 项目说明
```

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

系统将在 `http://localhost:5173` 启动

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 登录信息

- **用户名**: admin
- **密码**: 123456

## 功能特性

### 1. 系统总览
- 管网长度、缺陷数量、维护任务等关键指标统计
- 风险等级分布饼图
- 传感器数据趋势图
- 缺陷类型分布统计
- 管网状态概览表

### 2. 多源数据集成
- CCTV检测视频文件管理和上传
- 传感器数据实时监控（压力、流量、温度、pH值）
- 环境腐蚀参数分析
- 数据同步状态监控

### 3. 缺陷智能识别
- 缺陷类型自动分类（裂缝、腐蚀、变形、接头缺陷）
- 严重程度评估（轻微、中等、严重）
- AI识别置信度显示
- 缺陷位置精确定位
- 缺陷详情图像查看

### 4. 寿命预测建模
- 管段剩余寿命预测
- 劣化趋势分析
- 预测置信度评估
- 风险等级分类
- 维护建议生成

### 5. 维护策略生成
- 自动生成维护计划
- 优先级排序（紧急、高、中、低）
- 成本预算分析
- 工期估算
- 资源调度安排
- 维护日历视图

### 6. 风险可视化
- 管段风险等级地理分布
- 风险因子关联分析
- 实时预警系统
- 风险趋势变化图
- 风险详情分析表

### 7. 系统管理
- 用户账户管理
- 角色权限控制
- 系统配置设置
- 操作日志查看
- 系统监控状态
- 服务运行状态

## 数据说明

当前版本使用模拟数据，包含：
- 5个管段的基础信息
- 4个典型缺陷案例
- 30天的传感器监测数据
- 4个维护任务计划
- 完整的风险评估数据
- 用户和日志管理数据

## 浏览器支持

- Chrome >= 88
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 开发说明

### 代码规范
- 使用 ESLint 进行代码质量检查
- 遵循 React Hooks 最佳实践
- 组件采用函数式编程风格

### 样式规范
- 使用 Ant Design 设计语言
- 支持响应式设计
- 自定义主题色彩

### 数据管理
- 模拟数据统一在 `src/data/mockData.js` 管理
- 组件内部使用 React Hooks 管理状态
- 支持数据筛选和搜索功能

## 后续开发计划

1. **后端API集成**: 连接真实的数据库和服务器
2. **实时数据推送**: WebSocket 实现数据实时更新
3. **地图集成**: 接入第三方地图服务显示管网分布
4. **移动端适配**: 开发移动端应用
5. **数据导出**: 支持报表导出功能
6. **高级分析**: 更复杂的AI模型和预测算法

## 许可证

本项目仅用于演示和学习目的。

## 技术支持

如有技术问题，请联系开发团队。