报表分组和饼图
效果图：
Donmain层的配置：
private Long id; //编号
private String supplier; //供应商名称
private String buyer; //采购员名称
private String product; //产品名称
private String productType; //产品分类
private Date vdate; //交易时间
private BigDecimal num; //采购数量
private BigDecimal price; //价格
private BigDecimal amount; //小计 = 价格*数量
private Integer status;
private String groupField = ""; //分组字段
//构造方法简介建立关系
public PurchaseBillItemVo(Purchasebillitem item){
this.id=item.getId();
this.supplier=item.getBill().getSupplier().getName();
this.buyer=item.getBill().getBuyer().getUsername();
this.product=item.getProduct().getName();
this.productType=item.getProduct().getTypes().getName();
this.vdate=item.getBill().getVdate();
this.num=item.getNum();
this.price=item.getPrice();
this.amount=item.getAmount();
this.status=item.getBill().getStatus();
}
//分组
public PurchaseBillItemVo(Purchasebillitem item,String groupBy){
this.id = item.getId();
this.supplier = item.getBill().getSupplier().getName();
this.buyer = item.getBill().getBuyer().getUsername();
this.product = item.getProduct().getName();
this.productType = item.getProduct().getTypes().getName();
this.vdate = item.getBill().getVdate();
this.num = item.getNum();
this.price = item.getPrice();
this.amount = item.getAmount();
this.status = item.getBill().getStatus();
//根据传入的条件 进行分组
if("o.bill.supplier.name".equals(groupBy)){
this.groupField = this.supplier;
}else if("o.bill.buyer.username".equals(groupBy)){
this.groupField = this.buyer;
}else if("MONTH(o.bill.vdate)".equals(groupBy)){
//this.groupField = this.vdate; 7 8
this.groupField = (DateUtils.toCalendar(this.vdate).get(Calendar.MONTH)+1)+"月";
}else{
this.groupField = this.supplier;
}
}
//无参
public PurchaseBillItemVo (){}
public String getGroupField() {
//设置分组字段 默认按照供应商分组
// this.groupField = this.supplier;
return groupField;
}
public void setGroupField(String groupField) {
this.groupField = groupField;
}
Service层方法的：
//分组方法的实现
@Override
public List<PurchaseBillItemVo> findItems(PurchasebillitemQuery itemQuery) {
List<Purchasebillitem> items = purchasebillitemRepository.findByQuery(itemQuery);
List<PurchaseBillItemVo> itemsvolist = new ArrayList<>();
for (Purchasebillitem item : items) {
PurchaseBillItemVo itemVo = new PurchaseBillItemVo(item,itemQuery.getGroupBy());
itemsvolist.add(itemVo);
}
return itemsvolist;
}
流程：点击报表加载数据进去conreoller层调用service的方法进行分组查询 返回json数据 前端页面自动封装
controller层map的封装：
饼状图的实现：
定义两个按钮分别为2D 3D定义在高级查询下面
引入饼状图需要的配置文件：
粘贴JS代码进行查询封装：
$(function(){
//定义form表单
var searchForm = $("#searchForm");
var purchasebillitemDialog = $("#purchasebillitemDialog");
$("a[data-method]").on('click',function(){
//获取 data-method属性 <a data-method="seacher">
var methodName = $(this).data("method");
//动态调用方法 itsource["seacher"]
itsource[methodName]();
});
//对象
var itsource = {
search:function(){
//该方法返回一个 JSON Object，返回对象中的每个数据都表示一个表单控件值。
var param = searchForm.serializeObject();
//发送查询数据库 --加载表格 发送请求 /purchasebillitem/page
$('#purchasebillitemDatagrid').datagrid('load',param);
},
charts3D:function(){
//发送ajax请求到后台查询的数据
var param = searchForm.serializeObject();
$.post("/purchaseBillItem/findAllGraphic",param,function(result){
Highcharts.chart('purchasebillitemDialog', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45, //倾斜角度
beta: 0
}
},
title: {
text: '比例图'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,//深度
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: '消费比例',
data:result
}]
});
})
//2D图表 --打开对话框
purchasebillitemDialog.dialog('center').dialog('open');
},
//2D事件
charts2D:function(){
var param = searchForm.serializeObject();
$.post("/purchaseBillItem/findAllGraphic",param,function(result){
Highcharts.chart('purchasebillitemDialog', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 0, //倾斜角度
beta: 0
}
},
title: {
text: '比例图'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,//深度