图形报表 highcharts 整合easyui 按月统计

上一篇链接:
图形报表 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>
			&nbsp;&nbsp;&nbsp;统计时间:&nbsp;
			<input id="s_begin" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser" editable=false style="width:100px"/>
			&nbsp;&nbsp;-&nbsp;&nbsp;
			<input id="s_end" class="easyui-datebox" data-options="formatter:myformatter,parser:myparser" editable=false style="width:100px"/>
			&nbsp;&nbsp;<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);

在这里插入图片描述

发布了98 篇原创文章 · 获赞 7 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_37767455/article/details/102637330