基于jeecgboot的大屏设计器开发——大屏报表管理(一)

简介: 基于jeecgboot的大屏设计器开发——大屏报表管理(一)

前面有了大屏的数据源与数据集,现在可以进行大屏报表管理了。

一、首先还是用online建立大屏报表

DROP TABLE IF EXISTS `bs_report`;
CREATE TABLE `bs_report` (
  `id` varchar(36) NOT NULL,
  `report_name` varchar(100) DEFAULT NULL COMMENT '名称',
  `report_code` varchar(36) DEFAULT NULL COMMENT '编码',
  `report_group` varchar(36) DEFAULT NULL COMMENT '分组',
  `report_type` varchar(20) DEFAULT NULL COMMENT '类型',
  `report_image` varchar(512) DEFAULT NULL COMMENT '缩略图',
  `report_author` varchar(100) DEFAULT NULL COMMENT '作者',
  `status` varchar(10) DEFAULT NULL COMMENT '状态',
  `report_desc` varchar(255) DEFAULT NULL COMMENT '描述',
  `download_count` int(11) DEFAULT NULL COMMENT '下载次数',
  `create_by` varchar(50) DEFAULT NULL COMMENT '创建人',
  `create_time` datetime DEFAULT NULL COMMENT '创建日期',
  `update_by` varchar(50) DEFAULT NULL COMMENT '更新人',
  `update_time` datetime DEFAULT NULL COMMENT '更新日期',
  `sys_org_code` varchar(64) DEFAULT NULL COMMENT '所属部门',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

 

校验字段主要是两个

其中bs_report_type,目前先两只类型

二、生成后前后端代码

  生成后基本功能有了,如下:

但需要增加一些功能,如下图

三、增加设计功能

这个前端功能最为重要,主要采用echarts,vue-echarts和avue

同时用vue-ruler-tool作为制作大屏的网页标尺辅助线工具。

效果如下:


设计好后的预览功能如下:


目前只实现部分功能,相关的项目地址

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://122.227.135.243:9888


相关文章
|
数据采集 存储 测试技术
Python生成随机数插件Faker的用法
Python生成随机数插件Faker的用法
845 0
|
Java Maven
IDEA 2021 整合 SSM 配置离线 Maven 3.8.1 报错大全 Since Maven 3.8.1 http repositories are blocked.
IDEA 2021 整合 SSM 配置离线 Maven 3.8.1 报错大全 Since Maven 3.8.1 http repositories are blocked.
8275 0
IDEA 2021 整合 SSM 配置离线 Maven 3.8.1 报错大全 Since Maven 3.8.1 http repositories are blocked.
|
11月前
|
计算机视觉
魔兽世界脚本,原神脚本,冰焰脚本源码分享
魔兽世界模块实现自动打怪、拾取和技能循环 原神模块包含角色连招配置和自动寻宝功能
|
SQL 前端开发
基于jeecgboot的flowable驳回修改以及发起人设置
基于jeecgboot的flowable驳回修改以及发起人设置
758 0
|
SQL 移动开发 前端开发
基于jeecg-boot的任务甘特图显示
基于jeecg-boot的任务甘特图显示
499 0
|
前端开发 数据库 JavaScript
基于Flowable的流程挂接自定义业务表单的设计与实践
文章讨论了如何在Flowable流程引擎中挂接自定义业务表单,以及相关设计和实践的步骤。文章中包含了一些前后端代码示例,如Vue组件的模板和脚本部分,这些代码用于实现与Flowable流程引擎交互的界面。例如,有一个按钮组件用于提交申请,点击后会触发applySubmit方法,该方法会与后端API进行交互,处理流程启动、查询关联流程等逻辑。
54977 11
jeecg-boot点击菜单时,在新窗口打开一个新页面
jeecg-boot点击菜单时,在新窗口打开一个新页面
1282 0