SSSDJday11

2.报表效果
2.1.运行演示项目itsource-yxb-spring-data
cd E:\resources\pss //我们已经做好的项目位置

2.2.页面查询效果

2.3.图像页面效果

3.EasyUI(datagrid-groupview)

在这个页面就有groupview控件，我们可以看到它的介绍(在底部可以下载代码)
效果如下：

我们接下来需要研究一下它提供的案例(根据案例学习)：
数据(从这里我们可以看出，它这里的数据需要放到rows里面):

再研究代码：

3.1.后台返回数据
3.1.1.PurchaseBillItemVo
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 = ""; //分组字段

public PurchaseBillItemVo(){}
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.buyer.username".equals(groupBy)){
        groupField = this.buyer;
    }else if("MONTH(o.bill.vdate)".equals(groupBy)){
        groupField = (DateUtils.toCalendar(vdate).get(Calendar.MONTH)+1) + "月份";
    }else {
        groupField = this.supplier;
    }

}

…
3.1.2.PurchaseBillItemServiceImpl
//根据传递的条件拿到所有的明细数据(并且把它们变成咱们的vo对象)
@Override
public List findItems(PurchaseBillItemQuery itemQuery){
List items = purchaseBillItemRepository.findByQuery(itemQuery);
List vos = new ArrayList<>();
for (PurchaseBillItem item : items) {
PurchaseBillItemVo vo = new PurchaseBillItemVo(item,null);
vos.add(vo);
}
return vos;
}

3.1.3.PurchaseBillItemController
//注：根据之前的分析，返回的数据在的格式是{rows:[{},{},.]}
@RequestMapping("/findItems")
@ResponseBody
public Map findItems(PurchaseBillItemQuery itemQuery){
Map map = new HashMap();
map.put(“rows”,purchaseBillItemService.findItems(itemQuery));
return map;
}

3.2.前台完成数据展示
3.2.1.purchaseBillItem.jsp

Title <%@include file="/WEB-INF/views/head.jsp" %>

3.2.2.purchaseBillItem.js
var purchaseBillItemGrid = $("#purchaseBillItemGrid");
purchaseBillItemGrid.datagrid({
nowrap:false,
fitColumns:true,
fit:true,
fixed:true,
fitColumns:true,
toolbar:’#tb’,
url:’/purchaseBillItem/findItems’,
columns:[[
{field:‘id’,title:‘编号’,width:100},
{field:‘supplier’,title:‘供应商’,width:100},
{field:‘buyer’,title:‘采购员’,width:100},
{field:‘product’,title:‘产品’,width:100},
{field:‘productType’,title:‘产品类型’,width:100},
{field:‘vdate’,title:‘日期’,width:100},
{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:“

待审

”,
1:“

已审

”,
“-1”:“

作废

”
};
return data[action];
}}
]],
groupField:‘groupField’,
view: groupview,
groupFormatter:function(value, rows){
var totalNum = 0;
var totalAmount = 0;
for(var i=0;i totalNum += rows[i].num;
totalAmount += rows[i].amount;
}
return value + ’ - ’ + rows.length + ’ 条数据’ +" 共"+totalNum+“件商品” +“ 总金额:”+totalAmount+"";
}
});

4.带条件过滤的查询
4.1.PurchaseBillItemQuery
@DateTimeFormat(pattern = “yyyy-MM-dd”)
private Date beginDate;
@DateTimeFormat(pattern = “yyyy-MM-dd”)
private Date endDate;
private Integer status;

private String groupBy = “o.bill.supplier.name”;

@Override
public Specification createSpecification() {
Date tempDate = null;
if(endDate!=null){
tempDate = DateUtils.addDays(endDate,1);
}
//根据条件把数据返回即可
Specification spec = Specifications.and()
.eq(status!=null,“bill.status”,status )//等于
.ge(beginDate!=null, “bill.vdate”,beginDate) //大于等于
.lt(endDate!=null, “bill.vdate”,tempDate) //小于等于
.build();
return spec;
}

4.2.PurchaseBillItemServiceImpl
生成vo的时候传入相应的条件
@Override
public List findItems(PurchaseBillItemQuery itemQuery){
List items = purchaseBillItemRepository.findByQuery(itemQuery);
List vos = new ArrayList<>();
for (PurchaseBillItem item : items) {
PurchaseBillItemVo vo = new PurchaseBillItemVo(item,itemQuery.getGroupBy());
vos.add(vo);
}
return vos;
}

4.3.purchaseBillItem.jsp

日期 ： -

        状态 ：
        --请选择--
        待审
        作废
        已审
    
        
        供应商
        采购员
        月份
    
        查找
    

最终效果如下：

5.HighChart
flash:写actionScript代码(flex)
flash:容易崩溃,影响性能,安全性低
HTML5:用画布功能
HTML:IE低版本不支持

效果
Highcharts-4.0.4\examples\pie-basic\index.htm

Highcharts-4.0.4\examples\3d-pie\index.htm

5.1.项目中引入HighChart

5.2.使用并弹出一个静态图表
5.2.1.purchaseBillItem.jsp
<%–
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/9/13
Time: 10:15
To change this template use File | Settings | File Templates.
–%>
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

Title <%@include file="/WEB-INF/views/head.jsp" %>

日期 ： -

        状态 ：
        --请选择--
        待审
        作废
        已审
    
        
        供应商
        采购员
        月份
    
        查找
        3D图
        2D图
    

5.2.2.purchaseBillItem.js
var itsource={
//查询数据
search:function () {
//需要先引入 jquery.serializejson.js 才可以使用这个方法
var params = searchForm.serializeJSON();
purchaseBillItemGrid.datagrid(‘load’,params);
},
chart3D:function () {
var params = searchForm.serializeJSON();
$.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}: {point.percentage:.1f}%’
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
depth: 35,
dataLabels: {
enabled: true,
format: ‘{point.name}’
}
}
},
series: [{
type: ‘pie’,
name: ‘比例’,
data: result
}]
});
purchaseBillItemDialog.dialog(“center”).dialog(‘open’);
})

},
chart2D:function () {
    var params = searchForm.serializeJSON();
    $.post("/purchaseBillItem/findCharts",params,function (result) {
        Highcharts.chart('purchaseBillItemDialog', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '2018年1月浏览器市场份额'
            },
            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
            }]
        });
        purchaseBillItemDialog.dialog("center").dialog('open');
    })

}

}

5.3.弹出真实图表
我们通过文档可以发现，后台要的是数据是下面这种结构
[{“name”:“东莞供应商”,“y”:4.00},{“name”:“成都供应商”,“y”:6955.00}]
5.3.1.PurchaseBillItemQuery
现在咱们查询需要有相应的查询条件(在Query中拼接条件)
//装数据的容器

private List params = new ArrayList<>();
//拿到查询的条件
public String getWhereSql(){
StringBuilder whereSql = new StringBuilder("");
if(status!=null){
whereSql.append(" and “).append(“bill.status = ?”);
params.add(status);
}
if(beginDate!=null){
whereSql.append(” and “).append(“bill.vdate >= ?”);
params.add(beginDate);
}
if(endDate!=null){
Date date = DateUtils.addDays(endDate,1);
whereSql.append(” and ").append(“bill.vdate < ?”);
params.add(endDate);
}
return whereSql.toString().replaceFirst(“and”,“where”);
}

5.3.2.PurchaseBillItemService
//查询到图表需要的值，并且封装成相应的格式[{name:aa,y:43},{name:bb,y:20},…]
public List findCharts(PurchaseBillItemQuery itemQuery){
List chartList = new ArrayList<>();
//完成查询的JPQL拼接
String jpql = "select “+itemQuery.getGroupBy()+”,sum(o.amount) from PurchaseBillItem o “+itemQuery.getWhereSql()+” group by "+itemQuery.getGroupBy();
//System.out.println(jpql);
List list = findByJpql(jpql, itemQuery.getParams().toArray());
for (Object[] objects : list) {
Map map = new HashMap();
map.put(“name”,objects[0]);
map.put(“y”,objects[1]);
chartList.add(map);
}
return chartList;
}

5.3.3.PurchaseBillItemController
@RequestMapping("/findCharts")
@ResponseBody
public List findChart(PurchaseBillItemQuery itemQuery){
return purchaseBillItemService.findCharts(itemQuery);
}

5.3.4.图表效果如下：