# 供水报警与工单前端适配设计 状态：已确认 ## 目标 统一供水设备异常、报警转工单、责任人派发和工单处置体验，并对相关页面进行蓝白运行指挥台风格的视觉重构。 本次覆盖： - 设备维修派单 - 设备异常管理 - 报警管理 - 报警审核 - 供水工单总览（现有统一工单页） - 供水系统完整菜单树的图标 不在本次范围： - 在供水系统创建或首次派发日常巡检、设备保养工单 - 其他供水业务页面的布局重构 - 深色主题 - 新增未经确认的按钮权限编码 ## 业务规则 ### 报警与设备状态 - 设备当前是否报警以设备状态表的设备报警状态为准。 - 单条报警记录的未处理或已处理状态只作为历史辅助信息。 - 报警严重程度由运行监测系统计算，前端只展示一级至四级结果，不重新计算。 - 报警等级颜色固定为：一级红、二级橙、三级蓝、四级绿。标签必须同时显示等级文字，不能只依赖颜色。 ### 报警转工单与去重 - 报警接口先创建待派单的故障维修工单，责任人由后续统一工单派发完成。 - 同一报警记录不得重复生成工单。 - 同一设备、同一报警编码同时只能存在一个未结束的故障维修工单；报警编码缺失时按报警分类判定。 - 同一设备的不同报警编码可以分别生成故障维修工单。 - 用户在报警管理点击“派单”时，前端连续完成“确保待派单工单存在”和“选择责任人并派发”两个步骤。第二步失败时保留待派单工单，以便重试。 ### 恢复、误报与结案 - 工单结案只能触发清警复核，不能直接修改设备报警状态。 - 运行系统确认设备不存在有效报警原因后，自动将设备恢复为正常。 - 一次维修同时消除其他异常时，其他未结案工单显示“设备已恢复”，责任人可选择“随同修复”并继续完成各自验收，系统不得静默结案。 - 报警审核为误报或解除时，尚未开始处理的关联工单自动驳回或取消；处理中的工单要求填写原因并由管理人员确认终止。该操作只触发清警复核。 ### 人员与操作权限 - 一次派单只能指定一个接单责任人。 - 可选人员限状态正常且未删除的系统用户。 - 手机号缺失时显示“未登记手机号”，但不阻断派单。 - 前端不允许手工输入权威姓名或电话，业务请求只使用选中的用户身份。 - 当前接单责任人可以接单、开始处理、提交验收和申请延期。 - 派单人或有权管理人员可以验收、驳回和处理延期申请。 - 前端根据当前用户、工单状态及后端返回的允许操作展示按钮，最终权限由后端校验。 ## 页面职责 ### 设备异常管理 - 展示全部异常设备、设备报警状态、当前报警原因和关联工单进度。 - 支持查看详情和故障维修派单。 - 已存在适用的未结束工单时，隐藏重复派单操作，显示工单编号、责任人、状态和查看入口。 ### 设备维修派单 - 聚焦尚无适用故障维修工单的异常设备。 - 主操作为选择唯一接单责任人并派单。 - 已有关联工单的设备降低视觉优先级并提供查看入口。 ### 报警管理 - 展示整体报警态势、报警等级、设备报警状态和关联工单处置状态。 - 支持报警详情、报警转工单、责任人派发和查看关联工单。 - 不提供接单、处理、验收等后续处置操作。 ### 报警审核 - 菜单名称保持“报警审核”。 - 只承载供水设备的故障维修工单及其关联报警。 - 提供报警审核，以及派单、接单、开始处理、提交验收、验收、驳回和延期等完整工单流程。 ### 供水工单总览 - 保留统一工单页并调整为全部供水类型工单的集中检索与管理入口。 - 故障维修工单提供完整处置流程。 - 日常巡检和设备保养工单由其他业务系统创建。 - 巡检或保养工单派给当前用户后，允许其在本页继续接单、处理、提交验收和申请延期；相应管理人员可以执行后续审核操作。 ## 共享交互 ### 接单责任人选择器 - 使用约 860px 的“部门树 + 单选用户表”弹窗。 - 支持部门筛选，以及用户名、昵称、手机号搜索和分页。 - 展示昵称、用户名、部门、手机号和账号状态。 - 单击表格行可以选中，同时保留明确的单选标识。 - 底部固定展示已选责任人；未选择时禁止确认。 ### 表单反馈 - 设备维修、设备异常和报警管理派单均要求责任人和问题描述。 - 优先级默认一般；报警可按已有报警等级给出默认优先级；计划完成时间可选。 - 报警工单类型只读显示“故障维修（报警转入）”。 - 成功提示“已派单，等待接单”，刷新并定位关联工单。 - 失败时保留弹窗和输入内容，优先显示后端业务错误。 - 并发重复创建时刷新数据并提示已存在关联处置工单，不提示为新建成功。 ## 视觉规范 ### 视觉语言 - 风格：供水运行指挥台，桌面业务系统优先。 - 主色：蓝白；页面背景为浅灰蓝，标题使用深蓝。 - 状态色：红色报警或紧急、橙色待办、青绿色处理中、绿色正常或完成、灰色驳回或不可操作。 - 报警等级四色是独立语义，不与工单状态混用。 - 内容区圆角 6-8px，使用细边框和轻阴影；不使用大圆角胶囊、装饰性渐变或嵌套卡片。 - 交互过渡为 120-180ms；报警状态不持续闪烁。 ### 页面构图 - 报警管理：紧凑指标带、筛选栏、报警表格、右侧详情抽屉。 - 报警审核：左侧列表与右侧详情工作台；详情标签为报警信息、工单处置、处理记录；底部固定当前可用操作。 - 供水工单总览：复用主从工作台，强化工单类型、来源系统、责任人和状态。 - 设备异常管理：异常指标带、筛选、设备表格和右侧详情抽屉。 - 设备维修派单：待派单队列为主，突出责任人选择和派单操作。 ### 图标与导航 - 供水系统每个菜单项必须具有语义匹配的 Element Plus 线性图标。 - 页面标题和命令按钮沿用同一图标语言，不使用 Emoji 或位图按钮。 - 菜单展开、折叠状态均显示图标；折叠时提供悬停提示。 - 未配置或无法解析的图标使用统一兜底图标，不能留空或破坏布局。 ### 密度与响应式 - 采用紧凑但可读的表格、筛选和操作密度，不使用大标题或卡片墙。 - 1280px 以上显示完整主从工作台。 - 1024px 下缩窄左侧列表并保持详情可操作。 - 768px 以下列表与详情上下排列，抽屉和弹窗占满可用宽度。 - 所有状态必须同时具有文字和颜色表达，并保持清晰对比。 ### 加载与异常 - 表格、详情和操作使用局部加载状态。 - 空数据使用明确空状态。 - 接口失败在原位置显示错误与重试入口，保留已有数据和表单内容。 ## 后端前置契约 前端实施前先完成并验收以下后端能力： 1. 待派单供水工单使用唯一接单责任人派发，并返回可刷新定位的工单信息。 2. 报警转工单按“设备 + 报警编码”限制同时存在的未结束工单；编码缺失时回退到报警分类。 3. 误报或解除审核按工单进度联动取消、驳回或管理确认终止，并触发清警复核而非直接清警。 4. 报警列表或详情返回设备报警状态，以及关联工单 ID、编号、类型、状态和责任人信息。 5. 工单接口能够表达当前用户允许执行的操作，并在服务端执行最终授权校验。 6. 日常巡检和设备保养工单允许接单责任人在供水工单总览继续后续处置。 7. 供水动态菜单配置提供所有菜单项的图标值，并与前端图标解析规则一致。 ## 验收标准 - 五个页面按职责显示正确的数据范围和操作集合。 - 三类状态来源明确，页面不再把报警记录状态当作设备报警状态。 - 同一责任人选择器在相关入口保持一致，且派单只产生一个责任人。 - 同设备同报警编码不能并行生成多个未结束工单；不同报警编码可以分别生成。 - 设备恢复不会自动关闭其他工单；“随同修复”仍保留完整验收记录。 - 误报流程不会留下无法处置的活动工单，也不会由前端直接清警。 - 供水菜单展开、折叠和图标缺失场景均有稳定图标布局。 - 构建及相关测试通过。 - 提供 1440px、1024px 和 390px 宽度的关键页面截图，确认菜单、表格、抽屉和弹窗无溢出、重叠或空白渲染。 - 执行者不得合并或推送代码；当前对话负责代码审查和验收。