21

.kiro/specs/odf-v102-update/.config.kiro

@@ -0,0 +1 @@
+{"specId": "8912b026-4bcf-48e3-ad23-2f417cfc5c2b", "workflowType": "requirements-first", "specType": "feature"}

.kiro/specs/odf-v102-update/requirements.md

@@ -0,0 +1,167 @@
+# 需求文档 — ODF v1.0.2 功能更新
+
+## 简介
+
+ODF（光缆资源管理）v1.0.2 版本基于现有 odf-uniapp（UniApp/Vue）项目进行功能扩展。本次更新包括：首页改造为功能入口列表、ODF 机架列表页新增签到功能、新增「干线」版块（公司→光缆→故障管理）、账号权限管理，以及尝试性的路线规划功能。平台覆盖安卓和 H5。
+
+## 术语表
+
+- **App**：odf-uniapp 前端应用，基于 UniApp + Vue 构建，运行于安卓和 H5 平台
+- **首页**：用户登录后看到的第一个页面，展示功能版块入口列表
+- **功能版块**：首页中的功能入口项，当前包括【机房ODF】和【干线】
+- **ODF_机架列表页**：展示某机房下所有 ODF 机架的页面（现有 pages/rack/index）
+- **签到页**：用于外来人员登记签到的页面，记录人员、时间、工作内容
+- **干线页**：干线版块的入口页面，展示公司列表
+- **光缆列表页**：展示某公司下所有光缆的页面
+- **故障列表页**：展示某光缆下所有故障事件的页面
+- **故障详情页**：展示单个故障事件完整信息的页面
+- **新增故障页**：用于创建新故障事件的表单页面
+- **水印照片**：拍摄后在照片左下角叠加时间和人员信息文字的照片
+- **表显故障里程**：光缆设备上显示的故障发生位置里程数
+- **后台**：服务端管理系统，负责数据配置和管理
+- **权限配置**：后台对账号设置可见功能版块的能力
+- **路线规划**：调用地图 API 根据起终点规划路线，并根据里程定位路线上位置的功能
+
+## 需求
+
+### 需求 1：首页改造
+
+**用户故事：** 作为用户，我希望登录后看到功能入口列表，以便快速进入不同的功能版块。
+
+#### 验收标准
+
+1. WHEN 用户登录成功后进入首页，THE App SHALL 展示该用户有权限访问的功能版块入口列表
+2. THE App SHALL 在功能版块列表中包含【机房ODF】和【干线】两个入口项
+3. WHEN 用户点击【机房ODF】入口，THE App SHALL 跳转至现有的公司列表页面（原首页 ODF 流程）
+4. WHEN 用户点击【干线】入口，THE App SHALL 跳转至干线页
+5. WHILE 用户账号未被分配某功能版块权限，THE App SHALL 在首页隐藏该功能版块入口
+
+
+### 需求 2：ODF 机架列表页签到功能
+
+**用户故事：** 作为外来维护人员，我希望在 ODF 机架列表页进行签到，以便记录到访人员、时间和工作内容。
+
+#### 验收标准
+
+1. THE ODF_机架列表页 SHALL 在右上角显示【签到】按钮
+2. WHEN 用户点击【签到】按钮，THE App SHALL 跳转至签到页
+3. THE 签到页 SHALL 提供人员信息手动输入字段
+4. THE 签到页 SHALL 提供工作内容手动输入字段
+5. WHEN 用户点击签到页的【时间】字段，THE App SHALL 在页面底部弹出时间选择器，支持年、月、日的滑动选择
+6. WHEN 用户在签到页点击【提交】按钮，THE App SHALL 将签到数据（人员、时间、工作内容）上传至后台
+7. WHEN 签到数据上传成功，THE App SHALL 弹出系统提示「提交成功」并返回 ODF_机架列表页
+8. IF 签到数据上传失败，THEN THE App SHALL 弹出错误提示信息，保留用户已填写的数据
+9. THE 签到页 SHALL 仅提供签到提交功能，不提供签到记录查看功能
+
+### 需求 3：干线版块 — 干线页（公司列表）
+
+**用户故事：** 作为用户，我希望在干线版块看到公司列表，以便选择公司查看其光缆信息。
+
+#### 验收标准
+
+1. THE 干线页 SHALL 展示公司名称列表
+2. THE 干线页 SHALL 使用与 ODF 版块相同的公司列表数据源（getcompany 接口）
+3. WHEN 用户点击任意公司名称，THE App SHALL 跳转至该公司的光缆列表页
+
+### 需求 4：干线版块 — 光缆列表页
+
+**用户故事：** 作为用户，我希望查看某公司下的光缆列表并搜索光缆或故障信息，以便快速定位目标光缆。
+
+#### 验收标准
+
+1. THE 光缆列表页 SHALL 展示当前公司下的所有光缆名称列表
+2. WHEN 用户点击任意光缆名称，THE App SHALL 跳转至该光缆的故障列表页
+3. THE 光缆列表页 SHALL 提供搜索输入框，支持按光缆名和故障信息进行搜索
+4. WHEN 用户输入搜索关键词并触发搜索，THE App SHALL 仅在当前公司范围内搜索匹配的光缆和故障信息
+5. WHEN 搜索完成，THE App SHALL 跳转至搜索结果页，按「光缆」和「故障列表」分类展示结果
+
+
+### 需求 5：干线版块 — 故障列表页
+
+**用户故事：** 作为用户，我希望查看某光缆下的所有故障事件，以便了解故障历史并新增故障记录。
+
+#### 验收标准
+
+1. THE 故障列表页 SHALL 展示故障事件列表，每条记录显示故障时间、故障原因、表显故障里程、所属光缆名称
+2. WHEN 用户点击任意故障记录，THE App SHALL 跳转至该故障的故障详情页
+3. THE 故障列表页 SHALL 提供【新增故障】按钮
+4. WHEN 用户点击【新增故障】按钮，THE App SHALL 跳转至新增故障页
+
+### 需求 6：干线版块 — 故障详情页
+
+**用户故事：** 作为用户，我希望查看故障事件的完整信息并导航至故障地点，以便进行现场处理。
+
+#### 验收标准
+
+1. THE 故障详情页 SHALL 展示以下信息：图片列表、故障时间、人员、故障原因、表显故障里程、所属光缆、地点、备注
+2. WHEN 用户点击图片列表中的任意图片，THE App SHALL 以全屏模式放大展示该图片
+3. THE 故障详情页 SHALL 提供【导航至地点】按钮
+4. WHEN 用户点击【导航至地点】按钮，THE App SHALL 弹出导航 APP 选择列表
+5. WHEN 用户选定导航 APP，THE App SHALL 打开该导航 APP 并传入故障地点经纬度进行导航
+6. IF 故障地点经纬度为空，THEN THE 故障详情页 SHALL 隐藏【导航至地点】按钮
+
+### 需求 7：干线版块 — 新增故障页
+
+**用户故事：** 作为用户，我希望在现场拍照记录故障并提交故障信息，以便及时上报故障事件。
+
+#### 验收标准
+
+1. THE 新增故障页 SHALL 提供拍照上传功能，支持拍摄多张照片，仅支持相机拍摄（不支持从相册选择）
+2. WHEN 用户拍摄第 1 张照片，THE App SHALL 自动获取拍摄时间并填充至故障时间字段
+3. THE 新增故障页 SHALL 自动填充所属光缆名称（从上级页面传入）
+4. THE 新增故障页 SHALL 提供【点击获取当前经纬度】按钮
+5. WHEN 用户点击【点击获取当前经纬度】按钮，THE App SHALL 调用设备定位功能获取当前经纬度，并在按钮下方显示经纬度数值
+6. WHILE 用户未点击获取经纬度按钮，THE 新增故障页 SHALL 将经纬度默认显示为 0
+7. THE 新增故障页 SHALL 提供以下手动输入字段：人员、故障原因、表显故障里程、备注
+8. WHEN 用户点击【提交故障】按钮，THE App SHALL 将时间和人员信息以水印文字叠加到每张照片的左下角
+9. WHEN 水印处理完成，THE App SHALL 将所有数据（照片、时间、人员、故障原因、表显故障里程、所属光缆、经纬度、备注）上传至后台
+10. WHEN 故障数据上传成功，THE App SHALL 弹出系统提示「提交成功」并返回故障列表页
+11. IF 故障数据上传失败，THEN THE App SHALL 弹出错误提示信息，保留用户已填写的数据
+12. IF 用户未拍摄任何照片即点击提交，THEN THE App SHALL 提示用户至少拍摄一张照片
+
+
+### 需求 8：账号权限管理
+
+**用户故事：** 作为管理员，我希望控制每个账号可见的功能版块，以便实现不同角色的访问控制。
+
+#### 验收标准
+
+1. THE 后台 SHALL 提供账号权限配置功能，支持为每个账号分配可见的功能版块
+2. WHEN 用户登录成功，THE App SHALL 从后台获取该账号的功能版块权限列表
+3. THE App SHALL 根据权限列表仅在首页展示该用户有权限访问的功能版块
+4. IF 后台未为某账号配置任何权限，THEN THE App SHALL 在首页显示空状态提示
+
+### 需求 9：干线版块 — 搜索结果页
+
+**用户故事：** 作为用户，我希望搜索结果按分类展示，以便快速区分光缆和故障信息。
+
+#### 验收标准
+
+1. THE 搜索结果页 SHALL 按「光缆」和「故障列表」两个分类展示搜索结果
+2. WHEN 搜索结果中包含匹配的光缆，THE 搜索结果页 SHALL 在「光缆」分类下展示光缆名称列表
+3. WHEN 搜索结果中包含匹配的故障记录，THE 搜索结果页 SHALL 在「故障列表」分类下展示故障时间、故障原因、所属光缆
+4. WHEN 用户点击搜索结果中的光缆项，THE App SHALL 跳转至该光缆的故障列表页
+5. WHEN 用户点击搜索结果中的故障项，THE App SHALL 跳转至该故障的故障详情页
+
+### 需求 10：平台兼容性
+
+**用户故事：** 作为用户，我希望在安卓和 H5 平台上使用相同的功能，以便在不同设备上获得一致的体验。
+
+#### 验收标准
+
+1. THE App SHALL 在安卓平台和 H5 平台同步提供所有功能版块
+2. WHEN App 使用设备相机拍照功能，THE App SHALL 在安卓平台调用原生相机 API，在 H5 平台调用浏览器媒体 API
+3. WHEN App 使用设备定位功能，THE App SHALL 在安卓平台调用原生定位 API，在 H5 平台调用浏览器 Geolocation API
+4. WHEN App 调用导航功能，THE App SHALL 在安卓平台弹出已安装的导航 APP 列表，在 H5 平台打开地图网页进行导航
+
+### 需求 11：尝试性功能 — 路线规划
+
+**用户故事：** 作为用户，我希望根据光缆里程定位光缆路线上的具体位置，以便快速找到故障点。
+
+#### 验收标准
+
+1. THE App SHALL 调用地图 API 的路线规划功能，根据固定起始点和终点规划路线
+2. WHEN 路线规划完成，THE App SHALL 获取并展示路线总长度
+3. WHEN 用户输入距离长度，THE App SHALL 计算该距离在规划路线上对应的地理坐标位置
+4. WHEN 位置计算完成，THE App SHALL 在地图上标注该位置并支持导航至该位置
+5. IF 地图 API 调用失败，THEN THE App SHALL 提示用户网络异常或服务不可用

docs/v1.0.2/需求文档.md

@@ -0,0 +1,236 @@
+# 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 流程（公司 > 机房 > 机架列表）
+        │                              └── 【签到】→ 签到页
+        └── 干线 → 公司列表
+                     └── 光缆列表页（含搜索）
+                           ├── 搜索结果页
+                           └── 故障列表页
+                                 ├── 故障详情页（含导航）
+                                 └── 新增故障页（含拍照/定位）
+```