jquery datepicker 点击同步刷新echarts数据显示功能
很久没有写过博客了,工作比较忙,最近有时间在做自己的毕业设计,将比较新的功能架构加入到了我的比设里,看上去感觉还是挺高大上的,所以把最近研究比较多,也比较实用的一个前端功能展示给大家
需要的前端包:jquery-min.js
jquery-form.js
jquery-ui.min.js
jquery-ui.js
chart.min.js
后端用的springmvc+spring+mybatis
页面展示:
功能描述:通过点击日历中的日期可以搜索当前日期的前三天和后三天的用电情况然后局部刷新到图表中
思路:通过点击日历中的日期建立监听函数,通过ajax提交到后台,进行数据获取,然后传回json数据到前端,再将数据放置到表单中即可
前端展示:
页面生成默认搜索当前系统日期信息:
$(document).ready(function () {
var date = getNowFormatDate();
var dates = new Array();
var datas = new Array();
var surplusEnergy = new Array();
var today;
var yest;
var supr;
$.ajax({
url: "<c:url value="/energyInfo/dateEnergyInfos"/>",
type: "post",
dataType: "json",
async: false,
success: function (result) {
$.each(result, function (index, obj) {
dates.push(obj.dateEnergy);
datas.push(obj.todatEnergy);
surplusEnergy.push(obj.surplusEnergy);
if(obj.dateEnergy==date){
today = obj.todatEnergy;
yest = obj.yestdatEnergy;
supr = obj.surplusEnergy;
}
});
},
error: function () {
}
});
var lineChartData = {
labels: dates,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(255,44,44,0.2)",
strokeColor: "rgba(255,44,44,1)",
pointColor: "rgba(255,44,44,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(255,44,44,1)",
data: datas
},
{
label: "My Second dataset",
fillColor: "rgba(48, 164, 255, 0.2)",
strokeColor: "rgba(48, 164, 255, 1)",
pointColor: "rgba(48, 164, 255, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(48, 164, 255, 1)",
data: surplusEnergy
}
]
}
var chart1 = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(chart1).Line(lineChartData, {
responsive: true
});
$("#dateEnergy").html(date);
$("#today").html(today);
$("#yest").html(yest);
$("#supr").html(supr);
});
日历生成及点击监听函数:
$('#calendar').datepicker({
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
onSelect: function(dateText, inst) {
doready(dateText);
}
});
监听doready函数:
function doexit() {
$.ajax({
url:"<c:url value='/register/exit'/>",
type:"post",
dataType:"json",
async:true,
success:function(result){
alert("退出成功");
window.location.href="<c:url value='/register/login.jsp'/>";
},
error:function(){
alert("退出失败");
}
});
}
function doready(date){
var dates = new Array();
var datas = new Array();
var surplusEnergy = new Array();
var today;
var yest;
var supr;
$.ajax({
url: "<c:url value="/energyInfo/dateEnergyInfos"/>",
type: "post",
data: {"date": date},
dataType: "json",
async: false,
success: function (result) {
var datesa=date.split("/");
date="";
date = datesa[2]+"-"+datesa[0]+"-"+datesa[1];
$.each(result, function (index, obj) {
dates.push(obj.dateEnergy);
datas.push(obj.todatEnergy);
surplusEnergy.push(obj.surplusEnergy);
if(obj.dateEnergy==date){
today = obj.todatEnergy;
yest = obj.yestdatEnergy;
supr = obj.surplusEnergy;
}
});
},
error: function () {
}
});
var lineChartData = {
labels: dates,
datasets: [
{
label: "My First dataset",
fillColor: "rgba(255,44,44,0.2)",
strokeColor: "rgba(255,44,44,1)",
pointColor: "rgba(255,44,44,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(255,44,44,1)",
data: datas
},
{
label: "My Second dataset",
fillColor: "rgba(48, 164, 255, 0.2)",
strokeColor: "rgba(48, 164, 255, 1)",
pointColor: "rgba(48, 164, 255, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(48, 164, 255, 1)",
data: surplusEnergy
}
]
}
var chart1 = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(chart1).Line(lineChartData, {
responsive: true
});
$("#dateEnergy").html(date);
$("#today").html(today);
$("#yest").html(yest);
$("#supr").html(supr);
}
后端请求的controller中的dateEnergyInfos函数:
/**
* 通过日期查询前三天至后三天用电情况
*/
@RequestMapping("/energyInfo/dateEnergyInfos")
public void dateEnergyInfos(HttpServletRequest req, HttpServletResponse resp) throws IOException, ParseException {
PrintWriter pw = resp.getWriter();
//获取当前登录用户
User user = (User) req.getSession().getAttribute("user");
String id = user.getId();
//获取查询日期
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String date = req.getParameter("date");
if (null == date) {
Date d = new Date();
date = sdf.format(d);
}
if (date.contains("/")) {
String dates[] = date.split("/");
date = "";
date = dates[2] + "-" + dates[0] + "-" + dates[1];
}
log.info(date);
String dateStart = sdf.format(getDateBefore(sdf.parse(date),3));
String dateEnd = sdf.format(getDateAfter(sdf.parse(date),3));
String datesecond = sdf.format(getDateBefore(sdf.parse(date),2));
String datethird = sdf.format(getDateBefore(sdf.parse(date),1));
String datefifth = sdf.format(getDateAfter(sdf.parse(date),1));
String datesix = sdf.format(getDateAfter(sdf.parse(date),2));
String dates[] = new String[7];
dates[0] = dateStart;
dates[1] = datesecond;
dates[2] = datethird;
dates[3] = date;
dates[4] = datefifth;
dates[5] = datesix;
dates[6] = dateEnd;
log.info(dateStart+"-----"+dateEnd);
List<EnergyInfoVO> list = energyInfoService.searchEnergyInfoByDates(id, dateStart,dateEnd);
for(int i=0;i<dates.length;i++){
boolean boo=true;
for(int j=0;j<list.size();j++){
if(list.get(j).getDateEnergy().equals(dates[i])){
boo=false;
break;
}
}
if(boo==true){
log.info(dates[i]);
EnergyInfoVO vo = new EnergyInfoVO();
vo.setDateEnergy(dates[i]);
list.add(vo);
}
}
ListSort(list);
String json = JSON.toJSONString(list);
log.info(json);
pw.print(json);
}
开始日期和结束日期以及按日期排序的信息处理:
//获取开始日期
public static Date getDateBefore(Date d, int day) {
Calendar now = Calendar.getInstance();
now.setTime(d);
now.set(Calendar.DATE, now.get(Calendar.DATE) - day);
return now.getTime();
}
//获取结束日期
public static Date getDateAfter(Date d, int day) {
Calendar now = Calendar.getInstance();
now.setTime(d);
now.set(Calendar.DATE, now.get(Calendar.DATE) + day);
return now.getTime();
}
//按日期排序
private static void ListSort(List<EnergyInfoVO> list) {
Collections.sort(list, new Comparator<EnergyInfoVO>() {
@Override
public int compare(EnergyInfoVO o1, EnergyInfoVO o2) {
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
try {
Date dt1 = format.parse(o1.getDateEnergy());
Date dt2 = format.parse(o2.getDateEnergy());
if (dt1.getTime() > dt2.getTime()) {
return 1;
} else if (dt1.getTime() < dt2.getTime()) {
return -1;
} else {
return 0;
}
} catch (Exception e) {
e.printStackTrace();
}
return 0;
}
});
}
mybatis的mapper配置文件的sql:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<select id="searchEnergyInfoByDates" parameterType="java.lang.String" resultType="cn.hncu.dfcx.energyMain.vo.EnergyInfoVO">
select id as id,today_energy as todatEnergy,yestday_energy as yestdatEnergy,surplus_energy as surplusEnergy,user_id as userId,light_energy as lightEnergy,
air_energy as airEnergy,other_energy as otherEnergy,date_energy as dateEnergy from electric_info where user_id = #{0} and date_energy BETWEEN #{1} and #{2};
</select>
</mapper>