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

基于 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   # 水库图表组件
│   ├── SidebarButtons.vue   # 侧边栏快捷按钮
│   ├── DeviceInfoPanel.vue  # 设备信息面板
│   ├── DeviceHealthPanel.vue# 设备健康度面板
│   ├── DeviceRightPanel.vue # 设备右侧详情面板
│   ├── DeviceArchivePanel.vue # 设备档案面板
│   ├── TempStressCard.vue   # 温度应力卡片
│   ├── HydrologyForecastPanel.vue # 水文预报面板
│   ├── DamDeformSection.vue # 坝体形变监测可视化（位移分布 + 测点数据）
│   └── DamSeepageSection.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              # 巡检计划
│       ├── PatrolPlanCreateView.vue        # 巡检计划新建
│       ├── PatrolRecordView.vue            # 巡检记录
│       ├── PatrolHiddenView.vue            # 隐患台账
│       ├── WaterRainView.vue               # 水雨情实时监测
│       ├── HydroMapView.vue                # 水情地图（AntV L7）
│       ├── HydroHistoryView.vue            # 水文历史数据
│       ├── HydroForecastView.vue           # 水情预报
│       ├── WaterResourceAllocationView.vue # 水资源调度（7 个功能标签页）
│       ├── GateControlAdminView.vue        # 闸门运行控制
│       ├── BenefitSummaryView.vue          # 工程效益
│       ├── VideoLiveView.vue               # 视频监控 - 实时画面
│       ├── VideoDeviceView.vue             # 视频监控 - 设备管理
│       ├── VideoCaptureView.vue            # 视频监控 - 抓拍记录
│       ├── ArchiveFilesView.vue            # 资料档案 - 工程档案
│       ├── ArchiveOrdersView.vue           # 资料档案 - 调令文件
│       ├── ArchiveLifecycleView.vue        # 资料档案 - 全生命周期
│       ├── SysRoleView.vue                 # 系统权限 - 角色管理
│       ├── SysUserView.vue                 # 系统权限 - 用户账号
│       └── SysLogView.vue                  # 系统权限 - 操作日志
│
└── assets/                  # 静态资源
    ├── AlibabaPuHuiTi-3/    # 阿里普惠体字库
    ├── images/              # 图片资源（背景图、图标、示例图片）
    │   ├── Heilin/          # 测站设备图标
    │   └── xunjian/         # 巡检相关图片
    ├── Mesh/                # 3D 模型（乌拉海沟水库.glb）
    └── video/               # 视频资源
```

## 架构说明

### 双模式架构

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

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

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

```
├── 首页
├── 日常巡检
│   ├── 巡检计划
│   ├── 巡检记录
│   └── 隐患台账
├── 设备运维
├── 闸门控制
├── 水雨情监测
│   ├── 实时监测
│   └── 历史数据
├── 水资源调度
│   ├── 供水水量
│   └── 生态补水
├── 工程效益
├── 资料档案
│   ├── 工程档案
│   ├── 调令文件
│   └── 全生命周期
└── 系统权限
    ├── 角色管理
    ├── 用户账号
    └── 操作日志
```

### 工程安全运维页面（EngineeringSafetyView）

工程安全运维页面采用 **左侧面板 + 右侧面板** 布局：

- **左侧面板**：安全状态评估、巡检记录、坝体安全监测（形变/渗压 tab 切换）
- **右侧面板**：设备安全（设备完好率仪表盘、阈值报警、设备清单树）

坝体安全监测包含两个子组件：
- **DamDeformSection** — 坝体形变监测：位移分布图 + 箭头向量 + 测点数据表格
- **DamSeepageSection** — 坝体渗压监测：浸润线（实测/设计/警戒）+ 渗压计点位 + 数据表格

### 核心依赖说明

| 依赖 | 版本 | 说明 |
|------|------|------|
| 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 三维底图）
  - 组件背景: `rgba(0, 20, 40, 0.5)` 半透明深蓝
  - 边框光效: `rgba(0, 212, 255, 0.12)` 青色发光描边
  - 文字颜色: `#e0fcff`（主）、`rgba(123, 190, 246, 0.7)`（辅）
  - Canvas 图表: 深色网格 + 渐变填充 + 发光线条
- **后台工作台**：轻量化蓝白玻璃拟态风（白色半透明背景 + backdrop-filter 模糊）
- **自适应**：autofit.js（设计稿 1920×1080）
- **字体**：阿里巴巴普惠体（Alibaba PuHuiTi-3）

### 大坝渗流监测单位说明

大坝渗流监测（渗压计）中，**库水位、设计水位、渗压计实测值等统一使用 `m`（米）为单位，这符合水利行业专业标准**。

- 渗压计测量的是渗透（孔隙）水压力，工程上通常将压力值换算为**等效水头高度（米）** 进行记录和展示
- 换算依据：**1 米水柱 ≈ 9.81 kPa**
- 行业规范中，水位高程计算公式直接以米为单位输出
- 测压管读数需换算为等效水头，以米为单位记录（参照《混凝土坝安全监测技术规范》）