代码添加注释

README.md

@@ -1,5 +1,249 @@
-# Vue 3 + Vite
+# 太湖流域水环境综合治理信息共享平台
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+## 项目简介
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+本平台是面向太湖流域水环境综合治理的多方数据共享与决策支持系统，由**水利部太湖流域管理局水文局（信息中心）**主办，联合江苏省水利厅/生态环境厅、浙江省水利厅/生态环境厅、上海市水务局/生态环境局、生态环境部太湖流域东海海域生态环境监督管理局等八家单位，实现水文、水质、工情、生态流量、蓝藻、水质自动站、排污口等监测数据的集中汇聚、共享展示、统计分析和专题决策支持。
+
+## 技术路线
+
+| 层级 | 技术选型 | 说明 |
+|---|---|---|
+| **前端框架** | 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
+
+### 安装与运行
+
+```bash
+# 安装依赖
+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

src/App.vue

@@ -1,19 +1,27 @@
+<!--
+  App.vue - 根组件（路由入口）
+
+  功能说明：
+    根据当前路由路径，决定渲染模式：
+    - /login 和 /admin/*：直接渲染子路由组件（独立布局，无公共头尾）
+    - 其他路径：通过 Layout 组件包裹渲染，提供公共头部、导航栏、底部
+-->
 <script setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import Layout from '@/components/Layout.vue'
 
 const route = useRoute()
+// 登录页和后管页面使用独立布局，不需要公共 Header/Nav/Footer
 const isLoginPage = computed(() => route.path === '/login')
 const isAdminPage = computed(() => route.path.startsWith('/admin'))
 </script>
 
 <template>
+  <!-- 登录页和后管页面：直接渲染，无 Layout 包裹 -->
   <router-view v-if="isLoginPage || isAdminPage" />
+  <!-- 前台页面：由 Layout 包裹，提供公共的 Header + Nav + Footer -->
   <Layout v-else>
     <router-view />
   </Layout>
-</template>
-
-<style scoped>
-</style>
+</template>

src/assets/css/global.css

@@ -1,3 +1,18 @@
+/**
+ * global.css - 全局样式文件
+ *
+ * 功能说明：
+ *   1. 全局重置：清除默认 margin/padding，box-sizing: border-box
+ *   2. 基础字体：Microsoft YaHei + sans-serif，14px
+ *   3. 页面背景色：#EBF4F9（浅蓝色）
+ *   4. a 标签去下划线、去颜色继承
+ *   5. ul/li 去默认列表样式
+ *   6. Layui 框架组件样式覆盖：
+ *      - 头部导航栏样式调整
+ *      - 导航项 hover 蓝色高亮
+ *      - 底部 footer 固定底部
+ *   7. 数据标题/副标题/内容样式定义
+ */
 * {
   margin: 0;
   padding: 0;

src/components/Content.vue

@@ -1,3 +1,12 @@
+<!--
+  Content.vue - 前台页面内容容器组件
+
+  功能说明：
+    - 提供统一样式的内容区包装器
+    - 白色背景 + 圆角 + box-shadow 卡片样式
+    - 可选标题栏（带底部分隔线）
+    - 主体区域使用 flex 弹性布局，内容溢出时自动滚动
+-->
 <script setup>
 defineProps({
   title: {

src/components/Footer.vue

@@ -1,3 +1,10 @@
+<!--
+  Footer.vue - 前台页面底部版权信息组件
+
+  功能说明：
+    - 固定在页面底部，显示版权归属信息
+    - 版权所有：太湖流域管理局水文局（信息中心）
+-->
 <script setup>
 </script>
 

src/components/GisRightPanel.vue

@@ -1,5 +1,18 @@
+<!--
+  GisRightPanel.vue - GIS 右侧数据面板组件
+
+  功能说明：
+    提供 GIS 页面右侧的可折叠数据面板。
+    1. 折叠/展开按钮（< / >）
+    2. 站名搜索输入框 + 查询按钮
+    3. 站点数据表格（列由 bizTableConfig.js 动态配置）
+       - 表格行交替高亮（ui-priority-secondary）
+       - 点击行触发 onRowClick(row) 事件（地图定位）
+    4. 底部统计：共 X 条
+-->
 <template>
   <div class="right-panel" :class="{ 'collapsed': !panelOpen }">
+    <!-- 折叠/展开切换按钮 -->
     <div class="panel-toggle" @click="togglePanel">
       <span v-if="panelOpen">&lt;</span>
       <span v-else>&gt;</span>

src/components/GisSubNav.vue

@@ -1,11 +1,22 @@
+<!--
+  GisSubNav.vue - GIS 子导航栏组件
+
+  功能说明：
+    提供 GIS 地图页面的子级导航和控制。
+    1. 单位选择下拉框：切换数据来源（8家单位）
+    2. 业务类型标签栏：根据当前单位显示对应的业务按钮（水文监测/省界河流/水质自动站等）
+    3. 地图类型切换：点击地图图标弹出切换面板（天地图/影像图/地形图）
+-->
 <template>
   <div class="sub-nav-bar">
     <div class="nav-row">
+      <!-- 单位选择下拉 -->
       <select v-model="currentUnit" @change="onUnitChange" class="unit-select">
         <option v-for="unit in units" :key="unit.id" :value="unit.id">
           {{ unit.label }}
         </option>
       </select>
+      <!-- 业务类型标签（根据当前单位动态显示） -->
       <div class="biz-wrapper">
         <template v-for="unit in units" :key="unit.id">
           <ul v-if="currentUnit === unit.id" class="bizs">
@@ -19,6 +30,7 @@
         </template>
       </div>
     </div>
+    <!-- 地图类型切换按钮 -->
     <div class="mapqiehuan">
       <img class="TLnavimg" :src="mapIconSrc" @click="showMapSwitch = !showMapSwitch" />
       <div v-show="showMapSwitch" class="ditu">

src/components/Header.vue

@@ -1,12 +1,24 @@
+<!--
+  Header.vue - 前台页面顶部组件
+
+  功能说明：
+    - 左侧显示平台 Logo（太湖流域水环境综合治理信息共享平台）
+    - 右侧根据登录状态显示不同内容：
+      - 已登录：用户名、修改密码、后台管理入口、退出登录
+      - 未登录：欢迎语、后台管理、注册、登录入口
+    - 用户信息从 localStorage 读取
+-->
 <script setup>
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
+// 从 localStorage 读取当前登录用户信息
 const user = ref(JSON.parse(localStorage.getItem('user') || 'null'))
 const loggedIn = computed(() => !!user.value)
 
+// 退出登录：清除本地存储的用户信息和 token，跳转至登录页
 function logout() {
   localStorage.removeItem('user')
   localStorage.removeItem('token')

src/components/Layout.vue

@@ -1,3 +1,15 @@
+<!--
+  Layout.vue - 前台页面公共布局组件
+
+  功能说明：
+    提供前台所有页面（除 /login 和 /admin 外）的统一框架布局：
+    - Header：顶部区域（Logo + 登录状态/用户信息 + 后台入口）
+    - Nav：导航栏（GIS展示/数据查看/引江济太/一河三湖/水葫芦/共享清单/系统管理/河湖长制/新安江流域/数据统计）
+    - Content：内容区主容器（带 box-shadow 卡片样式）
+    - Footer：底部版权信息
+    - 返回顶部按钮（固定在右下角）
+    - 信息反馈按钮（固定在右下角）
+-->
 <script setup>
 import Header from './Header.vue'
 import Nav from './Nav.vue'
@@ -6,19 +18,24 @@ import Content from './Content.vue'
 
 <template>
   <div id="tba-body" class="layui-layout layui-layout-admin">
+    <!-- 顶部头部区域：Logo + 用户信息 -->
     <Header />
+    <!-- 导航栏：10个主要功能入口 -->
     <Nav />
 
     <div class="layui-container" id="tba-container">
+      <!-- 内容容器：带白色背景和圆角阴影 -->
       <Content>
         <slot></slot>
       </Content>
   </div>
 
+  <!-- 返回顶部悬浮按钮 -->
   <ul class="layui-fixbar">
       <li class="layui-icon layui-fixbar-top" id="tba-fixbar-top" title="返回顶部"></li>
     </ul>
 
+    <!-- 信息反馈悬浮按钮 -->
     <ul id="tba-feedback">
       <li class="layui-icon layui-icon-survey" title="信息反馈"></li>
     </ul>

src/components/MultiStationCompare.vue

@@ -1,3 +1,13 @@
+<!--
+  MultiStationCompare.vue - 多站水质对比分析组件
+
+  功能说明：
+    一河三湖专题下的子组件。多个水质站点的同一指标横向对比。
+    1. 多站点选择（复选框）+ 时间范围选择
+    2. ECharts 折线图：各站点水温(wt) 对比曲线
+    3. 数据表格 + 分页
+    4. 数据来源：mock 生成（generateMockData）
+-->
 <script setup>
 import { ref, onMounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'

src/components/Nav.vue

@@ -1,9 +1,27 @@
+<!--
+  Nav.vue - 前台页面导航栏组件
+
+  功能说明：
+    - 提供 10 个主要功能模块的导航入口：
+      1. GIS展示    - 地图可视化展示
+      2. 数据查看    - 通用数据表格查询
+      3. 引江济太    - 引江济太工程专题
+      4. 一河三湖    - 太浦河、淀山湖、太湖、元荡湖专题分析
+      5. 水葫芦      - 水葫芦监测（预留页面）
+      6. 共享清单    - 首页，各方共享数据资源目录
+      7. 系统管理    - 共享数据质量评估（雷达图）
+      8. 河湖长制    - 文档管理及共享
+      9. 新安江流域  - 新安江流域水量调度（GIS + 数据查询）
+      10. 数据统计   - GIS + 统计图表（水情/水质/工情）
+    - 当前激活项根据路由路径高亮显示
+-->
 <script setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
 
+// 根据当前路由计算激活页面标识（用于高亮导航项）
 const currentPage = computed(() => {
   const path = route.path.replace('/', '')
   return path || 'index'

src/components/SingleStationWaterQuality.vue

@@ -1,3 +1,14 @@
+<!--
+  SingleStationWaterQuality.vue - 单站水质过程线组件
+
+  功能说明：
+    一河三湖专题下的子组件。单个水质站点的时序数据展示。
+    1. 站点选择下拉 + 时间范围选择
+    2. ECharts 多指标折线图：水温(wt) / pH / 电导率(cond) / 溶解氧(dox) /
+       高锰酸盐指数(codmn) / 氨氮(mn) / 总氮(tn) / 总磷(tp) 八合一图表
+    3. 数据表格 + 分页
+    4. 数据来源：dataService.getStationHistory()
+-->
 <script setup>
 import { ref, onMounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'

src/components/StationWaterLevelHistory.vue

@@ -1,3 +1,14 @@
+<!--
+  StationWaterLevelHistory.vue - 单站水情过程线组件
+
+  功能说明：
+    一河三湖专题下的子组件。单个水位站点的时序数据展示（水位/闸下水位/流量）。
+    1. 站点选择（太浦闸/平望/汾湖/练塘/金泽水利枢纽）
+    2. 时间范围选择
+    3. ECharts 折线图：水位(waterLevel) 过程线
+    4. 数据表格 + 分页
+    5. 数据来源：mock 生成（generateMockData）
+-->
 <script setup>
 import { ref, onMounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'

src/components/StationYearCompare.vue

@@ -1,3 +1,13 @@
+<!--
+  StationYearCompare.vue - 单站多年水质对比组件
+
+  功能说明：
+    一河三湖专题下的子组件。同一站点不同年份的水质数据对比。
+    1. 站点选择 + 多年份选择（2020-2026）
+    2. ECharts 折线图：各年份月度水温(wt) 均值对比
+    3. 数据表格 + 分页
+    4. 数据来源：mock 生成（generateMockData）
+-->
 <script setup>
 import { ref, onMounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'

src/components/StationYearSyncCompare.vue

@@ -1,3 +1,12 @@
+<!--
+  StationYearSyncCompare.vue - 单站多年水情同步对比组件
+
+  功能说明：
+    一河三湖专题下的子组件。同一站点多年同时间段的水情数据对比。
+    1. 站点选择 + 指标选择（水位/闸下水位/流量）+ 多年份选择 + 日期范围
+    2. ECharts 折线图：多年同期水位/流量对比曲线
+    3. 数据表格 + 分页
+-->
 <script setup>
 import { ref, onMounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'

src/components/WaterLevelMultiStationCompare.vue

@@ -1,3 +1,12 @@
+<!--
+  WaterLevelMultiStationCompare.vue - 多站水情对比分析组件
+
+  功能说明：
+    一河三湖专题下的子组件。多个水位站点的同一指标横向对比。
+    1. 多站点选择（复选框）+ 指标选择（水位/闸下水位/流量）+ 时间范围
+    2. ECharts 折线图：各站点水位/流量对比曲线
+    3. 数据表格 + 分页
+-->
 <script setup>
 import { ref, onMounted, nextTick, watch } from 'vue'
 import * as echarts from 'echarts'

src/components/XajSharedDirectory.vue

@@ -1,3 +1,11 @@
+<!--
+  XajSharedDirectory.vue - 新安江流域共享目录组件
+
+  功能说明：
+    嵌入在 Xaj.vue 中的共享目录子组件。
+    展示新安江流域各方共享的数据资源列表（频率/描述/提供单位）。
+    数据来源：mockDataService.getSharedDirectory()
+-->
 <script setup>
 import { ref, onMounted } from 'vue'
 import { mockDataService } from '@/data/mock/mockService'

src/main.js

@@ -1,3 +1,19 @@
+/**
+ * main.js - 太湖流域水环境综合治理信息共享平台 应用入口
+ *
+ * 功能说明：
+ *   1. 创建 Vue 3 应用实例，挂载路由、Element Plus UI 框架
+ *   2. 配置 Axios 全局基础路径（/api），所有后端请求统一前缀
+ *   3. 引入全局样式，挂载应用至 #app 根节点
+ *
+ * 技术栈：
+ *   - Vue 3 (Composition API + SFC)
+ *   - Vue Router 4 (路由管理)
+ *   - Element Plus (桌面端 UI 组件库)
+ *   - Axios (HTTP 客户端，代理至后端 Java 服务)
+ *   - ECharts 6 (图表可视化)
+ */
+
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -6,9 +22,10 @@ import 'element-plus/dist/index.css'
 import './assets/css/global.css'
 import axios from 'axios'
 
+// 配置 Axios 基础 URL，所有请求通过 Vite 代理转发至后端
 axios.defaults.baseURL = '/api'
 
 const app = createApp(App)
-app.use(router)
-app.use(ElementPlus)
-app.mount('#app')
+app.use(router)       // 注册路由
+app.use(ElementPlus)  // 注册 Element Plus UI 组件
+app.mount('#app')     // 挂载至 index.html 中的 #app div

src/router/index.js

@@ -1,82 +1,144 @@
+/**
+ * router/index.js - 前端路由配置
+ *
+ * 太湖流域水环境综合治理信息共享平台 路由表
+ * 采用 Vue Router 4 的 createWebHistory 模式（无 # 号的前端路由）
+ *
+ * === 路由结构概览 ===
+ *
+ * 前台页面（通过 Layout 组件包裹，有公共 Header/Nav/Footer）：
+ *   /              首页（共享清单）
+ *   /gis           GIS地图展示
+ *   /data-common   数据查看（通用数据表格）
+ *   /data-statistics 数据统计（GIS + 统计结合）
+ *   /xaj           新安江流域（GIS + 数据查询）
+ *   /1h3h          一河三湖（GIS + 水质/水情分析组件）
+ *   /yjjt          引江济太
+ *   /shl           水葫芦
+ *   /systemmanage  系统管理（共享质量雷达图等）
+ *   /document      河湖长制（文档管理）
+ *
+ * 独立页面（无 Layout 包裹）：
+ *   /login         登录页（两种方式：账户密码 / 手机验证码）
+ *   /admin/*       后台管理（独立布局，含数据列表、系统管理、用户中心）
+ *     /admin/data/:unit    各单位数据列表
+ *     /admin/system/:type  系统管理（单位/用户/角色/资源/帮助/反馈）
+ *     /admin/user/*        用户中心（基本资料/安全设置）
+ *     /admin/monitor       交换监控
+ *     /admin/logs          系统日志
+ */
+
 import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
+  // ======================== 登录页 ========================
   {
     path: '/login',
     name: 'Login',
     component: () => import('@/views/Login.vue')
   },
+
+  // ======================== 首页（共享清单） ========================
   {
     path: '/',
     name: 'Home',
     component: () => import('@/views/Home.vue')
   },
+
+  // ======================== GIS 地图展示 ========================
   {
     path: '/gis',
     name: 'Gis',
     component: () => import('@/views/Gis.vue')
   },
+
+  // ======================== 通用数据查看 ========================
   {
     path: '/data-common',
     name: 'DataCommon',
     component: () => import('@/views/DataCommon.vue')
   },
+
+  // ======================== 数据统计（GIS + 表格/图表） ========================
   {
     path: '/data-statistics',
     name: 'DataStatistics',
     component: () => import('@/views/DataStatistics.vue')
   },
+
+  // ======================== 后台管理 ========================
   {
     path: '/admin',
     name: 'Admin',
-    component: () => import('@/views/Admin.vue'),
+    component: () => import('@/views/Admin.vue'), // 后台管理的主布局
     children: [
-      { path: 'data/tba', name: 'AdminDataTba', component: () => import('@/views/DataCommon.vue') },
-      { path: 'data/thdh', name: 'AdminDataThdh', component: () => import('@/views/DataCommon.vue') },
-      { path: 'data/js-sl', name: 'AdminDataJsSl', component: () => import('@/views/DataCommon.vue') },
-      { path: 'data/js-st', name: 'AdminDataJsSt', component: () => import('@/views/DataCommon.vue') },
-      { path: 'data/zj-sl', name: 'AdminDataZjSl', component: () => import('@/views/DataCommon.vue') },
-      { path: 'data/zj-st', name: 'AdminDataZjSt', component: () => import('@/views/DataCommon.vue') },
-      { path: 'data/sh-st', name: 'AdminDataShSt', component: () => import('@/views/DataCommon.vue') },
-      { path: 'data/sh-sw', name: 'AdminDataShSw', component: () => import('@/views/DataCommon.vue') },
-      { path: 'system/unit', name: 'AdminSystemUnit', component: () => import('@/views/SysManage.vue') },
-      { path: 'system/user', name: 'AdminSystemUser', component: () => import('@/views/SysManage.vue') },
-      { path: 'system/role', name: 'AdminSystemRole', component: () => import('@/views/SysManage.vue') },
+      // 数据列表 - 按单位划分
+      { path: 'data/tba',   name: 'AdminDataTba',  component: () => import('@/views/DataCommon.vue') },
+      { path: 'data/thdh',  name: 'AdminDataThdh', component: () => import('@/views/DataCommon.vue') },
+      { path: 'data/js-sl', name: 'AdminDataJsSl',  component: () => import('@/views/DataCommon.vue') },
+      { path: 'data/js-st', name: 'AdminDataJsSt',  component: () => import('@/views/DataCommon.vue') },
+      { path: 'data/zj-sl', name: 'AdminDataZjSl',  component: () => import('@/views/DataCommon.vue') },
+      { path: 'data/zj-st', name: 'AdminDataZjSt',  component: () => import('@/views/DataCommon.vue') },
+      { path: 'data/sh-st', name: 'AdminDataShSt',  component: () => import('@/views/DataCommon.vue') },
+      { path: 'data/sh-sw', name: 'AdminDataShSw',  component: () => import('@/views/DataCommon.vue') },
+
+      // 系统管理
+      { path: 'system/unit',     name: 'AdminSystemUnit',     component: () => import('@/views/SysManage.vue') },
+      { path: 'system/user',     name: 'AdminSystemUser',     component: () => import('@/views/SysManage.vue') },
+      { path: 'system/role',     name: 'AdminSystemRole',     component: () => import('@/views/SysManage.vue') },
       { path: 'system/resource', name: 'AdminSystemResource', component: () => import('@/views/SysManage.vue') },
-      { path: 'system/cate', name: 'AdminSystemCate', component: () => import('@/views/SysManage.vue') },
-      { path: 'system/article', name: 'AdminSystemArticle', component: () => import('@/views/SysManage.vue') },
+      { path: 'system/cate',     name: 'AdminSystemCate',     component: () => import('@/views/SysManage.vue') },
+      { path: 'system/article',  name: 'AdminSystemArticle',  component: () => import('@/views/SysManage.vue') },
       { path: 'system/feedback', name: 'AdminSystemFeedback', component: () => import('@/views/SysManage.vue') },
-      { path: 'user/profile', name: 'AdminUserProfile', component: () => import('@/views/UserProfile.vue') },
+
+      // 用户中心
+      { path: 'user/profile',  name: 'AdminUserProfile',  component: () => import('@/views/UserProfile.vue') },
       { path: 'user/security', name: 'AdminUserSecurity', component: () => import('@/views/UserSecurity.vue') },
+
+      // 交换监控
       { path: 'monitor', name: 'AdminMonitor', component: () => import('@/views/ExchangeMonitor.vue') },
+
+      // 系统日志
       { path: 'logs', name: 'AdminLogs', component: () => import('@/views/SystemLog.vue') }
     ]
   },
+
+  // ======================== 新安江流域 ========================
   {
     path: '/xaj',
     name: 'Xaj',
     component: () => import('@/views/Xaj.vue')
   },
+
+  // ======================== 一河三湖 ========================
   {
     path: '/1h3h',
     name: 'OneThreeLake',
     component: () => import('@/views/OneThreeLake.vue')
   },
+
+  // ======================== 引江济太 ========================
   {
     path: '/yjjt',
     name: 'Yjjt',
     component: () => import('@/views/Yjjt.vue')
   },
+
+  // ======================== 水葫芦 ========================
   {
     path: '/shl',
     name: 'Shl',
     component: () => import('@/views/Shl.vue')
   },
+
+  // ======================== 系统管理（共享质量） ========================
   {
     path: '/systemmanage',
     name: 'SystemManage',
     component: () => import('@/views/SystemManage.vue')
   },
+
+  // ======================== 河湖长制（文档管理） ========================
   {
     path: '/document',
     name: 'Document',
@@ -85,7 +147,7 @@ const routes = [
 ]
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHistory(), // HTML5 History 模式（无 # 号路由）
   routes
 })
 

src/views/Admin.vue

@@ -1,3 +1,17 @@
+<!--
+  Admin.vue - 后台管理主布局
+
+  功能说明：
+    提供后台管理的独立三栏布局（区别于前台的 Header/Nav/Footer 布局）：
+    - 顶部标题栏：Logo + 前台/数据资源/交换监控/系统日志快捷入口 + 用户下拉菜单 + 退出
+    - 左侧菜单栏（可折叠分组）：
+      * 数据列表：太湖流域管理局、太湖东海局、江苏省水利厅/生态环境厅、
+                 浙江省水利厅/生态环境厅、上海市生态环境局/水务局
+      * 系统管理：单位管理、用户管理、角色管理、资源管理、帮助目录、帮助文档、用户反馈
+      * 用户中心：基本资料、安全设置
+    - 右侧内容区：渲染子路由（SysManage / DataCommon / UserProfile / UserSecurity / ExchangeMonitor / SystemLog）
+    - 底部版权：ICP备案 + 主办单位 + 技术支持
+-->
 <script setup>
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
@@ -6,8 +20,9 @@ const router = useRouter()
 const route = useRoute()
 
 const activeMenu = ref('home')
-const expandedMenus = ref(['数据列表', '系统管理', '用户中心'])
+const expandedMenus = ref(['数据列表', '系统管理', '用户中心']) // 默认展开的菜单分组
 
+// 折叠/展开菜单分组
 function toggleMenu(title) {
   const index = expandedMenus.value.indexOf(title)
   if (index > -1) {
@@ -21,12 +36,14 @@ import fuwuIcon from '@/assets/images/fuwu.png'
 import systemIcon from '@/assets/images/system.png'
 import userIcon from '@/assets/images/user.png'
 
+// 左侧菜单分组的图标映射
 const iconMap = {
   fuwu: fuwuIcon,
   system: systemIcon,
   user: userIcon
 }
 
+// 左侧菜单配置：分组 + 子项（含路径）
 const leftMenuItems = [
   {
     title: '数据列表',
@@ -65,6 +82,7 @@ const leftMenuItems = [
   }
 ]
 
+// 顶部快捷导航
 const topMenuItems = [
   { label: '前台', icon: 'layui-icon-home', path: '/gis' },
   { label: '数据资源', icon: 'layui-icon-component', path: '/admin/data/tba' },
@@ -72,15 +90,18 @@ const topMenuItems = [
   { label: '系统日志', icon: 'layui-icon-list', path: '/admin/logs' }
 ]
 
+// 点击菜单项进行路由跳转
 function handleMenuClick(path) {
   activeMenu.value = path
   router.push(path)
 }
 
+// 返回前台 GIS 展示页
 function goToFront() {
   router.push('/gis')
 }
 
+// 退出登录
 function logout() {
   localStorage.removeItem('user')
   localStorage.removeItem('token')

src/views/DataCommon.vue

@@ -1,3 +1,18 @@
+<!--
+  DataCommon.vue - 通用数据查看（表格展示）
+
+  功能说明：
+    为前台 /data-common 和后台 /admin/data/* 提供统一的数据表格查看界面。
+    1. 顶部筛选区：
+       - 业务单位下拉选择（前台模式显示，后台模式隐藏）
+       - 业务按钮栏：按 bizzCode 切换不同数据类型的表格
+    2. 站名搜索：支持按"测站或断面名称"模糊筛选
+    3. 数据表格：
+       - 优先请求后端 /gx/data/list 接口
+       - 后端无数据时自动降级到 mock 数据服务（dataService）
+       - 表格列配置由 bizTableConfig.js 中的 getVisibleColumns() 动态决定
+    4. 支持通过 URL query 参数 (unit, bizCode) 直接定位到指定单位和业务类型
+-->
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
@@ -6,19 +21,21 @@ import { getVisibleColumns } from '@/assets/data/bizTableConfig.js'
 import { dataService } from '@/data'
 
 const route = useRoute()
-const currentUnit = ref(route.query.unit || 'unit0')
-const currentBizCode = ref(route.query.bizCode || 'TBA_SW_1H2H')
-const tableData = ref([])
-const loading = ref(false)
-const searchStnm = ref('')
+const currentUnit = ref(route.query.unit || 'unit0')       // 当前选中的业务单位
+const currentBizCode = ref(route.query.bizCode || 'TBA_SW_1H2H') // 当前业务代码
+const tableData = ref([])     // 表格数据
+const loading = ref(false)    // 加载状态
+const searchStnm = ref('')    // 搜索关键词
 
+// 根据当前 bizCode 动态获取可见表格列定义
 const columns = computed(() => getVisibleColumns(currentBizCode.value))
 
-const units = dataService.getUnits()
-const bizButtons = dataService.getBizButtons()
+const units = dataService.getUnits()         // 八家单位列表
+const bizButtons = dataService.getBizButtons() // 各单位对应的业务按钮配置
 
 const isAdminPage = computed(() => route.path.startsWith('/admin'))
 
+// 切换单位：选中后自动加载该单位第一个业务类型的数据
 function selectUnit(unitId) {
   currentUnit.value = unitId
   const btns = bizButtons[unitId] || []
@@ -27,11 +44,13 @@ function selectUnit(unitId) {
   }
 }
 
+// 切换业务类型：重新加载对应 bizCode 的数据
 function selectBiz(bizCode) {
   currentBizCode.value = bizCode
   loadTableData(bizCode)
 }
 
+// 加载表格数据：先请求后端 API，失败则降级到 mock
 async function loadTableData(bizCode) {
   loading.value = true
   try {
@@ -53,6 +72,7 @@ async function loadTableData(bizCode) {
   loading.value = false
 }
 
+// 格式化时间字段
 function formatTime(val) {
   if (!val) return ''
   if (typeof val === 'string' && !isNaN(Date.parse(val))) {
@@ -69,10 +89,12 @@ function formatTime(val) {
   return val
 }
 
+// 执行搜索
 function onSearch() {
   loadTableData(currentBizCode.value)
 }
 
+// 监听 URL query 参数变化，自动切换单位和业务类型
 watch(() => [route.query.unit, route.query.bizCode], ([newUnit, newBizCode]) => {
   if (newUnit) {
     currentUnit.value = newUnit

src/views/DataStatistics.vue

@@ -1,3 +1,19 @@
+<!--
+  DataStatistics.vue - 数据统计页面（GIS + ECharts 统计图表）
+
+  功能说明：
+    将 GIS 地图、ECharts 统计图表和数据表格集成在同一页面。
+    1. 左侧 GIS 地图：天地图底图 + 太湖流域边界 + 站点标记
+    2. 右侧数据面板：
+       - 菜单切换：水质查询(6) / 水情查询(2) / 工情查询(3) / 统计图切换
+       - 站名搜索
+       - 数据表格（列根据菜单类型动态变化）
+    3. 底部统计面板：
+       - WaterStats：水情统计（ECharts 折线图 + 月度/年度切换）
+       - WaterQualityStats：水质统计（ECharts 折线图 + 多年对比 + 指标选择）
+    4. 地图类型切换：天地图 / 影像图 / 地形图
+    5. 表格行点击 -> 地图定位到对应站点
+-->
 <script setup>
 import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import tiandituImg from '@/assets/images/ditu/tianditu.jpg'
@@ -14,21 +30,21 @@ import WaterQualityStats from '@/views/WaterQualityStats.vue'
 
 const TIANDITU_KEY = '3fb1e9fda20ee995dc815c8243553ce8'
 
-// 菜单与 bizCode 映射
+// 菜单与 bizCode 映射：菜单ID -> 业务代码
 const menuBizMap = {
   6: 'DATASTAT_SZ',  // 水质查询
   2: 'DATASTAT_SL',  // 水情查询
   3: 'DATASTAT_GQ',  // 工情查询
 }
 
-// 各类型对应图标
+// 各类型对应地图图标
 const iconMap = {
-  DATASTAT_SZ: icon1_9mm,
-  DATASTAT_SL: iconHdz1,
-  DATASTAT_GQ: iconPs,
+  DATASTAT_SZ: icon1_9mm,  // 水质 - 雨量类型图标
+  DATASTAT_SL: iconHdz1,   // 水情 - 水位类型图标
+  DATASTAT_GQ: iconPs,     // 工情 - 排水类型图标
 }
 
-// 各类型表格列配置
+// 各类型表格列配置（水质/水情/工情字段不同）
 const tableColumnsMap = {
   DATASTAT_SZ: [
     { field: 'stnm', label: '站名', width: '120px' },
@@ -74,13 +90,15 @@ const currentLat = ref('')
 let mapInstance = null
 let markerLayer = null
 let activeMarker = null
-const markerMap = new Map()
+const markerMap = new Map()  // 用于表格行点击时快速查找地图标记
 
+// 计算属性：当前 bizCode / 图标 / 列 / 是否统计视图
 const currentBizCode = computed(() => menuBizMap[currentMenu.value] || 'DATASTAT_SZ')
 const currentIcon = computed(() => iconMap[currentBizCode.value] || icon1_9mm)
 const currentColumns = computed(() => tableColumnsMap[currentBizCode.value] || tableColumnsMap.DATASTAT_SZ)
 const isStatsView = computed(() => currentMenu.value === 4 || currentMenu.value === 7)
 
+// 搜索过滤
 const filteredData = computed(() => {
   const kw = searchText.value.trim().toLowerCase()
   if (!kw) return stationData.value

src/views/Document.vue

@@ -1,13 +1,24 @@
+<!--
+  Document.vue - 河湖长制文档管理页面
+
+  功能说明：
+    提供河湖长制相关的政策法规、通知公告等文档管理和检索。
+    1. 左侧目录树：按分类组织文档（河湖基础管理/水域岸线管理/执法监管/水生态/水资源管理/河湖长名录）
+    2. 文档标题搜索
+    3. 文档列表表格：文件名、上传时间、文件大小、下载操作
+    4. 数据来源：后端 /biz/doc/file/list 接口
+-->
 <script setup>
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
 import { Document } from '@element-plus/icons-vue'
 
-const currentCateId = ref('HHZZ')
-const fileList = ref([])
-const searchTitle = ref('')
+const currentCateId = ref('HHZZ')  // 当前文档分类
+const fileList = ref([])           // 文件列表
+const searchTitle = ref('')        // 搜索标题
 const loading = ref(false)
 
+// 文档分类目录树
 const treeData = ref([
   {
     id: 'HHJCGL',

src/views/ExchangeMonitor.vue

@@ -1,10 +1,20 @@
+<!--
+  ExchangeMonitor.vue - 数据交换监控页面
+
+  功能说明：
+    展示各单位的数据共享交换进度与质量。
+    1. 单位选择下拉（7家合作单位）
+    2. 数据类型筛选（站点完整性/指标完整性/共享时效性/数据质量性/历史序列完整性）
+    3. 表格展示交换数据详情（业务名称、接收时间、共享条数、文件大小等）
+    4. 自动合并业务名称列（相同业务名称的行合并）
+-->
 <script setup>
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
 
-const bizUnitId = ref(1)
-const dataType = ref('')
-const tableData = ref([])
+const bizUnitId = ref(1)    // 选中的业务单位
+const dataType = ref('')     // 数据类型筛选
+const tableData = ref([])    // 交换数据列表
 const loading = ref(false)
 
 const units = [

src/views/Gis.vue

@@ -1,3 +1,26 @@
+<!--
+  Gis.vue - GIS 地图展示页面
+
+  功能说明：
+    基于天地图 API 的太湖流域 GIS 数据可视化展示。
+    1. 地图核心：
+       - 初始化天地图底图（EPSG:4326 投影），默认中心点 (120.9, 31.2)，缩放级别 9
+       - 绘制太湖区域边界（tba_area_paths 多边形）
+       - 鼠标移动实时显示经纬坐标
+    2. 子导航栏（GisSubNav）：
+       - 单位选择下拉（切换数据来源单位）
+       - 业务类型标签（水文监测 / 省界河流 / 省界湖泊 / 水源地 / 入湖河道 / 太湖藻类 / 水质自动站...）
+       - 地图类型切换（天地图 / 影像图 / 地形图）
+    3. 右侧数据面板（GisRightPanel）：
+       - 站名搜索
+       - 站点数据表格（列根据当前 bizCode 动态变化）
+       - 点击表格行可定位地图至该站点
+    4. 地图标记：
+       - 根据 bizCode 加载站点数据，在地图上绘制标记点（swjc 图标）
+       - 点击标记弹出信息窗（含 pH/溶解氧/氨氮/总磷/总氮/水温等水质指标）
+       - 5分钟数据缓存，避免重复请求
+    5. 交互：点击地图空白区域关闭弹窗
+-->
 <script setup>
 import { ref, watch, onMounted, nextTick } from 'vue'
 import GisSubNav from '@/components/GisSubNav.vue'
@@ -9,94 +32,73 @@ import swjcIcon from '@/assets/images/gis/swjc.png'
 const TIANDITU_KEY = '3fb1e9fda20ee995dc815c8243553ce8'
 
 const mapLoaded = ref(false)
-const mapContainer = ref(null)
-let mapInstance = null
+const mapContainer = ref(null)       // 地图容器 DOM 引用
+let mapInstance = null               // 天地图实例
 
-const currentDistrict = ref('unit0')
-const currentBizCode = ref('TBA_SW_1H2H')
+const currentDistrict = ref('unit0')          // 当前单位
+const currentBizCode = ref('TBA_SW_1H2H')    // 当前业务代码（默认水文监测）
 
-const currentLng = ref('')
-const currentLat = ref('')
+const currentLng = ref('')  // 鼠标当前经度
+const currentLat = ref('')  // 鼠标当前纬度
 
-const stationData = ref([])
+const stationData = ref([]) // 站点数据
 
-// 存储当前地图上的标记和图层
-let markerLayer = null
-// 当前打开弹窗的标记
-let activeMarker = null
+let markerLayer = null       // 当前标记图层
+let activeMarker = null      // 当前打开的弹窗标记
 
-// 数据缓存：避免重复请求，5分钟内有效
+// 数据缓存：5分钟内避免重复请求
 const dataCache = {}
-const CACHE_TTL = 5 * 60 * 1000 // 5分钟
+const CACHE_TTL = 5 * 60 * 1000
 
 function getCachedData(bizCode) {
   const cached = dataCache[bizCode]
-  if (cached && Date.now() - cached.time < CACHE_TTL) {
-    console.log(`[缓存命中] ${bizCode}，使用缓存数据`)
-    return cached.data
-  }
-  console.log(`[缓存未命中] ${bizCode}`)
+  if (cached && Date.now() - cached.time < CACHE_TTL) return cached.data
   return null
 }
 
 function setCachedData(bizCode, data) {
-  // 存一份浅拷贝，避免引用问题
   dataCache[bizCode] = { data: [...data], time: Date.now() }
-  console.log(`[缓存已设置] ${bizCode}，${data.length}条数据`)
 }
 
+// 子导航栏事件：选择业务类型
 function onSelectBiz({ bizCode, unit }) {
   currentBizCode.value = bizCode
   currentDistrict.value = unit
   loadBizData(bizCode)
 }
 
-function onSearch(keyword) {
-  console.log('Search:', keyword)
-}
-
-function onDistrictChange(unit) {
-  currentDistrict.value = unit
-}
-
-function onSwitchMapType(type) {
-  console.log('Switch map type:', type)
-}
+function onSearch(keyword) { console.log('Search:', keyword) }
+function onDistrictChange(unit) { currentDistrict.value = unit }
+function onSwitchMapType(type) { console.log('Switch map type:', type) }
 
+// 加载站点数据（带缓存）
 async function loadBizData(bizCode) {
-  // 优先从缓存读取
   const cached = getCachedData(bizCode)
   if (cached) {
     stationData.value = cached
     return
   }
-
-  // 使用数据服务获取数据
   const result = await dataService.getStationData(bizCode)
   const data = result.rows || []
-  console.log(`[数据服务] ${bizCode}，${data.length}条`)
   stationData.value = data
   setCachedData(bizCode, data)
 }
 
+// 清除地图上所有标记
 function clearMarkers() {
-  // 关闭当前打开的弹窗
-  if (activeMarker) {
-    activeMarker.closeInfoWindow()
-    activeMarker = null
-  }
+  if (activeMarker) { activeMarker.closeInfoWindow(); activeMarker = null }
   if (markerLayer && markerLayer.length > 0) {
     markerLayer.forEach(m => mapInstance.removeOverLay(m))
     markerLayer = null
   }
 }
 
+// 在地图上添加站点标记
 function addMarkers() {
   if (!mapInstance || !stationData.value || stationData.value.length === 0) return
-
   clearMarkers()
-
   markerLayer = []
+
   stationData.value.forEach(item => {
     const lng = parseFloat(item.lgtd)
     const lat = parseFloat(item.lttd)
@@ -109,48 +111,37 @@ function addMarkers() {
       iconAnchor: new T.Point(16, 16)
     })
     const marker = new T.Marker(lnglat, { icon: icon })
+    // 点击标记显示信息弹窗（动态渲染所有字段）
     marker.addEventListener('click', () => {
-      // 动态显示全部字段信息
       const excludeFields = ['stcd', 'lgtd', 'lttd', 'id']
       let html = `<div style="font-size:13px;line-height:1.8;min-width:150px;">`
       html += `<b>${item.stnm || '未知站点'}</b><hr style="margin:4px 0;border:none;border-top:1px solid #ddd;">`
+      // 字段中文名映射
+      const labelMap = {
+        rvnm: '河流名称', tm: '时间', upz: '水位(m)', q: '流量(m³/s)',
+        spt: '时间', state: '状态', wt: '水温(℃)', ph: 'pH值',
+        dox: '溶解氧(mg/L)', codmn: '高锰酸盐指数(mg/L)',
+        nh3n: '氨氮(mg/L)', tp: '总磷(mg/L)', tn: '总氮(mg/L)',
+        cond: '电导率', admin: '行政区', yr: '年份', turb: '浊度',
+        chla: '叶绿素a', lzzk: '蓝藻状况', eco: '生态流量'
+      }
       for (const key in item) {
         if (excludeFields.includes(key) || item[key] === '' || item[key] === null || item[key] === undefined) continue
-        const labelMap = {
-          rvnm: '河流名称', tm: '时间', upz: '水位(m)', q: '流量(m³/s)',
-          spt: '时间', state: '状态', wt: '水温(℃)', ph: 'pH值',
-          dox: '溶解氧(mg/L)', codmn: '高锰酸盐指数(mg/L)',
-          nh3n: '氨氮(mg/L)', tp: '总磷(mg/L)', tn: '总氮(mg/L)',
-          cod: 'COD', nh3: '氨氮', ysl: '引水量', psl: '排水量',
-          dwz: '闸下水位(m)', gcdl: '调度指令', yxzt: '运行状态',
-          nt: '备注', chla: '叶绿素a', lzzk: '蓝藻状况',
-          cond: '电导率', admin: '行政区', yr: '年份',
-          p_total: '总磷', n_total: '总氮', codcr: '化学需氧量',
-          bod5: '五日生化需氧量', cn: '氰化物', f: '氟化物',
-          s2: '硫化物', las: '阴离子表面活性剂', hg: '汞',
-          cu: '铜', pb: '铅', cd: '镉', zn: '锌', ars: '砷',
-          se: '硒', cr6: '六价铬', oil: '石油类', vlph: '挥发酚',
-          clarity: '透明度', shuise: '水色', wndv: '风速',
-          wnddir: '风向', cyano: '蓝藻密度( cells/L)',
-          zf: '藻毒素', ws: '风速(m/s)', ww: '风向',
-          turb: '浊度', eco: '生态流量'
-        }
         const label = labelMap[key] || key
         html += `<div style="display:flex;justify-content:space-between;"><span style="color:#666;">${label}：</span><span>${item[key]}</span></div>`
       }
       html += `</div>`
-      // 关闭上一个弹窗
       if (activeMarker) activeMarker.closeInfoWindow()
       activeMarker = marker
-      marker.openInfoWindow(new T.InfoWindow(html, {offsetX: -10, offsetY: -30}))
+      marker.openInfoWindow(new T.InfoWindow(html, { offsetX: -10, offsetY: -30 }))
     })
     mapInstance.addOverLay(marker)
     markerLayer.push(marker)
   })
 }
 
+// 点击表格行：定位地图至该站点
 function onRowClick(row) {
-  // 点击表格行，地图定位到该站点
   const lng = parseFloat(row.lgtd)
   const lat = parseFloat(row.lttd)
   if (!isNaN(lng) && !isNaN(lat) && mapInstance) {
@@ -158,41 +149,37 @@ function onRowClick(row) {
   }
 }
 
-// 监听 stationData 变化，刷新地图标记
+// 监听站点数据变化，刷新地图标记
 watch(stationData, () => {
-  if (mapInstance) {
-    addMarkers()
-  }
+  if (mapInstance) addMarkers()
 })
 
+// 初始化天地图
 function initMap() {
   if (typeof T !== 'undefined' && mapContainer.value) {
-    const center = new T.LngLat(120.9, 31.2)
+    const center = new T.LngLat(120.9, 31.2) // 太湖流域地理中心
     mapInstance = new T.Map(mapContainer.value, {
       center: center,
       zoom: 9,
-      projection: 'EPSG:4326'
+      projection: 'EPSG:4326' // WGS84 经纬度投影
     })
     const tileLayer = new T.TileLayer()
     mapInstance.addLayer(tileLayer)
     mapLoaded.value = true
 
-    drawTaihuBoundary()
+    drawTaihuBoundary() // 绘制太湖边界
 
+    // 鼠标移动：实时更新经纬度显示
     mapInstance.addEventListener('mousemove', (e) => {
       if (e.lnglat) {
         currentLng.value = e.lnglat.lng.toFixed(4)
         currentLat.value = e.lnglat.lat.toFixed(4)
       }
     })
-    // 点击地图空白区域关闭弹窗
+    // 点击地图空白区关闭弹窗
     mapInstance.addEventListener('click', (e) => {
-      // 仅当点击的不是标记时关闭
       if (!e.target || !(e.target._marker || e.target.classList?.contains('tdt-marker'))) {
-        if (activeMarker) {
-          activeMarker.closeInfoWindow()
-          activeMarker = null
-        }
+        if (activeMarker) { activeMarker.closeInfoWindow(); activeMarker = null }
       }
     })
   }

src/views/Home.vue

@@ -1,7 +1,23 @@
+<!--
+  Home.vue - 首页（共享清单）
+
+  功能说明：
+    1. 顶部展示"太湖流域水环境综合治理信息共享平台"的八家合作单位：
+       - 水利部太湖流域管理局（默认选中）
+       - 生态环境部太湖流域东海海域生态环境监督管理局
+       - 江苏省水利厅 / 江苏省生态环境厅
+       - 浙江省水利厅 / 浙江省生态环境厅
+       - 上海市水务局 / 上海市生态环境局
+    2. 点击单位名称可查看该单位提供的共享数据资源清单（频率/描述/提供单位）
+    3. 底部展示合作机构列表及图标
+    4. 单位图标有 active（选中高亮）、hover（鼠标悬停）、normal（默认）三种状态
+    - 数据来源：调用 mockDataService.getBizList() 获取各单位共享清单
+-->
 <script setup>
 import { ref, onMounted } from 'vue'
 import Footer from '@/components/Footer.vue'
 import { mockDataService } from '@/data/mock/mockService'
+// 导入各单位图标的三种状态图（active/普通）
 import tbaCActive from '@/assets/images/unit/tba-c-active.png'
 import tbaCItem from '@/assets/images/unit/tba-c-item.png'
 import thdhCActive from '@/assets/images/unit/thdh-c-active.png'
@@ -19,6 +35,7 @@ import shSwCItem from '@/assets/images/unit/sh-sw-c-item.png'
 import shStCActive from '@/assets/images/unit/sh-st-c-active.png'
 import shStCItem from '@/assets/images/unit/sh-st-c-item.png'
 
+// 八家合作单位配置
 const units = ref([
   { id: 'tba-c', name: '水利部太湖流域管理局', active: true },
   { id: 'thdh-c', name: '生态环境部太湖流域东海海域生态环境监督管理局', active: false },
@@ -30,6 +47,7 @@ const units = ref([
   { id: 'sh-st-c', name: '上海市生态环境局', active: false }
 ])
 
+// 图标映射表：active（选中/悬停高亮） / item（默认状态）
 const imgMap = {
   'tba-c': { active: tbaCActive, item: tbaCItem },
   'thdh-c': { active: thdhCActive, item: thdhCItem },
@@ -41,10 +59,11 @@ const imgMap = {
   'sh-st-c': { active: shStCActive, item: shStCItem }
 }
 
-const bizList = ref([])
-const currentUnit = ref('tba-c')
-const hoveredUnit = ref(null)
+const bizList = ref([])        // 当前选中单位的共享数据清单
+const currentUnit = ref('tba-c') // 当前选中的单位 ID
+const hoveredUnit = ref(null)    // 当前鼠标悬停的单位 ID
 
+// 根据单位 ID 和状态获取对应的图标路径
 function getImgSrc(id, isActive, isHovered) {
   const images = imgMap[id]
   if (!images) return ''
@@ -52,6 +71,7 @@ function getImgSrc(id, isActive, isHovered) {
   return images.item
 }
 
+// 加载指定业务单位的共享清单数据
 async function loadBizList(bizUnit) {
   try {
     const res = await mockDataService.getBizList(bizUnit)
@@ -64,6 +84,7 @@ async function loadBizList(bizUnit) {
   }
 }
 
+// 选中某单位：高亮该单位 + 加载其数据清单
 function selectUnit(unit) {
   units.value.forEach(u => u.active = false)
   unit.active = true
@@ -80,6 +101,7 @@ function onMouseOut(unit) {
   hoveredUnit.value = null
 }
 
+// 组件挂载后，默认加载太湖流域管理局的共享清单
 onMounted(() => {
   loadBizList('水利部太湖流域管理局')
 })

src/views/Login.vue

@@ -1,32 +1,46 @@
+<!--
+  Login.vue - 登录页面
+
+  功能说明：
+    提供两种登录方式：
+    1. 账户登录：用户名 + 密码 + 图形验证码，提交 /login 接口
+    2. 手机验证码登录：手机号 + 短信验证码，提交 /authentication/mobile 接口
+    - 登录成功后存储 token 和 user 信息到 localStorage，跳转首页
+    - 验证码图片点击可刷新
+    - 背景采用上下双色分层设计（上部蓝、下部浅蓝）
+-->
 <script setup>
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import axios from 'axios'
 
 const router = useRouter()
-const activeTab = ref('account')
+const activeTab = ref('account') // 当前激活的登录 tab：account / sms
 
-const username = ref('')
-const password = ref('')
-const verifyCode = ref('')
-const mobile = ref('')
-const smsCode = ref('')
-const errorMsg = ref('')
-const codeImg = ref('')
+const username = ref('')     // 账户登录 - 用户名
+const password = ref('')     // 账户登录 - 密码
+const verifyCode = ref('')   // 图形验证码
+const mobile = ref('')       // 短信登录 - 手机号
+const smsCode = ref('')      // 短信验证码
+const errorMsg = ref('')     // 错误提示信息
+const codeImg = ref('')      // 图形验证码图片地址
 
 onMounted(() => {
   refreshCode()
 })
 
+// 刷新图形验证码（加时间戳防止缓存）
 function refreshCode() {
   codeImg.value = '/api/captcha.jpg?t=' + Date.now()
 }
 
+// 切换登录方式 tab
 function switchTab(tab) {
   activeTab.value = tab
   errorMsg.value = ''
 }
 
+// 账户密码登录
 async function handleLogin() {
   if (!username.value || !password.value) {
     errorMsg.value = '请输入用户名和密码'
@@ -58,6 +72,7 @@ async function handleLogin() {
   }
 }
 
+// 发送短信验证码
 async function sendSms() {
   if (!mobile.value) {
     errorMsg.value = '请填写手机号码'
@@ -72,6 +87,7 @@ async function sendSms() {
   }
 }
 
+// 手机验证码登录
 async function handleSmsLogin() {
   if (!mobile.value) {
     errorMsg.value = '请填写手机号码'

src/views/OneThreeLake.vue

@@ -1,3 +1,25 @@
+<!--
+  OneThreeLake.vue - 一河三湖专题页面（GIS + 水质/水情分析）
+
+  功能说明：
+    针对太湖流域的"一河三湖"（太浦河、淀山湖、太湖、元荡湖）提供专题分析。
+    1. GIS展示模式（menu=1）：
+       - 天地图底图 + 太湖流域边界多边形 + 一河三湖区域 polygon（hh_1h3h）
+       - 三个 Tab：水位站(sl) / 水质站(sz) / 排污口(pwk)
+       - 标记点图标切换（sl1/sl2, szzdz1/szzdz2, sjhp1/sjhp2）
+       - 水位站/排污口点击弹窗（显示水位、流量等字段）
+    2. 水质分析模式（waterQuality）：
+       - 左侧水质分析菜单（可折叠）：
+         * 单站水质过程线：SingleStationWaterQuality（ECharts 折线图）
+         * 多站水质对比：MultiStationCompare（多站点同一时间段）
+         * 单站多年对比：StationYearCompare（多年同指标对比）
+    3. 水情分析模式（waterLevel）：
+       - 左侧水情分析菜单（可折叠）：
+         * 单站水情过程线：StationWaterLevelHistory（水位/闸下水位/流量时序）
+         * 多站水情对比：WaterLevelMultiStationCompare
+         * 单站多年同步对比：StationYearSyncCompare（多年同期水位/流量）
+    4. 地图类型切换：天地图 / 影像图 / 地形图
+-->
 <script setup>
 import { ref, onMounted, nextTick, watch, onUnmounted } from 'vue'
 import axios from 'axios'
@@ -6,19 +28,24 @@ import tiandituImg from '@/assets/images/ditu/tianditu.jpg'
 import yingxiangtuImg from '@/assets/images/ditu/yingxiangtu.jpg'
 import dixingtuImg from '@/assets/images/ditu/dixingtu.jpg'
 import dituIcon from '@/assets/images/ditu/ditu.jpg'
+// 水位站图标（默认/激活）
 import slIcon from '@/assets/images/gis/sl1.png'
 import slIconActive from '@/assets/images/gis/sl2.png'
+// 水质自动站图标
 import szzdzIcon from '@/assets/images/gis/szzdz1.png'
 import szzdzIconActive from '@/assets/images/gis/szzdz2.png'
+// 水环境排污口图标
 import sjhpIcon from '@/assets/images/gis/sjhp1.png'
 import sjhpIconActive from '@/assets/images/gis/sjhp2.png'
 import swjcIcon from '@/assets/images/gis/ls_swjc.png'
 import szzdzMarkerIcon from '@/assets/images/gis/szzdz.png'
 import sjhpMarkerIcon from '@/assets/images/gis/sjhp.png'
 import { tba_area_paths, hh_1h3h } from '@/assets/data/map_tba.js'
+// 水质分析组件
 import SingleStationWaterQuality from '@/components/SingleStationWaterQuality.vue'
 import StationYearCompare from '@/components/StationYearCompare.vue'
 import MultiStationCompare from '@/components/MultiStationCompare.vue'
+// 水情分析组件
 import StationWaterLevelHistory from '@/components/StationWaterLevelHistory.vue'
 import StationYearSyncCompare from '@/components/StationYearSyncCompare.vue'
 import WaterLevelMultiStationCompare from '@/components/WaterLevelMultiStationCompare.vue'

src/views/Shl.vue

@@ -1,3 +1,10 @@
+<!--
+  Shl.vue - 水葫芦监测页面（预留）
+
+  功能说明：
+    水葫芦监测专题页面，当前为预留占位页面，待后续开发。
+    水葫芦是太湖流域重要的水生态问题之一，该模块计划展示水葫芦分布、面积变化等。
+-->
 <template>
   <div></div>
 </template>

src/views/SysManage.vue

@@ -1,9 +1,30 @@
+<!--
+  SysManage.vue - 后台系统管理页面（多Tab共享组件）
+
+  功能说明：
+    通过路由路径动态切换显示不同的管理功能，共 7 个子模块：
+    1. 单位管理（unit）   - 统一数据服务提供单位
+    2. 用户管理（user）   - 用户列表 + 搜索 + 多选
+    3. 角色管理（role）   - 角色列表
+    4. 资源管理（resource）- 业务资源配置
+    5. 帮助目录（cate）   - 帮助分类目录
+    6. 帮助文档（article） - 帮助文档列表
+    7. 用户反馈（feedback）- 用户反馈列表
+
+    每个模块都包含：
+    - 数据表格（带序号、全选）
+    - 分页组件（页码跳转、每页条数切换、省略号页码）
+    - 增/删/改/查操作按钮
+    - 弹窗表单（新增/编辑）
+    - 数据来源于 mockDataService
+-->
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { dataService } from '@/data'
 
 const route = useRoute()
+// 根据路由路径自动识别当前管理页面
 const currentPage = computed(() => {
   const path = route.path
   if (path.includes('/admin/system/unit')) return 'unit'
@@ -18,13 +39,8 @@ const currentPage = computed(() => {
 
 const pageTitle = computed(() => {
   const titles = {
-    unit: '单位管理',
-    user: '用户管理',
-    role: '角色管理',
-    resource: '资源管理',
-    cate: '帮助目录',
-    article: '帮助文档',
-    feedback: '用户反馈'
+    unit: '单位管理', user: '用户管理', role: '角色管理',
+    resource: '资源管理', cate: '帮助目录', article: '帮助文档', feedback: '用户反馈'
   }
   return titles[currentPage.value] || '系统管理'
 })

src/views/SystemLog.vue

@@ -1,3 +1,13 @@
+<!--
+  SystemLog.vue - 系统日志页面
+
+  功能说明：
+    展示系统操作日志，用于审计追踪。
+    - 日志表格：序号、操作人、操作时间、日志内容、来源 IP
+    - 分页组件（手动页码跳转、省略号页码）
+    - 清除日志功能
+    - 数据来源：dataService.getSystemLogList()
+-->
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { dataService } from '@/data'

src/views/SystemManage.vue

@@ -1,27 +1,43 @@
-<script setup>import { ref, onMounted, nextTick } from 'vue';
-import * as echarts from 'echarts';
-import Footer from '@/components/Footer.vue';
-import { dataService } from '@/data';
-const helpList = ref([]);
-const currentContent = ref('num_count2.html');
-const showNumCount = ref(true);
-const showUnit = ref(false);
-const showHelp = ref(false);
-const currentTitle = ref('');
-const currentDesc = ref('');
-const qualityData = ref([]);
-const unitList = ref([]);
-// 雷达图实例数组
-const chartInstances = ref([]);
-// 雷达图指标配置
+<!--
+  SystemManage.vue - 系统管理页面（共享质量评估 + 帮助文档）
+
+  功能说明：
+    1. 共享数据质量评估：
+       - 使用 ECharts 雷达图展示各合作单位的共享数据质量
+       - 六个评估维度：站点完整性、指标完整性、历史完整性、数据质量度、共享时效性、数据更新性
+       - 雷达图并排展示多个单位的对比
+    2. 帮助文档：
+       - 左侧文档列表（树形目录）
+       - 右侧文档内容详情
+    3. 合作单位列表展示
+    4. 数据来源：mockDataService（getQualityChartData / getHelpArticleList / getUnitList）
+-->
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import * as echarts from 'echarts'
+import Footer from '@/components/Footer.vue'
+import { dataService } from '@/data'
+
+const helpList = ref([])           // 帮助文档列表
+const currentContent = ref('num_count2.html') // 默认显示文档
+const showNumCount = ref(true)
+const showUnit = ref(false)
+const showHelp = ref(false)
+const currentTitle = ref('')       // 当前文档标题
+const currentDesc = ref('')        // 当前文档内容
+const qualityData = ref([])        // 雷达图数据
+const unitList = ref([])           // 合作单位列表
+const chartInstances = ref([])     // 雷达图实例数组
+
+// 雷达图六维指标配置（满分 100）
 const radarIndicator = [
- { name: '站点完整性', max: 100 },
- { name: '指标完整性', max: 100 },
- { name: '历史完整性', max: 100 },
- { name: '数据质量度', max: 100 },
- { name: '共享时效性', max: 100 },
- { name: '数据更新性', max: 100 }
-];
+  { name: '站点完整性', max: 100 },
+  { name: '指标完整性', max: 100 },
+  { name: '历史完整性', max: 100 },
+  { name: '数据质量度', max: 100 },
+  { name: '共享时效性', max: 100 },
+  { name: '数据更新性', max: 100 }
+]
 onMounted(() => {
  loadHelpList();
  loadQualityChartData();

src/views/UserProfile.vue

@@ -1,3 +1,13 @@
+<!--
+  UserProfile.vue - 用户基本资料编辑页面
+
+  功能说明：
+    用户中心 - 基本资料修改。
+    1. 从 localStorage 读取当前登录用户信息（userId/姓名/邮箱/手机/部门/地址）
+    2. 表单编辑用户信息
+    3. 提交至后端 /mng/user/edit 接口
+    4. 提交成功后刷新页面
+-->
 <script setup>
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'

src/views/UserSecurity.vue

@@ -1,3 +1,13 @@
+<!--
+  UserSecurity.vue - 用户安全设置页面（修改密码）
+
+  功能说明：
+    用户中心 - 修改密码。
+    1. 表单：原密码 + 新密码 + 确认密码
+    2. 前端校验：必填、两次密码一致性
+    3. 提交至后端 /mng/user/changePwd 接口
+    4. 成功后自动清除登录状态，2秒后跳转登录页
+-->
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'

src/views/WaterQualityStats.vue

@@ -1,3 +1,14 @@
+<!--
+  WaterQualityStats.vue - 水质统计图表页面
+
+  功能说明：
+    提供水质站点的历年多指标统计分析和多年对比。
+    1. 站点选择下拉（多选）+ 时间类型（月度/年度）+ 水质指标选择（tp/dox/codmn/nh3n/tn等）+ 多年份选择
+    2. ECharts 折线图：按站点 stcds + 指标 zhibiao + 时间类型 + 年份 加载数据
+    3. 表格：按年份分列展示各时间点的指标值
+    4. 支持的指标：tp(总磷), dox(溶解氧), codmn(高锰酸盐指数), nh3n(氨氮), tn(总氮) 等
+    5. 数据来源：dataService.getSzStationList() + getSzAvgData()
+-->
 <script setup>
 import { ref, onMounted, nextTick, computed } from 'vue'
 import * as echarts from 'echarts'
@@ -5,15 +16,15 @@ import { dataService } from '@/data'
 import { indicatorOptions, indicatorNames, indicatorUnits } from '@/data/mock/shuizhiStats'
 
 const stationOptions = ref([])
-const selectedStation = ref('')
-const selectedType = ref('month')
-const selectedIndicator = ref('tp')
-const selectedYears = ref([String(new Date().getFullYear())])
+const selectedStation = ref('')        // 选中的站点 stcd
+const selectedType = ref('month')      // month / year
+const selectedIndicator = ref('tp')    // 默认总磷
+const selectedYears = ref([String(new Date().getFullYear())]) // 默认当前年份
 const loading = ref(false)
 
-const datatms = ref([])
-const dataList = ref([])
-const stnmStr = ref('')
+const datatms = ref([])     // 时间序列
+const dataList = ref([])    // 原始数据
+const stnmStr = ref('')     // 当前站点名称
 
 const chartContainer = ref(null)
 let chartInstance = null
@@ -29,11 +40,12 @@ const typeOptions = [
   { label: '年度', value: 'year' }
 ]
 
+// 指标中文名和单位
 const zhibiaoName = computed(() => indicatorNames[selectedIndicator.value] || selectedIndicator.value)
 const zhibiaoUnit = computed(() => indicatorUnits[selectedIndicator.value] || '')
 const yearsStr = computed(() => selectedYears.value.join(','))
 
-// 表格表头：时间 + 各年份
+// 表格列：时间 + 各年份
 const tableColumns = computed(() => {
   const cols = [{ label: '时间', key: 'time' }]
   selectedYears.value.forEach(y => {

src/views/WaterStats.vue

@@ -1,15 +1,26 @@
+<!--
+  WaterStats.vue - 水情统计图表页面
+
+  功能说明：
+    提供单个水情站点的历年数据统计分析。
+    1. 站点选择下拉 + 时间类型切换（月度/年度）+ 年份选择
+    2. ECharts 折线图：按站点 stcd 加载月度/年度平均水位/流量数据
+    3. 表格：显示各时间点的详细数值
+    4. 数据来源：dataService.getSwStationList() + getSwAvgData()
+    - 涵盖的业务代码：JS_SL_RH, TBA_SW_1H2H, ZJ_SL_RH, SH_SW_LL 等 20+ 种水情业务代码
+-->
 <script setup>
 import { ref, onMounted, nextTick } from 'vue'
 import * as echarts from 'echarts'
 import { dataService } from '@/data'
 import { getGxUnit } from '@/data/mock/shuiqingStats'
 
-// 业务代码过滤
+// 涵盖的水情相关业务代码（20+ 种）
 const typeCode = 'JS_SL_RH,TBA_SW_1H2H,ZJ_SL_RH,SH_SW_LL,TBA_SLDD_GC,TBA_STSW_TH,ZJ_SL_GCDD,ZL_TBA_SJ,SH_ST_SJ,TBA_SZ_1H2H,TBA_SZY_SJ_RIVER,WJ_PW_METAL,SH_SW_ZDZ,JS_SL_GCDD,WJ_PW_NORM,WJ_PW2,JS_SL_SW,ZJ_SL_SW,TBA_SZY_RH,TBA_SZY_SJ_BASIN,TBA_SZY_LZJC'
 
 const stationOptions = ref([])
 const selectedStation = ref('')
-const selectedType = ref('month')
+const selectedType = ref('month')  // month / year
 const selectedYear = ref(String(new Date().getFullYear()))
 const loading = ref(false)
 

src/views/Xaj.vue

@@ -1,3 +1,22 @@
+<!--
+  Xaj.vue - 新安江流域页面（GIS + 数据查询 + 共享目录）
+
+  功能说明：
+    新安江流域水量调度专题页面。
+    1. GIS展示模式（menu=1）：
+       - 天地图底图，双层专题图层切换
+       - "水资源情势"标签（waterResource）：雨量站/蒸发站/径流站/水库 四类标记 + 二级区划面
+       - "开发利用情况"标签（economy）：取水户（工业/公共供水/服务业）+ 县级区划面
+       - 图例选择器 + 图层开关
+       - 县区域点击弹窗（ECharts 柱状图展示县级用水数据）
+       - 底图类型切换（天地图/影像图/地形图）
+    2. 数据查询模式（menu=2）：
+       - XajDataQuery：按单位切换（太湖局/安徽水利/浙江水利/国网华东/新安江电厂/黄山/淳安/地方/全流域）
+       - 各单位的子业务按钮（生态断面/雨量站/蒸发站/径流站/取水户/水库等）
+       - 表格展示 + 文件上传功能
+    3. 共享目录模式（menu=3）：
+       - XajSharedDirectory：新安江流域各方共享数据资源列表
+-->
 <script setup>
 import { ref, onMounted, nextTick, reactive, computed } from 'vue'
 import axios from 'axios'

src/views/XajDataQuery.vue

@@ -1,3 +1,14 @@
+<!--
+  XajDataQuery.vue - 新安江流域数据查询页面
+
+  功能说明：
+    新安江流域水量调度数据表格查询（嵌入在 Xaj.vue 中）。
+    1. 业务单位切换（9家单位）：太湖局、安徽水利厅、浙江水利厅、国网华东分部、
+       新安江电厂、黄山市水利局、淳安县水利水电局、地方人民政府、新安江流域（全流域）
+    2. 各单位的业务按钮：生态断面、雨量站、蒸发站、径流站、重点取用水名录、水库、填报等
+    3. 数据表格 + 文件上传功能
+    4. 数据来源：mockDataService（getXajStationData）
+-->
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
 import { mockDataService } from '@/data/mock/mockService'

src/views/Yjjt.vue

@@ -1,3 +1,10 @@
+<!--
+  Yjjt.vue - 引江济太专题页面（预留）
+
+  功能说明：
+    引江济太工程数据展示，当前为预留占位页面，待后续开发。
+    引江济太（引长江水补给太湖）是太湖流域重要的水资源调配工程。
+-->
 <template>
   <div></div>
 </template>