diff --git a/.kiro/specs/odf-v102-update/.config.kiro b/.kiro/specs/odf-v102-update/.config.kiro new file mode 100644 index 0000000..2254e2b --- /dev/null +++ b/.kiro/specs/odf-v102-update/.config.kiro @@ -0,0 +1 @@ +{"specId": "8912b026-4bcf-48e3-ad23-2f417cfc5c2b", "workflowType": "requirements-first", "specType": "feature"} \ No newline at end of file diff --git a/.kiro/specs/odf-v102-update/requirements.md b/.kiro/specs/odf-v102-update/requirements.md new file mode 100644 index 0000000..2502e8d --- /dev/null +++ b/.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 提示用户网络异常或服务不可用 diff --git a/docs/v1.0.2/画布/ODF机架列表页 3.png b/docs/v1.0.2/画布/ODF机架列表页 3.png new file mode 100644 index 0000000..4d51134 Binary files /dev/null and b/docs/v1.0.2/画布/ODF机架列表页 3.png differ diff --git a/docs/v1.0.2/画布/ODF机架列表页.png b/docs/v1.0.2/画布/ODF机架列表页.png new file mode 100644 index 0000000..7ea6b79 Binary files /dev/null and b/docs/v1.0.2/画布/ODF机架列表页.png differ diff --git a/docs/v1.0.2/画布/干线 4.png b/docs/v1.0.2/画布/干线 4.png new file mode 100644 index 0000000..b5107d3 Binary files /dev/null and b/docs/v1.0.2/画布/干线 4.png differ diff --git a/docs/v1.0.2/画布/干线 5.png b/docs/v1.0.2/画布/干线 5.png new file mode 100644 index 0000000..5369774 Binary files /dev/null and b/docs/v1.0.2/画布/干线 5.png differ diff --git a/docs/v1.0.2/画布/干线 6.png b/docs/v1.0.2/画布/干线 6.png new file mode 100644 index 0000000..3c6786e Binary files /dev/null and b/docs/v1.0.2/画布/干线 6.png differ diff --git a/docs/v1.0.2/画布/干线 7.png b/docs/v1.0.2/画布/干线 7.png new file mode 100644 index 0000000..a1f7f8a Binary files /dev/null and b/docs/v1.0.2/画布/干线 7.png differ diff --git a/docs/v1.0.2/画布/干线 8.png b/docs/v1.0.2/画布/干线 8.png new file mode 100644 index 0000000..ca1f352 Binary files /dev/null and b/docs/v1.0.2/画布/干线 8.png differ diff --git a/docs/v1.0.2/画布/干线.png b/docs/v1.0.2/画布/干线.png new file mode 100644 index 0000000..03affbc Binary files /dev/null and b/docs/v1.0.2/画布/干线.png differ diff --git a/docs/v1.0.2/画布/页面 1.png b/docs/v1.0.2/画布/页面 1.png new file mode 100644 index 0000000..0c4b6fa Binary files /dev/null and b/docs/v1.0.2/画布/页面 1.png differ diff --git a/docs/v1.0.2/画布/页面 2.png b/docs/v1.0.2/画布/页面 2.png new file mode 100644 index 0000000..5d40baa Binary files /dev/null and b/docs/v1.0.2/画布/页面 2.png differ diff --git a/docs/v1.0.2/需求文档.md b/docs/v1.0.2/需求文档.md new file mode 100644 index 0000000..c203582 --- /dev/null +++ b/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 流程（公司 > 机房 > 机架列表） + │ └── 【签到】→ 签到页 + └── 干线 → 公司列表 + └── 光缆列表页（含搜索） + ├── 搜索结果页 + └── 故障列表页 + ├── 故障详情页（含导航） + └── 新增故障页（含拍照/定位） +```