# 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*