排口溯源系统 — PC 前端

厦门翔安区排口溯源监管平台 PC 管理端（Vue 3 + Vite + Element Plus）。

推荐联调模式：VITE_USE_API=true 对接 Solon 后端；VITE_USE_API=false 时可离线使用 Mock 数据。

功能概览

模块	路由	说明
登录	/login	四角色快速登录 + 账号密码；可扫码下载移动端 App
移动端分发	登录页 / 侧栏	二维码弹窗（需配置 VITE_APP_DOWNLOAD_URL）
工作台	/dashboard	四象限指标、水质周趋势
一张图	/map	排口/汇水区/村庄/水系；未配置 Key 时为简易 SVG 地图
工单	/list/work-orders	八态闭环、标题列、Excel 导出
水质监测	/water-quality/*	监测记录 / 异常排口 / 多排口与多时段对比
排口台账	/outlets	CRUD、汇水区编辑
村庄/支流	/regions	CRUD、Excel 导入导出
用户管理	/users	CRUD、分页列表
H5 原型	/m/*	联调用移动端页面，非正式 App 验收

默认测试账号

账号	密码	角色
grid	123456	网格员
operator	123456	部门整改人员
dept	123456	部门接收人
admin	123456	系统管理员

快速启动

npm install
npm run dev      # http://localhost:5173
npm run build
npm run preview

.env.development 示例：

VITE_API_BASE=/api/v1
VITE_USE_API=true
VITE_TIANDITU_KEY=你的天地图Web端Key
# 可选：移动端 APK 扫码下载（路径须与 Nginx /downloads/ 一致）
VITE_APP_DOWNLOAD_URL=/downloads/xiangan-paikou-1.0.0.apk
VITE_APP_VERSION=1.0.0

天地图 Key 申请：https://console.tianditu.gov.cn/

扫码下载 App：配置 VITE_APP_DOWNLOAD_URL 后，登录页与侧栏显示入口；二维码对非 ASCII 文件名自动 URL 编码。部署说明见 宝塔部署手册 §7.3、App-Android打包指南 §七。

项目结构

src/
├── views/           # PC 页面
├── mobile/          # H5 联调原型
├── components/      # 公共组件（含 AppDownloadQrDialog 扫码下载）
├── api/             # 后端 API 封装
├── services/        # mockApi 分流、auth
└── utils/           # 地图、工单状态、appDownload、clipboard 等

文档

• 运行部署手册
• 宝塔部署手册
• App-Android打包指南
• PRD-V2.1-开发进度
• PRD-排口溯源系统