SSSDJ+easyU创建报表

Posted 2021-11-22 guangbin0125

报表

报表用百科的翻译就是向上级报告的表格或是图标。表格数据详细、图标更加直观，各有各的好处，那么我们如何制作一个报表呢，我们会在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     }