AISELL表格数据和图形数据的展示

最新推荐文章于 2024-08-17 16:21:17 发布

KrisSanji

最新推荐文章于 2024-08-17 16:21:17 发布

阅读量450

点赞数

本文链接：https://blog.csdn.net/BapeSanji/article/details/102616787

版权

准备PurchaseBillItemVo类

public class PurchasebillitemVo {
    //前台显示行的编号
    private Long id;
    //供应商
    private String supplier;
    //采购员名称
    private String buyer;
    //产品名称
    private String product;
    //产品分类名称
    private String productType;
    //交易时间
    private Date vdate;
    //采购数量
    private BigDecimal num;
    //采购价格
    private BigDecimal price;
    //小计  价格*数量
    private BigDecimal amount;
    //状态
    private Integer status;
    //分组字段
    private String groupField="";

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getSupplier() {
        return supplier;
    }

    public void setSupplier(String supplier) {
        this.supplier = supplier;
    }

    public String getBuyer() {
        return buyer;
    }

    public void setBuyer(String buyer) {
        this.buyer = buyer;
    }

    public String getProduct() {
        return product;
    }

    public void setProduct(String product) {
        this.product = product;
    }

    public String getProductType() {
        return productType;
    }

    public void setProductType(String productType) {
        this.productType = productType;
    }

    public Date getVdate() {
        return vdate;
    }

    public void setVdate(Date vdate) {
        this.vdate = vdate;
    }

    public BigDecimal getNum() {
        return num;
    }

    public void setNum(BigDecimal num) {
        this.num = num;
    }

    public BigDecimal getPrice() {
        return price;
    }

    public void setPrice(BigDecimal price) {
        this.price = price;
    }

    public BigDecimal getAmount() {
        return amount;
    }

    public void setAmount(BigDecimal amount) {
        this.amount = amount;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getGroupField() {
        return groupField;
    }

    public void setGroupField(String groupField) {
        this.groupField = groupField;
    }

    //提供一个无参构造方法
    public PurchasebillitemVo(){

    }

提供一个有参的构造方法给PurchasebillitemVo这个字段赋值

//提供一个有参构造方法
    public PurchasebillitemVo(Purchasebillitem purchasebillitem,String groupBy){
        //采购明细id
        this.id=purchasebillitem.getId();
        //小计
        this.amount=purchasebillitem.getAmount();
        this.buyer=purchasebillitem.getBill().getBuyer().getUsername();
        this.num=purchasebillitem.getNum();
        this.price=purchasebillitem.getPrice();
        this.status=purchasebillitem.getBill().getStatus();
        this.supplier=purchasebillitem.getBill().getSupplier().getName();
        this.product=purchasebillitem.getProduct().getName();
        this.productType=purchasebillitem.getProduct().getTypes().getName();
        this.vdate=purchasebillitem.getBill().getVdate();

        this.groupField=this.supplier;

        //如果查找采购员的字段与分组字段相等
        if(("o.bill.buyer.username").equals(groupBy)){
            //那就按采购员分组
            this.groupField=this.buyer;
        //如果查找月份字段与分组字段相等
        }else if(("MONTH(o.bill.vdate)").equals(groupBy)){
            int month=DateUtils.toCalendar(vdate).get((Calendar.MONTH)+1);
            this.groupField=month+"月";
        }

写了方法 findItems先查询出purchsebillitem 在构造出 PurchasebillitemVo对象

 //采购订单的数据报表
    List<PurchasebillitemVo> findItems(PurchasebillitemQuery purchasebillitemQuery);

实现这个方法

 @Override
    public List<PurchasebillitemVo> findItems(PurchasebillitemQuery purchasebillitemQuery) {
        //创建一个集合来添加采购明细数据
        List<PurchasebillitemVo> itemVos=new ArrayList<>();
        //调用查询不分页方法查询所有采购明细数据
        List<Purchasebillitem> items = purchasebillitemRepository.findByQuery(purchasebillitemQuery);
        //循环所有采购明细数据
        for (Purchasebillitem purchasebillitem:items) {
            PurchasebillitemVo purchasebillitemVo = new PurchasebillitemVo(purchasebillitem, purchasebillitemQuery.getGroupBy());
            itemVos.add(purchasebillitemVo);
        }
        return itemVos;
    }

在Controller层调用返回给前台表格数据

 @RequestMapping("/findItems")
    @ResponseBody
    public Map findItems(PurchasebillitemQuery purchasebillitemQuery){
        Map map=new HashMap();
        //查询出所有的数据明细
        List<PurchasebillitemVo> items = purchasebillitemService.findItems(purchasebillitemQuery);
        //total=总个数
        map.put("total",items.size());
        //rows=值
        map.put("rows",items);
        //返回前台数据
        return map;
    }

根据什么分组

 //如果查找采购员的字段与分组字段相等
        if(("o.bill.buyer.username").equals(groupBy)){
            //那就按采购员分组
            this.groupField=this.buyer;
        //如果查找月份字段与分组字段相等
        }else if(("MONTH(o.bill.vdate)").equals(groupBy)){
            int month=DateUtils.toCalendar(vdate).get((Calendar.MONTH)+1);
            this.groupField=month+"月";
        }

饼状图JPQL的拼接

 //组装sql的方法 where bill.vdate >= 1111  and bill.vdate< 111 and bill.status = 1
    public String getWhereSql(){
        StringBuffer whereSql = new StringBuffer();
        if(this.beginDate != null && !"".equals(this.beginDate)){
            whereSql.append("and").append(" o.bill.vdate >=?");
            params.add(this.beginDate);
        }
        if(this.endDate != null && !"".equals(this.endDate)){

            Date tempDate=null;
            if(this.getEndDate() != null){
                tempDate = DateUtils.addDays(this.getEndDate(), 1);
            }
            whereSql.append("and").append(" o.bill.vdate < ?");
            params.add(tempDate);
        }

        if(this.status != null && !"".equals(this.status)){

            whereSql.append("and").append(" o.bill.status = ?");
            params.add(this.status);
        }

        return whereSql.toString().replaceFirst("and", "where");
    }

接口方法饼状图

 //图形报表数据
    public List<Object[]> findCharts(PurchasebillitemQuery purchasebillitemQuery );

实现饼状图方法，拼接SQL

//图形报表查询 --jpql 查询
    public List<Object[]> findCharts(PurchasebillitemQuery purchasebillitemQuery ){
        //拼接jpql的语句  where group
        String jpql = "select "+purchasebillitemQuery.getGroupBy()+",sum(o.bill.totalAmount) from Purchasebillitem o " + purchasebillitemQuery.getWhereSql()+
                " group by "+purchasebillitemQuery.getGroupBy();

        System.out.println("jpql---------:"+jpql);
        List<Object[]> result = purchasebillitemRepository.findByJpql(jpql, purchasebillitemQuery.getParams().toArray());
        return result;
    }

Controller返回饼状图数据

//查询数据
    //jpql select p.supplier,sum(amount) from purchasebillitem p group by p.supplier
    // [{ name:'成都供应商',y:8000},{name:'东莞供应商',90000}....] --安装供应商分组 算出总金额
    @RequestMapping("/findCharts")
    @ResponseBody
    public List<Map> findCharts(PurchasebillitemQuery purchasebillitemQuery){
        //查询数据[{cd供应商,11}，{dw，22}]
        List<Object[]> result =  purchasebillitemService.findCharts(purchasebillitemQuery);
        List<Map> mpList = new ArrayList<>();
        for (Object[] o : result) {
            Map mp = new HashMap();
            mp.put("name",o[0]);
            mp.put("y",o[1]);
            mpList.add(mp);
        }

        return mpList;

    }

数据表格报表 – easyui-datagrid-groupview
做图形报表的框架，echarts highcharts只需要传递数据
准备一个purchasebillitem.jsp

<head>
    <title>Title</title>
    <%@include file="/WEB-INF/views/head.jsp" %>
<!-- 引入datagrid-view的支持 -->
    <script type="text/javascript" src="/easyui/plugins/datagrid-groupview.js"></script>
    <script type="text/javascript" src="/js/model/purchaseBillItem.js"></script>

</head>

<table id="purchaseBillItemGrid"></table>

准备js写前台逻辑

var purchaseBillItemGrid = $("#purchaseBillItemGrid");
…
purchaseBillItemGrid.datagrid({
    nowrap:false,
    fitColumns:true,
    fit:true,
    fixed:true,
    fitColumns:true,
    toolbar:'#tb',
    url:'/purchaseBillItem/findItems',
    columns:[[
        {field:'id',title:'编号',width:100},
        {field:'supplier',title:'供应商',width:100},
        {field:'buyer',title:'采购员',width:100},
        {field:'product',title:'产品',width:100},
        {field:'productType',title:'产品类型',width:100},
        {field:'vdate',title:'日期',width:100},
        {field:'num',title:'数量',width:100},
        {field:'price',title:'单价',width:100},
        {field:'amount',title:'小计',width:100},
        {field:'status',title:'状态',width:100,formatter: function (action) {
                var data = {
                    0:"<div style='color:red;'>待审</div>",
                    1:"<div style='color: green'>已审</div>",
                    "-1":"<div><s>作废</s></div>"
                };
                return data[action];
            }}
    ]],
    groupField:'groupField',
    view: groupview,
    groupFormatter:function(value, rows){
        var totalNum = 0;
        var totalAmount = 0;
        for(var i=0;i<rows.length;i++){
            totalNum += rows[i].num;
            totalAmount += rows[i].amount;
        }
        return value + ' - ' + rows.length + ' 条数据' +"  <span style='color:green;'>共"+totalNum+"件商品</span>" +"<span style='color:#5d2f80;'>总金额:"+totalAmount+"</span>";
    }
});