SSJ+easyUI创建报表
报表
报表用百科的翻译就是向上级报告的表格或是图标。表格数据详细、图标更加直观，各有各的好处，那么我们如何制作一个报表呢，我们会在domain中准备一个VO专门进行报表数据的展示
VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。
PO（Domain Object）:用于持久层
表格报表
1.首先我们到easyUI中下载一个插件 datagrid-groupview.js
2.准备一个表格
1 <table id="groupTable"></table>
1 $("#groupTable").datagrid({ 2 fit:true,//自适应父容器 3 rownumbers:true,//行号 4 remoteSort:false,//远程排序 5 nowrap:false,//性能 6 fitColumns:true,//行适应 7 toolbar:'#gridToolBar',//工具 8 url:'/purchasebillitem/findItems',//数据查询路径 9 columns:[[ 10 {field:'supplierName',title:'供应商',width:100,sortable:true}, 11 {field:'buerName',title:'采购员',width:80,align:'right',sortable:true}, 12 {field:'productName',title:'产品名称',width:80,align:'right',sortable:true}, 13 {field:'productTypeName',title:'产品类型',width:150,sortable:true}, 14 {field:'vdate',title:'交易时间',width:60,align:'center'}, 15 {field:'num',title:'数量',width:60,align:'center'}, 16 {field:'price',title:'价格',width:60,align:'center'}, 17 {field:'amount',title:'小计',width:60,align:'center'}, 18 {field:'status',title:'状态',width:60,align:'center'}, 19 ]], 20 groupField:'groupBy',//分组字段 21 view: groupview, 22 groupFormatter:function(value, rows){ 23 var totalAmount=0; 24 var totalNum=0; 25 for(let r of rows){ 26 totalAmount+=r.amount; 27 totalNum+=r.num; 28 } 29 return value + ' - ' + 30 ` <span style="background-color: #fbff8e">共${rows.length}条数据 </span> 31 <span style="background-color: #4bfff0">${totalNum}件商品 </span> 32 <span style="background-color: #ff90f4">总金额：${totalAmount} </span> 33 ` + ' Item(s)'; 34 } 35 });
1 //提供有参构造，对字段进行初始化，和分组字段的初始化（在query层需提供默认值） 2 public PurchasebillitemVo(Purchasebillitem item, PurchasebillitemQuery query) { 3 this.id = item.getId(); 4 this.supplierName = item.getBill().getSupplier().getName(); 5 this.buerName = item.getBill().getBuyer().getUsername(); 6 this.vdate = item.getBill().getVdate(); 7 this.num = item.getNum(); 8 this.price = item.getPrice(); 9 this.amount = item.getAmount(); 10 this.status = item.getBill().getStatus(); 11 12 //分组 13 switch (query.getGroupValue()){//前台传过来的分组方式字段值1 2 3 14 case 1: 15 this.groupBy=this.supplierName; 16 break; 17 case 2: 18 this.groupBy=this.buerName; 19 break; 20 case 3: 21 Calendar cal = Calendar.getInstance(); 22 cal.setTime(vdate);//按照月份进行分组 23 this.groupBy=cal.get(Calendar.MONTH)+1+"月"; 24 break; 25 default: 26 this.groupBy=this.supplierName; 27 } 28 }
图片报表
我们可以使用的插件有flash和H5，其中flash是actionScript代码，安全性低、性能差，H5界面美观、安全性好，不支持IE低版本，在这里我们使用H5
1.引入插件
1 <script src="/easyui/plugin/Highcharts-6.2.0/code/highcharts.js"></script> 2 <script src="/easyui/plugin/Highcharts-6.2.0/code/highcharts-3d.js"></script> 3 <script src="/easyui/plugin/Highcharts-6.2.0/code/modules/exporting.js"></script> 4 <script src="/easyui/plugin/Highcharts-6.2.0/code/modules/export-data.js"></script>
2.弹出框
1 <div id="chartLog" class="easyui-dialog" title="My Dialog" style="width:610px;height:400px;" 2 data-options="closed:true,modal:true"> 3 </div>
1 //3D图数据 2 var params = searchForm.serializeObject(); 3 //获取数据 4 $.post("/purchasebillitem/findChart",params,function (result) { 5 Highcharts.chart('chartLog', { 6 chart: { 7 type: 'pie', 8 options3d: { 9 enabled: true, 10 alpha: 45, 11 beta: 0 12 } 13 }, 14 title: { 15 text: '采购订单报表' 16 }, 17 tooltip: {//提示框 18 pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 19 }, 20 plotOptions: { 21 pie: { 22 allowPointSelect: true, 23 cursor: 'pointer',//鼠标样式 24 depth: 35, 25 dataLabels: { 26 enabled: true, 27 format: '{point.name}' 28 } 29 } 30 }, 31 series: [{ 32 type: 'pie', 33 name: 'Browser share', 34 data: result//要展示的数据 35 }] 36 }); 37 })
3.结合高级查询后台操作，利用了JPA中的jpql查询操作
query层
1 //jpql group by 分组名获取 2 public String getGroupName(){ 3 if(groupValue==1){ 4 return " o.bill.supplier.name "; 5 }else if(groupValue==2){ 6 return " o.bill.buyer.username "; 7 } else if(groupValue==3){ 8 return " MONTH(o.bill.vdate)"; 9 }else { 10 return " o.bill.supplier.name "; 11 } 12 } 13 //条件查询 14 public String createWhereJPQL(){ 15 StringBuilder jpql = new StringBuilder(); 16 /* 17 String 一旦创建长度固定 18 StringBuffer:效率高，线程安全 19 StringBuilder：效率更高，线程不安全 20 */ 21 if(beginTime!=null){ 22 params.add(beginTime); 23 //注意空格 jqpl语句的拼接问题 24 jpql.append(" and o.bill.vdate<=? "); 25 } 26 if(endTime!=null){ 27 Date date = DateUtils.addDays(endTime, 1); 28 params.add(date); 29 jpql.append( " and o.bill.vdate>? "); 30 } 31 if(status!=null){ 32 params.add(status); 33 jpql.append( " and o.bill.status=? "); 34 } 35 //替换第一个and为where 36 return jpql.toString().replaceFirst("and", "where"); 37 }
service层
1 public List<Map> findChart(PurchasebillitemQuery query) { 2 //条件查询参数 3 List params = query.getParams(); 4 //分组名 5 String groupName = query.getGroupName(); 6 //条件查询 7 String whereJPQL = query.createWhereJPQL(); 8 //报表比列字段 9 ArrayList<Map> list = new ArrayList<>(); 10 String jpql="select "+groupName+",sum(o.amount) from Purchasebillitem o "+whereJPQL+" group by "+groupName; 11 //jpql是以数组接受，结合高级查询（需要字段，类型，顺序，个数一一对应，用数组） 12 List<Object[]> items = super.findByJpql(jpql,params.toArray()); 13 items.forEach(e->{ 14 Map<Object, Object> map = new HashMap<>(); 15 map.put("name", e[0]);//前台接收格式 16 map.put("y", e[1]); 17 list.add(map); 18 }); 19 return list; 20 }
