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);
}
}); 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);
} /**
* 通過日期查詢前三天至後三天用電情況
*/
@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>