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

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

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

可视化操作：

数据联动：

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

VUE报表开发的更多相关文章

  1. 使用C#和Excel进行报表开发（三）－生成统计图（Chart）

    有的Web项目选用Excel作为报表方案,在服务器端生成Excel文件,然后传送到客户端,由客户端进行打印.在国内的环境下,相对PDF方式,Excel的安装率应该比pdf阅读器的安装率要高,同时,微软 ...

  2. 犀利的报表系统，发票据与报表开发的快速利器，AgileEAS.NET SOA中间件GReport使用指南

    一.前言 AgileEAS.NET SOA 中间件平台是一款基于基于敏捷并行开发思想和Microsoft .Net构件(组件)开发技术而构建的一个快速开发应用平台.用于帮助中小型软件企业建立一条适合市 ...

  3. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  4. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

  5. 如何优雅的使用vue+vux开发app -01

    如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...

  6. ReportingServies——SQLServer报表开发综合实例

    如果我们安装了sqlserver2008 R2,将会自动安装一个报表开发工具 不要以为此报表开发工具只适合于sqlserver2008,其实在sqlserver2012中也是支持的,事实上我现在项目中 ...

  7. 报表开发工具中开放的部分图表js接口列表

    1.. 描述 报表开发工具FineReport 8.0版本中开放了部分图表js接口,在具体应用的过程中很多人都不知道这些接口到底有什么作用,该怎么应用,所以根据我自己的应用在下面归纳了这些新开放js接 ...

  8. 报表开发工具中mysql数据库连接编码转化失效解决方案

    1. 问题描述 在报表开发工具FineReport中,mysql数据库连接通过数据连接编码转换进行编码的转换,在通过报表录入往数据库中录入中文数据的时候,总是出现乱码,这个该怎么解决呢? 2. 解决方 ...

  9. BIEE报表开发

    (1)报表开发实例结果图 (2)开发报表步骤: (1)创建分析 (2)创建仪表盘提示 (3)创建仪表盘并发布 登录网址,输入用户名和密码 1) 新建——>分析——>选择主题区域——> ...

随机推荐

  1. 写代码 Log 也要认真点么?

    Log自然是需要的, 尤其是正式的产品; 但如果只是自己或内部用用的小工具, 也需要认真点吗? 实话说, 自己对 log 总是不上心, 总觉得调试好了, 能跑了, 足以. 所以, 被大妈怼了好几次 l ...

  2. Javascript用途,语法特点，难点，调试工具，引入方式，命名规范，变量声明及赋值，数据类型，运算符

    JavaScript用来干什么 数据的验证 将动态的内容写入到网页当中(ajax) 对事件做出相应 读写html当中的内容 检测浏览器 创建cookies 模拟动画 语法特点 基于对象和事件驱动的松散 ...

  3. 分布式唯一ID：雪花ID Snowflake .Net版

    先抄个雪花ID介绍,雪花算法: 雪花算法的原始版本是scala版,用于生成分布式ID(纯数字,时间顺序),订单编号等. 自增ID:对于数据敏感场景不宜使用,且不适合于分布式场景.GUID:采用无意义字 ...

  4. docker故障排查

    代理服务器设置 代理服务器可以在启动并运行后阻止与Web应用程序的连接.如果您位于代理服务器后面,请使用以下ENV命令将以下行添加到Dockerfile中,以指定代理服务器的主机和端口: # Set ...

  5. echo 传义序列

    echo 传义序列:\a 警示字符\b 退格\c 输出中忽略最后的换行符\f 清屏\n 换行\r 回车\t 水平制表符\v 垂直制表符\\ 反斜杠字符\0ddd 将字符表示成1到3位的八进制数值

  6. SQL server 基本语句

    --查询数据库是否存在 if exists ( select * from sysdatabases where [name]='TestDB') print 'Yes, the DB exists' ...

  7. how to render html tag

    使用autoescaping If autoescaping is turned on in the environment, all output will automatically be esc ...

  8. 字符串转hash

    #include<bits/stdc++.h> using namespace std; unsigned hash[]; ; int ans; int main() { ;k<=; ...

  9. 【LC_Lesson4】---罗马数字到整数得转换

    罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000例如, 罗马数字 2 写做 II ,即为两个并列 ...

  10. cf - 429D

    Iahub and Sorin are the best competitive programmers in their town. However, they can't both qualify ...