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

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

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

可视化操作：

数据联动：

使用技术：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. 快速傅里叶变换与快速数论变换瞎学笔记$QwQ$

    $umm$先预警下想入门$FFT$就不要康我滴学习笔记了,,, 就,我学习笔记基本上是我大概$get$之后通过写$blog$加强理解加深记忆这样儿的,有些姿势点我可能会直接$skip$什么的,所以对除 ...

  2. Spring Boot 配置文件中使用变量、使用随机数

    参数引用 在application.properties中的各个参数之间可以直接通过是使用placeHolder的方式进行引用,如: book.author=Clark book.name=C++ b ...

  3. [vsCode实践] 实践记录

    [vsCode实践] 实践记录 版权2019.5.1更新 Q1:代码中涉及到操作本地文件时,相对路径总是不对 操作本地文件时,路径方式有两种 相对路径 例如:代码文件所在路径/Users/tp0829 ...

  4. C# 删除指定文件

    using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;us ...

  5. UGUI ScrollView中显示模型和特效

    游戏开发中有时候会遇到在UI上显示模型和特效的需求,这次需要在ScrollView上显示.我们使用UGUI的Screen Space - Camera模式,修改模型和特效的layer使之显示在UI上面 ...

  6. Java 用链表实现栈和队列

    栈 是一种基于后进先出(LIFO)策略的集合类型.当邮件在桌上放成一叠时,就能用栈来表示.新邮件会放在最上面,当你要看邮件时,会一封一封从上到下阅读.栈的顶部称为栈顶,所有操作都在栈顶完成. 前面提到 ...

  7. 关于django中的get_or_create方法的坑

    最近在项目中发现了这样的一个坑,那就是我们的需求是不能添加一个相同的对象到数据库中,就通过某些字段的值组合成唯一值到数据库中去查找数据,如果没有找到对象,那就创建一条新的数据库记录,而刚好django ...

  8. SliverAppBar 介绍及使用

    SliverAppBar控件可以实现页面头部区域展开.折叠的效果,类似于Android中的CollapsingToolbarLayout.先看下SliverAppBar实现的效果,效果图如下: Sli ...

  9. Nginx的一理解（2）

    1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静态文件(如HTML.图片)通过HTTP协议展现给客户端. 配置:

  10. DataFrame 索引和复合索引

    前面按照多个条件进行分组产生的索引是复合索引 一.索引 # a.获取index df.index # b.指定index df.index = [] # c.重新设置index df.reindex( ...