# 乌拉海沟水库安全监测平台

基于 Vue 3 + Vite 构建的水库智慧管理平台，采用 **前台大屏 + 后台工作台** 双模式架构。

## 技术栈

| 技术 | 用途 |
|------|------|
| Vue 3 | 前端框架 |
| Vite 7 | 构建工具 |
| Element Plus | 后台 UI 组件库 |
| ECharts 6 | 图表可视化 |
| AntV L7 | 地理信息可视化（2D 地图） |
| Cesium | 三维地球可视化 |
| autofit.js | 大屏自适应缩放 |
| axios | HTTP 请求 |

## 项目结构

```
src/
├── main.js                  # 应用入口，注册 Element Plus / Router / autofit
├── App.vue                  # 根组件，初始化 autofit 自适应缩放
├── style.css                # 全局样式
│
├── router/
│   └── index.js             # 路由配置（单页路由，首页加载全部视图）
│
├── components/              # 公共组件（前台大屏/跨页面复用）
│   ├── TopNav.vue           # 顶部导航栏（系统标题 + 7 个导航按钮）
│   ├── CesiumMap.vue        # Cesium 三维地图组件
│   ├── GradientOverlay.vue  # 四周暗角渐变装饰层
│   ├── DataCard.vue         # 数据卡片组件
│   ├── ReservoirChart.vue   # 水库图表组件
│   └── ...                  # 其他辅助组件
│
├── views/
│   ├── HomeView.vue         # 主容器页面：前台大屏入口
│   │                        #   - 通过 TopNav 导航按钮切换视图
│   │                        #   - 底部渲染各主页面（OverviewView / GateControlView 等）
│   │                        #   - 显示 Cesium 三维地图作为底图
│   │
│   ├── mainPages/           # 【前台大屏】页面
│   │   ├── OverviewView.vue           # 流域总览
│   │   ├── HydrologyForecastView.vue  # 水文四预
│   │   ├── GateControlView.vue        # 闸门控制（大屏版）
│   │   ├── EngineeringSafetyView.vue  # 工程安全运维
│   │   ├── LifecycleView.vue          # 全生命周期管理
│   │   ├── VideoMonitorView.vue       # 视频监控
│   │   ├── InspectionView.vue         # 管线监测
│   │   ├── PatrolView.vue             # 安全巡护
│   │   └── WorkspaceView.vue          # 后台工作台入口
│   │
│   └── admin/               # 【后台工作台】页面
│       ├── DeviceMaintainView.vue          # 设备运维管理
│       ├── PatrolPlanView.vue              # 巡检计划
│       ├── PatrolRecordView.vue            # 巡检记录
│       ├── PatrolHiddenView.vue            # 隐患台账
│       ├── WaterRainView.vue               # 水雨情实时监测
│       ├── HydroMapView.vue                # 水情地图（AntV L7）
│       ├── HydroHistoryView.vue            # 水文历史数据
│       ├── HydroForecastView.vue           # 水情预报
│       ├── WaterResourceAllocationView.vue # 水资源调度（7 个功能标签页）
│       ├── GateControlAdminView.vue        # 闸门运行控制
│       └── BenefitSummaryView.vue          # 工程效益
│
└── assets/                  # 静态资源
    ├── AlibabaPuHuiTi-3/    # 阿里普惠体字库
    ├── images/              # 图片资源（背景图、图标、示例图片）
    │   ├── Heilin/          # 测站设备图标
    │   └── xunjian/         # 巡检相关图片
    ├── Mesh/                # 3D 模型（乌拉海沟水库.glb）
    └── video/               # 视频资源
```

## 架构说明

### 双模式架构

系统分为 **前台大屏模式** 和 **后台工作台模式**：

- **前台大屏**（`HomeView.vue → mainPages/*`）
  - 全屏大屏展示，背景图片 + Cesium 三维地图
  - 顶部导航栏（综合首页 / 水情测报 / 工程安全 / 水资源调度 / 闸门控制 / 视频监控 / 生命周期）
  - 点击「工作台」按钮切换到后台模式

- **后台工作台**（`WorkspaceView.vue → admin/*`）
  - 左侧树形菜单导航、右侧内容区布局
  - 涵盖日常管理全部业务功能
  - 菜单结构：

```
├── 首页
├── 视频监控
├── 日常巡检
│   ├── 巡检计划
│   ├── 巡检记录
│   └── 隐患台账
├── 设备运维
├── 闸门控制
├── 水雨情监测
│   ├── 实时监测
│   ├── 水情地图
│   ├── 历史数据
│   └── 水情预报
├── 水资源调度
│   ├── 调度总览
│   ├── 灌溉供水
│   ├── 人畜饮水
│   ├── 工业供水
│   ├── 生态补水
│   ├── 调度计划
│   └── 供水网络
├── 工程效益
├── 资料档案
└── 系统权限
```

### 核心依赖说明

| 依赖 | 版本 | 说明 |
|------|------|------|
| vue | ^3.5 | 框架 |
| vue-router | ^5.0 | 路由 |
| element-plus | ^2.13 | UI 组件库 |
| echarts | ^6.0 | 图表库 |
| @antv/l7 | ^2.28 | 2D GIS 地图 |
| cesium | ^1.139 | 3D 地球 |
| mapbox-gl | ^3.24 | L7 地图底图引擎 |
| autofit.js | ^3.2 | 大屏自适应 |
| axios | ^1.13 | HTTP 请求 |

### 启动方式

```bash
npm install
npm run dev
```

### 设计规范

- 前台大屏：深色科技风（蓝黑色调 + 渐变发光文字 + Cesium 三维底图）
- 后台工作台：轻量化蓝白玻璃拟态风（白色半透明背景 + backdrop-filter 模糊）
- 自适应：autofit.js（设计稿 1920×1080）
- 字体：阿里巴巴普惠体（Alibaba PuHuiTi-3）