表单，饼图

页面效果图形效果2D3D实现需求页面效果需要使用EasyUI的扩展组件 DataGrid View先写一个类用来放页面需要的参数public class PurchaseBillItemVo {
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 = “”; //分组字段

//purchaseBillItem 查询出来值
//groupBy 通过什么来分组
public PurchaseBillItemVo(PurchaseBillItem purchasebillitem, String groupBy){
    this.id = purchasebillitem.getId();
    this.buyer = purchasebillitem.getBill().getBuyer().getUsername();
    this.supplier = purchasebillitem.getBill().getSupplier().getName();
    this.product = purchasebillitem.getProduct().getName();
    this.amount = purchasebillitem.getAmount();
    this.num = purchasebillitem.getNum();
    this.price = purchasebillitem.getPrice();
    this.productType = purchasebillitem.getProduct().getTypes().getName();
    this.status = purchasebillitem.getBill().getStatus();
    this.vdate = purchasebillitem.getBill().getVdate();

    //分组字段
    this.groupField = this.supplier;//供应商
    if(("o.bill.buyer.username").equals(groupBy)){
        this.groupField = this.buyer;//采购员
    }else if(("MONTH(o.bill.vdate)").equals(groupBy)){
        //取到月份
        int month = (DateUtils.toCalendar(vdate).get(Calendar.MONTH)+1);
        this.groupField = month+"月";
    }
}

}
交易时间的get set需要加注解,前端页面才会正常显示@JsonFormat(pattern = “yyyy-MM-dd HH:mm:ss”,timezone = “GMT+8”)
public Date getVdate() {
return vdate;
}

@DateTimeFormat(pattern = “yyyy-MM-dd”)
public void setVdate(Date vdate) {
this.vdate = vdate;
}
Querypublic class PurchaseBillItemQuery extends BaseQuery{
private Date beginDate ;//开始时间
private Date endDate;//结束时间
private Integer status;//审核状态

//分组字段
private String groupBy;

//前台参数的值
private List params = new ArrayList<>();

public List getParams() {
    return params;
}

public void setParams(List params) {
    this.params = params;
}

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
public Date getBeginDate() {
    return beginDate;
}

@DateTimeFormat(pattern = "yyyy-MM-dd")
public void setBeginDate(Date beginDate) {
    this.beginDate = beginDate;
}
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
public Date getEndDate() {
    return endDate;
}
@DateTimeFormat(pattern = "yyyy-MM-dd")
public void setEndDate(Date endDate) {
    this.endDate = endDate;
}

public Integer getStatus() {
    return status;
}

public void setStatus(Integer status) {
    this.status = status;
}

public String getGroupBy() {
    return groupBy;
}

public void setGroupBy(String groupBy) {
    this.groupBy = groupBy;
}

public Specification createSpecification() {
    //处理结束时间
    Date tempDate=null;
    if(this.getEndDate() != null){
        tempDate = DateUtils.addDays(this.getEndDate(), 1);
    }
    //ge 大于等 vdate>= beginDate and vdate< endDate+1
    Specification<PurchaseBillItem> specification = Specifications.<PurchaseBillItem>and()
            .ge(this.beginDate != null,"bill.vdate", this.getBeginDate())
            .lt(this.endDate!=null, "bill.vdate",tempDate)
            .eq(this.status != null ,"bill.status",this.getStatus())
            .build();
    return specification;
}

//这个是后面图形效果要用的
//组装sql的方法 where bill.vdate >= 1111  and bill.vdate< 111 and bill.status = 1
public String getWhereSql(){
    StringBuffer whereSql = new StringBuffer();
    if(this.beginDate != null && !"".equals(this.beginDate)){
        whereSql.append("and").append(" o.bill.vdate >=?");
        params.add(this.beginDate);
    }
    if(this.endDate != null && !"".equals(this.endDate)){
        Date tempDate=null;
        if(this.getEndDate() != null){
            tempDate = DateUtils.addDays(this.getEndDate(), 1);
        }
        whereSql.append("and").append(" o.bill.vdate < ?");
        params.add(tempDate);
    }
    if(this.status != null && !"".equals(this.status)){
        whereSql.append("and").append(" o.bill.status = ?");
        params.add(this.status);
    }
    /**
     * regex - 用来匹配此字符串的正则表达式
     * replacement - 用来替换第一个匹配项的字符串
     */
    return whereSql.toString().replaceFirst("and", "where");
}

}
Repository的两个方法//高级查询-不分页
@Override
public List findByQuery(BaseQuery baseQuery) {
//第一步：拿到所有高级查询条件
Specification spec = baseQuery.createSpecification();
//第二步:拿到排序的值
Sort sort = baseQuery.createSort();
//第三步:拿到数据返回
return findAll(spec, sort);
}

//JPA jpql查询
//“select o from Employee o where o.username = ? and o.password=?”
@Override
public List findByJpql(String jpql, Object… values) {
//第一步:创建Query对象
Query query = entityManager.createQuery(jpql);
//第二步:把值设置到Query对象中去
if (values!=null) {
for (int i = 0; i < values.length; i++) {
//设置参数 1
query.setParameter(i + 1, values[i]);
}
}
//第三步：返回数据
return query.getResultList();
}
Service层@Override
public List findItems(PurchaseBillItemQuery purchaseBillItemQuery) {
List itemVos = new ArrayList<>();
//拿到所有不分页数据
List items = purchaseBillItemRepository.findByQuery(purchaseBillItemQuery);
items.forEach(item->{
itemVos.add(new PurchaseBillItemVo(item,purchaseBillItemQuery.getGroupBy()));
});
return itemVos;
}
Controller层@Controller
@RequestMapping("/purchaseBillItem")
public class PurchaseBillItemController {

@Autowired
private IPurchaseBillItemService purchaseBillItemService;

@RequestMapping("/index")
public String index(){
    return "purchaseBillItem";
}

@RequestMapping("/findItems")
@ResponseBody
public Map findItems(PurchaseBillItemQuery purchaseBillItemQuery){
    Map mp = new HashMap();
    List<PurchaseBillItemVo> items = purchaseBillItemService.findItems(purchaseBillItemQuery);
    mp.put("total", items.size());
    mp.put("rows", items);
    return mp;
}

}
前端JSP页面基于EasyUI<%–
Created by IntelliJ IDEA.
User: 11952
Date: 2019/10/17
Time: 18:39
To change this template use File | Settings | File Templates.
–%>
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

<%@include file="/WEB-INF/head.jsp" %> <%--引入分组表格报表--%>

交易时间:
供应商:
采购员:

</form>

<%–查询工具栏–%>

日期 ： -

        状态 ：<select class="easyui-combobox" name="status" style="width:85px"
                    data-options="panelHeight:'auto'">
        <option value="">请选择</option>
        <option value="0">待审</option>
        <option value="-1">作废</option>
        <option value="1">已审</option>
    </select>

        分组类型 ：<select class="easyui-combobox" name="groupBy"
                      data-options="panelHeight:'auto'" style="width:85px">
        <option value="o.bill.supplier.name">供应商</option>
        <option value="o.bill.buyer.username">采购员</option>
        <option value="MONTH(o.bill.vdate)">月份</option>
    </select>

        <a href="#" data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查找</a>
        <a href="#" data-method="clearForm"  class="easyui-linkbutton" iconCls="icon-cancel">清空查询条件</a>
        <a href="#" data-method="charts2D"  class="easyui-linkbutton" iconCls="icon-search">2D图</a>
        <a href="#" data-method="charts3D"  class="easyui-linkbutton" iconCls="icon-search">3D图</a>
    </form>
</div>

>

$(function(){

$('#purchasebillitemGrid').datagrid({
    title:'分组表格',
    fit:true,
    fixed:true,
    fitColumns:true,
    toolbar:'#tb',
    remoteSort:false,
    singleSelect:true,
    fitColumns:true,
    url:'/purchaseBillItem/findItems',
    columns:[[
        {field:'id',title:'编号',width:40},
        {field:'supplier',title:'供应商',width:100},
        {field:'buyer',title:'采购员',width:100},
        {field:'product',title:'产品',width:100},
        {field:'productType',title:'产品类型',width:100},
        {field:'vdate',title:'日期',width:110},
        {field:'num',title:'数量',width:100},
        {field:'price',title:'单价',width:100},
        {field:'amount',title:'小计',width:100},
        {field:'status',title:'状态',width:100,formatter:function (action) {
                var data = {
                    0:"<div style='color:red;'>待审</div>",
                    1:"<div style='color: green'>已审</div>",
                    "-1":"<div><s>作废</s></div>"
                };
                return data[action];
            }}
    ]],
    groupField:'groupField',
    view: groupview,
    groupFormatter:function(value, rows){
        //总数据量
        var totalNum = 0;
        //总金额
        var totalAmount = 0;
        for(var i=0;i<rows.length;i++){
            var row = rows[i];
            totalNum += row.num;
            totalAmount += row.amount;
        }
        return value + '———' + rows.length + ' 条数据 '+ totalNum+' 件商品,总金额:'+totalAmount+"元";
    }
});

});
页面查询效果就做完了完成2D、3D图表效果常用的图表插件
Apache ECharts
HighCharts这次我们用HighCharts，在项目中引入HighCharts需要的文件；//表格
var purchasebillitemGrid = $("#purchasebillitemGrid");
//给所有a标签都注册一个事件
$(“a”).on(“click”, function () {
//动态获取data-method属性对应的值
var method = $(this).data(“method”);
//method不能为空
if(method){
//动态触发事件
itsourcemethod;
}
});

var itsource = {
//高级查询
“search”: function () {
//把form表单元素，直接封装成一个json对象
var jsonObj = $("#searchForm").serializeObject();
//加载datagrid
purchasebillitemGrid.datagrid(‘load’, jsonObj);
},
//清空查询表达的
“clearForm”:function(){
$("#searchForm").form(‘clear’);
},
“charts2D”:function(){
//获取查询表单的参数
var params = $("#searchForm").serializeObject();
//打开对话框
$("#purchaseBillItemDialog").dialog(“center”).dialog(“open”);
//发送ajax请求
$.post("/purchaseBillItem/findCharts", params, function (result) {
//数据表格
Highcharts.chart(‘purchaseBillItemDialog’, {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: ‘pie’
},
title: {
text: ‘采购订单的数据情况’
},
tooltip: {
pointFormat: ‘{series.name}: {point.percentage:.1f}%’
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
dataLabels: {
enabled: true,
format: ‘{point.name}: {point.percentage:.1f} %’,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘black’
}
}
}
},
series: [{
name: ‘总金额比例’,
colorByPoint: true,
data: result
}]
});
});
},
“charts3D”: function () {
//获取查询表单的参数
var params = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲searchForm").se….post()
$("#purchaseBillItemDialog").dialog(“center”).dialog(“open”);

    $.post("/purchaseBillItem/findCharts", params, 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: 70,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '总金额比例',
                data: result
            }]
        });

    });
}

};
后台代码 Service@Override
public List<Object[]> findCharts(PurchaseBillItemQuery purchaseBillItemQuery) {
//拼接jpql的语句 where group
String jpql = "select “+purchaseBillItemQuery.getGroupBy()+”,sum(o.bill.totalAmount) from PurchaseBillItem o "
+ purchaseBillItemQuery.getWhereSql()
+ " group by "+purchaseBillItemQuery.getGroupBy();

List<Object[]> result = purchaseBillItemRepository.findByJpql(jpql, purchaseBillItemQuery.getParams().toArray());
return result;

}
Controller//查询数据
//jpql select p.supplier,sum(amount) from purchasebillitem p group by p.supplier
// [{ name:‘成都供应商’,y:8000},{name:‘东莞供应商’,90000}…] --安装供应商分组 算出总金额
@RequestMapping("/findCharts")
@ResponseBody
public List