zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Camera2Raw
    ActiveNotifications
    百度检索技巧
    Android开发ScrollView上下左右滑动事件冲突整理一(根据事件)
    四种方案解决ScrollView嵌套ListView问题
    10 条提升 Android 性能的建议
    Android操作外置SD卡和U盘相关文章
    SQLServer通过链接服务器调用Oracle 存储过程
    Easy Image X2 快速分区-恢复镜像-万能驱动 一站式操作!
    纯净PE推荐——优启通 v3.3.2019.0605
  • 原文地址:https://www.cnblogs.com/ututuut/p/9508638.html
Copyright © 2011-2022 走看看