2026-08-17.md 9.1 KB

2026-08-17:供水管网安全运行监测系统前端实现

目标

依据项目 PDF 第 5.3.2 节和已开发后端接口,完成供水管网安全运行监测系统 19 个前端页面,页面命名与文档一致,功能按约 50% 置信度实现。

结论

  • 完成供水设施管理、监测设备管理、运行监测、监测报警四个模块的 19 个页面入口。
  • 五类供水设施查询复用既有 CRUD 页面;新增统一 API、响应适配、设备管理、监测、报警、统计和 GIS 可复用页面。
  • 设施 GIS 使用后端 GeoJSON Point/LineString 展示分类图层、点线分布和详情;报警、设备地图按经纬度边界归一化显示。
  • 管网统计实现设施概览、柱状图、饼图和明细表;报警支持处理、审核和阈值编辑;设备异常支持维修派单。
  • 交付复核修正流量 instantFlow 与压力 pressureValue 的响应字段适配,点位表格和 24 小时趋势统一复用归一化逻辑;漏失按后端契约展示 power/kW

主要文件

  • src/api/pipeNetwork/waterSupply.js
  • src/utils/waterSupplyModel.js
  • src/views/subSystem/waterSupply/components/
  • src/views/subSystem/waterSupply/facility/
  • src/views/subSystem/waterSupply/device/
  • src/views/subSystem/waterSupply/monitoring/
  • src/views/subSystem/waterSupply/monitorAlarm/
  • tests/waterSupplyModel.test.mjs

验证

  • node tests/waterSupplyModel.test.mjs:通过。
  • 监测字段映射回归测试已按 RED-GREEN 执行:修复前 instantFlow 断言失败,修复后流量、压力断言均通过。
  • 供水目录 32 个 Vue SFC 使用 @vue/compiler-sfc 解析:0 个错误。
  • 使用工作区 Node 24 执行 Vite 生产构建:退出码 0;仅有项目既有 Sass 弃用提示。
  • 本地开发服务器 http://127.0.0.1:5173/ 登录页实际渲染正常。

风险与后续

  • 本机 8300 后端未启动,验证码请求返回接口 500,因此尚未验证登录后的动态菜单、角色权限和真实数据响应。
  • 后端 SQL 中未发现完整 19 项供水菜单迁移;部署环境需确认 sys_menu 的 component 字符串与本次语义化入口一致。
  • 当前 GIS 是轻量点线视图,未接百度或 Leaflet 底图;维修人员、附件、批量导入等完整业务流程待后续联调。
  • 不记录账号、Token、地图密钥或接口敏感响应。

后端启动复查

  • pipe-network-service 已在本机 8301 启动,验证码接口返回成功,Swagger 可发现 49 条供水接口路径,供水接口未携带令牌时按预期返回应用级 401。
  • 前端 5173 可访问,但其 /dev-api 代理仍指向 8300/pipe;当前没有 zksy-gateway 进程,因此验证码代理返回 HTTP 500,登录链路尚未打通。
  • 网关配置依赖的 Nacos、Redis 内网端口可达;下一步应启动 zk-gateway,或在仅本地直连场景下将开发代理切换到 8301 并调整路径重写。
  • 本次仅做运行状态检查和记忆更新,没有修改前端或后端运行代码。

网关启用后复查

  • zksy-gateway 已启动并监听 ::8300,未知路径可返回 404;前端 5173 根页面仍返回 200。
  • Nacos 路由配置已加载 pipe -> lb://pipe-network-service;但 Nacos 注册的 pipe-network-service 实例为 172.17.0.27:8301,宿主机对该地址 TCP/HTTP 均不可达。
  • 业务服务本机 ::1:8301 的验证码接口正常,网关 /pipe/captchaImage 和前端 /dev-api/captchaImage 仍超时/失败;浏览器登录页验证码图片没有资源地址。
  • 当前阻塞是服务注册地址与宿主机网络边界不匹配。应让网关可访问注册实例(调整服务注册 IP/网络或把网关放入同一容器网络)后再做登录和动态菜单联调。

无代码修复建议

  • Spring Cloud Alibaba Nacos Discovery 支持通过启动参数覆盖 spring.cloud.nacos.discovery.ipspring.cloud.nacos.discovery.port;本地 IntelliJ 启动 pipe-network-service 时可注册 127.0.0.1:8301,无需修改源码或前端代理。
  • 复查确认 127.0.0.1:8300[::1]:8300 均可返回网关 404,网关 IPv4/IPv6 监听不是阻塞点;重启业务服务并确认 Nacos 旧的 172.17.0.27:8301 实例不再参与负载均衡。

会话补充:阅读记忆库与项目现状复核

目标

按要求探索当前项目并阅读记忆库文档,恢复跨对话上下文。

结论与决策

  • 已阅读 AGENTS.mdmemory/README.mdmemory/index.mdmemory/long-term.md 及近期会话记录。
  • 确认项目为 Vue 3 + Vite + Element Plus + Pinia 的 RuoYi-Vue 改造前端;业务菜单由后端 /getRouters 动态下发。
  • 当前工作区仍有未提交的供水第一阶段实现,包含 waterSupply.jswaterSupplyModel.js、供水 components/facility/device/monitoring/monitorAlarm 页面与测试。
  • 当前 task_plan.md 中“供水前端联调完善”处于 in_progress,重点为首页 GIS、菜单 SQL、监测设备过滤和报警流程补齐。

文件变更

  • 仅追加本会话记录;未修改 src/、Vite 配置或 npm 脚本。

验证结果

  • 已核对 package.json、Git 状态、顶层规划和发现文档、供水页面目录。

风险与待办

  • 后续任务需保持现有未提交改动,不覆盖用户已有修改。
  • 继续推进动态菜单、供水首页和报警联调时,应先确认后端服务注册/网关可访问性。

会话补充:供水前端继续开发(燃气风格首页/导出/GIS联动)

目标

按用户提供的供水管网安全运行监测系统功能概述,参考燃气管网首页样式继续完善前端并对接后端接口。

结论与决策

  • 供水首页已从普通页面升级为燃气管网风格的大屏:三栏布局、BMapGL 中央地图、ECharts 图表、实时监测/设备/告警卡片。
  • 五类供水设施台账页面补齐“导出”和“GIS 联动”按钮,对接后端 /api/water/*/export 文件流。
  • 管网数据统计分析页补齐 Excel 导出。
  • 运行监测和设备管理页面增加 GIS 联动快捷入口。
  • 设施 GIS 页支持路由 type 参数预筛选图层。

文件变更

  • src/api/pipeNetwork/waterSupply.js:新增五类设施导出 API。
  • src/views/subSystem/waterSupply/components/WaterSupplyHome.vue:大屏首页重写。
  • src/views/subSystem/waterSupply/components/WaterFacilityDashboard.vue:GIS 预筛选、统计导出。
  • src/views/subSystem/waterSupply/components/WaterMonitoringPage.vueWaterDevicePage.vue:GIS 联动入口。
  • src/views/subSystem/basic/{waterSource,waterPlant,pumpStation,pipeInfo,waterUserInfo}/index.vue:导出/GIS 按钮。
  • progress.md:记录本轮进展。

验证结果

  • node tests/waterSupplyModel.test.mjs 通过。
  • 12 个相关 SFC 使用 @vue/compiler-sfc 解析通过。
  • npm run build:prod 构建成功。

风险与待办

  • 动态菜单仍依赖后端 /getRouterssys_menu,新增页面/按钮权限需同步后端菜单 SQL。
  • BMapGL 加载依赖网络和 AK,离线或 AK 受限时首页会显示地图加载失败提示。
  • 运行监测后端仍未按设备子类型过滤,后续需在服务层补充或前端增加更明确的类型筛选。

会话补充:根据用户反馈调整供水模块

目标

处理四条反馈:取消 GIS 联动按钮、提供燃气风格供水设施 GIS 一张图菜单、补齐管网统计页面入口、运行监测按子设备类型过滤、监测报警工单处置参考燃气工单页。

结论与决策

  • 移除所有“GIS 联动”按钮,GIS 改为独立菜单页面。
  • 供水设施 GIS 一张图采用燃气管网 GisDashboard.vue 同款布局,使用 BMapGL + 后端 GeoJSON 图层。
  • 新增前端静态路由 waterSupplyRouter.js,菜单包含“供水设施GIS一张图”“管网数据统计分析”“报警工单处置”。
  • 新增供水报警工单处置页,参考 BusinessWorkOrder.vue 的列表/详情/派单/核查/处理/验收/结案/时间线流程。
  • 后端通用工单服务增加 water 设备类型过滤,供水报警派发的工单可被查询和处置。
  • 运行监测后端已按流量计/压力计/漏失设备类型过滤,三个子页面数据范围正确。

文件变更

  • 前端:src/router/index.jssrc/router/modules/waterSupplyRouter.js(新增)、src/views/subSystem/waterSupply/facility/gis.vue(重写)、src/views/subSystem/waterSupply/monitorAlarm/workOrder.vue(新增)、移除相关 GIS 按钮。
  • 后端:BusinessWorkOrderServiceImpl.java 增加 equipmentType='water' 分支。
  • 文档:progress.md 更新。

验证结果

  • 相关 Vue SFC 解析通过。
  • npm run build:prod 构建成功。
  • 后端 Java 文件仅做局部字符串/SQL 过滤调整,未执行后端编译。

风险与待办

  • 静态路由与后端动态菜单可能重复,若后端已配置供水菜单需避免同名冲突。
  • 供水顶级设备类型需在数据库中实际存在 type_name='供水' AND parent_type_id='0',否则工单过滤结果为空。
  • 报警工单处置页依赖通用工单接口 /api/work-order/*,需要后端重启后生效。