tba-gx-guochan

太湖流域水环境综合治理信息共享平台

项目简介

本平台是面向太湖流域水环境综合治理的多方数据共享与决策支持系统，由水利部太湖流域管理局水文局（信息中心）主办，联合江苏省水利厅/生态环境厅、浙江省水利厅/生态环境厅、上海市水务局/生态环境局、生态环境部太湖流域东海海域生态环境监督管理局等八家单位，实现水文、水质、工情、生态流量、蓝藻、水质自动站、排污口等监测数据的集中汇聚、共享展示、统计分析和专题决策支持。

技术路线

层级	技术选型	说明
前端框架	Vue 3 (Composition API + <script setup> SFC)	渐进式 JavaScript 框架，提供响应式数据绑定和组件化开发
构建工具	Vite 8	新一代前端构建工具，ESM 原生开发服务器，秒级热更新
路由管理	Vue Router 4	HTML5 History 模式，支持嵌套路由和懒加载
UI 框架	Element Plus + Layui	Element Plus 用于后台管理和图表组件；Layui 用于前台页面布局和基础组件
数据可视化	ECharts 6	提供折线图、雷达图、柱状图等统计图表
GIS 地图	天地图 API (Tianditu JavaScript API)	国家地理信息公共服务平台，支持 WGS84 坐标系的矢量/影像/地形底图
HTTP 客户端	Axios	向后端 Java 服务发送 API 请求，Vite 开发代理转发
数据方案	Mock 服务 + 后端 API 双模态	开发阶段提供完整 Mock 数据（src/data/mock/）支撑全功能开发；生产环境通过 /api 前缀代理至后端服务
样式方案	Scoped CSS + 全局 CSS	组件级样式隔离 + 全局基础样式（global.css）

项目结构

tba-gx-guochan/
├── index.html                          # HTML 入口（天地图 CDN + Layui CDN + 主入口脚本）
├── package.json                        # 项目依赖配置
├── vite.config.js                      # Vite 构建配置（含跨域代理、Cookie 重写）
├── public/
│   └── static/                         # 旧项目静态资源（ArcGIS SDK、My97DatePicker、业务脚本、图片等）
└── src/
    ├── main.js                         # 应用入口：创建 Vue 实例，注册路由和 Element Plus
    ├── App.vue                         # 根组件：根据路由路径决定 Layout 包裹策略
    │
    ├── router/
    │   └── index.js                    # 路由表：前台 10 个主路由 + 后台管理嵌套路由
    │
    ├── assets/
    │   ├── css/global.css              # 全局基础样式
    │   ├── data/                       # 静态数据配置
    │   │   ├── bizTableConfig.js       # 业务代码 → 表格列字段映射表
    │   │   ├── map_tba.js              # 太湖流域边界多边形坐标 + 一河三湖区域数据
    │   │   └── mockData.js             # 统一 mock 数据入口
    │   └── images/                     # 静态图片资源（单位图标、GIS 标记图标、系统图标等）
    │
    ├── data/
    │   ├── index.js                    # 数据服务统一接口层（API ↔ Mock 切换）
    │   └── mock/                       # Mock 数据实现
    │       ├── mockService.js          # Mock 数据服务实现（所有数据接口）
    │       ├── bizList.js              # 共享清单单位数据
    │       ├── tba.js / jiangsu.js / zhejiang.js / shanghai.js / thdh.js  # 各单位监测数据
    │       ├── xaj.js                  # 新安江流域 Mock 数据
    │       ├── dataStats.js            # 数据统计页面 mock
    │       ├── shuiqingStats.js        # 水情统计 mock
    │       ├── shuizhiStats.js         # 水质统计 mock
    │       ├── systemManage.js         # 系统管理（雷达图/帮助/单位）mock
    │       ├── systemManageData.js     # 用户/角色/资源/反馈 mock
    │       ├── systemLog.js            # 系统日志 mock
    │       ├── gongqingData.js         # 工情数据 mock
    │       └── *.json                  # 水情/水质/工情查询 mock 数据
    │
    ├── views/                          # 页面组件
    │   ├── Login.vue                   # 登录页（账户/短信双模式）
    │   ├── Home.vue                    # 首页 - 共享清单（8家合作单位）
    │   ├── Gis.vue                     # GIS 地图展示（天地图 + 站点标记 + 数据面板）
    │   ├── DataCommon.vue              # 通用数据查看（表格 + 单位/业务切换）
    │   ├── DataStatistics.vue          # 数据统计（GIS + ECharts 水情/水质/工情统计）
    │   ├── Xaj.vue                     # 新安江流域（GIS + 数据查询 + 共享目录）
    │   ├── XajDataQuery.vue            # 新安江流域数据查询子页
    │   ├── OneThreeLake.vue            # 一河三湖专题（GIS + 水质/水情分析组件）
    │   ├── Yjjt.vue                    # 引江济太（预留）
    │   ├── Shl.vue                     # 水葫芦监测（预留）
    │   ├── SystemManage.vue            # 系统管理（共享质量雷达图 + 帮助文档）
    │   ├── Document.vue                # 河湖长制文档管理
    │   ├── Admin.vue                   # 后台管理主布局（独立布局）
    │   ├── SysManage.vue               # 系统管理（单位/用户/角色/资源/帮助/反馈 7模块）
    │   ├── UserProfile.vue             # 用户基本资料
    │   ├── UserSecurity.vue            # 用户修改密码
    │   ├── ExchangeMonitor.vue         # 数据交换监控
    │   ├── SystemLog.vue               # 系统日志
    │   ├── WaterStats.vue              # 水情统计图表
    │   └── WaterQualityStats.vue       # 水质统计图表
    │
    └── components/                     # 公共组件
        ├── Layout.vue                  # 前台页面布局（Header + Nav + Content + Footer）
        ├── Header.vue                  # 前台顶部（Logo + 登录状态 + 入口）
        ├── Nav.vue                     # 前台导航栏（10个功能入口）
        ├── Content.vue                 # 内容容器（卡片样式）
        ├── Footer.vue                  # 底部版权信息
        ├── GisSubNav.vue               # GIS 子导航栏（单位选择 + 业务标签 + 地图切换）
        ├── GisRightPanel.vue           # GIS 右侧数据面板（搜索 + 表格 + 定位）
        ├── SingleStationWaterQuality.vue   # 单站水质过程线
        ├── MultiStationCompare.vue         # 多站水质对比
        ├── StationYearCompare.vue          # 单站多年水质对比
        ├── StationWaterLevelHistory.vue    # 单站水情过程线
        ├── StationYearSyncCompare.vue      # 单站多年水情同步对比
        ├── WaterLevelMultiStationCompare.vue # 多站水情对比
        └── XajSharedDirectory.vue          # 新安江流域共享目录

页面路由

（通过 Layout 组件包裹，有公共 Header/Nav/Footer）

路由路径	页面名称	组件	功能描述
/	首页（共享清单）	Home.vue	展示八家合作单位信息，点击查看各单位共享数据资源清单
/gis	GIS 地图展示	Gis.vue	天地图底图 + 水文水质站点标记 + 弹窗信息 + 数据表格
/data-common	数据查看	DataCommon.vue	通用数据表格：单位选择 + 业务切换 + 站名搜索
/data-statistics	数据统计	DataStatistics.vue	GIS 地图 + 水情/水质/工情统计图表
/xaj	新安江流域	Xaj.vue	GIS + 数据查询 + 共享目录（水资源情势/开发利用）
/1h3h	一河三湖	OneThreeLake.vue	太浦河/淀山湖/太湖/元荡湖 GIS + 水质/水情分析组件
/yjjt	引江济太	Yjjt.vue	引江济太工程专题（预留）
/shl	水葫芦	Shl.vue	水葫芦监测专题（预留）
/systemmanage	系统管理	SystemManage.vue	共享数据质量评估（雷达图）+ 帮助文档
/document	河湖长制	Document.vue	文档管理：目录树 + 文件搜索 + 下载

独立页面（无 Layout 包裹）

路由路径	页面名称	组件	功能描述
/login	登录页	Login.vue	账户密码登录 / 手机验证码登录

后台管理（独立布局）

路由路径	页面名称	组件	功能描述
/admin	后台管理	Admin.vue	后台管理主布局（顶栏 + 左侧菜单 + 右侧内容）
/admin/data/tba	太湖流域管理局	DataCommon.vue	数据列表
/admin/data/thdh	太湖东海局	DataCommon.vue	数据列表
/admin/data/js-sl	江苏省水利厅	DataCommon.vue	数据列表
/admin/data/js-st	江苏省生态环境厅	DataCommon.vue	数据列表
/admin/data/zj-sl	浙江省水利厅	DataCommon.vue	数据列表
/admin/data/zj-st	浙江省生态环境厅	DataCommon.vue	数据列表
/admin/data/sh-st	上海市生态环境局	DataCommon.vue	数据列表
/admin/data/sh-sw	上海市水务局	DataCommon.vue	数据列表
/admin/system/unit	单位管理	SysManage.vue	共享单位 CRUD
/admin/system/user	用户管理	SysManage.vue	用户 CRUD
/admin/system/role	角色管理	SysManage.vue	角色 CRUD
/admin/system/resource	资源管理	SysManage.vue	业务资源配置
/admin/system/cate	帮助目录	SysManage.vue	帮助分类
/admin/system/article	帮助文档	SysManage.vue	帮助文档管理
/admin/system/feedback	用户反馈	SysManage.vue	用户反馈列表
/admin/user/profile	基本资料	UserProfile.vue	编辑个人信息
/admin/user/security	安全设置	UserSecurity.vue	修改密码
/admin/monitor	交换监控	ExchangeMonitor.vue	数据交换进度监控
/admin/logs	系统日志	SystemLog.vue	系统操作日志

核心功能模块

1. 共享清单

首页展示八家合作单位及其共享数据资源清单，包括数据频率、数据描述、提供单位等信息。

2. GIS 地图展示

• 基于天地图 API，支持天地图/影像图/地形图三种底图切换
• 太湖流域边界及一河三湖区域多边形绘制
• 站点标记（水质站、水位站、排污口等）及其信息弹窗
• 站名搜索 + 表格数据联动 + 地图定位

3. 数据查看

通用数据表格查询，支持：

• 单位切换（8家单位）
• 业务类型切换（水文/省界河流/省界湖泊/水源地/入湖河道/太湖藻类/水质自动站等 40+ 业务代码）
• 站名模糊搜索
• 动态表格列配置

4. 数据统计

GIS + ECharts 统计图表集成：

• 水情统计：站点选择 + 月度/年度切换 + 折线图 + 表格
• 水质统计：站点选择 + 多年份选择 + 多指标（总磷/溶解氧/高锰酸盐/氨氮/总氮）对比 + 折线图 + 表格

5. 新安江流域

• GIS 图层：雨量站/蒸发站/径流站/水库 + 二级区划/县级区划面
• 取水户图层：工业/公共供水/服务业 + 统计卡片
• 县区域点击弹窗（ECharts 柱状图）
• 数据查询：9家单位 + 多业务类型 + 文件上传

6. 一河三湖

太浦河、淀山湖、太湖、元荡湖四大水域专题分析：

• GIS 站点地图（水位站/水质站/排污口）
• 水质分析：单站过程线 / 多站对比 / 多年对比
• 水情分析：单站过程线 / 多站对比 / 多年同步对比

7. 后台管理

• 数据列表：按单位查看和搜索共享数据
• 系统管理：单位/用户/角色/资源/帮助目录/帮助文档/用户反馈 CRUD
• 用户中心：基本资料修改、密码安全设置
• 交换监控：数据共享进度追踪
• 系统日志：操作审计日志

合作单位

1. 水利部太湖流域管理局 - 建设方和运营方
2. 生态环境部太湖流域东海海域生态环境监督管理局
3. 江苏省水利厅 / 江苏省生态环境厅
4. 浙江省水利厅 / 浙江省生态环境厅
5. 上海市水务局 / 上海市生态环境局

协作单位：长三角区域合作办公室、国家电网华东分部、新安江水力发电厂、黄山市水利局、淳安县水利水电局等。

共享数据分类

大类	子类	数据内容
水文监测	水文、省界河流、省界湖泊、工程调度	水位(m)、流量(m³/s)、闸上/下水位、调度指令
水质监测	水质自动站、水源地、入湖河道	pH、溶解氧、高锰酸盐指数、氨氮、总磷、总氮
生态监测	太湖藻类（蓝藻）、生态流量、生态水位	叶绿素a、蓝藻状况、水色、透明度
工情监测	工程调度及水量信息	引水量、排水量、运行状态
其他	行政交界断面、排污口、降雨量	行政区污染物、取水户数据

开发指南

环境要求

• Node.js >= 18
• npm >= 9

安装与运行

# 安装依赖
npm install

# 启动开发服务器（默认 http://localhost:5173）
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

后端代理配置

在 vite.config.js 中配置了以下代理：

• /api → http://localhost:8080（后端 Java 服务）
• /tba-gx → http://infoshare.tbasw.cn（远程数据服务，支持 Cookie 转发）

可通过 .env.development 文件中的 VITE_JSESSIONID 环境变量配置远程服务的会话 ID。

Mock 数据

项目内置完整的 Mock 数据服务（src/data/mock/mockService.js），覆盖所有业务代码的水文/水质/工情监测数据。在未连接后端时自动降级使用 Mock 数据，保证前后端分离开发的独立性。

---

主办单位：太湖流域管理局水文局（信息中心）
技术支持：北京金水信息技术发展有限公司
备案号：沪ICP备2022022055号-1