结算单报表模块项目复盘,随手记录

结算单报表

页面需要进行列表操作,需要selectForList操作,返回list集合,但是泛型中没有现有domain对象进行封装,怎么办?
    
做统计计算,没有现有的domain
    
方案一:自定义类,封装上面的数据,有几个需要字段就封装几个 class Report{
    groupType count totalAmount payAmount
        discountAmount
}
    
方案二: 使用map集合
    hashmap
    map.put("groupType",xx)
    ....
    map.put("discountAmount",xx)

public interface ConsumptionReportMapper {
    //使用Map集合来容纳key,value
    List<Map<String,Object>> selectForList(ConsumptionReportQueryObject qo);}

返回类型区别

resultType
resultMap  :一些没有办法处理的列,映射到类型中  

Echars

listBar 准备好表格视图
    x轴 --->groupType [....]
    总消费金额--分组维度 为 门店分组查询出来所有总消费金额列
    总优惠金额 ====总优惠金额列
    总实收金额 ====总实收金额列
    订单数   ======所有订单数列

$ 和 # 区别

如果sql语句中取值使用 # ,那么mapper方法多参数使用@Param表示,mybatis将所有数据封装成map集合
    如果是单个参数,mybatis将所有数据封装成map集合,明确将传入参数作为 占位符的参数
    
如果sql语句中取值使用 $ ,那么mapper方法多参数使用@Param表示,mybatis将所有数据封装成map集合
    如果是单个参数,mybatis将所有数据封装成map集合,mybatis会将这个数据当成一个对象看待,那么需要贴上注解 @Param("...") 将数据转换map对象再使用

mapper

<?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="cn.k.mapper.ConsumptionReportMapper">
    <select id="selectForList" resultType="java.util.Map">
        SELECT ${groupTypeDisplay}    as groupType,
               count(c.id)            as count,
               sum(c.total_amount)    as totalAmount,
               sum(c.pay_amount)      as payAmount,
               sum(c.discount_amount) as discountAmount
        from consumption c
                     LEFT JOIN business b on c.business_id = b.id

        <where>
            c.status = 2
            <if test="businessId >= 0">
                and c.business_id =#{businessId}
            </if>
            <if test="beginDate != null">
                and c.pay_time >=#{beginDate}
            </if>
            <if test="endDate != null">
                and c.pay_time &lt;=#{endDate}
            </if>
        </where>
        group by ${groupTypeDisplay}
    </select>
</mapper>

使用${其中的属性关联到自定义qo 类}

@Setter
@Getter
public class ConsumptionReportQueryObject extends QueryObject {
    public int groupTypeId = 1;

    public String getGroupTypeDisplay() {
        if (groupTypeId == 1) {
            return "b.name";  //门店
        } else if (groupTypeId == 2) {
            return "YEAR(c.pay_time)";  //年
        } else if (groupTypeId == 3) {
            return "DATE_FORMAT(c.pay_time,'%Y-%m')";  //月
        } else if (groupTypeId==4){
            return "DATE_FORMAT(c.pay_time,'%Y-%m-%d')"; //日
        }else {
            return "不符合要求";
        }
    }
    public int businessId = -1;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    public Date beginDate;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    public Date endDate;
}

通过数字来控制页面分组类型查询与回显

 <div class="form-group">
     <label for="status">分组类型:</label>
        <select class="form-control"name="groupTypeId"                   id="groupTypeId">
         <option value="1">门店</option>
         <option value="2">年</option>
         <option value="3">月</option>
         <option value="4">日</option>
        </select>
 <script>                                 $('#groupTypeId').val(${qo.groupTypeId!})
         </script>
       </div>

图形化报表

echars

ECharts可视化图表插件,使用Echarts生成报表柱状图

使用流程看案例可知

1. 首先需要引入插件js
2. 准备一个div,装表格的容器
3. 使用 echarts.init 方法初始化实例
4. setOption 方法生成一个简单的柱状图
5. myChart.setOption(option)设置

数据动态化

@Controller
@RequestMapping("/consumptionReport")
@Transactional
public class ConsumptionReportController {

    @Autowired
    private IConsumptionReportService consumptionReportService;

    @Autowired
    private IBusinessService businessService;

    @RequestMapping("/list")
    public String list(Model model, @ModelAttribute("qo") ConsumptionReportQueryObject qo) {
        PageInfo<Map<String, Object>> pageInfo = consumptionReportService.query(qo);
        model.addAttribute("pageInfo", pageInfo);

        //查询门店
        List<Business> businesses = businessService.selectAll();
        model.addAttribute("businesses", businesses);
        return "/consumptionReport/list";
    }


    @RequestMapping("/listCharts")
    public String listCharts(Model model, @ModelAttribute("qo") ConsumptionReportQueryObject qo) {

        qo.setPageSize(Integer.MAX_VALUE);  //设置每页可以容纳20多亿条数据
        PageInfo<Map<String, Object>> mapList = consumptionReportService.query(qo);
        //x轴--->groupType
        ArrayList<Object> groupTypeList = new ArrayList<>();
        //总消费
        ArrayList<Object> totalAmountList = new ArrayList<>();
        //总实收
        ArrayList<Object> payAmountList = new ArrayList<>();
        //总优惠
        ArrayList<Object> discountAmountList = new ArrayList<>();
        //订单数量
        ArrayList<Object> countList = new ArrayList<>();
        //遍历
        for (Map<String, Object> map : mapList.getList()) {
            groupTypeList.add(map.get("groupType"));
            totalAmountList.add(map.get("totalAmount"));
            payAmountList.add(map.get("payAmount"));
            discountAmountList.add(map.get("discountAmount"));
            countList.add(map.get("count"));
        }

        //装进model
        //数据转成JSON格式,chars图表中的数据JSON格式放进去比较合适
        model.addAttribute("groupType", JSON.toJSONString(groupTypeList));
        model.addAttribute("totalAmount", JSON.toJSONString(totalAmountList));
        model.addAttribute("payAmount", JSON.toJSONString(payAmountList));
        model.addAttribute("discountAmount", JSON.toJSONString(discountAmountList));
        model.addAttribute("count", JSON.toJSONString(countList));

        return "/consumptionReport/listCharts";
    }
}

看echarts的格式是JSON格式,所以在封装数据的时候,将对象转为JSON格式

使用模态框调到表格

• 清空模态框缓存(自己喜欢)

$('#chartModal').removeData('bs.modal');

• 使用remote :告诉模态框报表的url是哪, serialize():带上表单的数据

$('#chartModal').modal({ 
    remote : url + "?" + $("#searchForm").serialize() //加上高级查询的条件
})

为JSON格式

使用模态框调到表格

• 清空模态框缓存(自己喜欢)

$('#chartModal').removeData('bs.modal');

• 使用remote :告诉模态框报表的url是哪, serialize():带上表单的数据

$('#chartModal').modal({ 
    remote : url + "?" + $("#searchForm").serialize() //加上高级查询的条件
})