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

一、首先还是用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