上一篇链接:
图形报表 highcharts 按日统计
首先看实现效果:
一、引入资源文件
资源地址:
链接:https://pan.baidu.com/s/1obtHCBrfFy-Q3sAovKvBbA&shfl=sharepset
提取码:mm7y
二、页面
<script type="text/javascript">
$(document).ready(function() {
$("#s_begin").datebox("setValue",genLastYearStr().substring(0,7)); // 设置上个月日期
$("#s_end").datebox("setValue",genTodayStr().substring(0,7)); // 设置当前日期
});
function search(){
$("#dg").datagrid("loadData",{total:0,rows:[]});
var chart=new Highcharts.Chart({
chart:{
renderTo:"container",
type:'column',
events:{
load:function(event){
var begin=$("#s_begin").datebox("getValue");
var end=$("#s_end").datebox("getValue");
$.post("/admin/saleList/countSaleByMonth",{begin:begin,end:end},function(result){
var rows=result.rows;
var xArr=new Array();
var yArr=new Array();
for(var i=0;i<rows.length;i++){
xArr.push(rows[i].date);
yArr.push(rows[i].amountProfit);
}
chart.xAxis[0].categories=xArr;
chart.series[0].setData(yArr);
var saleTotal=0,costTotal=0,profitTotal=0;
for(var i=0;i<rows.length;i++){
var row=rows[i];
$("#dg").datagrid("appendRow",{
date:row.date,
amountSale:row.amountSale,
amountCost:row.amountCost,
amountProfit:row.amountProfit
});
saleTotal+=row.amountSale;
costTotal+=row.amountCost;
profitTotal+=row.amountProfit;
}
$("#dg").datagrid("appendRow",{
date:"合计",
amountSale:saleTotal.toFixed(2),
amountCost:costTotal.toFixed(2),
amountProfit:profitTotal.toFixed(2)
});
},"json");
}
}
},
title:{
text:'按月统计分析'
},
xAxis:{
title:'月份',
categories:[
'A',
'B',
'C'
]
},
yAxis:{
title:{
text:'销售利润'
}
},
series:[{
name:'销售利润',
data:[1,2,3]
}]
});
}
function formatMoney(val,row){
return "¥"+val;
}
//格式化年月
function myformatter(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m);
}
function myparser(s){
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
}
</script>
<body>
<div style="height: 100px;padding: 10px;border: 0px;">
<fieldset style="border-color: #E7F0FF">
<legend>统计设置</legend>
统计时间:
<input id="s_begin" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser" editable=false style="width:100px"/>
-
<input id="s_end" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser" editable=false style="width:100px"/>
<a href="javascript:search()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
</fieldset>
</div>
<div style="padding-left: 10px;padding-right: 10px;border: 0px;height: 350px">
<div id="container"></div>
</div>
<div style="padding: 10px;border: 0px;height: 230px">
<table id="dg" class="easyui-datagrid"
fitColumns="true" rownumbers="true" singleSelect="true"
fit="true" >
<thead>
<th field="date" width="30" align="center">日期</th>
<th field="amountSale" width="60" align="right" formatter="formatMoney">销售金额</th>
<th field="amountCost" width="60" align="right" formatter="formatMoney">成本金额</th>
<th field="amountProfit" width="60" align="right" formatter="formatMoney">盈利金额</th>
</thead>
</table>
</div>
</body>
三、Controller
/**
* 按月统计分析
* @return
* @throws Exception
*/
@RequestMapping("/countSaleByMonth")
@RequiresPermissions(value="按月统计分析")
public Map<String,Object> countSaleByMonth(String begin,String end)throws Exception{
Map<String,Object> resultMap=new HashMap<>();
List<SaleCount> scList=new ArrayList<>();
List<String> dates=DateUtil.getRangeMonths(begin, end);
List<Object> ll=saleListService.countSaleByMonth(begin, end);
for(String date:dates){
SaleCount sc=new SaleCount();
sc.setDate(date);
boolean flag=false;
for(Object o:ll){
Object []oo=(Object[]) o;
String dd=oo[2].toString().substring(0,7);
if(dd.equals(date)){ // 存在
sc.setAmountCost(MathUtil.format2Bit(Float.parseFloat(oo[0].toString()))); // 成本总金额
sc.setAmountSale(MathUtil.format2Bit(Float.parseFloat(oo[1].toString()))); // 销售总金额
sc.setAmountProfit(MathUtil.format2Bit(sc.getAmountSale()-sc.getAmountCost())); // 销售利润
flag=true;
}
}
if(!flag){
sc.setAmountCost(0);
sc.setAmountSale(0);
sc.setAmountProfit(0);
}
scList.add(sc);
}
resultMap.put("rows", scList);
resultMap.put("success", true);
return resultMap;
}
四、Repository
/**
* 按月统计某个日期范围内的销售信息
* @param begin
* @param end
* @return
*/
@Query(value="SELECT SUM(t3.purchasing_price*t1.num) AS amountCost,SUM(t1.price*t1.num) AS amountSale,DATE_FORMAT(t2.`sale_date`,'%Y-%m') AS saleDate FROM t_sale_list_goods t1 LEFT JOIN t_sale_list t2 ON t1.`sale_list_id`=t2.`id` LEFT JOIN t_goods t3 ON t3.`id`=t1.`goods_id` WHERE DATE_FORMAT(t2.`sale_date`,'%Y-%m') BETWEEN ?1 AND ?2 GROUP BY DATE_FORMAT(t2.`sale_date`,'%Y-%m')",nativeQuery=true)
public List<Object> countSaleByMonth(String begin,String end);