22 KiB
22 KiB
海洋项目管理系统 - 用户交互文档
文档概述
本文档描述用户如何使用海洋项目管理系统的各个功能模块，包括页面间的交互流程、操作步骤和预期结果。
目录
1. 系统登录
1.1 访问系统
操作步骤：
- 打开浏览器
- 在地址栏输入系统URL（如：http://localhost:3000）
- 按Enter键
预期结果：
- 显示登录页面
- 页面中央显示登录表单
- 表单包含：用户名输入框、密码输入框、记住密码复选框、登录按钮
1.2 登录流程
场景1：正常登录
操作步骤：
- 在"用户名"输入框中输入有效的用户名
- 在"密码"输入框中输入对应的密码
- （可选）勾选"记住密码"
- 点击"登录"按钮
预期结果：
- 登录按钮显示加载状态（旋转图标）
- 登录成功后，页面跳转到仪表盘
- 顶部导航栏显示当前登录用户信息
场景2：登录失败
操作步骤：
- 输入错误的用户名或密码
- 点击"登录"按钮
预期结果：
- 登录按钮恢复原始状态
- 输入框下方显示红色错误提示："用户名或密码错误"
- 用户可以重新输入
场景3：字段验证
操作步骤：
- 不输入任何内容，直接点击"登录"按钮
- 或者只输入用户名，不输入密码
预期结果：
- 必填字段显示红色边框
- 字段下方显示提示信息："请输入用户名"或"请输入密码"
- 登录按钮无法提交
1.3 记住密码功能
操作步骤：
- 勾选"记住密码"
- 输入用户名和密码
- 点击"登录"
预期结果：
- 下次访问系统时，用户名和密码自动填充
- 复选框保持选中状态
2. 主界面导航
2.1 界面布局说明
登录成功后，系统进入主界面，包含以下部分：
┌─────────────────────────────────────────────────────┐
│ 顶部导航栏 │
│ - 左侧：系统Logo │
│ - 右侧：当前用户信息、登出按钮 │
├──────────┬──────────────────────────────────────────┤
│ │ │
│ 侧边栏 │ 内容区 │
│ - 仪表盘 │ │
│ - 项目 │ 动态显示当前页面的内容 │
│ - 用户 │ │
│ - 统计 │ │
│ │ │
└──────────┴──────────────────────────────────────────┘
2.2 侧边栏导航
操作步骤：
- 将鼠标悬停在侧边栏菜单项上
- 观察菜单项的高亮状态
- 点击要访问的菜单项
预期结果：
- 鼠标悬停时，菜单项背景变为浅蓝色
- 当前激活的菜单项显示蓝色左边框和浅蓝色背景
- 点击后，内容区显示对应页面内容
- 页面URL自动更新
2.3 用户信息查看
操作步骤：
- 查看顶部导航栏右侧
- 可以看到当前登录用户的真实姓名和部门
预期结果：
- 显示格式："真实姓名 (部门)"
2.4 登出系统
操作步骤：
- 点击顶部导航栏右侧的"登出"按钮
预期结果：
- 弹出确认对话框："确定要退出登录吗？"
- 点击"确定"，页面跳转到登录页
- 点击"取消"，对话框关闭，保持登录状态
3. 仪表盘使用
3.1 仪表盘概览
仪表盘是系统默认页面，提供项目概览和快速操作入口。
页面包含：
- 4个统计卡片（项目总数、进行中、已完成、总合同金额）
- 项目趋势图表
- 最近项目列表
3.2 查看统计卡片
操作步骤：
- 进入仪表盘页面
- 查看页面顶部的4个统计卡片
卡片内容：
- 项目总数：显示系统中所有项目的数量
- 进行中：显示正在进行的项目数量
- 已完成：显示已完成的项目数量
- 总合同金额：显示所有项目的合同金额总和（单位：万元）
预期结果：
- 每个卡片显示标签和数值
- 鼠标悬停时，卡片轻微上浮并显示阴影
- 数据实时显示，反映当前项目状态
3.3 查看项目趋势图
操作步骤：
- 查看页面左侧的"项目趋势图"
- 将鼠标悬停在图表的柱状或折线上
预期结果：
- 图表显示按月/年的项目数量或金额趋势
- 鼠标悬停时，显示该时间点的详细数据（Tooltip）
- 支持点击图例切换显示的指标
3.4 查看最近项目
操作步骤：
- 查看页面右侧的"最近项目"列表
- 鼠标悬停在某个项目上
预期结果：
- 列表显示最近创建或修改的项目
- 每个项目显示：项目名称、创建日期、合同金额
- 鼠标悬停时，项目背景变为浅灰色
- 鼠标指针变为手型
3.5 快速跳转
操作步骤：
- 点击某个统计卡片
- 或点击最近项目列表中的某个项目
预期结果：
- 点击统计卡片：跳转到对应的项目统计页面
- 点击最近项目：跳转到该项目详情页
4. 项目管理
4.1 进入项目列表
操作步骤：
- 点击侧边栏的"项目管理"菜单
- 等待页面加载完成
预期结果：
- 内容区显示项目列表页面
- 显示工具栏（搜索、筛选、新建按钮）
- 显示项目表格（当前页的项目数据）
- 显示分页控件
4.2 搜索项目
场景1：按合同编号搜索
操作步骤：
- 在搜索框中输入合同编号（如："PRJ001"）
- 点击搜索图标或按Enter键
预期结果：
- 表格自动过滤，只显示匹配的项目
- 搜索框显示搜索图标
- 可以点击搜索图标右侧的"×"清除搜索条件
场景2：按项目名称搜索
操作步骤：
- 在搜索框中输入项目名称或关键词（如："基建"）
- 点击搜索图标或按Enter键
预期结果：
- 表格显示包含该关键词的项目
- 支持模糊匹配
4.3 筛选项目
场景1：按工程类别筛选
操作步骤：
- 点击"工程类别"下拉框
- 选择一个类别（如："基建"）
预期结果：
- 下拉框显示选中类别
- 表格只显示该类别的项目
- 其他筛选条件同时生效（AND关系）
场景2：按所属项目部筛选
操作步骤：
- 点击"项目部"下拉框
- 选择一个项目部（如："项目部一"）
预期结果：
- 下拉框显示选中项目部
- 表格只显示该项目的项目
场景3：按日期范围筛选
操作步骤：
- 点击"签订日期"日期选择器
- 选择开始日期和结束日期
- 点击"确定"
预期结果：
- 表格只显示签订日期在范围内的项目
- 日期显示为："YYYY-MM-DD ~ YYYY-MM-DD"
场景4：按合同金额筛选
操作步骤：
- 点击"合同金额"下拉框
- 输入最小金额和最大金额（如：100 - 1000）
- 点击"确定"
预期结果：
- 表格只显示合同金额在范围内的项目
- 金额单位：万元
场景5：组合筛选
操作步骤：
- 同时设置多个筛选条件
- 例如：工程类别="基建"、签订日期="2026-01-01 ~ 2026-01-31"
预期结果：
- 表格显示同时满足所有条件的项目
- 每个筛选条件都显示为标签，可以单独移除
4.4 排序项目
操作步骤：
- 点击表格标题栏（如："签订日期"或"合同金额"）
预期结果：
- 第一次点击：升序排列（↑箭头）
- 第二次点击：降序排列（↓箭头）
- 第三次点击：取消排序
- 箭头显示在列标题右侧
4.5 查看项目详情
操作步骤：
- 在项目列表中找到要查看的项目
- 点击该行的"查看"按钮
预期结果：
- 页面跳转到项目详情页
- 显示项目的完整信息
- 信息按分组显示（基本信息、项目时间、成本管理等）
4.6 新建项目（市场部、管理员）
操作步骤：
- 点击工具栏的"新建项目"按钮
- 弹出"新建项目"模态框
- 填写必填字段：
- 合同编号 *
- 项目名称 *
- 工程类别 *
- 合同金额 *
- （可选）填写其他字段
- 点击"保存"按钮
预期结果：
- 必填字段为空时，显示错误提示
- 保存成功后，模态框关闭
- 项目列表刷新，新项目出现在列表中
- 显示成功提示："项目创建成功"
4.7 编辑项目
场景1：编辑自己创建的项目（市场部、管理员）
操作步骤：
- 在项目列表中找到要编辑的项目
- 点击该行的"编辑"按钮
- 弹出"编辑项目"模态框，显示项目当前信息
- 修改需要更新的字段
- 点击"保存"按钮
预期结果：
- 所有字段都可以编辑
- 保存成功后，模态框关闭
- 项目列表刷新，显示更新后的信息
- 显示成功提示："项目更新成功"
场景2：更新财务信息（其他部门）
操作步骤：
- 点击项目行的"查看"按钮
- 进入项目详情页
- 点击"编辑"按钮
- 模态框中只显示可编辑的字段（成本、财务、进度等）
- 修改需要更新的字段
- 点击"保存"按钮
预期结果：
- 基础信息字段（合同编号、项目名称等）显示为只读
- 只能编辑成本、财务、进度相关字段
- 保存成功后，信息更新
4.8 删除项目（市场部、管理员）
操作步骤：
- 在项目列表中找到要删除的项目
- 点击该行的"删除"按钮
- 弹出确认对话框："确定要删除该项目吗？"
- 点击"确定"
预期结果：
- 确认对话框显示
- 点击"确定"后，项目被删除
- 列表刷新，该项目不再显示
- 显示成功提示："项目删除成功"
- 点击"取消"，对话框关闭，项目不被删除
4.9 分页浏览
操作步骤：
- 查看页面底部的分页控件
- 点击页码按钮
- 或点击"上页"/"下页"按钮
预期结果：
- 显示当前页码和总页数
- 点击页码后，表格显示对应页的数据
- 第一页时，"上页"按钮禁用
- 最后一页时，"下页"按钮禁用
4.10 项目详情页操作
场景1：查看详细信息
操作步骤：
- 在项目详情页浏览各个信息组
- 向下滚动查看所有信息
预期结果：
- 信息按分组显示，每个组用卡片形式展示
- 长文本字段支持悬停显示完整内容
- 日期格式统一为：YYYY-MM-DD
- 金额单位：万元
场景2：编辑项目
操作步骤：
- 点击页面右上角的"编辑"按钮
- 弹出编辑模态框
- 修改需要更新的字段
- 点击"保存"
预期结果：
- 根据权限显示可编辑字段
- 保存成功后，信息更新
场景3：删除项目
操作步骤：
- 点击页面右上角的"删除"按钮
- 确认删除操作
预期结果：
- 项目被删除
- 页面跳转到项目列表页
场景4：返回列表
操作步骤：
- 点击面包屑导航中的"项目管理"
预期结果：
- 页面跳转到项目列表页
5. 用户管理（管理员）
5.1 进入用户管理
操作步骤：
- 点击侧边栏的"用户管理"菜单
预期结果：
- 内容区显示用户列表页面
- 显示工具栏（搜索、新建用户按钮）
- 显示用户表格
- 显示分页控件
注意：只有管理员角色才能看到"用户管理"菜单。
5.2 搜索用户
操作步骤：
- 在搜索框中输入用户名、真实姓名或邮箱
- 点击搜索图标或按Enter键
预期结果：
- 表格显示匹配的用户
- 支持模糊匹配
5.3 新建用户
操作步骤：
- 点击"新建用户"按钮
- 弹出"新建用户"模态框
- 填写必填字段：
- 用户名 *（唯一）
- 密码 *（最少6位）
- 真实姓名 *
- 部门 *
- 角色 *
- （可选）填写邮箱和电话
- 点击"保存"按钮
预期结果：
- 必填字段为空时，显示错误提示
- 用户名重复时，显示错误提示："用户名已存在"
- 保存成功后，用户出现在列表中
5.4 编辑用户
操作步骤：
- 点击用户行的"编辑"按钮
- 弹出"编辑用户"模态框
- 修改需要更新的字段
- 点击"保存"按钮
预期结果：
- 用户名字段为只读，不可修改
- 其他字段可以修改
- 保存成功后，信息更新
5.5 删除用户
操作步骤：
- 点击用户行的"删除"按钮
- 确认删除操作
预期结果：
- 用户被删除
- 列表刷新
- 显示成功提示
5.6 重置密码
操作步骤：
- 点击用户行的"重置密码"按钮
- 弹出"重置密码"对话框
- 输入新密码
- 点击"确定"
预期结果：
- 密码重置成功
- 显示成功提示
6. 项目统计
6.1 进入项目统计
操作步骤：
- 点击侧边栏的"项目统计"菜单
预期结果：
- 显示项目统计页面
- 显示筛选工具栏
- 显示统计图表
- 显示分组统计表格
6.2 基础统计
查看内容：
- 项目总数
- 总投资金额
- 总合同金额
- 总收款金额
- 总付款金额
- 平均收款完成率
- 平均付款完成率
- 平均项目进度
6.3 分组统计
场景1：按工程类别统计
操作步骤：
- 查看页面上的分组统计图表和表格
- 默认显示按工程类别分组
预期结果：
- 图表显示各类别的项目数量和金额
- 表格显示详细的统计数据
场景2：按项目部分组
操作步骤：
- 点击"分组方式"下拉框
- 选择"所属项目部"
预期结果：
- 图表和表格切换为按项目部统计
6.4 时间维度统计
场景1：按月统计
操作步骤：
- 点击"时间维度"下拉框
- 选择"按月"
- 选择时间范围（默认为当前年份）
预期结果：
- 显示每月的项目数量和金额
- 折线图显示趋势
场景2：按年统计
操作步骤：
- 点击"时间维度"下拉框
- 选择"按年"
预期结果：
- 显示每年的项目数量和金额
6.5 筛选统计
操作步骤：
- 在工具栏中选择筛选条件
- 例如：工程类别="基建"、日期范围="2026-01-01 ~ 2026-01-31"
预期结果：
- 所有统计图表和表格只显示符合筛选条件的数据
6.6 导出报表
操作步骤：
- 点击工具栏的"导出报表"按钮
预期结果：
- 下载Excel文件
- 文件包含当前筛选条件下的所有统计数据
- 文件名格式："项目统计_YYYY-MM-DD.xlsx"
6.7 图表交互
操作步骤：
- 鼠标悬停在图表的柱状、饼图或折线上
预期结果：
- 显示详细的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 市场部用户创建项目并跟踪流程
完整流程：
- 登录系统（市场部账号）
- 进入"项目管理"页面
- 点击"新建项目"
- 填写项目基本信息（合同编号、名称、类别、金额等）
- 保存项目
- 跟踪项目进度，定期更新收款和付款信息
- 项目完成后，更新实际竣工日期和结算信息
8.2 其他部门用户更新项目信息流程
完整流程：
- 登录系统（其他部门账号）
- 进入"项目管理"页面
- 找到要更新的项目
- 点击"查看"进入详情页
- 点击"编辑"
- 更新成本、财务、进度等相关信息
- 保存更改
8.3 管理员查看整体统计流程
完整流程：
- 登录系统（管理员账号）
- 进入"项目统计"页面
- 查看基础统计卡片
- 查看分组统计图表
- 切换不同的分组方式（工程类别、项目部）
- 查看时间趋势
- 导出报表存档
9. 错误处理
9.1 网络错误
错误提示："网络连接失败，请检查网络后重试"
操作建议：
- 检查网络连接
- 刷新页面
- 如果问题持续，联系系统管理员
9.2 服务器错误
错误提示："服务器内部错误，请联系管理员"
操作建议：
- 刷新页面重试
- 联系系统管理员
9.3 权限错误
错误提示："您没有执行此操作的权限"
操作建议：
- 确认当前用户的角色和权限
- 联系管理员申请相应权限
9.4 数据验证错误
错误提示：显示具体的验证错误（如："合同编号不能为空"、"日期格式不正确"）
操作建议：
- 根据提示信息修正输入
- 确保必填字段都已填写
- 检查日期格式是否正确（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 大量数据操作
场景：项目列表包含数千条记录
建议：
- 使用筛选条件缩小范围
- 不要一次性加载所有数据
- 使用分页功能逐页查看
12.2 数据导出
场景：导出大量统计数据
建议：
- 先使用筛选条件筛选需要的数据
- 避免导出所有数据
- 导出期间不要关闭浏览器
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