219 lines
5.8 KiB
Markdown
219 lines
5.8 KiB
Markdown
|
# TSG-WEB 项目文档
|
|||
|
|
|
|||
|
|
## 项目概览
|
|||
|
|
|
|||
|
|
**项目名称**: shzh-web (TSG-WEB)
|
|||
|
|
**项目类型**: 水利水务管理系统前端
|
|||
|
|
**技术栈**: React 18 + TypeScript + Ant Design + Redux (Rematch)
|
|||
|
|
**代码规模**: 1074个React组件导入，12362个函数/变量声明
|
|||
|
|
|
|||
|
|
## 项目架构
|
|||
|
|
|
|||
|
|
### 应用入口
|
|||
|
|
- **主入口文件**: `src/index.tsx`
|
|||
|
|
- **路由配置**: `src/views/AppRouters.tsx`
|
|||
|
|
- **状态管理**: `src/models/store.ts`
|
|||
|
|
- **全局配置**: `src/config.ts`
|
|||
|
|
|
|||
|
|
### 目录结构
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── components/ # 通用组件 (780+文件)
|
|||
|
|
│ ├── DashboardLayout/ # 布局组件
|
|||
|
|
│ ├── Form/ # 表单组件库
|
|||
|
|
│ ├── crud/ # CRUD操作组件
|
|||
|
|
│ └── DamGraph/ # 专业图表组件
|
|||
|
|
├── views/ # 页面组件 (模块化组织)
|
|||
|
|
│ ├── gcaqjc/ # 工程安全监测
|
|||
|
|
│ ├── rcgl/ # 日常管理
|
|||
|
|
│ ├── gxsl/ # 供水兴利
|
|||
|
|
│ └── sz/ # 四制管理
|
|||
|
|
├── models/ # 状态管理 (Rematch)
|
|||
|
|
├── service/ # API服务层
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
├── api/ # 静态API数据
|
|||
|
|
└── assets/ # 静态资源
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 技术栈详解
|
|||
|
|
|
|||
|
|
### 核心框架
|
|||
|
|
- **React 18**: 使用createRoot API，支持并发特性
|
|||
|
|
- **TypeScript 4.7**: 严格类型检查，提升代码质量
|
|||
|
|
- **Ant Design 4.21**: 企业级UI组件库
|
|||
|
|
- **React Router 6.3**: 现代化路由管理
|
|||
|
|
|
|||
|
|
### 状态管理
|
|||
|
|
- **Rematch 2.2**: Redux的简化封装
|
|||
|
|
- **模型结构**:
|
|||
|
|
- `auth`: 认证管理
|
|||
|
|
- `map`: 地图状态
|
|||
|
|
- `overallview`: 总体视图
|
|||
|
|
- `realview`: 实时视图
|
|||
|
|
- `runtime`: 运行时状态
|
|||
|
|
- `systemSwitch`: 系统开关
|
|||
|
|
|
|||
|
|
### 构建配置
|
|||
|
|
- **CRACO 7.0**: 自定义Create React App配置
|
|||
|
|
- **Less支持**: 自定义主题变量
|
|||
|
|
- **代理配置**: 开发环境API代理
|
|||
|
|
|
|||
|
|
### 专业依赖
|
|||
|
|
- **OpenLayers 7.4**: GIS地图功能
|
|||
|
|
- **ECharts 4.9**: 数据可视化
|
|||
|
|
- **Konva 8.3**: Canvas图形处理
|
|||
|
|
- **Turf.js 6.5**: 地理空间分析
|
|||
|
|
|
|||
|
|
## 业务模块
|
|||
|
|
|
|||
|
|
### 四预管理 (sy)
|
|||
|
|
- **洪水预报** (hsyb): 水文预报、预报方案管理
|
|||
|
|
- **防汛预案** (fxya): 预案管理、抢险队伍
|
|||
|
|
- **调度规程** (ddgc): 调度方案管理
|
|||
|
|
- **预警发布** (yjxy): 预警信息发布
|
|||
|
|
|
|||
|
|
### 工程安全监测 (gcaqjc)
|
|||
|
|
- **大坝安全** (bzt): 大坝安全监测图表
|
|||
|
|
- **预警管理** (yhyj): 预警规则配置
|
|||
|
|
- **数据统计** (sjtjcx): 各类数据统计查询
|
|||
|
|
- **安全分析** (gcaqfx): 工程安全分析
|
|||
|
|
|
|||
|
|
### 日常管理 (rcgl)
|
|||
|
|
- **水质管理** (szgl): 水质整编、监测
|
|||
|
|
- **巡检管理** (xcxj): 巡检任务、问题处理
|
|||
|
|
- **安全管理** (aqgl): 安全检查、隐患治理
|
|||
|
|
- **值班管理** (zbgl): 值班安排、日志
|
|||
|
|
|
|||
|
|
### 供水兴利 (gxsl)
|
|||
|
|
- **水资源调度** (szydd): 供水调度管理
|
|||
|
|
- **供水管理** (gsxl): 供水指标、供水监控
|
|||
|
|
- **能力分析** (gsnlfx): 供水能力分析
|
|||
|
|
|
|||
|
|
### 四全管理 (sq)
|
|||
|
|
- **全面感知** (qfg): 注册登记信息
|
|||
|
|
- **全面要素** (qys): 库区要素、工程要素
|
|||
|
|
- **全面状况** (qzq): 工程状况数据
|
|||
|
|
- **全面监控** (qth): 实时监控数据
|
|||
|
|
|
|||
|
|
### 四制管理 (sz)
|
|||
|
|
- **组织机构** (zzjg): 机构管理、人员管理
|
|||
|
|
- **培训管理** (pxgl): 培训计划、记录
|
|||
|
|
- **法律法规** (flfg): 制度规范管理
|
|||
|
|
- **行政执法** (szzf): 案件管理、处罚记录
|
|||
|
|
|
|||
|
|
## 关键配置
|
|||
|
|
|
|||
|
|
### 环境配置
|
|||
|
|
```typescript
|
|||
|
|
// src/config.ts
|
|||
|
|
export const config = {
|
|||
|
|
address: 'jianshi', // 或 'wufeng'
|
|||
|
|
extent: [110.25175167632203, 29.934801589268638, 111.3498069381167, 30.416712241937642],
|
|||
|
|
ADCD: '422822000000', // 行政区划代码
|
|||
|
|
pubapi: 'https://owrsvr.cloudowr.cn/pubapi',
|
|||
|
|
drpColors: [...], // 水位颜色配置
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 主题配置
|
|||
|
|
```javascript
|
|||
|
|
// craco.config.js
|
|||
|
|
modifyVars: {
|
|||
|
|
'@primary-color': '#1890FF',
|
|||
|
|
'@error-color': '#F55E55',
|
|||
|
|
'@text-color': '#3B4859',
|
|||
|
|
'@card-background': '#fbfbfb',
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### API配置
|
|||
|
|
- **认证接口**: TOKEN_VARIFY
|
|||
|
|
- **重定向地址**: NOAUTH_REDIRECT
|
|||
|
|
- **代理配置**: setupProxy.js
|
|||
|
|
|
|||
|
|
## 开发指南
|
|||
|
|
|
|||
|
|
### 启动项目
|
|||
|
|
```bash
|
|||
|
|
yarn install
|
|||
|
|
yarn start # 开发环境
|
|||
|
|
yarn build # 生产构建
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 组件开发规范
|
|||
|
|
1. 使用TypeScript编写组件
|
|||
|
|
2. 遵循React Hooks规范
|
|||
|
|
3. 使用Ant Design组件库
|
|||
|
|
4. 状态管理通过Rematch模型
|
|||
|
|
|
|||
|
|
### 状态管理
|
|||
|
|
```typescript
|
|||
|
|
// 定义模型
|
|||
|
|
export const auth = {
|
|||
|
|
state: { user: null },
|
|||
|
|
reducers: {
|
|||
|
|
setUser: (state, payload) => ({ user: payload })
|
|||
|
|
},
|
|||
|
|
effects: {
|
|||
|
|
async login(payload) {
|
|||
|
|
// 登录逻辑
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 路由配置
|
|||
|
|
```typescript
|
|||
|
|
// 在AppRouters.tsx中配置
|
|||
|
|
{
|
|||
|
|
path: '/mgr/gcaqjc/gcaqyj/bzt',
|
|||
|
|
element: <Bzt isHome={false}/>
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 部署说明
|
|||
|
|
|
|||
|
|
### 构建产物
|
|||
|
|
- **构建命令**: `yarn build`
|
|||
|
|
- **产物目录**: `build/`
|
|||
|
|
- **部署方式**: 静态文件部署
|
|||
|
|
|
|||
|
|
### 环境要求
|
|||
|
|
- **Node.js**: >=16.0.0
|
|||
|
|
- **浏览器**: 现代浏览器 (Chrome、Firefox、Safari、Edge)
|
|||
|
|
|
|||
|
|
### 代理配置
|
|||
|
|
开发环境通过setupProxy.js配置API代理，生产环境需要配置Nginx反向代理。
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **地图功能**: 项目依赖OpenLayers，需要确保GIS服务正常运行
|
|||
|
|
2. **视频监控**: 集成视频播放功能，需要配置视频流地址
|
|||
|
|
3. **数据更新**: 实时数据通过WebSocket或定时轮询更新
|
|||
|
|
4. **权限管理**: 基于角色的访问控制，需要配置相应的权限
|
|||
|
|
5. **浏览器兼容**: 主要支持现代浏览器，不支持IE浏览器
|
|||
|
|
|
|||
|
|
## 优化建议
|
|||
|
|
|
|||
|
|
### 性能优化
|
|||
|
|
1. 实现路由级别的代码分割
|
|||
|
|
2. 使用React.memo优化组件渲染
|
|||
|
|
3. 虚拟化长列表显示
|
|||
|
|
4. 图片懒加载和压缩
|
|||
|
|
|
|||
|
|
### 功能增强
|
|||
|
|
1. 添加离线功能支持
|
|||
|
|
2. 实现PWA应用
|
|||
|
|
3. 优化移动端体验
|
|||
|
|
4. 增加数据导出功能
|
|||
|
|
|
|||
|
|
### 技术升级
|
|||
|
|
1. 升级到React 19
|
|||
|
|
2. 迁移到Ant Design 5.x
|
|||
|
|
3. 使用Redux Toolkit
|
|||
|
|
4. 添加TypeScript严格模式
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
*最后更新: 2025-09-12*
|
|||
|
|
*维护者: Claude AI Assistant*
|