Echarts+Java实现根据开始时间和结束时间按周或者按月查询

前端:jquery,jsp,html,日历插件:my97 后端 java springmvc

该实现方式代码写的很low,欢迎提出意见改正!

实现效果:

(1)按周查询,选择日期只能从周一开始。 这是日历控件my97控制实现的,可到其官网查询使用文档

(2)按月查询,只看到月份

(3)按周查询效果图:横坐标是第几周

(4)按月查询结果图:横坐标是几月

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">
     editDate();
     //触发事件,改变按周或者按月查询,日历跟着变
     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, Model model) throws ParseException {
        //条件部门查询
        if (performance.getOffice() != null) {
            performance.setDepId(performance.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);
 
            Calendar c2 = Calendar.getInstance();
            c2.setTime(formatter.parse(performance.getEndDate()));
 
 
            while (c.getTime().getTime() <= c2.getTime().getTime()) {
                nlist.add(DateUtils.formatDate(c.getTime(), "yyyy") + "-" + c.get(Calendar.WEEK_OF_YEAR)+"周");
                c.add(Calendar.WEEK_OF_YEAR, +1);
            }
 
//           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);
            }
            Calendar c = Calendar.getInstance();
            c.setTime(DateUtils.parseDate(performance.getStartDate(), "yyyy-MM"));
            Calendar c2 = Calendar.getInstance();
            c2.setTime(DateUtils.parseDate(performance.getEndDate(), "yyyy-MM"));
//            int num1 = Integer.parseInt(performance.getStartDate().substring(5,7));
//            int num2 = Integer.parseInt(performance.getEndDate().substring(5,7));
            while (c.getTime().getTime() <= c2.getTime().getTime()) {
                nlist.add(DateUtils.formatDate(c.getTime(), "yyyy-MM")+"月");
                c.add(Calendar.MONTH, +1);
            }
            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}]}]

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/LuuvyJune/article/details/84586415

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值