1.下拉菜单显示效果:选择年后,计算加载该年一共有多少个周。
选择了第几周后,显示该周的时间段。
前台结合Vue实现,下面是部分实现代码:
//下拉框
<div class="clearfix pd-10">
<div style="width:25%;float: left;">
<su-select id="year" name="year" placeholder="选择年" :data.sync="year" :select-value.sync="data.year" :data-source.sync="yearData"></su-select>
</div>
<div style="width:25%;float: left;">
<su-select id="week" name="week" placeholder="选择周" :data.sync="week" :select-value.sync="data.week" :data-source.sync="weekData"></su-select>
</div>
<div style="width:50%;float: left;">
<span class="pull-right fs-12 c-4a" style="font-size: 12pt;">{{data.tempYearMonth}}</span>
</div>
</div>
//年份下拉
getFullYear:function(){
var main = this;
var date=new Date;
//当前年
var year=date.getFullYear();
//上一年
var prevYear = year - 1;
var yearData = [
{"value": prevYear + "","label": prevYear + "年","checked": null},
{"value": year + "","label": year + "年","checked": null}
];
main.yearData = yearData;
},
data: function() {
return {
data:{
year:'',
month:'',
tempYearMonth:'',
counts:''
},
yearData:[],
weekData:[],
bdzTable:[],
}
},
watch:{
//监听年份下拉选择框,计算得周数
'data.year':function(){
var main = this;
var param = {
year: main.data.year,
};
$.ajax({
type:"get",
url:basePath + '/patrolinfo/getweekbyyear',
data: param,
success: function(data) {
var temp = {};
var tempweekData = [];
for (var i = 0; i < data.weeks; i++) {
temp = {"value": (i + 1) + "","label": "第" + (i + 1) + "周","checked": null};
tempweekData.push(temp);
}
main.weekData = tempweekData;
}
});
},
后台主要实现代码如下:
2.根据选中的年份,计算所选年包含多少个周
//根据年份得到所选年的周数
public Map<String, Object> getWeekByYear(Map<String, Object> param) {
Map<String, Object> result = new HashMap<String, Object>();
if (param.containsKey("year") && param.get("year") != null && !"".equals(param.get("year"))) {
int year = Integer.parseInt(param.get("year").toString());
Calendar c = new GregorianCalendar();
c.set(year, Calendar.DECEMBER, 31, 23, 59, 59);
Calendar d = new GregorianCalendar();
d.setFirstDayOfWeek(Calendar.MONDAY);
d.setMinimalDaysInFirstWeek(7);
d.setTime(c.getTime());
int weeks = d.get(Calendar.WEEK_OF_YEAR);
result.put("weeks", weeks);
}
return result;
}
3.获取所选周的时间段
public Map<String, Object> getYearWeekDay(Map<String, Object> param) {
Map<String, Object> result = new HashMap<String, Object>();
if(param.containsKey("year") && param.containsKey("week")){
int year = Integer.parseInt(param.get("year").toString());
int week = Integer.parseInt(param.get("week").toString());
String yearWeekString = getStartDayOfWeek(year,week) + "-" + getEndDayOfWeek(year,week);
result.put("yearweek", yearWeekString);
}
return result;
}
此处按周一为每周的开始,进行计算的。
cal.set(Calendar.DAY_OF_WEEK, Calendar.MONDAY);
(tempMonth < 10 ? “0” + tempMonth : tempMonth) 是为了将不足两位的数字补全,例如,6日显示为06日。
private String getStartDayOfWeek(int year, int week) {
Calendar cal = Calendar.getInstance();
cal.set(Calendar.DAY_OF_WEEK, Calendar.MONDAY);
cal.set(Calendar.YEAR, year);
cal.set(Calendar.WEEK_OF_YEAR, week);
int tempMonth = cal.get(Calendar.MONTH) + 1;
int tempDay = cal.get(Calendar.DAY_OF_MONTH);
return cal.get(Calendar.YEAR) + "年" + (tempMonth < 10 ? "0" + tempMonth : tempMonth) + "月"
+ (tempDay < 10 ? "0" + tempDay : tempDay) + "日";
}
private String getEndDayOfWeek(int year, int week) {
Calendar cal = Calendar.getInstance();
cal.set(Calendar.DAY_OF_WEEK, Calendar.MONDAY);
cal.set(Calendar.YEAR, year);
cal.set(Calendar.WEEK_OF_YEAR, week);
cal.add(Calendar.DAY_OF_WEEK, 6);
int tempMonth = cal.get(Calendar.MONTH) + 1;
int tempDay = cal.get(Calendar.DAY_OF_MONTH);
return cal.get(Calendar.YEAR) + "年" + (tempMonth < 10 ? "0" + tempMonth : tempMonth) + "月"
+ (tempDay < 10 ? "0" + tempDay : tempDay) + "日";
}