1. 项目介绍：主要是展示公司天猫、抖音平台各旗舰店的经营情况和各指标数据 2. 负责项目的前端可视化主开发工作，还原 UI 设计图并使用响应式布局适配H5端及 PC端。 3. 使用 Vue.js、VueRouter、Vuex、Vue-CIi 进行开发，使用 Echarts.js 绘制图表。 4. 使用 keep-alive 对部分页面进行缓存，优化用户使用体验。 5. 接入企业*，根据登录的用户所在的用户组进行权限控制。 6. 通过按需加载来解决页面数据量过大而造成卡顿的问题。

项目介绍：响应集团战略发展方向，搭建私域流量池，吸引C端消费者粘性 主要职责： • 设计微页面的数据结构，由后台编辑生成对应的 JSON 数据，小程序端根据不同的数据渲染出不同的页面效果，减少开发、*审核成本，提高开发响应效率 • 后台结合 ElementUI和 draggable 搭建可视化、可自由拖拽编辑的商城装修页面并开发一系列高度灵活配置的自定义组件，提高运营效率，减少重复开发，节约人力成本 • 接入*小程序的模板消息，推送最新优惠券和活动信息，引导用户打开小程序，增加用户粘性，提高日常 PV和 UV • 对小程序按模块进行分包，减少主包体积，提高首屏加载速度，减少用户流失 • 采用防抖技术防止用户误点多次下单购买支付同一商品。使用在登录、发短信等功能性按钮避免用户点击太快，以致于发送了多次请求 • 采用节流的方式来做分页加载效果，防止重复请求同一页数据，提高用户体验

1.项目介绍：该项目主要是配合公司的 IPC 产品使用，利用 Vue/Vue3+TypeScript 框架进行开发。项目涉及的核心功能包括监控实时视频播放、回放视频播放，以及 AI 检测区域绘制等。 2. 功能特点 ①监控/回放视频功能： ● 码流传输：使用 WebSocket 技术进行码流传输，确保视频数据的实时性和稳定性。 ● 播放技术选择：根据码流分辨率和视频编码（如H265或H264）选择最佳的播放技术。对于高分辨率或H265编码的视频，使 用基于 QT 开发的 Windows 插件播放；对于低分辨率或H264编码的视频，则使用 WebGL和 MSE 进行网页内播放。 ②AI 检测区域绘制：通过 Canvas API 实现检测区域的绘制功能，支持多边形、矩形、检测线段、数据表格等多种绘制类型。 此外，还包括车辆/人的检测框绘制。 2.工作亮点 ①Canvas 库开发： ● 业务导向设计：针对项目的实际需求，设计并开发了一个 Canvas 绘制库。这个库不仅满足了当前项目的绘制需求，而且为未来的相似业务提供了快速开发的基础。 ● 高效复用：通过绘制库的使用，后续业务在面临相似绘制需求时，可以直接利用已有功能，大大提高了开发效率和代码复用 性。 ②视频组件封装： ● 组件化思想：将视频功能封装成独立的组件，使得在需要展示视频的页面中，只需简单引入该组件即可，极大地减少了代码冗 余。 ● 便于维护：封装后的视频组件使得代码结构更加清晰，方便后续的需求变更和代码维护工作。 ③QTWeb 端组件： QTWeb 端组件是一个关键的部分，它主要负责 Web 页面与 QT 插件之间的交互。由于我们的项目中涉及到一些高分辨率或H265编码的视频播放需求，这些视频需要利用 QT 框架开发的 Windows 插件来提供流畅的播放体验。QTWeb 端组件的任务就是确保 Web 页面能够与这个 QT 插件进行无缝集成，从而实现视频内容在 Web 页面上的流畅播放。 ● 无缝集成：QTWeb 端组件通过 WebSocket 与 QT 插件进行通信，确保两者之间的数据交换和命令传递能够顺畅进行。 ● 视频播放控制：该组件提供了视频播放的控制功能，如播放、暂停、停止、快进、快退等，使得用户能够在 Web 页面上直接操作 QT 插件播放视频。 ● 视频窗口：首先会获取视频窗口在 Web 页面上的位置信息。这通常涉及到计算视频窗口的坐标（如左上角的位置）以及它的大小（宽度和高度），通过 window 对象和 DOM Api 获取位置信息，再计算后，发送给 QT 插件，还需要兼容各浏览器● 错误处理：组件还包含了错误处理机制，能够捕捉并处理视频播放过程中可能出现的各种错误情况，如网络中断、视频格式不 支持等。 ④内存优化： ● 问题定位：在接手项目的时候，针对预览页面挂载时存在的浏览器内存崩溃问题，通过控制面板的内存排查，准确地定位到了 导致内存溢出的代码位置 ● 显著效果：经过一系列优化措施，如翻译文件的按需引入、视频数据堆积处理、路由模块动态导入、闭包释放等，不仅解决了 内存崩溃问题，还显著降低了运行内存占用，从原来的30多M降低到了10多M，提升了应用的性能和稳定性。 ⑤性能优化： ● 根据机型需求，将不必要的v-show 指令替换为v-if 指令，提高了页面的渲染性能和响应速度。 ● 引入 indexdb 技术，实现了图片数据的本地存储和快速访问，提高了应用的性能和用户体验。 ● canvas 绘制优化，通过分静态和动态层进行绘制优化，提高了 Canvas 的绘制性能和效率。 ⑥脚本： ● Git 提交脚本：编写了一个用于自动化 Git 提交的脚本，简化了开发过程中的版本控制流程，提高了开发效率。 ● 打包部署脚本：用于项目的打包和部署，实现了自动化的构建和发布流程，进一步提升了项目的开发和管理效率。