VUE报表开发

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

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

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

 可视化操作:

数据联动:

使用技术: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

转载于:https://www.cnblogs.com/ututuut/p/9508638.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值