lishenfeng
/
tsg-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
tsg-web/CLAUDE.md

5.8 KiB
Raw Permalink Blame History

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): 案件管理、处罚记录

关键配置

环境配置

// 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: [...], // 水位颜色配置
}

主题配置

// craco.config.js
modifyVars: {
  '@primary-color': '#1890FF',
  '@error-color': '#F55E55',
  '@text-color': '#3B4859',
  '@card-background': '#fbfbfb',
}

API配置

  • 认证接口: TOKEN_VARIFY
  • 重定向地址: NOAUTH_REDIRECT
  • 代理配置: setupProxy.js

开发指南

启动项目

yarn install
yarn start  # 开发环境
yarn build  # 生产构建

组件开发规范

  1. 使用TypeScript编写组件
  2. 遵循React Hooks规范
  3. 使用Ant Design组件库
  4. 状态管理通过Rematch模型

状态管理

// 定义模型
export const auth = {
  state: { user: null },
  reducers: {
    setUser: (state, payload) => ({ user: payload })
  },
  effects: {
    async login(payload) {
      // 登录逻辑
    }
  }
}

路由配置

// 在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