智能商贸-day11-采购报表功能
1.1. EasyUI(datagrid-groupview)
1.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;
}
}
- 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;
}
- PurchaseBillItemController
//注：根据之前的分析，返回的数据在的格式是{rows:[{},{},.]}
@RequestMapping("/findItems")
@ResponseBody
public Map findItems(PurchaseBillItemQuery itemQuery){
Map map = new HashMap();
map.put("rows",purchaseBillItemService.findItems(itemQuery));
return map;
}
1.1.2. 前台完成数据展示
- purchaseBillItem.jsp
Title
<%@include file="/WEB-INF/views/head.jsp" %>
- 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+"件商品" +"总金额:"+totalAmount+"";
}
});
1.2. 带条件过滤的查询
1.2.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;
}
1.2.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;
}
1.2.3. purchaseBillItem.jsp
1.3. HighChart
flash:写actionScript代码(flex)
flash:容易崩溃,影响性能,安全性低
HTML5:用画布功能
HTML:IE低版本不支持
1.3.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" %>
- 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');
})
}
}
1.3.2. 弹出真实图表
我们通过文档可以发现，后台要的是数据是下面这种结构
[{“name”:“东莞供应商”,“y”:4.00},{“name”:“成都供应商”,“y”:6955.00}]
- 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");
}
- PurchaseBillItemService
//查询到图表需要的值，并且封装成相应的格式[{name:aa,y:43},{name:bb,y:20},...]
public List- PurchaseBillItemController
@RequestMapping("/findCharts")
@ResponseBody
public List