最近在写一个页面,需要取时间段,没有后台支撑,前端根据时间段,实现hightcharts自动生成数据
看我们前端直接用split这个属性,完美解决时间日期分割
split案例
"2:3:4:5".split(":") //将返回["2", "3", "4", "5"] "|a|b|c".split("|") //将返回["", "a", "b", "c"]
$(function(){
var start_year,start_mon,start_day,start_length,end_year,end_mon,end_day,end_length,start_num,totalDay,xDate,yData
//时间选择
lay('#startTime').each(function(){
laydate.render({
elem: this,
trigger: 'click',
done: function(value, date){
//alert(JSON.stringify(date));
start_year=date.year;
start_mon=date.month;
start_day=date.date;
start_length=mGetDate(start_year,start_mon);
start_num=start_length-start_day;
},
});
});
lay('#endTime').each(function(){
laydate.render({
elem: this,
trigger: 'click',
done: function(value, date){
//alert(JSON.stringify(date));
end_year=date.year;
end_mon=date.month;
end_day=date.date;
end_length=end_day;
},
});
});
lay('#reportDate').each(function(){
laydate.render({
elem: this,
trigger: 'click',
done: function(value, date){
//alert(JSON.stringify(date));
end_year=date.year;
end_mon=date.month;
end_day=date.date;
},
});
});
$("#reportDate").val(getNowFormatDate());
$("#endTime").val(getNowFormatDate());
$("#startTime").val(getPreMonth(getNowFormatDate()));
var xData=[],data=[];
xData.push($("#startTime").val());
if($("#startTime").val().split('-')[1]==$("#endTime").val().split('-')[1]){
totalDay=$("#endTime").val().split('-')[2]-$("#startTime").val().split('-')[2];
for (var i=1;i<=totalDay;i++){
xData.push($("#startTime").val().split('-')[0]+'-'+$("#startTime").val().split('-')[1]+'-'+Number(Number($("#startTime").val().split('-')[2])+i))
data.push(Math.random()*0.6+1);
}
}
else{
var preDay=mGetDate($("#startTime").val().split('-')[0],$("#startTime").val().split('-')[1])-$("#startTime").val().split('-')[2];
var nowday=$("#endTime").val().split('-')[2];
totalDay=parseInt(preDay)+parseInt(nowday);
for (var i=1;i<=preDay;i++){
xData.push($("#startTime").val().split('-')[0]+'-'+$("#startTime").val().split('-')[1]+'-'+Number(Number($("#startTime").val().split('-')[2])+i))
data.push(Math.random()*0.6+1);
}
for (var i=1;i<=nowday;i++){
if(i<10){
xData.push($("#endTime").val().split('-')[0]+'-'+$("#endTime").val().split('-')[1]+'-'+0+i)
}
else{
xData.push($("#endTime").val().split('-')[0]+'-'+$("#endTime").val().split('-')[1]+'-'+i)
}
data.push(Math.random()*0.6+1);
}
}
xData.push($("#endTime").val());
data.push(Math.random()*0.6+1);
yData=[{
name: 'PUE',
data:data
}]
charts.lineFn('pue','PUE趋势分析',xData,yData,'');
$("#search_btn").click(function(){
var jigui_total=Math.round(1000*Math.random())+5000;
var jigui_now=Math.round(1000*Math.random())+2000;
var jigui_rate=Math.round((jigui_now/jigui_total)*100);
$(".Jigui-total").text(jigui_total);
$(".jigui-now").text(jigui_now);
$(".jigui-rate").text(jigui_rate);
var ele_total=Math.round(1000*Math.random())+8000;
var ele_now=Math.round(1000*Math.random())+7000;
var ele_rate=Math.round((ele_now/ele_total)*100);
$(".ele-total").text(ele_total);
$(".ele-now").text(ele_now);
$(".ele-rate").text(ele_rate);
var code_total=Math.round(1000*Math.random())+8000;
var code_now=Math.round(1000*Math.random())+7000;
var code_rate=Math.round((code_now/code_total)*100);
$(".code-total").text(code_total);
$(".code-now").text(code_now);
$(".code-rate").text(code_rate);
var preDay=mGetDate($("#startTime").val().split('-')[0],$("#startTime").val().split('-')[1])-$("#startTime").val().split('-')[2];
var nowday=$("#endTime").val().split('-')[2];
var xData=[],data=[];
xData.push($("#startTime").val());
if($("#startTime").val().split('-')[1]==$("#endTime").val().split('-')[1]){
totalDay=$("#endTime").val().split('-')[2]-$("#startTime").val().split('-')[2];
for (var i=1;i<=totalDay;i++){
xData.push($("#startTime").val().split('-')[0]+'-'+$("#startTime").val().split('-')[1]+'-'+Number(Number($("#startTime").val().split('-')[2])+i))
data.push(Math.random()*0.6+1);
}
}
else{
var preDay=mGetDate($("#startTime").val().split('-')[0],$("#startTime").val().split('-')[1])-$("#startTime").val().split('-')[2];
var nowday=$("#endTime").val().split('-')[2];
totalDay=parseInt(preDay)+parseInt(nowday);
for (var i=1;i<=preDay;i++){
xData.push($("#startTime").val().split('-')[0]+'-'+$("#startTime").val().split('-')[1]+'-'+Number(Number($("#startTime").val().split('-')[2])+i))
data.push(Math.random()*0.6+1);
}
for (var i=1;i<=nowday;i++){
if(i<10){
xData.push($("#endTime").val().split('-')[0]+'-'+$("#endTime").val().split('-')[1]+'-'+0+i)
}
else{
xData.push($("#endTime").val().split('-')[0]+'-'+$("#endTime").val().split('-')[1]+'-'+i)
}
data.push(Math.random()*0.6+1);
}
}
xData.push($("#endTime").val());
data.push(Math.random()*0.6+1);
yData=[{
name: 'PUE',
data:data
}]
charts.lineFn('pue','PUE趋势分析',xData,yData,'');
});
});
function mGetDate(year,month){
var d = new Date(year, month, 0);
return d.getDate();
}
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
return currentdate;
}
function getPreMonth(date) {
var arr = date.split('-');
var year = arr[0]; //获取当前日期的年份
var month = arr[1]; //获取当前日期的月份
var day = arr[2]; //获取当前日期的日
var days = new Date(year, month, 0);
days = days.getDate(); //获取当前日期中月的天数
var year2 = year;
var month2 = parseInt(month) - 1;
if (month2 == 0) {
year2 = parseInt(year2) - 1;
month2 = 12;
}
var day2 = day;
var days2 = new Date(year2, month2, 0);
days2 = days2.getDate();
if (day2 > days2) {
day2 = days2;
}
if (month2 < 10) {
month2 = '0' + month2;
}
var t2 = year2 + '-' + month2 + '-' + day2;
return t2;
}