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<PurchaseBillItemVo> findItems(PurchaseBillItemQuery itemQuery){
List<PurchaseBillItem> items = purchaseBillItemRepository.findByQuery(itemQuery);
List<PurchaseBillItemVo> 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<String,Object> findItems(PurchaseBillItemQuery itemQuery){
Map<String,Object> map = new HashMap();
map.put("rows",purchaseBillItemService.findItems(itemQuery));
return map;
}
1.1.2. 前台完成数据展示
- purchaseBillItem.jsp
<head>
<title>Title</title>
<%@include file="/WEB-INF/views/head.jsp" %>
<!-- 引入datagrid-view的支持 -->
<script type="text/javascript" src="/easyui/plugins/datagrid-groupview.js"></script>
<script type="text/javascript" src="/js/model/purchaseBillItem.js"></script>
</head>
<table id="purchaseBillItemGrid"></table>
- 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:"<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++){
totalNum += rows[i].num;
totalAmount += rows[i].amount;
}
return value + ' - ' + rows.length + ' 条数据' +" <span style='color:green;'>共"+totalNum+"件商品</span>" +"<span style='color:#5d2f80;'>总金额:"+totalAmount+"</span>";
}
});
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<PurchaseBillItem> spec = Specifications.<PurchaseBillItem>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<PurchaseBillItemVo> findItems(PurchaseBillItemQuery itemQuery){
List<PurchaseBillItem> items = purchaseBillItemRepository.findByQuery(itemQuery);
List<PurchaseBillItemVo> vos = new ArrayList<>();
for (PurchaseBillItem item : items) {
PurchaseBillItemVo vo = new PurchaseBillItemVo(item,itemQuery.getGroupBy());
vos.add(vo);
}
return vos;
}
1.2.3. purchaseBillItem.jsp
<div id="tb" style="padding:5px;height:auto">
<!-- 这部门是查询的功能 -->
<div>
<div id="cc" class="easyui-calendar"></div>
<form id="searchForm" action="" method="post">
日期 ： <input name="beginDate" class="easyui-datebox" style="height:32px" sharedCalendar="#cc">
- <input name="endDate" class="easyui-datebox" style="height:32px" sharedCalendar="#cc">
状态 ：<select class="easyui-combobox" name="status"
data-options="panelHeight:'auto',width:100"
>
<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',width:100"
>
<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>
</form>
</div>
</div>
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" %>
<html>
<head>
<title>Title</title>
<%@include file="/WEB-INF/views/head.jsp" %>
<script type="text/javascript" src="/easyui/plugins/datagrid-groupview.js"></script>
<!-- 引入highchart的支持 -->
<script src="/js/jquery/plugin/highcharts/code/highcharts.js"></script>
<script src="/js/jquery/plugin/highcharts/code/highcharts-3d.js"></script>
<script src="/js/jquery/plugin/highcharts/code/modules/exporting.js"></script>
<script type="text/javascript" src="/js/model/purchaseBillItem.js"></script>
</head>
<body>
<table id="purchaseBillItemGrid"></table>
<div id="tb" style="padding:5px;height:auto">
<!-- 这部门是查询的功能 -->
<div>
<div id="cc" class="easyui-calendar"></div>
<form id="searchForm" action="" method="post">
日期 ： <input name="beginDate" class="easyui-datebox" style="height:32px" sharedCalendar="#cc">
- <input name="endDate" class="easyui-datebox" style="height:32px" sharedCalendar="#cc">
状态 ：<select class="easyui-combobox" name="status"
data-options="panelHeight:'auto',width:100"
>
<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',width:100"
>
<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="chart3D" class="easyui-linkbutton" iconCls="icon-search">3D图</a>
<a href="#" data-method="chart2D" class="easyui-linkbutton" iconCls="icon-search">2D图</a>
</form>
</div>
</div>
<div id="purchaseBillItemDialog" class="easyui-dialog" data-options="closed:true,modal:true" title="功能操作" style="width:600px;height:300px; ">
</div>
</body>
</html>
- 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}: <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
}]
});
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}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {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<Map> findCharts(PurchaseBillItemQuery itemQuery){
List<Map> 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<Object[]> 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;
}
- PurchaseBillItemController
@RequestMapping("/findCharts")
@ResponseBody
public List<Map> findChart(PurchaseBillItemQuery itemQuery){
return purchaseBillItemService.findCharts(itemQuery);
}
扫一扫
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
