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   # 水库图表组件
│   └── ...                  # 其他辅助组件
│
├── 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 请求

启动方式

npm install
npm run dev

设计规范

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