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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM