1.页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>摘星</title>
<meta name="keywords" content="设置关键词..." />
<meta name="description" content="设置描述..." />
<meta name="author" content="DeathGhost" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link rel="icon" href="static/base/images/icon/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../static/base/javascript/plug-ins/layerUi/mobile/need/layer.css" />
<link rel="stylesheet" type="text/css" href="../static/base/css/style.css" />
<style>
.line{
height:1px;margin:0px auto;padding:0px;background-color:black;overflow:hidden;
}
.kuangkuang{
width: 22%;
height: 159px;
border-style: solid;
border-width: 1px;
float: left;
border-color:rgb(201,201,201);
}
.kuangkuang-up{
line-height:96px;
text-align: center;
font-size: 32px;
position: relative;
}
.kuangkuang-down{
text-align: center;
line-height: 65px;
font-size: 20px;
background-color: rgb(233, 233, 233);
}
</style>
</head>
<body style="width: 100%;height: 120%">
<br>
<div class="page-container">
<div style="height:159px;text-align:center;">
<div class="kuangkuang" style="margin-left:2%;">
<div class="kuangkuang-down">入库单</div>
<div class="kuangkuang-up" id="rkd">
0单
</div>
</div>
<div class="kuangkuang" style="margin-left:2%;">
<div class="kuangkuang-down">出库单</div>
<div class="kuangkuang-up" id="ckd">
0单
</div>
</div>
<div class="kuangkuang" style="margin-left:2%;">
<div class="kuangkuang-down">总收入</div>
<div class="kuangkuang-up" id="shouru">
0￥
</div>
</div>
<div class="kuangkuang" style="margin-left:2%;">
<div class="kuangkuang-down">总支出</div>
<div class="kuangkuang-up" id="zhichu">
0￥
</div>
</div>
</div>
<br>
<br>
<input type="text" id="stime" placeholder="选择时间" class="form-control" style="width:140px;float: right;margin-right: 4%;">
<span style="float: right;margin-right:1%;margin-top:5px;">选择时间:</span>
<br>
<br>
<div id="main1" style="width:45%;height:450px;float:left;"></div>
<div id="main2" style="width:45%;height:480px;float:left;"></div>
</div>
<script src="../static/base/javascript/jquery.js"></script>
<script src="../static/base/javascript/plug-ins/layerUi/layer.js"></script>
<script src="../static/laydate/laydate.js"></script>
<script src="../static/echarts/echarts.min.js"></script>
<script src="../static/js/tools.js"></script>
<script type="text/javascript">
//日期范围
laydate.render({
elem: '#stime',
type: 'datetime',
range: true,
done: function(value, date, endDate){
console.log(value); //得到日期生成的值，如：2017-08-18
console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
changedata(date,endDate,2);
}
});
//给layDate一个默认值
$(document).ready(function () {
var now1 = new Date();
now1.setDate(now1.getDate()-7);
now1.setHours(0);
now1.setMinutes(0);
now1.setSeconds(0);
now1.setMilliseconds(0);
var now2 = new Date();
now2.setHours(23);
now2.setMinutes(59);
now2.setSeconds(59);
var time1 = formatTime(now1,"yyyy-MM-dd hh:mm:ss");
var time2 = formatTime(now2,"yyyy-MM-dd hh:mm:ss");
$("#stime").val(time1 +' - '+ time2);
changedata(now1,now2,1);
});
function changedata(date,endDate,type){
if(type == 1){
date = formatTime(date, "yyyy-MM-dd hh:mm:ss")
endDate = formatTime(endDate, "yyyy-MM-dd hh:mm:ss")
}else{
date=date.year+'-'+date.month+'-'+date.date+' '+date.hours+':'+date.minutes+':'+date.seconds
endDate=endDate.year+'-'+endDate.month+'-'+endDate.date+' '+endDate.hours+':'+endDate.minutes+':'+endDate.seconds
}
$.ajax({
type: "POST",
url: serverWeb+"home/getKuNameAndCount",
data: {
date:date,
endDate:endDate
},
success: function(data){
data = JSON.parse(data);
console.log(data);
if(data.status){
$("#rkd").html(data.record.rcount + "单")
$("#ckd").html(data.record.ccount + "单")
$("#shouru").html(data.record.shouru + "￥")
$("#zhichu").html(data.record.zhichu + "￥")
myChart1.setOption({
xAxis: {
data: data.record.xAxis1
},
series: [{
data: data.record.data1
},{
data: data.record.data2
}]
});
//这里设置图片自适应
window.addEventListener("resize",function(){
myChart1.resize();
});
myChart2.setOption({
xAxis: {
data: data.record.xAxis2
},
series: [{
data: data.record.data3
},{
data: data.record.data4
}]
});
//这里设置图片自适应
window.addEventListener("resize",function(){
myChart2.resize();
});
}
}
});
}
/*---------------------------------树状图------------------------------*/
//基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据
var option1 = {
title: {
text: '出入库数量'
},
tooltip: {},
legend: {
bottom:'-1%',
data:['入库量', '出库量']
},
grid: {
left: '3%',
right: '4%',
bottom: '9%',
containLabel: true
},
xAxis: {
data: ["java基础","C++编程","高等数学","统计学原理","网络原理","三剑客教程"]
},
yAxis: {},
series: [{
name: '入库量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},{
name: '出库量',
type: 'bar',
data: [8, 15, 52, 16, 17, 22]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
/*---------------------------------折线图--------------------------------*/
var myChart2 = echarts.init(document.getElementById('main2'));
option2 = {
title: {
text: '支出/收入'
},
tooltip: {
trigger: 'axis'
},
legend: {
bottom:'4%',
data:['收入','支出']
},
grid: {
left: '3%',
right: '4%',
bottom: '9%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'2018/1/1', '2018/1/2', '2018/1/3',
'2018/1/4', '2018/1/2', '2018/1/3', '2018/1/4'
],
axisLabel: {
rotate: 45
}
},
yAxis: {
type: 'value'
},
series: [
{
name:'收入',
type:'line',
data:[0, 0, 0, 0, 0, 0, 0]
},{
name:'支出',
type:'line',
data:[0, 0, 0, 0, 0, 0, 0]
}
]
};
myChart2.setOption(option2);
/*---------------------------------------------------------------*/
</script>
</body>
</html>
package com.project.controller;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang3.StringUtils;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.project.service.ICangkuService;
import com.project.service.IRecordService;
import com.project.utils.DateUtil;
import com.project.utils.JSONFZ;
/**
* 前端控制器
*/
@Controller
@RequestMapping("/home")
public class HomeController extends BaseController{
private Logger logger= Logger.getLogger(HomeController.class);
@Autowired
private ICangkuService cangkuService;
@Autowired
private IRecordService recordService;
//得到出入库产品名称和数量
@RequestMapping("/getKuNameAndCount")
@ResponseBody
public String getKuNameAndCount(HttpServletRequest request, HttpServletResponse response) {
logger.info("get参数 : " + JSON.toJSONString(request.getParameterMap()));
String dates = request.getParameter("date");
String endDates = request.getParameter("endDate");
Date startDate = null;
Date endDate = null;
if(StringUtils.isNotBlank(dates)){
startDate = DateUtil.parseDate(dates);
}
if(StringUtils.isNotBlank(endDates)){
endDate = DateUtil.parseDate(endDates);
}
try {
JSONObject jsonobject = cangkuService.getKuNameAndCount(startDate, endDate);
return new JSONFZ().put("status", true).put("record", jsonobject).toJSONString();
} catch (Exception e) {
e.printStackTrace();
return new JSONFZ().put("status", false).toJSONString();
}
}
}
public JSONObject getKuNameAndCount(Date startDate, Date endDate) {
JSONObject jsonobject = new JSONObject();
//1.查询入库单，出库单，收入和支出
EntityWrapper<Record> rWrapper = new EntityWrapper<Record>();
rWrapper.between("createTime", startDate, endDate);
List<Record> rList = recordMapper.selectList(rWrapper);
int rcount = 0,ccount = 0;
BigDecimal shouru = new BigDecimal(0);
BigDecimal zhichu = new BigDecimal(0);
Calendar cal1 = Calendar.getInstance();
for (Record record : rList) {
if(record.getType() == 4){
//出库
ccount++;
shouru =record.getTotalpriced().add(shouru);
}else{
//入库
rcount++;
zhichu =record.getTotalpriced().add(zhichu);
}
//将createTime的时分秒去掉
cal1.setTime(record.getCreateTime());
// 将时分秒,毫秒域清零
cal1.set(Calendar.HOUR_OF_DAY, 0);
cal1.set(Calendar.MINUTE, 0);
cal1.set(Calendar.SECOND, 0);
cal1.set(Calendar.MILLISECOND, 0);
record.setCreateTime(cal1.getTime());
}
jsonobject.put("rcount", rcount);
jsonobject.put("ccount", ccount);
jsonobject.put("zhichu", zhichu);
jsonobject.put("shouru", shouru);
//2.折线图数据，精确到天
/*List<String> zxname = rList.stream()
.map(s -> DateUtil.format(s.getCreateTime())).distinct()
.sorted()
.collect(Collectors.toList());*/
List<String> zxname = Lists.newArrayList();
cal1.setTime(startDate);
boolean bContinue = true;
while(bContinue){
cal1.add(Calendar.DAY_OF_MONTH, 1);
if (endDate.after(cal1.getTime())) {
zxname.add(DateUtil.format(cal1.getTime()));
}else{
bContinue = false;
}
}
List<BigDecimal> total1 = Lists.newArrayList();
List<BigDecimal> total2 = Lists.newArrayList();
for (String name : zxname) {
BigDecimal shourun = new BigDecimal(0);
BigDecimal zhichun = new BigDecimal(0);
for (Record record : rList) {
if(StringUtils.equals(name, DateUtil.format(record.getCreateTime()))){
if(record.getType() == 4){
//出库，即收入
shourun = shourun.add(record.getTotalpriced());
}else{
//入库，即支出
zhichun = zhichun.add(record.getTotalpriced());
}
}
}
total1.add(shourun);
total2.add(zhichun);
//去掉后面的时分秒
name = name.substring(0,name.indexOf(" "));
}
List<String> xAxis2 = zxname.stream()
.map(s -> s.substring(0, s.indexOf(" ")))
.collect(Collectors.toList());
jsonobject.put("xAxis2", xAxis2);
jsonobject.put("data3", total1);
jsonobject.put("data4", total2);
//3.查找出所有在当前时间范围内的产品名称（包括出库和入库）
EntityWrapper<RecordProduct> rpWrapper = new EntityWrapper<RecordProduct>();
rpWrapper.between("createTime", startDate, endDate);
List<RecordProduct> rpList = recordProductService.selectList(rpWrapper);
List<String> pName = rpList.stream()
.map(s-> s.getProductName()).distinct()
.collect(Collectors.toList());
//3.根据type（出库/入库）分组
Map<Integer, List<RecordProduct>> rpMap = rpList.stream().collect(
Collectors.groupingBy(RecordProduct::getType));
List<RecordProduct> ckRPList = rpMap.get(1);
List<RecordProduct> rkRPList = rpMap.get(2);
jsonobject.put("xAxis1", pName);
List<Long> value1 = Lists.newArrayList();
List<Long> value2 = Lists.newArrayList();
for (String rpName : pName) {
Long sum1 = ckRPList.stream()
.filter(s -> StringUtils.equals(rpName, s.getProductName()))
.mapToLong(RecordProduct :: getCount).sum();
value1.add(sum1);
Long sum2 = rkRPList.stream()
.filter(s -> StringUtils.equals(rpName, s.getProductName()))
.mapToLong(RecordProduct :: getCount).sum();
value2.add(sum2);
}
Long[] v1 = (Long[])value1.toArray(new Long[value1.size()]);
Long[] v2 = (Long[])value2.toArray(new Long[value2.size()]);
jsonobject.put("data1", v1);
jsonobject.put("data2", v2);
return jsonobject;
}
6337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
