项目背景 "旅游小程序"是一个集旅游产品推荐、社区互动和电商功能于一体的综合性旅游服务平台。该项目旨在为用户提供一站式的旅游解决方案，通过小程序平台简化旅行规划和购物体验。 技术栈 前端开发：使用uni-app框架进行跨平台小程序开发 界面设计：uView UI库实现高质量的用户界面设计 角色和职责 作为前端开发工程师，我负责了以下几个关键领域的设计与开发： 社区互动模块：创建了一个互动社区，允许用户分享旅行经验和评价。 商城模块：开发了一个集成的电商平台，销售旅游相关产品。 酒店预订模块：实现了酒店搜索、预订和支付功能。 分销系统重构：成功地对分销系统进行了技术重构，提高了系统的可维护性和扩展性。 技术难点与解决方案 小程序 难点：实现一个高性能、用户友好的小程序，在保持良好用户体验的同时，确保跨平台兼容性。 解决方案： 采用uni-app框架进行开发，利用其跨平台特性保证了小程序在不同设备上的一致表现。 通过uView UI库设计了一套美观、易用的用户界面，提升了用户的交互体验。 对分销系统进行重构，采用模块化的设计理念，提高了代码的可维护性和系统的性能。 结果：这些努力极大地提升了小程序的市场竞争力和用户满意度，直接促进了项目的按时交付和市场成功。我的工作确保了技术方案的有效实施，为公司业务的持续增长提供了坚实的技术支持。

项目背景 本类项目旨在为客户开发一个数据看板系统，实时展示设备的运行状态、实时数据和历史性能数据，以支持更高效的设备监控和决策制定。 技术栈 前端框架：Vue2.x及其生态系统，包括Vue Router和Vuex 数据可视化：ECharts用于动态图表和数据可视化 实时数据通讯：MQTT协议用于实现图表数据的实时刷新 角色和职责 作为项目的前端主要开发人员，我主导了以下关键工作： 设计和实现了一套响应式的数据可视化界面，适配不同屏幕尺寸和设备。 使用ECharts库开发了多个动态图表组件，用于展示设备的实时和历史数据。 集成MQTT，实现了数据的实时获取和图表的即时更新。 技术难点与解决方案 布局兼容和数据刷新 难点： 适配笔记本和大屏 解决方案： 采用了CSS Grid布局结合vw、vh单位实现了高度响应式的界面设计。通过集成MQTT协议，实现了数据的实时订阅和图表的动态刷新。 结果： 成功开发并交付了多个数据可视化面板，客户通过这些看板能够实时监控和分析设备状态，大幅提高了运维效率。

项目背景 开发物联网公共安全管控3D云平台，目标是利用最新的数据挖掘技术和3D可视化手段，显著提升气体行业设备监测、管理的效率和安全性。 技术栈 使用 Vue3 进行界面开发，Pinia 进行状态管理，scss 与 naive-ui 进行界面样式设计，Blender 3D 建模，Three.js 前端渲染。 角色和职责 作为项目的前端主要开发人员，我主导了以下关键工作： 使用 Blender 构建精确的设备和楼层 3D 模型。 利用 Three.js 实现复杂的 3D 模型和动效前端渲染。 开发实时报警动效和基于云平台数据的图表查看功能。 基于 Rush 搭建高效的开发框架，提升项目的开发流程和协作效率。 技术难点与解决方案 前端需求收集和模型建造 难点 获取精确的设备尺寸和楼层数据对于构建准确模型至关重要。 解决方案 通过现场勘察和手动测量设备尺寸，确保了 3D 模型的真实性和准确性。 结果 使用 Blender 成功创建了高度贴近现实的 3D 模型，为后续的前端渲染打下坚实基础。 模型前端效果渲染 难点 实现高性能且真实的模型渲染效果，特别是在处理材质、灯光和动效时面临挑战，重复模型。 解决方案 模型优化，使用简化修改器和低三角面 模型设置自定义属性，满足前端渲染需求 模型材质，提取封装公共材质，小面积的在 blender 里直接设置模型材质，大面积的全部使用前端代码设置 材质图片压缩 重复模型，先在 blender 里建造了预占位盒子，前端渲染后效果可以，然后提取坐标点数据，前端根据坐标点数据复制模型 模型效果 气体管道流动效果：通过修改材质纹理（箭头图片），并在更新类里设置材质的 x 偏移量，达到流动效果 排风管道流动效果：由于管道是多个模型拼接而成，纹理 UV 方向不同，首先通过 blender 修改所有管道的 UV 方向，使所有方向在一个轴上，然后前端通过修改材质，材质自定义顶点和着色器代码，并在更新类里设置材质的 time 变量，达到流动效果 结果 实现了流畅且具有高度真实感的3D场景渲染，增强了用户体验，并通过ECharts和Vue3全家桶实现了高级数据可视化功能。