综合监控和管理平台-可变信息符号子系统产品系统

本项目面向乌兹别克斯坦公路网（IMMP）机电运维场景，核心业务是高速公路可变情报板（VMS，情报板）的统一纳管与交通信息发布。立项原因是当地路网情报板品牌、协议、分辨率差异较大，此前缺少统一的设备台账和内容下发入口，限速、施工、事故、分流等诱导信息依赖厂家工具逐台操作，发布时效低、易出错，且发布结果无法追溯。系统用于解决设备集中管理、路况信息快速编辑与批量下发、发布结果留痕与审计等问题，支撑路网运营中心日常交通诱导与应急发布，提升公路通行安全与信息发布效率。

系统由设备总览、信息诱导、定时发布、消息库管理、发布记录、设备管理六大模块及告警消息中心组成。
① 设备总览：支持地图/列表双模式。地图模式基于乌兹别克斯坦地理底图，按在线/离线/故障分色展示设备点位，提供设备总数、类型分布、发布条数统计卡片及发布记录表格/柱状图切换，支持按名称搜索并定位高亮设备；列表模式以"机构—路段—设备"树定位，查看设备档案与情报板画面预览。
② 信息诱导：多选设备后按分辨率可视化编辑多页内容（文本/图片、X/Y 坐标、宽度、字号、字间距、颜色、对齐、每页播放时长），实时预览，一键批量发布，可另存为节目或引用消息库节目。
③ 定时发布：以任务形式配置周期下发并可启停、编辑、删除。
④ 消息库管理：情报板节目模板的增删改查与可视化编辑。
⑤ 发布记录：展示发布人、结果、失败原因与时间，支持时间范围筛选，并可对比发布前后内容。
⑥ 设备管理：设备台账增删改查（机构、路段、桩号、经纬度、类型、型号、协议、网关等），支持条件查询与导出。
⑦ 消息中心：通过 MQ 实时接收本机构告警，按告警设置弹窗提醒，支持免打扰。

本人负责该系统前端的设计、开发与迭代：负责工程化搭建、路由与菜单权限、四语国际化、公共组件（ProTable、搜索表单、业务弹窗、设备树）、六大业务页面与情报板内容编辑器的开发，以及后端接口联调与 MQ 告警推送接入。技术栈：Vue 3.4 + TypeScript + Vite 5 + Element Plus + Pinia + Vue Router 4（Hash）+ Axios + Vue I18n 9 + ECharts 5 + STOMP.js + SCSS。实现亮点与难点：
1）像素级所见即所得编辑器：按设备实际分辨率（如 320×32）1:1 渲染画布，利用 DOM 实测文本像素宽度实现自动换行/截断（区分中英文、支持英文单词与连字符不拆分），并将字号、字间距、颜色、对齐、字体映射为设备协议索引值；输入端做行首空格、空行、光标位置归一化，保证预览与下发内容一致。
2）发布链路：支持多设备批量下发，当后端返回"设备当前为告警内容"时二次确认强制覆盖（forcePublish），失败原因回显；发布历史保存发布前后快照用于差异对比。
3）实时告警：基于 RabbitMQ Web-STOMP 按用户机构创建订阅队列，含心跳与 4s 重连；按告警配置（级别/类型/免打扰）过滤后以 iframe 弹窗展示详情，父子页面通过 postMessage 通信。
4）地图：ECharts geo 叠加 effectScatter/scatter 多图层按状态渲染，搜索定位时做中心点/缩放动画与点位高亮闪烁。
5）国际化：中/英/俄/乌兹别克语四语切换，Element Plus locale 同步，菜单、表头、提示全量词条化。
6）请求层统一封装：Token 头、时间戳 + MD5 签名、业务码统一处理，登录态失效（code 555）自动清缓存重登。