237 lines
10 KiB
Markdown
237 lines
10 KiB
Markdown
# ODF（光缆资源管理）需求文档
|
||
|
||
## 版本记录
|
||
|
||
| 版本号 | 修改日期 | 修改内容 |
|
||
| ------ | -------- | -------- |
|
||
| v1.0.2 | 2026/1/19 | 初版需求 |
|
||
| v1.0.2 | 2026/3/3 | 根据设计图补充 UI 细节 |
|
||
|
||
---
|
||
|
||
## 一、需求大纲
|
||
|
||
1. 平台：安卓、移动端 H5。
|
||
2. 功能大纲：
|
||
- ODF 功能更新，新增其他版块。
|
||
- 登录后能看到对应版块。对账号进行权限设置，可控制账号能看到哪几个版块。
|
||
3. 版块一 - 机房（即 ODF），新加功能：
|
||
- 在 ODF 机架列表页，新增签到，记录人员、时间、工作内容。
|
||
- 后台有专门的标签页「外来人员登记」用于展示该内容。
|
||
4. 版块二 - 干线（新版块）：
|
||
- 流程：选公司 > 选光缆 > 故障事件列表 > 故障详情。
|
||
- 光缆由后台配置名称。
|
||
- 光缆页支持搜索，可搜索故障详情、故障时间列表。
|
||
- 可新增故障事件，需填写：时间、原因、拍照（水印照片含时间与人员）、地点、备注。
|
||
- 拍照时时间自动获取，需手动填写人员信息，将时间、人员信息以水印方式加到照片中。
|
||
- 地点：填写地点信息，在详情页点击地址可呼出手机导航 APP 进行导航。
|
||
- 公司列表与 ODF 公司列表互通。
|
||
5. 安卓和 H5 同步更新。
|
||
6. 本次更新与相机无关，不做改动。
|
||
|
||
---
|
||
|
||
## 二、登录页
|
||
|
||
> 导航栏：无。页面居中布局。
|
||
|
||
1. 使用现有 ODF 登录页，不做改变。
|
||
2. 页面居中显示标题文字「原登录页」。
|
||
3. 两个输入框，纵向排列：
|
||
- 账号输入框，placeholder「请输入账号」。
|
||
- 密码输入框，placeholder「请输入密码」。
|
||
4. 蓝色圆角【登录】按钮，居中显示。
|
||
5. 点击【登录】，验证成功后跳转至首页。
|
||
|
||
---
|
||
|
||
## 三、首页
|
||
|
||
> 导航栏：无。
|
||
|
||
1. 页面左上角显示「功能列表」标题文字。
|
||
2. 功能入口以卡片网格排列，每行 2 个，卡片带占位图，图内居中显示功能名称。
|
||
3. 目前仅有两个功能卡片：【机房】【干线】。
|
||
4. 点击【机房】卡片，跳转至原 ODF 公司列表页面（进入 ODF 流程）。
|
||
5. 点击【干线】卡片，跳转至干线页（公司列表）。
|
||
6. 仅展示当前账号有权限访问的功能版块。
|
||
|
||
---
|
||
|
||
## 四、ODF 机架列表页
|
||
|
||
### 4.1 签到入口
|
||
|
||
> 在现有机架列表页基础上新增。
|
||
|
||
1. 页面右上角新增蓝色圆角【签到】按钮。
|
||
2. 机架列表以卡片形式纵向排列，每个卡片居中显示机架名称（如「机架1」「机架2」「机架3」）。
|
||
3. 点击【签到】按钮，跳转至签到页。
|
||
|
||
### 4.2 签到页
|
||
|
||
> 导航栏：左侧返回箭头「<」，居中标题「签到」。
|
||
|
||
1. 表单字段从上到下依次排列：
|
||
- 「人员」标签 + 单行输入框，placeholder「请输入」。
|
||
- 「时间」标签 + 下拉选择框，placeholder「请选择年月日」，右侧带下拉箭头图标。
|
||
- 「工作内容」标签 + 多行文本框（textarea），placeholder「请输入」。
|
||
2. 点击时间选择框，页面底部弹出时间选择器，支持年、月、日滑动选择。
|
||
3. 页面底部固定蓝色全宽圆角【提交】按钮。
|
||
4. 点击【提交】，上传签到数据（人员、时间、工作内容），成功后弹出提示「提交成功」，自动返回上级页面。
|
||
5. 前端只能签到，无法查看签到数据，只有后台能查看。
|
||
|
||
---
|
||
|
||
## 五、干线页 - 公司列表
|
||
|
||
> 导航栏：左侧返回箭头「<」，居中标题「干线」。
|
||
|
||
1. 页面显示「公司列表」标题文字。
|
||
2. 公司以卡片形式纵向排列，每个卡片带占位图，居中显示公司名称。
|
||
3. 该公司列表与 ODF 的公司列表数据互通（同一接口）。
|
||
4. 点击任意公司卡片，跳转至该公司的光缆列表页。
|
||
|
||
---
|
||
|
||
## 六、光缆列表页
|
||
|
||
> 导航栏：左侧返回箭头「<」，居中标题「干线」。
|
||
|
||
1. 页面显示「光缆列表」标题文字。
|
||
2. 顶部搜索栏：带搜索图标的输入框，placeholder「只支持搜索本公司光缆和故障信息」。
|
||
3. 光缆以卡片形式纵向排列，每个卡片带占位图，居中显示光缆名称。
|
||
4. 光缆数据由后台配置。
|
||
5. 点击光缆卡片，跳转至对应的故障列表页。
|
||
6. 在搜索栏输入关键词并触发搜索，仅在当前公司范围内搜索，跳转至搜索结果页。
|
||
|
||
---
|
||
|
||
## 七、搜索结果页
|
||
|
||
> 导航栏：左侧返回箭头「<」，居中标题「搜索结果」。
|
||
|
||
1. 按分类展示搜索结果，分为两个区域：
|
||
- 「光缆」分类标题，下方以卡片形式展示匹配的光缆（带占位图，居中显示光缆名称）。
|
||
- 「故障列表」分类标题，下方以卡片形式展示匹配的故障记录，每条卡片内显示：故障时间、故障原因、表显故障里程、所属光缆。
|
||
2. 点击光缆卡片，跳转至该光缆的故障列表页。
|
||
3. 点击故障卡片，跳转至该故障的故障详情页。
|
||
|
||
---
|
||
|
||
## 八、故障列表页
|
||
|
||
> 导航栏：左侧返回箭头「<」，居中标题「干线」。
|
||
|
||
1. 页面显示「故障列表」标题文字。
|
||
2. 故障以卡片形式纵向排列，每个卡片内显示四行信息：
|
||
- 故障时间：如「2025/1/1」
|
||
- 故障原因：xxxxxxxxx
|
||
- 表显故障里程：xxxxxxxxx
|
||
- 所属光缆：xxxxxxxxx
|
||
3. 点击任意故障卡片，跳转至故障详情页。
|
||
4. 页面底部固定蓝色全宽圆角【新增故障】按钮，点击跳转至新增故障页。
|
||
|
||
---
|
||
|
||
## 九、故障详情页
|
||
|
||
> 导航栏：左侧返回箭头「<」，居中标题「故障详情」。
|
||
|
||
1. 页面顶部横向排列图片列表，可左右滑动查看更多照片。
|
||
2. 点击任意图片可全屏放大查看。
|
||
3. 图片下方依次展示以下信息（标签 + 内容格式）：
|
||
- 故障时间：2025/1/1
|
||
- 人员：xxxx、xxxx
|
||
- 故障原因：多行文本
|
||
- 表显故障里程：xxxxxxxxx
|
||
- 所属光缆：xxxxxxxxx
|
||
- 地点：多行文本
|
||
- 备注：多行文本
|
||
4. 页面底部固定蓝色全宽圆角【导航至地点】按钮。
|
||
5. 点击【导航至地点】，弹出导航 APP 选择列表，选定后自动打开该 APP 并传入故障地点经纬度进行导航。
|
||
6. 若故障地点经纬度为空，隐藏【导航至地点】按钮。
|
||
7. 后台支持导出故障详情数据。
|
||
|
||
---
|
||
|
||
## 十、新增故障页
|
||
|
||
> 导航栏：左侧返回箭头「<」，居中标题「新增故障」。
|
||
|
||
1. 页面顶部为照片区域，横向排列：
|
||
- 第一个位置为拍照入口卡片，显示「+ 点击拍摄」，点击调用相机。
|
||
- 已拍摄的照片以缩略图卡片依次排列在右侧，支持横向滚动。
|
||
- 仅支持相机拍摄，不支持从相册选择，可拍摄多张。
|
||
2. 照片区域下方为表单字段，从上到下依次排列：
|
||
- 「故障时间」标签 + 输入框：根据第 1 张照片拍摄时间自动填充（格式如「2026/1/1 12:12」），不可手动编辑。
|
||
- 「人员」标签 + 单行输入框，placeholder「请输入」。
|
||
- 「故障原因：」标签 + 单行输入框，placeholder「请输入」。
|
||
- 「表显故障里程」标签 + 单行输入框，placeholder「请输入」。
|
||
- 「所属光缆」标签 + 输入框：自动填充光缆名称（从上级页面传入），不可手动编辑。
|
||
- 「地点」标签 + 蓝色圆角【点击获取当前经纬度】按钮，按钮下方显示「当前经度：0 当前纬度：0」。
|
||
- 「备注」标签 + 多行文本框（textarea），placeholder「请输入」。
|
||
3. 点击【点击获取当前经纬度】按钮，调用设备定位获取当前经纬度，更新按钮下方的经纬度显示值。
|
||
4. 页面底部固定蓝色全宽圆角【提交故障】按钮。
|
||
5. 点击【提交故障】：
|
||
- 将「时间」「人员」信息以水印文字叠加到每张照片的左下角。
|
||
- 上传所有数据（照片、时间、人员、故障原因、表显故障里程、所属光缆、经纬度、备注）至后台。
|
||
- 成功后弹出提示「提交成功」，自动返回故障列表页。
|
||
- 失败则弹出错误提示，保留用户已填写的数据。
|
||
6. 若用户未拍摄任何照片即点击提交，提示用户至少拍摄一张照片。
|
||
7. 后台拿到经纬度后，经地图 API 转换为位置信息，在后台和故障详情页展示。
|
||
8. 后台增加故障时，可手动输入经纬度或位置信息：
|
||
- 若输入经纬度，保存后自动转换成位置信息并展示。
|
||
- 若输入位置信息，经纬度显示为空。
|
||
|
||
---
|
||
|
||
## 十一、账号管理
|
||
|
||
1. 后台可管理登录账号。
|
||
2. 可给每个账号分配权限，用于控制该账号能在首页看到哪些功能版块。
|
||
|
||
---
|
||
|
||
## 十二、尝试性功能 - 路线规划
|
||
|
||
1. 调用地图 API 的路线规划功能。
|
||
2. 起始点固定，终点固定，通过路线规划确定路径，获得路线总长度。
|
||
3. 根据输入的距离长度，自动导航到该路线上对应的距离位置。
|
||
|
||
---
|
||
|
||
## 附录 A：设计图文件对照表
|
||
|
||
| 设计图文件 | 对应页面 |
|
||
| --------- | ------- |
|
||
| 页面 2.png | 登录页 |
|
||
| 页面 1.png | 首页（功能列表） |
|
||
| ODF机架列表页.png | ODF 机架列表页（含签到按钮） |
|
||
| ODF机架列表页 3.png | 签到页 |
|
||
| 干线.png | 干线页 - 公司列表 |
|
||
| 干线 4.png | 光缆列表页（含搜索） |
|
||
| 干线 5.png | 故障列表页 |
|
||
| 干线 6.png | 搜索结果页 |
|
||
| 干线 7.png | 故障详情页 |
|
||
| 干线 8.png | 新增故障页 |
|
||
|
||
设计图路径：`docs/v1.0.2/画布/`
|
||
|
||
---
|
||
|
||
## 附录 B：页面导航结构
|
||
|
||
```
|
||
登录页
|
||
└── 首页（功能列表：机房 / 干线）
|
||
├── 机房 → 原 ODF 流程（公司 > 机房 > 机架列表）
|
||
│ └── 【签到】→ 签到页
|
||
└── 干线 → 公司列表
|
||
└── 光缆列表页（含搜索）
|
||
├── 搜索结果页
|
||
└── 故障列表页
|
||
├── 故障详情页（含导航）
|
||
└── 新增故障页（含拍照/定位）
|
||
```
|