前面有了大屏的数据源与数据集,现在可以进行大屏报表管理了。
一、首先还是用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