版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LuuvyJune/article/details/84586415
前端：jquery,jsp,html，日历插件：my97 后端 java springmvc
该实现方式代码写的很low，欢迎提出意见改正！
实现效果：
（1）按周查询，选择日期只能从周一开始。 这是日历控件my97控制实现的，可到其官网查询使用文档
（2）按月查询，只看到月份
（3）按周查询效果图：横坐标是第几周
（4）按月查询结果图：横坐标是几月
扫描二维码关注公众号，回复：
5113654 查看本文章
1、引入echarts.js或者echarts.min.js
2、html代码：采用表单提交
<html>
<head>
<title>绩效管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript" src="${ctxStatic}/echarts/echarts.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/bespeakweb/bespeakPerformanceweb/list">绩效管理</a></li>
</ul>
<form:form id="searchForm" modelAttribute="performance" action="${ctx}/bespeakweb/bespeakPerformanceweb/list"
method="post" class="breadcrumb form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<ul class="ul-form">
<li><label>开始日期：</label>
<input name="startDate" type="text" id="BeginTime" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="${performance.startDate}"
onclick="WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\'EndTime\')||\'%y-%M-%d/\'}'});"/>
</li>
<li><label>结束日期：</label>
<input name="endDate" type="text" id="EndTime" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="${performance.endDate}"
onclick="WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,minDate:'#F{$dp.$D(\'BeginTime\')}',maxDate:'%y-%M-%d'});"/>
</li>
<li style="padding-left: 18px"><label>查询方式：</label>
<select name="unit" id="selectdep" style="width: 92px;" onchange="editDate()">
<option value="0" <c:if test="${performance.unit=='0'}">selected</c:if>>按周</option>
<option value="1" <c:if test="${performance.unit=='1'}">selected</c:if>>按月</option>
</select>
</li>
<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
<li class="clearfix"></li>
</ul>
</form:form>
<sys:message content="${message}"/>
<div id="main" style="width: 700px;height:400px;"></div>
</body>
</html>3、js代码，这里没有使用ajax异步请求，因为根据需求初始化就需要查询数据，并且和页面上的提交按钮走的方法一致
<script type="text/javascript">
//触发事件，改变按周或者按月查询，日历跟着变
function editDate(){
var s = $("#selectdep").val();
if(s=="0"){
$("#BeginTime").attr("onclick","WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
$("#EndTime").attr("onclick","WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
}else{
$("#BeginTime").attr("onclick","WdatePicker({dateFmt:'yyyy-MM',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
$("#EndTime").attr("onclick","WdatePicker({dateFmt:'yyyy-MM',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
}
}
var time = ${nlist}; //类别数组（实际用来盛放X轴坐标值）
var series1 = []; //booking
var series2 = []; //deal
var jsonList = ${list};
var mounthBooking = [];
var mounthDeal = [];
var weekBooking = [];
var weekDeal =[];
var bool = false;
console.log(jsonList);
console.log(jsonList[0].booking);
if(jsonList[0].booking.length!=0 && jsonList[0].deal.length!=0){
if(jsonList[0].booking[0].week==undefined){
/**
* 月预约
*/
for(var i=0;i<jsonList[0].booking.length;i++){
mounthBooking.push(jsonList[0].booking[i].month.substr(5));
console.log(mounthBooking);
}
/**
* 月处理
*
*/
for(var i=0;i<jsonList[0].deal.length;i++){
mounthDeal.push(jsonList[0].deal[i].month.substr(5));
console.log(mounthDeal);
}
var c = 0;
for (var j = 0; j < time.length; j++) {
//月预约
if (mounthBooking.indexOf(time[j]) > -1) {
series1.push(jsonList[0].booking[c].bookingNum);
c++;
} else {
series1.push(0);
}
}
var d=0;
for (var j = 0; j < time.length; j++) {
//月处理
if (mounthDeal.indexOf(time[j]) > -1) {
series2.push(jsonList[0].deal[d].dealNum);
d++;
} else {
series2.push(0);
}
}
}else{
/**
* 周预约
*/
for(var i=0;i<jsonList[0].booking.length;i++){
weekBooking.push(jsonList[0].booking[i].week.substr(5));
console.log(weekBooking);
}
/**
* 周处理
*/
for(var i=0;i<jsonList[0].deal.length;i++){
weekDeal.push(jsonList[0].deal[i].week.substr(5));
console.log(weekDeal);
}
var a = 0;
for (var j = 0; j < time.length; j++) {
//周预约
if (weekBooking.indexOf(time[j]) > -1) {
series1.push(jsonList[0].booking[a].bookingNum);
a++;
} else {
series1.push(0);
}
}
var b=0;
for (var j = 0; j < time.length; j++) {
//周处理
if (weekDeal.indexOf(time[j])>-1) {
series2.push(jsonList[0].deal[b].dealNum);
a++;
} else {
series2.push(0);
}
}
}
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '绩效管理'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['实际预约人数', '已处理']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: time
},
yAxis: {
type: 'value'
},
series: [
{
name: '实际预约人数',
type: 'line',
stack: '总量1',
data: series1
},
{
name: '已处理',
type: 'line',
stack: '总量2',
data: series2
}
]
};
myChart.setOption(option);
</script>4、java代码，controller层
@RequiresPermissions("bespeakweb:bespeakPerformance:view")
@RequestMapping(value = {"list", ""})
public String list(Performance performance, HttpServletRequest request, HttpServletResponse response, Model model) throws ParseException {
User user = UserUtils.getUser();
performance.setDepId(user.getOffice().getId());
Map map = new HashMap();
List nlist = new ArrayList();
//默认按周查询, 设置开始日期为当前日期的前一个月
if (performance.getUnit() == null || "".equals(performance.getUnit()))
performance.setUnit("0");
//按周
if ("0".equals(performance.getUnit())) {
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
Calendar c = Calendar.getInstance();
//初始化
if ("".equals(performance.getStartDate()) || performance.getStartDate() == null) {
Date date = new Date();
String str1 = formatter.format(date);
//结束时间为当前
performance.setEndDate(str1);
c.setTime(date);
c.add(Calendar.MONTH, -1);
String mon = formatter.format(c.getTime());
performance.setStartDate(mon);
}
//计算两个日期之间相差几周formance.getStartDate()
// long from = formatter.parse(performance.getStartDate()).getTime();
// long to = formatter.parse(performance.getEndDate()).getTime();
// long n = (to - from) / (1000 * 3600 * 24 * 7);
c.setTime(formatter.parse(performance.getStartDate()));
int a = c.get(Calendar.WEEK_OF_YEAR);
c.setTime(formatter.parse(performance.getEndDate()));
int b = c.get(Calendar.WEEK_OF_YEAR);
for (int i = a; i < b; i++) {
nlist.add(String.valueOf(i+1));
}
List<Map<String, String>> weekBookingCount = bespeakPerformanceWebService.getWeekBookingCount(performance);
List<Map<String, String>> weekDealCount = bespeakPerformanceWebService.getWeekDealCount(performance);
map.put("booking", weekBookingCount);
map.put("deal", weekDealCount);
} else if ("1".equals(performance.getUnit())) {//按月
if ("".equals(performance.getStartDate()) || performance.getStartDate() == null) {
Date date = new Date();
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM");
String str1 = formatter.format(date);
//结束时间为当前月
performance.setEndDate(str1);
//开始时间为当前月的前一个月
Calendar c = Calendar.getInstance();
c.setTime(date);
c.add(Calendar.MONTH, -1);
String mon = formatter.format(c.getTime());
performance.setStartDate(mon);
}
int num1 = Integer.parseInt(performance.getStartDate().substring(5,7));
int num2 = Integer.parseInt(performance.getEndDate().substring(5,7));
for(int i =num1;i<=num2;i++){
nlist.add(String.valueOf(i));
}
List<Map<String, String>> mounthBookingCount = bespeakPerformanceWebService.getMounthBookingCount(performance);
List<Map<String, String>> mounthDealCount = bespeakPerformanceWebService.getMounthDealCount(performance);
map.put("booking", mounthBookingCount);
map.put("deal", mounthDealCount);
}
System.out.println(JSONArray.fromObject(map));
model.addAttribute("list", JSONArray.fromObject(map));
model.addAttribute("nlist", JSONArray.fromObject(nlist));
return "modules/bespeakweb/bespeakPerformance";
}5、此处JSONArray.fromObject在net.sf.json-lib包中，maven pom.xml中代码：
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>6、查询sql，使用mybatis框架：
<select id="getMounthBookingCount" resultType="java.util.Map">
SELECT
count(d.id) AS "bookingNum",substr(a.booking_date, 0, 7) as "month"
FROM bespeak_booking a
left join bespeak_rel b on a.id=b.booking_id
left join bespeak_citizen d on b.c_id=d.id
<where>
<if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
AND substr(a.booking_date, 0, 7) between #{startDate} and #{endDate}
</if>
<!-- <if test="depId != null and depId != ''">
AND a.depId = #{depId}
</if>-->
</where>
group by substr(a.booking_date, 0, 7)
order by substr(a.booking_date, 0, 7)
</select>
<select id="getMounthDealCount" resultType="java.util.Map">
SELECT
count(a.id) AS "dealNum",substr(a.booking_date, 0, 7) as "month"
FROM bespeak_booking a
<where>
a.booking_state = '1'
<if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
AND substr(a.booking_date, 0, 7) between #{startDate} and #{endDate}
</if>
<!-- <if test="depId != null and depId != ''">
AND a.dep_Id = #{depId}
</if>-->
</where>
group by substr(a.booking_date, 0, 7)
order by substr(a.booking_date, 0, 7)
</select>
<select id="getWeekBookingCount" resultType="java.util.Map">
SELECT
count(d.id) AS "bookingNum",to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw') as "week"
FROM bespeak_booking a
left join bespeak_rel b on a.id=b.booking_id
left join bespeak_citizen d on b.c_id=d.id
<where>
<if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
AND a.booking_date between #{startDate} and #{endDate}
</if>
<!--<if test="depId != null and depId != ''">-->
<!--AND a.depId = #{depId}-->
<!--</if>-->
</where>
group by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
order by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
</select>
<select id="getWeekDealCount" resultType="java.util.Map">
SELECT
count(a.id) AS "dealNum",to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw') as "week"
FROM bespeak_booking a
<where>
a.booking_state = '1'
<if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
AND a.booking_date between #{startDate} and #{endDate}
</if>
<!--<if test="depId != null and depId != ''">-->
<!--AND a.depId = #{depId}-->
<!--</if>-->
</where>
group by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
order by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
</select>7、查询的结果转换为json，格式如下：
[{"booking":[{"week":"2018-48","bookingNum":13}],"deal":[{"week":"2018-48","dealNum":2}]}]