技术栈:Vue 3 + Vue Router + Vuex + Vant + ECharts + Three.js + WebSocket + Axios
项目描述
面向新能源车主,开发功能完整的移动端 App。实现车辆实时状态监控、远程控制、维保预约、充电管理、数据可视化
等核心功能,与充电桩平台、车辆 TSP 平台完成多端联动。
项目职责:独立完成车主 App 全模块前端开发,包括车辆实时状态监控、远程车辆控制、维保预约、充电管理、数据分
析看板、3D 车辆可视化交互等核心功能,并与充电桩平台、车辆平台实现多端数据联动。
技术要点:
基于 Three.js 加载gltf车辆模型,实现车门/后备箱开关动画、车内外视角切换。通过 Raycaster 实现点击拾取车门、
后备箱等部件并触发对应动画,提升用户远程控制体验
订阅车辆状态与远程控制消息主题,实现剩余电量、续航里程、充电状态、空调温度等数据的秒级更新,保证车机端
与 App 端状态一致性。
封装统一控制接口,实现车门上锁/解锁、车窗关闭、后备箱关闭、空调开关/调温等远程操作。操作后通过
WebSocket 回传执行结果并更新 UI 状态,提供完整的操作反馈闭环。
使用 ECharts 开发月度充电指标(充电次数/充电量/花费)柱状图、月耗电与行驶里程趋势折线图。对订单数据按月
份分组聚合,动态计算百公里电耗,支撑用户用车数据分析。
实现常规保养与车辆维修双类型预约,集成城市选择、服务站筛选、日历预约、时间选择、维修方案展示、Canvas
手写签名上传、支付跳转等完整业务闭环。
对 Axios 进行二次封装,实现请求/响应拦截、Token 自动注入、401 自动跳转登录、GET 请求参数自动序列化,以
及统一的 Toast 错误提示,减少重复代码,提升接口维护效率