表单，饼图
页面效果图形效果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 specification = Specifications.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 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” %>
| 交易时间: | |
| 供应商: | |
| 采购员: |
<%–查询工具栏–%>
$(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:"待审",
1:"已审",
"-1":"作废"
};
return data[action];
}}
]],
groupField:'groupField',
view: groupview,
groupFormatter:function(value, rows){
//总数据量
var totalNum = 0;
//总金额
var totalAmount = 0;
for(var i=0;i});
页面查询效果就做完了完成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}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 70,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
type: 'pie',
name: '总金额比例',
data: result
}]
});
});
}
};
后台代码 Service@Override
public List
//拼接jpql的语句 where group
String jpql = "select “+purchaseBillItemQuery.getGroupBy()+”,sum(o.bill.totalAmount) from PurchaseBillItem o "
+ purchaseBillItemQuery.getWhereSql()
+ " group by "+purchaseBillItemQuery.getGroupBy();
List 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 findCharts(PurchaseBillItemQuery purchaseBillItemQuery){
//查询数据[{cd供应商,11}，{dw，22}]
List
List mpList = new ArrayList<>();
for (Object[] o : result) {
Map mp = new HashMap();
mp.put(“name”,o[0]);
mp.put(“y”,o[1]);
mpList.add(mp);
}
return mpList;
}