首页  思维导图  详情

Umeet2.0 Web

2019-05-30 16:00:08   10  举报





AI智能生成

Web

web

作者其他创作

大纲/内容

主要技术难点

1、编译后网站访问卡顿
（所有vue项目都通用）

解决方案：
一：cnd方式引入框架依赖
二：nginx配置gzip压缩
三：其他依赖框架按需加载

2、兼容IE浏览器

解决方案：
使用谷歌插件方式
参考：https://blog.csdn.net/fend0875/article/details/78060484

3、会议室大盘

一：数据多时性能问题

解决方案：
使用vue-infinite-loading实现滚动分页展示方式
参考链接：https://peachscript.github.io/vue-infinite-loading/guide/#import

二：时间刻度条的实现

解决方案：
1、获取时间刻度的数组，遍历渲染刻度条（半个小时、一个小时的刻度条高度不一样，通过对2求余是否为0 给不同的样式）
2、渲染刻度上的时间刻度，遍历时间数组即可
3、渲染占用、过去时间的颜色块，使用百分比的方式{left:xx%, width:xx%, status:xx， meeting: object }的方式遍历显示在时间刻度上，鼠标移上去再el-popover实现会议详情的显示, status区分灰色过去时间，红色占用时间

三：数据实时更新

解决方案：
预约会议的时间变更就需要同步会议室列表的数据以及冲突情况
采用局部替换数据的方式

四：是否冲突

解决方案：
前端比较占用会议的时间范围是否在当前预约会议的时间startTime和endTime范围内，
利用外包含、内包含、左交集、右交集的方式比较是否冲突

4、富文本编辑兼容性

解决方案：wangeditor
参考链接：https://www.kancloud.cn/wangfupeng/wangeditor3/335775
多种富文本插件比较：https://blog.csdn.net/joycesunny/article/details/77837838

5、报表展示使用Echart

6、滚动条样式以及鼠标
移上去显示以及隐藏

解决方案：
1、使用 vue-gemini-scrollbar
参考链接：https://segmentfault.com/a/1190000013338560
2、自定义样式 custom-scrollbar
js 控制鼠标移上去显示，移开隐藏滚动条，通用方法scrollbarShowHidden( )
SelectUser.vue组件有使用例子

7、权限

解决方案：
指令 v-has-permission="'sys:roomBoard:meetingNumber'"

8、点播、直播

解决方案：vue-video-player 、 videojs-flash
参考链接：https://blog.csdn.net/fj101229/article/details/80844417

9、el-tree 添加增删改查功能

解决方案：:render-content="xxx"实现树的重新渲染自定义
参考链接：https://segmentfault.com/a/1190000011574698

10、分屏定位
定位布局各不相同，
并且需要拖拽布局

解决方案：
1、把54种不用的分屏方式根据cms\polycom分开两个数组，写好对应的layout以及样式布局方式
2、选中不同的分屏方式，再在数组里面查找出对应的分屏布局方式，遍历当前布局的div数量以及获取对应的布局样式进行
div的绘制
3、使用jquery的drag以及drop实现拖拽布局功能

11、会议列表、控制列表同步

解决方案：
利用sockJs实现数据推送
1、会议列表的监听是userId, (由于通知(暂时未完善)也需要推送，因此监听写在home.vue）
2、控制与会者列表的监听是meetingId

home 首页

安排会议 ArrangeConference.vue

我的会议 MyConferenceList.vue

会议控制

视频会议控制 ConferenceControl.vue

电话会议控制 TelConferenceControl.vue

预约会议成功 ArrangeConferenceSuccess.vue

components组件

延长会议 DelayTime.vue
（由于每一个会议可以延长的会议时间都不一样因此做成组件）

一个会议室时间刻度条 MeetingRoomOccupation.vue