# 海洋项目管理系统 - 用户交互文档

## 文档概述

本文档描述用户如何使用海洋项目管理系统的各个功能模块，包括页面间的交互流程、操作步骤和预期结果。

---

## 目录

1. [系统登录](#1-系统登录)
2. [主界面导航](#2-主界面导航)
3. [仪表盘使用](#3-仪表盘使用)
4. [项目管理](#4-项目管理)
5. [用户管理（管理员）](#5-用户管理管理员)
6. [项目统计](#6-项目统计)
7. [权限说明](#7-权限说明)

---

## 1. 系统登录

### 1.1 访问系统

**操作步骤**：
1. 打开浏览器
2. 在地址栏输入系统URL（如：http://localhost:3000）
3. 按Enter键

**预期结果**：
- 显示登录页面
- 页面中央显示登录表单
- 表单包含：用户名输入框、密码输入框、记住密码复选框、登录按钮

### 1.2 登录流程

**场景1：正常登录**

**操作步骤**：
1. 在"用户名"输入框中输入有效的用户名
2. 在"密码"输入框中输入对应的密码
3. （可选）勾选"记住密码"
4. 点击"登录"按钮

**预期结果**：
- 登录按钮显示加载状态（旋转图标）
- 登录成功后，页面跳转到仪表盘
- 顶部导航栏显示当前登录用户信息

**场景2：登录失败**

**操作步骤**：
1. 输入错误的用户名或密码
2. 点击"登录"按钮

**预期结果**：
- 登录按钮恢复原始状态
- 输入框下方显示红色错误提示："用户名或密码错误"
- 用户可以重新输入

**场景3：字段验证**

**操作步骤**：
1. 不输入任何内容，直接点击"登录"按钮
2. 或者只输入用户名，不输入密码

**预期结果**：
- 必填字段显示红色边框
- 字段下方显示提示信息："请输入用户名"或"请输入密码"
- 登录按钮无法提交

### 1.3 记住密码功能

**操作步骤**：
1. 勾选"记住密码"
2. 输入用户名和密码
3. 点击"登录"

**预期结果**：
- 下次访问系统时，用户名和密码自动填充
- 复选框保持选中状态

---

## 2. 主界面导航

### 2.1 界面布局说明

登录成功后，系统进入主界面，包含以下部分：

```
┌─────────────────────────────────────────────────────┐
│  顶部导航栏                                           │
│  - 左侧：系统Logo                                     │
│  - 右侧：当前用户信息、登出按钮                        │
├──────────┬──────────────────────────────────────────┤
│          │                                          │
│ 侧边栏   │  内容区                                    │
│ - 仪表盘 │                                           │
│ - 项目   │  动态显示当前页面的内容                     │
│ - 用户   │                                           │
│ - 统计   │                                           │
│          │                                           │
└──────────┴──────────────────────────────────────────┘
```

### 2.2 侧边栏导航

**操作步骤**：
1. 将鼠标悬停在侧边栏菜单项上
2. 观察菜单项的高亮状态
3. 点击要访问的菜单项

**预期结果**：
- 鼠标悬停时，菜单项背景变为浅蓝色
- 当前激活的菜单项显示蓝色左边框和浅蓝色背景
- 点击后，内容区显示对应页面内容
- 页面URL自动更新

### 2.3 用户信息查看

**操作步骤**：
1. 查看顶部导航栏右侧
2. 可以看到当前登录用户的真实姓名和部门

**预期结果**：
- 显示格式："真实姓名 (部门)"

### 2.4 登出系统

**操作步骤**：
1. 点击顶部导航栏右侧的"登出"按钮

**预期结果**：
- 弹出确认对话框："确定要退出登录吗？"
- 点击"确定"，页面跳转到登录页
- 点击"取消"，对话框关闭，保持登录状态

---

## 3. 仪表盘使用

### 3.1 仪表盘概览

仪表盘是系统默认页面，提供项目概览和快速操作入口。

**页面包含**：
- 4个统计卡片（项目总数、进行中、已完成、总合同金额）
- 项目趋势图表
- 最近项目列表

### 3.2 查看统计卡片

**操作步骤**：
1. 进入仪表盘页面
2. 查看页面顶部的4个统计卡片

**卡片内容**：
1. **项目总数**：显示系统中所有项目的数量
2. **进行中**：显示正在进行的项目数量
3. **已完成**：显示已完成的项目数量
4. **总合同金额**：显示所有项目的合同金额总和（单位：万元）

**预期结果**：
- 每个卡片显示标签和数值
- 鼠标悬停时，卡片轻微上浮并显示阴影
- 数据实时显示，反映当前项目状态

### 3.3 查看项目趋势图

**操作步骤**：
1. 查看页面左侧的"项目趋势图"
2. 将鼠标悬停在图表的柱状或折线上

**预期结果**：
- 图表显示按月/年的项目数量或金额趋势
- 鼠标悬停时，显示该时间点的详细数据（Tooltip）
- 支持点击图例切换显示的指标

### 3.4 查看最近项目

**操作步骤**：
1. 查看页面右侧的"最近项目"列表
2. 鼠标悬停在某个项目上

**预期结果**：
- 列表显示最近创建或修改的项目
- 每个项目显示：项目名称、创建日期、合同金额
- 鼠标悬停时，项目背景变为浅灰色
- 鼠标指针变为手型

### 3.5 快速跳转

**操作步骤**：
1. 点击某个统计卡片
2. 或点击最近项目列表中的某个项目

**预期结果**：
- 点击统计卡片：跳转到对应的项目统计页面
- 点击最近项目：跳转到该项目详情页

---

## 4. 项目管理

### 4.1 进入项目列表

**操作步骤**：
1. 点击侧边栏的"项目管理"菜单
2. 等待页面加载完成

**预期结果**：
- 内容区显示项目列表页面
- 显示工具栏（搜索、筛选、新建按钮）
- 显示项目表格（当前页的项目数据）
- 显示分页控件

### 4.2 搜索项目

**场景1：按合同编号搜索**

**操作步骤**：
1. 在搜索框中输入合同编号（如："PRJ001"）
2. 点击搜索图标或按Enter键

**预期结果**：
- 表格自动过滤，只显示匹配的项目
- 搜索框显示搜索图标
- 可以点击搜索图标右侧的"×"清除搜索条件

**场景2：按项目名称搜索**

**操作步骤**：
1. 在搜索框中输入项目名称或关键词（如："基建"）
2. 点击搜索图标或按Enter键

**预期结果**：
- 表格显示包含该关键词的项目
- 支持模糊匹配

### 4.3 筛选项目

**场景1：按工程类别筛选**

**操作步骤**：
1. 点击"工程类别"下拉框
2. 选择一个类别（如："基建"）

**预期结果**：
- 下拉框显示选中类别
- 表格只显示该类别的项目
- 其他筛选条件同时生效（AND关系）

**场景2：按所属项目部筛选**

**操作步骤**：
1. 点击"项目部"下拉框
2. 选择一个项目部（如："项目部一"）

**预期结果**：
- 下拉框显示选中项目部
- 表格只显示该项目的项目

**场景3：按日期范围筛选**

**操作步骤**：
1. 点击"签订日期"日期选择器
2. 选择开始日期和结束日期
3. 点击"确定"

**预期结果**：
- 表格只显示签订日期在范围内的项目
- 日期显示为："YYYY-MM-DD ~ YYYY-MM-DD"

**场景4：按合同金额筛选**

**操作步骤**：
1. 点击"合同金额"下拉框
2. 输入最小金额和最大金额（如：100 - 1000）
3. 点击"确定"

**预期结果**：
- 表格只显示合同金额在范围内的项目
- 金额单位：万元

**场景5：组合筛选**

**操作步骤**：
1. 同时设置多个筛选条件
2. 例如：工程类别="基建"、签订日期="2026-01-01 ~ 2026-01-31"

**预期结果**：
- 表格显示同时满足所有条件的项目
- 每个筛选条件都显示为标签，可以单独移除

### 4.4 排序项目

**操作步骤**：
1. 点击表格标题栏（如："签订日期"或"合同金额"）

**预期结果**：
- 第一次点击：升序排列（↑箭头）
- 第二次点击：降序排列（↓箭头）
- 第三次点击：取消排序
- 箭头显示在列标题右侧

### 4.5 查看项目详情

**操作步骤**：
1. 在项目列表中找到要查看的项目
2. 点击该行的"查看"按钮

**预期结果**：
- 页面跳转到项目详情页
- 显示项目的完整信息
- 信息按分组显示（基本信息、项目时间、成本管理等）

### 4.6 新建项目（市场部、管理员）

**操作步骤**：
1. 点击工具栏的"新建项目"按钮
2. 弹出"新建项目"模态框
3. 填写必填字段：
   - 合同编号 *
   - 项目名称 *
   - 工程类别 *
   - 合同金额 *
4. （可选）填写其他字段
5. 点击"保存"按钮

**预期结果**：
- 必填字段为空时，显示错误提示
- 保存成功后，模态框关闭
- 项目列表刷新，新项目出现在列表中
- 显示成功提示："项目创建成功"

### 4.7 编辑项目

**场景1：编辑自己创建的项目（市场部、管理员）**

**操作步骤**：
1. 在项目列表中找到要编辑的项目
2. 点击该行的"编辑"按钮
3. 弹出"编辑项目"模态框，显示项目当前信息
4. 修改需要更新的字段
5. 点击"保存"按钮

**预期结果**：
- 所有字段都可以编辑
- 保存成功后，模态框关闭
- 项目列表刷新，显示更新后的信息
- 显示成功提示："项目更新成功"

**场景2：更新财务信息（其他部门）**

**操作步骤**：
1. 点击项目行的"查看"按钮
2. 进入项目详情页
3. 点击"编辑"按钮
4. 模态框中只显示可编辑的字段（成本、财务、进度等）
5. 修改需要更新的字段
6. 点击"保存"按钮

**预期结果**：
- 基础信息字段（合同编号、项目名称等）显示为只读
- 只能编辑成本、财务、进度相关字段
- 保存成功后，信息更新

### 4.8 删除项目（市场部、管理员）

**操作步骤**：
1. 在项目列表中找到要删除的项目
2. 点击该行的"删除"按钮
3. 弹出确认对话框："确定要删除该项目吗？"
4. 点击"确定"

**预期结果**：
- 确认对话框显示
- 点击"确定"后，项目被删除
- 列表刷新，该项目不再显示
- 显示成功提示："项目删除成功"
- 点击"取消"，对话框关闭，项目不被删除

### 4.9 分页浏览

**操作步骤**：
1. 查看页面底部的分页控件
2. 点击页码按钮
3. 或点击"上页"/"下页"按钮

**预期结果**：
- 显示当前页码和总页数
- 点击页码后，表格显示对应页的数据
- 第一页时，"上页"按钮禁用
- 最后一页时，"下页"按钮禁用

### 4.10 项目详情页操作

**场景1：查看详细信息**

**操作步骤**：
1. 在项目详情页浏览各个信息组
2. 向下滚动查看所有信息

**预期结果**：
- 信息按分组显示，每个组用卡片形式展示
- 长文本字段支持悬停显示完整内容
- 日期格式统一为：YYYY-MM-DD
- 金额单位：万元

**场景2：编辑项目**

**操作步骤**：
1. 点击页面右上角的"编辑"按钮
2. 弹出编辑模态框
3. 修改需要更新的字段
4. 点击"保存"

**预期结果**：
- 根据权限显示可编辑字段
- 保存成功后，信息更新

**场景3：删除项目**

**操作步骤**：
1. 点击页面右上角的"删除"按钮
2. 确认删除操作

**预期结果**：
- 项目被删除
- 页面跳转到项目列表页

**场景4：返回列表**

**操作步骤**：
1. 点击面包屑导航中的"项目管理"

**预期结果**：
- 页面跳转到项目列表页

---

## 5. 用户管理（管理员）

### 5.1 进入用户管理

**操作步骤**：
1. 点击侧边栏的"用户管理"菜单

**预期结果**：
- 内容区显示用户列表页面
- 显示工具栏（搜索、新建用户按钮）
- 显示用户表格
- 显示分页控件

**注意**：只有管理员角色才能看到"用户管理"菜单。

### 5.2 搜索用户

**操作步骤**：
1. 在搜索框中输入用户名、真实姓名或邮箱
2. 点击搜索图标或按Enter键

**预期结果**：
- 表格显示匹配的用户
- 支持模糊匹配

### 5.3 新建用户

**操作步骤**：
1. 点击"新建用户"按钮
2. 弹出"新建用户"模态框
3. 填写必填字段：
   - 用户名 *（唯一）
   - 密码 *（最少6位）
   - 真实姓名 *
   - 部门 *
   - 角色 *
4. （可选）填写邮箱和电话
5. 点击"保存"按钮

**预期结果**：
- 必填字段为空时，显示错误提示
- 用户名重复时，显示错误提示："用户名已存在"
- 保存成功后，用户出现在列表中

### 5.4 编辑用户

**操作步骤**：
1. 点击用户行的"编辑"按钮
2. 弹出"编辑用户"模态框
3. 修改需要更新的字段
4. 点击"保存"按钮

**预期结果**：
- 用户名字段为只读，不可修改
- 其他字段可以修改
- 保存成功后，信息更新

### 5.5 删除用户

**操作步骤**：
1. 点击用户行的"删除"按钮
2. 确认删除操作

**预期结果**：
- 用户被删除
- 列表刷新
- 显示成功提示

### 5.6 重置密码

**操作步骤**：
1. 点击用户行的"重置密码"按钮
2. 弹出"重置密码"对话框
3. 输入新密码
4. 点击"确定"

**预期结果**：
- 密码重置成功
- 显示成功提示

---

## 6. 项目统计

### 6.1 进入项目统计

**操作步骤**：
1. 点击侧边栏的"项目统计"菜单

**预期结果**：
- 显示项目统计页面
- 显示筛选工具栏
- 显示统计图表
- 显示分组统计表格

### 6.2 基础统计

**查看内容**：
- 项目总数
- 总投资金额
- 总合同金额
- 总收款金额
- 总付款金额
- 平均收款完成率
- 平均付款完成率
- 平均项目进度

### 6.3 分组统计

**场景1：按工程类别统计**

**操作步骤**：
1. 查看页面上的分组统计图表和表格
2. 默认显示按工程类别分组

**预期结果**：
- 图表显示各类别的项目数量和金额
- 表格显示详细的统计数据

**场景2：按项目部分组**

**操作步骤**：
1. 点击"分组方式"下拉框
2. 选择"所属项目部"

**预期结果**：
- 图表和表格切换为按项目部统计

### 6.4 时间维度统计

**场景1：按月统计**

**操作步骤**：
1. 点击"时间维度"下拉框
2. 选择"按月"
3. 选择时间范围（默认为当前年份）

**预期结果**：
- 显示每月的项目数量和金额
- 折线图显示趋势

**场景2：按年统计**

**操作步骤**：
1. 点击"时间维度"下拉框
2. 选择"按年"

**预期结果**：
- 显示每年的项目数量和金额

### 6.5 筛选统计

**操作步骤**：
1. 在工具栏中选择筛选条件
2. 例如：工程类别="基建"、日期范围="2026-01-01 ~ 2026-01-31"

**预期结果**：
- 所有统计图表和表格只显示符合筛选条件的数据

### 6.6 导出报表

**操作步骤**：
1. 点击工具栏的"导出报表"按钮

**预期结果**：
- 下载Excel文件
- 文件包含当前筛选条件下的所有统计数据
- 文件名格式："项目统计_YYYY-MM-DD.xlsx"

### 6.7 图表交互

**操作步骤**：
1. 鼠标悬停在图表的柱状、饼图或折线上

**预期结果**：
- 显示详细的Tooltip信息
- 显示该数据点的具体数值和占比

---

## 7. 权限说明

### 7.1 角色定义

系统包含3种角色，每种角色有不同的权限：

#### 7.1.1 管理员 (admin)
- **用户管理**：完整权限（创建、编辑、删除、重置密码）
- **项目管理**：完整权限（创建、编辑、删除所有项目）
- **项目统计**：完整权限（查看所有统计数据）
- **其他**：查看所有功能

#### 7.1.2 市场部用户 (market)
- **用户管理**：无权限（看不到"用户管理"菜单）
- **项目管理**：
  - 创建项目
  - 查看所有项目
  - 编辑自己创建的项目（所有字段）
  - 删除自己创建的项目
- **项目统计**：完整权限（查看所有统计数据）

#### 7.1.3 其他部门用户 (other)
- **用户管理**：无权限
- **项目管理**：
  - 不能创建项目
  - 查看所有项目
  - 编辑项目的财务、成本、进度等字段（不能修改基础信息）
  - 不能删除项目
- **项目统计**：完整权限

### 7.2 字段级权限

#### 7.2.1 市场部用户可编辑字段
- 所有字段（包括基础信息、成本、财务等）

#### 7.2.2 其他部门用户可编辑字段
- **成本管理**：
  - 总体成本控制
  - 人工成本（控制、计划、实付）
  - 材料成本（控制、应付、实际、实付）
  - 其他费用（控制、应付、实际）
- **财务信息**：
  - 合同金额
  - 质保金（金额、比例、到期日、退还日期）
  - 结算金额
  - 税金
  - 利润（计划、实际）
- **收款和付款**：
  - 项目进度
  - 应收款和开票
  - 实际收款和收款完成率
  - 应付款和实际付款
  - 未收款和付款完成率
- **结算信息**：
  - 成本结算金额
  - 各类费用结算
  - 到期结算项目统计
- **项目管理**：
  - 所属项目部
  - 项目负责人
  - 工程款拨付方式
  - 存在的问题
  - 建议措施
  - 备注

#### 7.2.3 其他部门用户不可编辑字段
- **基础信息**：
  - 合同编号
  - 供电局项目合同编号
  - 项目名称
  - 子项信息
  - 工程类别
  - 业主信息
  - 中标形式
- **项目时间**：
  - 签订日期
  - 开工日期
  - 计划竣工日期
  - 实际竣工日期

### 7.3 权限提示

当用户尝试执行无权限的操作时：

**场景1：尝试访问无权限的页面**

**操作**：
- 其他部门用户尝试访问"用户管理"菜单

**预期结果**：
- 侧边栏不显示"用户管理"菜单
- 如果直接输入URL访问，显示错误提示："您没有访问该页面的权限"

**场景2：尝试编辑无权限的字段**

**操作**：
- 其他部门用户在编辑项目时，基础信息字段显示为只读

**预期结果**：
- 无权限字段显示为灰色，不可编辑
- 鼠标指针变为禁止符号

**场景3：尝试执行无权限的操作**

**操作**：
- 其他部门用户尝试删除项目

**预期结果**：
- 项目列表不显示"删除"按钮
- 详情页不显示"删除"按钮

---

## 8. 常见操作流程

### 8.1 市场部用户创建项目并跟踪流程

**完整流程**：
1. 登录系统（市场部账号）
2. 进入"项目管理"页面
3. 点击"新建项目"
4. 填写项目基本信息（合同编号、名称、类别、金额等）
5. 保存项目
6. 跟踪项目进度，定期更新收款和付款信息
7. 项目完成后，更新实际竣工日期和结算信息

### 8.2 其他部门用户更新项目信息流程

**完整流程**：
1. 登录系统（其他部门账号）
2. 进入"项目管理"页面
3. 找到要更新的项目
4. 点击"查看"进入详情页
5. 点击"编辑"
6. 更新成本、财务、进度等相关信息
7. 保存更改

### 8.3 管理员查看整体统计流程

**完整流程**：
1. 登录系统（管理员账号）
2. 进入"项目统计"页面
3. 查看基础统计卡片
4. 查看分组统计图表
5. 切换不同的分组方式（工程类别、项目部）
6. 查看时间趋势
7. 导出报表存档

---

## 9. 错误处理

### 9.1 网络错误

**错误提示**："网络连接失败，请检查网络后重试"

**操作建议**：
1. 检查网络连接
2. 刷新页面
3. 如果问题持续，联系系统管理员

### 9.2 服务器错误

**错误提示**："服务器内部错误，请联系管理员"

**操作建议**：
1. 刷新页面重试
2. 联系系统管理员

### 9.3 权限错误

**错误提示**："您没有执行此操作的权限"

**操作建议**：
1. 确认当前用户的角色和权限
2. 联系管理员申请相应权限

### 9.4 数据验证错误

**错误提示**：显示具体的验证错误（如："合同编号不能为空"、"日期格式不正确"）

**操作建议**：
1. 根据提示信息修正输入
2. 确保必填字段都已填写
3. 检查日期格式是否正确（YYYY-MM-DD）

---

## 10. 快捷键

### 10.1 通用快捷键

| 快捷键 | 功能 |
|--------|------|
| Tab | 在表单字段间切换 |
| Shift + Tab | 反向切换字段 |
| Enter | 提交表单或确认操作 |
| Esc | 关闭模态框或取消操作 |

### 10.2 列表页面快捷键

| 快捷键 | 功能 |
|--------|------|
| Ctrl/Cmd + F | 聚焦搜索框 |
| → | 下一页 |
| ← | 上一页 |

---

## 11. 浏览器兼容性

### 11.1 推荐浏览器

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

### 11.2 支持的分辨率

- 最小分辨率：1280 x 720
- 推荐分辨率：1920 x 1080

---

## 12. 性能优化建议

### 12.1 大量数据操作

**场景**：项目列表包含数千条记录

**建议**：
1. 使用筛选条件缩小范围
2. 不要一次性加载所有数据
3. 使用分页功能逐页查看

### 12.2 数据导出

**场景**：导出大量统计数据

**建议**：
1. 先使用筛选条件筛选需要的数据
2. 避免导出所有数据
3. 导出期间不要关闭浏览器

---

## 13. 常见问题 (FAQ)

### Q1: 忘记密码怎么办？

**A**: 联系系统管理员重置密码。管理员在"用户管理"页面点击"重置密码"按钮。

### Q2: 如何批量修改项目？

**A**: 当前版本不支持批量修改，需要逐个编辑项目。

### Q3: 项目创建后可以修改工程类别吗？

**A**: 可以，但有权限限制。市场部用户可以修改自己创建的项目，管理员可以修改所有项目。

### Q4: 如何导出项目数据？

**A**: 在项目列表页面使用筛选条件筛选需要的数据，然后点击"导出"按钮下载Excel文件。

### Q5: 如何查看历史操作记录？

**A**: 当前版本暂不提供操作日志功能，将在后续版本中添加。

### Q6: 项目进度如何计算？

**A**: 项目进度由系统根据收款完成率、付款完成率等字段自动计算，用户可以直接查看和修改。

### Q7: 为什么有些字段不能编辑？

**A**: 这是权限控制的正常现象。不同角色的用户只能编辑特定的字段，请联系管理员确认权限。

### Q8: 如何添加新的工程类别？

**A**: 当前版本的工程类别是固定的（基建、业扩、客户、营销、检修），如需添加新类别，请联系系统管理员修改系统配置。

---

## 14. 联系支持

如果您在使用过程中遇到任何问题，请联系：

- **技术支持**：[技术支持邮箱]
- **系统管理员**：[管理员联系方式]
- **产品经理**：[产品经理联系方式]

---

**文档创建日期**：2026-01-25
**文档版本**：v1.0
**适用系统版本**：v1.0