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