2020-08-05 大屏开发总结

大屏开发接近尾声

第一次接手大屏，从六月二十多号，前前后后，中间的修改和数据对接，大屏的开发到现在8月初，即将解近尾声，当然中间也因为一些事情搁置了，实际开发的时间应该没有这么久。

• 6.9~7.8 静态布局+已有数据对接（若有全部数据，UI确定，在此解决应该全部完成了）
• 7.8~8.3 UI修改及调整
• 8.6 开始测试
• 8.27 展会展示

大屏开发总结

1. 项目开发背景
   项目本身已有一个web系统，今年8月有行业展会，对外展示需要一个大屏展示系统，除此之外，日常监控中心也可调看大屏查看实时数据。主要用于展示实时数据和累计的数据，体现我们的信息化解决方案对现有的管理决策带来了很好的帮助，也帮助现场观展人员更加了解项目的核心信息。

2. 项目核心技术
   Vue+Element-UI+Echart+Svg+Swiper+CircleMenu

3. 项目总结
   (1) 静态布局
   此次大屏开发在路由上实则只有两个页面，登录页和主页。登录页是为了进行权限控制，防止其他用户直接点开链接就可以进入主页看到数据。

   但是主页(Home.vue)有三个页面，封装了三个组件。分为一个综合页和两个单独的页面。页面之间通过Swiper和CircleMenu进行切换。

   也是第一次用Swiper和CircleMenu，简单说一下。Swiper其实不是用它的轮播功能，适用它的水平切换功能，因为三个页面在同一个页面，就是都在同一个div里，但是每个页面的宽高都必须是100%，无法定义最大层的盒子高度，也就是轮播插件里面的那个轮播槽，不能够写成1920*3的px，因为会有自适应的问题，有的电脑不是这个宽度，就会有问题，但是swiper就刚好解决了我的问题，还有自带的动画效果，还有切换的方法，都封装好了的，所以使用起来非常的酸爽。

   CircleMenu是一个vue的圆形菜单导航插件，用它的原因是配合swiper进行三个页面之间的切换。功能上是齐全的，就是差一点切换的效果。就是点击时需要给每个元素加效果，于是通过原生js去修改了一下，也达到了我想要的效果。（效果图如下）
   

除了这个布局之外，还有就是echart，这是个老生常谈的问题了。要记得给父亲盒子高度。此外，为了避免有可能有自适应的问题，我还是习惯将echart组件进行封装，