SSM酒店管理系统项目Day22

ilue
150 阅读3分钟

建议配合视频学习食用（14-3~14-7）： www.bilibili.com/video/BV1rr…

26.年、月营业额报表分析

layui模板里边也加载的与echarts插件，但是由于位置太深，我们新建一个echarts文件存放对应的js文件 在这里插入图片描述

26.1 添加页面

1.添加订单管理、预定管理 2.修改超级管理员权限 3.添加页面 PageController.java

    /**
     * 去到年度营业额报表统计分析页面
     * @return
     */
    @RequestMapping("/toYearTotalPriceManager")
    public String toYearTotalPriceManager(){
        return "charts/yearTotalPriceCharts";
    }

    /**
     * 去到月营业额报表统计分析页面
     * @return
     */
    @RequestMapping("/toYearOfMonthCharts")
    public String toYearOfMonthCharts(){
        return "charts/yearOfMonthCharts";
    }

yearOfMonthCharts.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/public.css" media="all">
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">选择年份:</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        </div>
    </div>
</form>
<!-- 搜索条件结束 -->

<!-- 报表界面开始 -->
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="container" style="height:550px;"></div>
<!-- 报表界面结束 -->

<script src="${pageContext.request.contextPath}/statics/echarts/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/echarts/echarts.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['jquery','form','layer','laydate'],function () {
        var $=layui.jquery;
        var form=layui.form;
        var layer=layui.layer;
        var laydate=layui.laydate;
        //初始化时间选择器
        laydate.render({
            elem:'#year',//绑定渲染的元素
            type:'year',//控件选择类型
            value:new Date()//默认选中当前年份
        });

        $("#doSearch").click(function () {
            getData();
        });

        //查询数据
        function getData() {
            //获取年份
            var year = $("#year").val();
            //判断年份是否为空
            if(year=="" || year.length==0){
                //如果年份为空，则默认使用当前年份
                year = new Date().getFullYear();
            }
            //发送请求
            $.get("/admin/charts/getMonthTotalPrice",{"year":year},function(result){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('container'),'light');
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '月营业额报表统计分析',//标题
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    // legend: {
                    //     data:['营业额']
                    // },
                    xAxis: {
                        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
                    },
                    yAxis: {},
                    series: [{
                        name: '营业额',
                        type: 'line',
                        data: result
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },"json");
        }

        //调用方法
        getData();


    });
</script>
</body>
</html>

yearTotalPriceCharts.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>年度营业额报表</title>
    <!-- 引入 ECharts 文件 -->
    <script src="${pageContext.request.contextPath}/statics/echarts/jquery-3.1.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/echarts/echarts.min.js"></script>
</head>
<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="height:550px;"></div>


<script>

    /**
     * 获取数据
     */
    function getData() {
       $.get("/admin/charts/getYearTotalPrice",function(result){
           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById('main'),'light');
           // 指定图表的配置项和数据
           var option = {
               title: {
                   text: '年度营业额报表统计分析',//标题
                   left: 'center'
               },
               tooltip: {
                   trigger: 'axis',
                   axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                       type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                   }
               },
               // legend: {
               //     data:['营业额']
               // },
               xAxis: {
                   data: result.keyList
               },
               yAxis: {},
               series: [{
                   name: '营业额',
                   type: 'bar',
                   data: result.valueList
               }]
           };

           // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option);
       },"json");
    }

    //调用方法
    getData();


</script>


</body>
</html>

26.2 实现页面

1.数据层 ChartsMapper.java

package com.manong.dao;

import java.util.List;
import java.util.Map;

public interface ChartsMapper {

    /**
     * 查询每个年度总营业额
     * @return
     */
    List<Map> getTotalPriceByYear();


    /**
     * 统计月营业额报表
     * @param year
     * @return
     */
    List<Double> getMonthTotalPriceByYear(String year);

}

ChartsMapper.xml

<?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">
<mapper namespace="com.manong.dao.ChartsMapper">


    <select id="getTotalPriceByYear" resultType="java.util.Map">
        select year(createdate) as year ,sum(payPrice) as money from t_checkin group by year(createdate)
    </select>

    <select id="getMonthTotalPriceByYear" resultType="java.lang.Double">
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'01')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'02')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'03')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'04')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'05')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'06')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'07')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'08')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'09')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'10')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'11')
        union all
        select sum(payprice) from t_checkin where date_format(createdate,'%Y%m') = concat(#{year},'12')
    </select>

</mapper>

2.业务层 ChartsService.java

package com.manong.service;

import java.util.List;
import java.util.Map;

public interface ChartsService {
    /**
     * 查询每个年度总营业额
     * @return
     */
    List<Map> getTotalPriceByYear();

    /**
     * 统计月营业额报表
     * @param year
     * @return
     */
    List<Double> getMonthTotalPriceByYear(String year);
}

ChartsServiceImpl.java

package com.manong.service.impl;

import com.manong.dao.ChartsMapper;
import com.manong.service.ChartsService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.List;
import java.util.Map;


@Service
@Transactional
public class ChartsServiceImpl implements ChartsService {

    @Resource
    private ChartsMapper chartsMapper;

    public List<Map> getTotalPriceByYear() {
        return chartsMapper.getTotalPriceByYear();
    }

    public List<Double> getMonthTotalPriceByYear(String year) {
        return chartsMapper.getMonthTotalPriceByYear(year);
    }
}

3.控制层 ChartsController.java

package com.manong.controller;

import com.alibaba.fastjson.JSON;
import com.manong.service.ChartsService;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/admin/charts")
public class ChartsController {

    @Resource
    private ChartsService chartsService;

    @RequestMapping("/getYearTotalPrice")
    public String getYearTotalPrice(){
        Map<String,Object> map = new HashMap<String,Object>();
        //调用统计每年总营业额的方法
        List<Map> mapList = chartsService.getTotalPriceByYear();
        //创建两个List集合，分别保存年份及对应的营业额
        List<String> keyList = new ArrayList<String>();//年份
        List<Double> valueList = new ArrayList<Double>();//营业额
        //循环遍历mapList集合
        for (Map m : mapList) {
            keyList.add(m.get("year").toString());//年份
            valueList.add(Double.valueOf(m.get("money").toString()));
        }
        map.put("keyList",keyList);
        map.put("valueList",valueList);

        return JSON.toJSONString(map);
    }


    /**
     * 月营业报表
     * @param year
     * @return
     */
    @RequestMapping("/getMonthTotalPrice")
    public String getMonthTotalPrice(String year){
        //调用统计月营业额报表的方法
        List<Double> list = chartsService.getMonthTotalPriceByYear(year);
        //循环判断月份中的数据是否为null
        for (int i = 0; i < list.size(); i++) {
            //如果数据为null，则将null用0代替
            if(list.get(i)==null){
                list.set(i,0D);
            }
        }
        return JSON.toJSONString(list);
    }

}

小结

好了，截止到目前视频的内容已经学习完毕了，经过21天的学习，我对这个项目有了更深的认识，以前模棱两可的印象在这里得到了更深的理解，和我之前学习的SSM项目进行对比，不得不说有些插件真的很好用 在项目刚开始的时候由于以前的知识都忘记的差不多了，所以在搭载后台环境的时候卡了好久，各种bug各种百度，有时候一个小小的错误就能让我卡一整天，然后第二天再继续，好在功夫不负有心人，随着知识的加载，遇到的bug都能解决了，更幸运的是我遇到了和我一起写项目的可爱的小姐姐，一起商量bug更有动力，所以也非常感谢小姐姐啦~ 之后应该还会再更新几篇，我想试试完善一下这个项目，还有几个页面没有写。 还有几天就过年啦，提前祝我自己和看到这篇博客的小伙伴新年快乐呀~

最终源码： gitcode.net/qq_41722217…

avatar
文章
阅读
粉丝