牡疫控"疫情监控小程序&数据孪生平台

项目背景

2019年11月，我成为盛世雪城开发组副组长，主要负责开发组项目的管理、统筹与协调工作。

2020年初，新冠肺炎疫情爆发，牡丹江市作为黑龙江省内疫情较为严重的城市之一，防疫形势十分严峻。为应对疫情，牡丹江市启动了 “牡疫控” 疫情防控小程序，通过大数据分析、GIS地图孪生、核酸检测调度等功能，为牡丹江市疫情防控提供重要技术支撑。​

作为牡丹江疫情防控的 “数字大脑”，这个平台的核心价值在于 “精准” 与 “稳定”。它集成了四大核心能力-疫情数据可视化实现态势实时感知，核酸检测调度保障采样高效有序，GIS 地图孪生还原区域防疫全貌，再配合多终端适配的交互设计，支撑起全市 10 + 县区的防疫工作。而高并发场景下的稳定运行是基本要求 —— 日均 50 万 + 请求处理、200 万 + 用户同时在线，这些指标既是压力，也是我们技术攻坚的方向。​

紧急上线-3 天完成小程序核心搭建​

2020年年初，新冠疫情爆发，在居家办公的情况下，疫情防控容不得片刻拖延，为了保证能够在疫情初期快速筛查返乡人员，并建立14天内回溯流调轨迹和居家观察人员的提问记录。 作为副组长，我带领开发组成员经过规划、研发、测试，采用原生小程序 + Serverless架构，仅用 3 天就实现核心功能上线，快速搭建了“牡疫控”疫情防控小程序，响应了牡丹江地区的防疫急需，为牡丹江市疫情初期防控提供了重要技术支持。

Serverless 的无服务器架构让我们无需关注服务器部署与运维，将全部精力投入功能开发，这也为后续技术选型提供了轻量化场景的实践参考。

小程序重构-性能与稳定性的全面升级​

随着功能迭代，原生小程序逐渐暴露体积膨胀、加载缓慢等问题。中期我们基于UniApp进行全面重构，通过三大优化策略实现质的飞跃-​

• 基础能力拓展-重写小程序生命周期、request 请求与路由机制，为个性化功能与监控体系搭建底层框架；​

• 监控体系搭建-引入无痕埋点技术，实现用户行为、性能数据与异常情况的实时捕捉，配合 sourceMap 精准定位问题，将综合故障率从 9% 骤降至 0.3%；​

• 性能极致压缩-采用独立分包拆分功能模块、数据预拉取减少等待时间、按需注入避免资源冗余，让主包体积从 8M 压缩至 3M，首屏加载时间从 10s 缩至 1s，网络请求平均耗时也从 650ms 降至 320ms，彻底解决了多权限模块加载导致的白屏问题。

通过重构升级，扩展了8大模块，通过性能压缩和数据预拉取，解决了不同模块对不同需求群体的快速加载，通过重写生命周期和埋点，监控小程序的状态，保证小程序稳定运行。

数字孪生平台-大数据场景的流畅体验打造​

疫情防控稳定后，为了响应核酸检测号召和稳定疫情防控成果，基于Nuxt.js构建的疫情数字孪生平台，面临着万级数据展示的性能瓶颈。ElementUI 表格在海量数据下频繁出现闪屏与卡顿，我们通过虚拟列表滚动 + WebWorker的组合方案，将数据加载时间从 13s 降至 1s—— 虚拟列表仅渲染可视区域数据，WebWorker 则将数据处理逻辑从主线程剥离，两者结合彻底解决了大数据渲染难题。​

3D 可视化-从效果呈现到性能优化的深耕​

3D 疫情数据可视化是平台的亮点功能，基于Three.js实现的场景却一度面临帧率不足、加载缓慢的问题。我们从渲染与资源两个维度展开优化-​

• 渲染效率提升-合并同类元素几何体减少 Draw Call 次数，降低 GPU 渲染压力；​
• 资源加载优化-压缩纹理体积并通过加载管理器实现按需加载，避免资源冗余加载；​
• 性能监控集成-接入 stats.js 采集帧率、渲染耗时等数据，实时同步至监控面板，最终实现 3D 场景帧率稳定在 30+（优化前仅 15-20 帧），渲染耗时降低 55%，资源加载失败率从 8% 降至 0.5%。​

可视化组件-可配置化能力的高效输出​

为满足不同场景的数据展示需求，我们封装了ECharts核心图表组件（折线图、柱状图、饼图等），并设计可视化配置面板。用户通过拖拽即可选择图表类型、数据维度与图例颜色，系统实时生成 JSON schema，极大提升了大屏应用的定制效率，也形成了团队可复用的组件规范。​

项目成果-技术价值与规范沉淀的双重收获​

项目的落地不仅达成了防疫技术支撑的核心目标，更实现了技术与团队的双重成长-​ 防疫支撑成效显著-通过高并发场景预演，成功支撑全市 200 万 + 居民的日常防疫需求，保障 20 + 次大型核酸检测 0 事故，日均 QPS 稳定在 50 万 +；​ 技术体系趋于成熟-构建起覆盖小程序、Web 平台、3D 场景的全链路前端监控体系，故障定位效率从天级别缩至小时级别，为后续项目提供了可复用的性能优化方案；​ 团队规范正式落地-基于项目实践，我们明确了以 Nuxt.js、UniApp 为前端核心框架，Go+Redis为后端支撑的技术路线，同时制定了组件封装、性能优化、监控告警等一系列开发规范，为团队规模化开发奠定基础。​

心得感悟-在实战中寻找技术与价值的平衡点​

回顾整个项目，最大的感悟是 “技术服务于需求，规范源于实践”。疫情防控的紧急需求倒逼我们快速突破技术瓶颈，而每一次优化都不是为了技术而技术 —— 从 3 天上线的应急开发，到重构后的性能升级，再到可视化的体验打磨，所有技术决策都围绕 “防疫高效、用户可用、系统稳定” 的核心目标。​ 同时，作为开发组副组长，我深刻体会到 “技术沉淀” 的重要性。项目中遇到的每一个问题，无论是高并发处理、大数据渲染还是 3D 性能优化，都成为我们提炼技术规范的素材。这些从实战中生长出的规范，远比书本上的理论更具指导意义，也让团队在后续项目中少走了许多弯路。​ 这段攻坚经历让我更加坚信-优秀的技术方案，既要能解决当下的紧急问题，更要能为长远发展提供支撑。而团队的成长，正是在这样一次次 “解决问题 — 沉淀经验 — 规范落地” 的循环中实现的。​

这也是我入职盛世雪城后，以开发组副组长身份主导的首个项目，成为我职业生涯中极具里程碑意义的实践。在疫情防控的紧急背景下，我们与牡丹江国投携手打造地区核心防疫平台，不仅为 200 万 + 市民的安全筑牢技术防线，更在实战中敲定了团队后续的技术路线与开发规范，这段经历的沉淀与思考，值得细细复盘。​