# 全要素采集管理系统_前端

**Repository Path**: geo_technology/task_management_system_front_end

## Basic Information

- **Project Name**: 全要素采集管理系统_前端
- **Description**: vue/vite/tYpescript前端系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-07
- **Last Updated**: 2026-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 遥感影像矢量化作业管理系统 — 前端

对应《接口定义文档 V1.2》的前端实现，配套后端仓库 `task_management_system_back_end`。

- 技术栈：Vue 3 / TypeScript / Vite / Pinia / Vue Router / Element Plus / OpenLayers / ECharts
- 主题：低饱和度绿色（sage/moss 系），全局 CSS 变量 + Element Plus 主色覆盖
- 定位：流程管理、质检、日报、统计看台与批次可视化；**不提供绘图编辑**，地图仅展示

## 快速开始

```bash
# 1. 安装依赖（本地 npm 缓存，避免用户目录权限问题）
npm install --cache ./.npm-cache

# 2. 启动后端（详见后端 README），默认 http://127.0.0.1:3000
#    .env.development 中 VITE_PROXY_TARGET 指向后端

# 3. 启动前端（开发模式，/api 自动代理到后端）
npm run dev            # http://localhost:5173

# 4. 生产构建 / 类型检查
npm run build          # vue-tsc + vite build，产物在 dist/
npm run typecheck
```

默认管理员 `admin / Admin@123456`（由后端 `npm run seed:admin` 初始化）。

## 目录结构

```
src/
├── api/            # axios 客户端 + 13 个模块接口（对齐后端路由）
├── components/     # StatusTag / CategoryBar / EChart 通用组件
├── layouts/        # MainLayout（侧边栏 + 顶栏 + 多角色身份切换）
├── router/         # 路由 + 登录/角色守卫
├── stores/         # Pinia：auth（token/用户/多角色身份）、app
├── styles/         # 主题变量（低饱和绿）、基础样式、Element Plus 覆盖
├── types/          # 全局类型与枚举
├── utils/          # 状态元信息、格式化工具
└── views/          # 12 个业务页面
    ├── LoginView / DashboardView / MapView / SheetView / ReviewView
    ├── DailyReportView / StatisticsView / ArchiveView
    ├── UserManageView / GroupManageView / AuditLogView
    └── tasks/（TaskListView / TaskDetailView）
```

## 页面与角色

| 页面 | 路径 | 角色 | 说明 |
|---|---|---|---|
| 登录 | /login | 公开 | 低饱和绿主题卡片 |
| 管理看台 | /dashboard | admin | 积压卡片、小组排名、批次八状态分布、14 日趋势（ECharts） |
| 任务批次 | /tasks | 登录用户 | GeoJSON 上传（字段参数化/默认分组/切片模式）、列表、详情（八状态卡片+图幅表+分配分组） |
| 批次地图 | /map | 登录用户 | OpenLayers 八状态着色（一检驳回斜纹）、图例筛选、点击弹窗、512 切片切换 |
| 图幅管理 | /sheets | DP/admin | 随机领取（数量/分组）、进度登记、提交一检 |
| 质检中心 | /reviews | QCI/QCII/admin | 待检队列、通过、驳回（问题类型+原因必填） |
| 工作量日报 | /reports | DP/admin | Toolbox 密文粘贴→解密预览→落库、手动录入（七类目勾选）、复制昨日、提交/确认/退回 |
| 统计报表 | /statistics | 按角色 | 个人单日/单月（图表）、质检统计、小组/成员作业量、批次统计、CSV 导出 |
| 成果库 | /archive | admin | 台账查询、管理台账/成果位置 GeoJSON 导出 |
| 用户管理 | /users | admin | 多角色维护、启停 |
| 分组管理 | /groups | admin | DP 多选 + QCI/QCII 配置、成员与角色联动、详情统计 |
| 审计日志 | /audit | admin | 动作/对象/身份过滤 |

## 设计要点

- **多角色身份**：顶栏可切换 `X-Active-Role`（admin/DP/QCI/QCII），写操作按当次身份审计，避免多角色责任混淆。
- **八状态地图**：待领取灰、作业中蓝、待一检橙、一检驳回红（斜纹）、一检通过浅绿、二检驳回深红、二检通过深绿、已入库紫低透明，与需求 5.4 一致。
- **低饱和绿主题**：`--brand-primary: #4d7a5e` 主色，侧边栏深苔绿 `#212f27`，页面底色灰绿 `#f3f6f2`，地图画布叠加 `saturate(0.82)` 滤镜统一观感。
- **接口约定**：统一 `{code, message, data}` 信封；axios 拦截器自动携带 token 与活动角色，401 自动跳登录。

## 环境变量

| 变量 | 说明 |
|---|---|
| `VITE_PROXY_TARGET` | 开发环境后端地址（vite.config.ts 代理），默认 `http://127.0.0.1:3000` |
| `VITE_API_BASE` | 生产环境 API 前缀，默认 `/api`（部署时由网关反代） |