因为在项目中经常开发一些报表，并且业务、逻辑其实都有大部分的重复部分。

所以将这些常用的模块抽象出来、并且可视化操作。封装成一款报表开发工具。

先看一下项目的一些效果：数据单项绑定

 可视化操作：

数据联动：

使用技术：vue全家桶

项目结构：

│ App.vue   #主要组件│ main.js│├─assets│ logo.png│├─axios  #网络，用于执行远程计算机上的sql，或者接口、实现数据绘制到页面上│ http.js│├─components│ │ Canvas.vue #基础画布组件│ │ ComSougnBaseAssemblyCheckbox.vue  #基础组件│ │ ComSougnBaseAssemblyDatePicker.vue #基础组件│ │ ComSougnBaseAssemblyDateTimePicker.vue #基础组件│ │ ComSougnBaseAssemblyFont.vue #基础组件│ │ ComSougnBaseAssemblyInputText.vue #基础组件│ │ ComSougnBaseAssemblyLine.vue #基础组件│ │ ComSougnBaseAssemblyRadio.vue #基础组件│ │ ComSougnBaseAssemblySelect.vue #基础组件│ │ ComSougnBaseAssemblySlider.vue #基础组件│ │ ComSougnBaseAssemblySwitch.vue #基础组件│ │ ComSougnBaseAssemblyTimePicker.vue #基础组件│ │ ComSougnBaseAssemblyTimeSelect.vue #基础组件│ │ ComSougnBaseBi.vue #可视化操作主要实现的组件，使用遍历，绘制所有组件│ │ ComSougnBaseLayoutCenter.vue #基础布局组件│ │ ComSougnBaseLayoutRow.vue #基础布局组件│ │ Config.vue #基础组件│ ││ └─mixins  #无用│ GetValue.js │├─router│ index.js #无用│└─store #无用 │ index.js │ └─stage canvas.js #画布，保存所有组件的布局，以及样式、配置选项 data.js #数据，保存数据源 type.js #组件可以配置的样式

实现算法：

树的广度优先遍历，依据画布中保存的组件布局，来重绘所需要的组件。并寻找依据的配置选项和数据源实现联动

联动实现：

vuex，每次修改配置，以及数据源时。对整个vuex中的数据强制更新指针。实现联动。

github：bug？？

https://github.com/ututuut/bi.git