通过拖拽实现的可视化大屏demo

1、组件列表：

对于组件进行封装，并将组件的相关配置信息封装到一个单独的文件中。将组件列表封装成组件，通过遍历来展示所有组件

2、操作面板：

拖拽与缩放：

通过vue-drag-resize进行实现（vue-drag-resize目前存在问题：当x,y,w,h同时改变时，只有x的改变会生效），拖拽到操作面板的组件使用数组进行记录

ps：测试存在bug：使用id记录父级组件，通过id查找父级x，y，但是测试后出现问题当两个图层重叠时，id取值会不准确（当鼠标落在第二次拖放的组件的边缘白色部分时，会将id定位第一个组件的id） 待优化

图层的控制：

通过vue-context实现右键菜单；

在进行图层操作的时候先判断是否为最顶层或最底层，若已经是，则进行提示不予操作；

置顶和置底操作先根据选中状态找到要操作的图层，再计算组件数组中z-index的最大值进行加减操作实现置顶和置底；

上移图层和下移图层先根据选中状态找到要操作的图层，再计算组件数组中z-index值与之相近的上一个或下一个进行加减操作实现上移图层和下移图层；

删除操作通过选中状态在组建数组中进行遍历找到这个组件进行移除来实现删除操作

撤回与恢复操作使用数组对每次操作后的组件数组进行记录，若要撤回，则将这个记录数组的最后一次记录进行删除并重新赋予给组件数组值来实现撤回；恢复操作则使用另一个数组记录撤回的操作，在要恢复操作时，将记录的撤回的数组赋值给组件数组来实现恢复操作

ps:总结时思考之前思路发现存在bug：如果拖拽三个组件，并将第二个组件进行置顶，此时三个组件的z值为1、3、4，则在此时将第一个组件进行上移操作，需要上移两次才能实现真正意义上一次的上移操作 待优化

辅助线：

拿到当前组件的x，y和w，并通过x和w来计算组件中点，对组件数组进行遍历，先判断是否为自身，若是则直接跳过；计算每个组件的中点值，并使用绝对值计算选中组件和每一个组件中点的差值，当接近对齐时通过改变控制辅助线显示的字段的值来显示辅助线，并在差值为0也就是对齐的时候改变辅助线颜色以此来提醒已经对齐

ps：当对齐后点击操作面板空白区域，辅助线和选中未消失，很别扭 待优化

3、配置列表：

将所有组件的默认样式进行封装，并在拖拽后赋予给组件实现渲染；配置列表进行封装，并对要进行配置的配置项进行封装根据配置项的类别来渲染对应修改用的的组件，并对这些组件的值进行监听，如果改变则将改变后的样式通过遍历找到对应组件进行更新，使用computed进行随时渲染