第二项目AIaisell(易销宝)
一.什么是报表
向上级报告情况的表格。简单的说:报表就是用表格、图表等格式来动态显示数据,可以用公式表示为:“报表 = 多样的格式 + 动态的数据”
- 表格:详细数据
- 图表: 直观
二.表格数据展示
2.1 准备了一 vo
报表中需的数据(准备的类)
public class PurchasebillitemVO {//编号 private Long id; //供应商 private String supplierName; //采购员 private String buyerName; //产品 private String productName; //产品类型 private String productTypeName; //日期 private Date vdate; //数量 private BigDecimal num; //单价 private BigDecimal price; //小计 private BigDecimal amount; //状态 private Integer status; //分组字段 private String groupField; public PurchasebillitemVO() {} //创建时设置值 public PurchasebillitemVO(Purchasebillitem item,Integer groupBy) { this.id = item.getId(); this.supplierName = item.getBill().getSupplier().getName(); this.buyerName = item.getBill().getBuyer().getUsername(); this.productName = item.getProduct().getName(); this.productTypeName = item.getProduct().getTypes().getName(); this.vdate = item.getBill().getVdate(); this.num = item.getNum(); this.price = item.getPrice(); this.amount = item.getAmount(); this.status = item.getBill().getStatus(); //确定分组字段 switch (groupBy){ case 1:{ this.groupField = this.buyerName; break; } case 2:{ this.groupField = (DateUtils.toCalendar(this.vdate).get(Calendar.MONTH)+1) +"月份"; break; } default: this.groupField =this.supplierName; } } ... }
2.2 前端展示
easyui的一个扩展控制:groupview
2.2.1 引入相应的js支持
<script src="/easyui/plugins/datagrid-groupview.js"></script>
2.2.2 高级查询字段
<div id="tb" style="padding:5px;height:auto"> <!-- 这里就是一个日历 --> <div id="cc" class="easyui-calendar"></div> <form id="searchForm" method="post" action=""> 采购时间: <input name="beginDate" class="easyui-datebox" data-options="sharedCalendar:'#cc'" style="width:120px"> - <input name="endDate" class="easyui-datebox" data-options="sharedCalendar:'#cc'" style="width:120px"> 状态:<select class="easyui-combobox" panelHeight="auto" name="status" style="width: 100px"> <option value="">--请选择--</option> <option value="0">未审</option> <option value="1">已审</option> <option value="-1">作废</option> </select> <!-- 分组的条件 --> <select class="easyui-combobox" panelHeight="auto" name="groupBy" style="width: 100px"> <option value="0">供应商</option> <option value="1">采购员</option> <option value="2">月份</option> </select> <a href="javascript:;" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a> <a href="javascript:;" data-method="show3d" class="easyui-linkbutton" iconCls="icon-search">3D</a> <a href="javascript:;" data-method="show2d" class="easyui-linkbutton" iconCls="icon-search">2D</a> </form> </div> <table id="itemsGrid"></table>
2.2.3 案例进行修改
//创建分组grid
itemsGrid.datagrid({//title:'',// width:500,// height:250, fit:true, rownumbers:true, remoteSort:false, nowrap:false, fitColumns:true, //url:'datagrid_data.json', toolbar:"#tb", url:'/purchasebillitem/findItems', columns:[[ {field:'id',title:'编号',width:100,sortable:true}, {field:'supplierName',title:'供应商',width:100,sortable:true}, {field:'buyerName',title:'采购员',width:100,sortable:true}, {field:'productName',title:'产品',width:100,sortable:true}, {field:'productTypeName',title:'产品类型',width:100,sortable:true}, {field:'vdate',title:'采购日期',width:100,sortable:true}, {field:'num',title:'数量',width:100,sortable:true}, {field:'price',title:'价格',width:100,sortable:true}, {field:'amount',title:'小计',width:100,sortable:true}, {field:'status',title:'状态',width:100,sortable:true,formatter:statusFormat} ]], groupField:'groupField', //指示要被分组的字段 view: groupview, groupFormatter:function(value, rows){ //组格式化 let num = 0,amount = 0; for(let r of rows){ num += r.num; amount += r.amount; } return value + ' - ' + rows.length + '条数据 <span >共'+num+'条数据</span> <span >总金额:'+amount +"</span>"; } });
三.图表展示
- 两种技术:flash(actionscript),h5(画布)
- flash缺点:不安全,容易崩溃
- IE的话只能是flash的方式
- 两个框架:highchart(收费,支持IE),echart(百度,开源免费)
3.1 前端使用
3.1.1 引入相应的js
<!-- 引入highcharts的js支持 -->
<script src="/js/plugin/highcharts/code/highcharts.js"></script> <script src="/js/plugin/highcharts/code/highcharts-3d.js"></script> <script src="/js/plugin/highcharts/code/modules/exporting.js"></script> <script src="/js/plugin/highcharts/code/modules/export-data.js"></script>
3.1.2 弹出div进行展示
- 准备弹出来的
<!-- 一个弹出框,里面要装一个form表单 -->
<div id="chartDialog" class="easyui-dialog" title="图表展示" data-options="height:400,width:600,closed:true,modal:true"> <div id="container" style="height: 320px"></div> </div>
- 点击3D按钮弹出图表
show3d(){chartDialog.dialog("center").dialog("open");//拿到表单中的所有数据var params = searchForm.serializeObject(); //通过Ajax到后台拿到相应的值[{name:xxx,y:10},] $.post("/purchasebillitem/findCharts",params,function (data) { //注意这里有一个异步问题 var chart = Highcharts.chart('container', { chart: { type: 'pie', //饼图 options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: '我是一个头' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, format: '{point.name}' } } }, series: [{ type: 'pie', name: '浏览器有', data: data }] }); }) }
3.2 后台获取参数
1.修改query中的方法
// where o.bill.status = ? and o.xxx =? ...
//接收参数的变量
private List params = new ArrayList(); //准备一个方法,返回JPQL的查询条件 public String createWhereJPQL(){ StringBuilder jpql = new StringBuilder(); //开始时间 if(beginDate!=null){ jpql.append(" and o.bill.vdate >= ? "); params.add(beginDate); } //结束时间 if(endDate!=null){ jpql.append(" and o.bill.vdate < ? "); params.add(DateUtils.addDays(endDate, 1)); } //状态 if(status!=null){ jpql.append(" and o.bill.status = ? "); params.add(status); } //第一个条件必需是where开头 return jpql.toString().replaceFirst("and", "where"); } //创建分组的JPQL public String createGroupBy(){ String groupStr = "o.bill.supplier.name"; switch (groupBy){ case 1:{ groupStr="o.bill.buyer.username"; break; } case 2:{ groupStr="MONTH(o.bill.vdate)"; break; } } return groupStr; }
2.PurchasebillitemServiceImpl
/*** 查询图表需要的数据* @param query*/
@Override
public List<Map> findCharts(PurchasebillitemQuery query){ List<Map> mapList = new ArrayList<>(); //拿到条件JPQL String whereJPQL = query.createWhereJPQL(); //拿到条件对应的参数 List params = query.getParams(); //准备分组的条件 String groupBy = query.createGroupBy(); //根据供应商分组拿到的数据 String jpql = "select "+groupBy+",sum(o.amount) from Purchasebillitem o "+whereJPQL+" group by "+groupBy; List<Object[]> list = findByJpql(jpql,params.toArray()); //需要把一个List<Object[]> -> List<Map> for (Object[] objects : list) { Map map = new HashMap(); map.put("name", objects[0]); map.put("y", objects[1]); mapList.add(map); } return mapList; }
转载于:https://www.cnblogs.com/yinshunxin/p/10623116.html
第二项目AIaisell(易销宝)相关推荐
- Android WebView使用及苏宁易付宝支付相关问题
最近项目中应用到苏宁易付宝支付方式 项目中遇到了一些问题总结如下: 易付宝使用处理的逻辑代码: public class YiFuBaoWebView extends BaseActivity im ...
- 金融项目学习——尚融宝
尚融宝 欢迎关注公众号 一.项目简介 尚融宝是一个网络借贷信息中介服务平台,为个人投资者.个人融资用户和小微企业提供专业的线上信贷及出借撮合服务. 行业案例:人人贷 https://www.renre ...
- 基于ssm开发的易付宝理财系统
本系统是基于ssm架构(Spring+SpringMVC+MyBatis)开发的易付宝理财中心网站系统,系统以Java作为编程语言,采用Mysql数据库作为后台数据库. 研究的主要内容 (1)用户模块 ...
- Java Web 网络商城案例演示十六 订单详情功能(支付功能的实现使用易付宝)
sValue.append(p3_Amt); // 交易币种 sValue.append(p4_Cur); // 商品名称 sValue.append(p5_Pid); // 商品种类 sValue. ...
- 易拉宝设计尺寸介绍和易拉宝标题、正文字体大小等设计规范
内容提要:本文是易拉宝设计初级教程,主要讲解了易拉宝设计和尺寸大小,以及设计的时候需要注意标题.正文字体大小等规范.对PS感兴趣的朋友可加ps学习交流群:142574315(www.itblw.com ...
- 微服务项目:尚融宝(1)(项目介绍)
从今天开始做一个全栈项目,巩固学完的springcloud,复习之前学过的ssm mp redis MQ等知识点,拿下我的第二个项目 .技术栈中未掌握部署,计划到项目后期部署的时候,再自学一波 放弃幻 ...
- 【金融项目】尚融宝项目(一)
1.尚融宝项目简介 1.1.前言 尚融宝项目是一个网络借贷信息中介服务平台,为个人投资者.个人融资用户和小微企业提供专业的线上信贷及出借撮合服务. 行业案例:人人贷 https://www.renre ...
- 机器人x展架制作_易拉宝展架设计制作常规尺寸材质有哪些?
苏州百傲广告传媒有限公司可以经营易拉宝展架制作设计,设计制作易拉宝的常规尺寸材质有哪些?下面给大家介绍一下关于X展架.易拉宝的材料材质以及优点好处. x展架用途和易拉宝相同,是公共场所.活动或商家店铺 ...
- 机器人x展架制作_门型展架80*180易拉宝x展架海报架广告架立牌展示架地推海报2元优惠券券后价20元...
★门型展架80*180易拉宝x展架海报架广告架立牌展示架地推海报,2元拼多多优惠券★券后价20元★★★门型展架80*180易拉宝x展架海报架广告架立牌展示架地推海报¥20元¥22元已拼5299件点击抢 ...
最新文章
- 手把手教你用线性回归预测二手房房价
- 最小生成树之克鲁斯卡尔(Kruskal)算法
- PHP 知识点笔记-常用数据类型
- 【bzoj2226】[Spoj 5971] LCMSum 欧拉函数
- 数据结构—树与二叉树
- Flash网站流量统计的方法
- 前端学习(2522):添加博客的样式
- IOS UIViewController API,生命周期详解
- (转)淘淘商城系列——实现添加商品功能
- 小组互评Alpha版本
- [AlwaysOn Availability Groups]健康模型 Part 1——概述
- Linux中如何查找占用硬盘体积最大的文件方法
- java 信鸽推送demo_iOS中关于信鸽推送的使用demo详解
- centos7系统时间校对(和北京时间同步)
- HTML学生作业网页:使用HTML+CSS技术实现传统文化网页设计题材-西安事变历史纪念馆 10页 带视频 带音乐
- 阿里天池:Airbnb短租房数据集分析
- 【Java工程中出现问题】XXX has been compiled by a more recent version of the Java Runtime
- vscode造成c盘空间占用剧增
- 无事街上走,提壶去打酒,逢店加一倍,遇花喝一斗,编程题。
- Handlebars 小技巧
热门文章
- 坚果3“凉了”,罗永浩只提了一次人工智能
- 资源 | 2018年14个顶级AI和机器学习会议名录
- 漫画 | 如果程序员的妈是产品经理,她会如何逼你结婚?
- 感受 lambda 之美!
- 为什么阿里巴巴禁止使用BigDecimal的equals方法做等值比较?
- 不想CRUD干到老,就来看看这篇OOM排查的实战案例!
- 面试官问:高并发下,你都怎么选择最优的线程数?
- Tomcat 爆出高危漏洞!
- 3 年经验的 Java 后端妹子,横扫阿里、滴滴、美团,整理出这份厚厚的 8000 字面经!...
- 结营答辩!28天!Datawhale助力公益AI一起学,点亮最暖寒假!