Wulaer

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

基于 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 请求

启动方式

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
• 行业规范中，水位高程计算公式直接以米为单位输出
• 测压管读数需换算为等效水头，以米为单位记录（参照《混凝土坝安全监测技术规范》）