**项目名称:** 园区安防监控系统
**项目介绍:** 本项目是一个安防监控系统, 针对门禁、停车、视频结构化、住宿、车票、手机号码、收入等多源数据进行基于空间位置、时间、场景模式的多维AI分析,从而实现对可疑人员和车辆的智能预警
**技术栈:** vue3,ts,axios,element-plus,git,echarts,es6,websocket
**项目难点与解决方案:**
1. 使用prettier、eslint解决项目中代码格式化以及代码风格统一问题,使用git hooks中husky、commitzen、commitlint解决git规范化提交以及格式校验问题
2. 后端采用微服务部署的方式,导致前端需要请求多个baseURL, 利用class类对axios进行封装,通过传参方式控制axios.create配置解决不同baseURL请求问题
3. 由于项目不同的baseURL需要的参数不同, 针对不同baseURL请求设置全局拦截器、局部拦截器、单个拦截器
4. 项目中采用全局loading加载,导致任何请求都会产生loading, 通过封装api接口设置showLoading控制单个请求loading是否显示
5. 使用单例模式解决全局loading时加载是loading重复开启问题
6. 使用vue递归组件结合后台返回的菜单数据解决项目中无限极菜单渲染的问题
7. 使用vue组件通信结合slot插件对element-plus表格组件、表单组件、分页组件、弹窗组件、文件上传组件进行二次封装,解决项目中通用业务重复开发
8. 使用keep-alive实现项目中表单数据的缓存来提高用户体验以及解决表单数据丢失问题
......
**项目名称:** 安防监控系统可视化大屏
**项目介绍:** 本项目是一个安防监控系统, 针对门禁、停车、视频结构化、住宿、车票、手机号码、收入等多源数据进行基于空间位置、时间、场景模式的多维AI分析,从而实现对可疑人员和车辆的智能预警
**项目难点与解决方案:**
1. 基于3D建模结合数字孪生平台实现园区三维可视化场景,解决项目园区概览、安防点位等多个场景的监控
2. 使用海康威视提供的SDK文件解决项目中监控的实时预览与回放功能
3. 使用echarts实现事件趋势统计折现图、运营安防分析与设备覆盖率的雷达图、以及其他相关模块的饼图、柱状图等图表的展示
4. 使用WebSocket解决项目中各模块数据的实时获取
5. 使用window.resize结合echarts.resize方法解决项目中图表自适应问题
6. 使用 vue.config.js 中的 proxy 代理解决本地跨域的问题,使用 ningx 的配置实现项目在线上跨域的问题
7. 使用Flexible.js、px2rem结合媒体查询解决项目适配问题
8. 使用css3中animation以及keyframes实现项目中各项数据列表滚动效果
......