版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31653405/article/details/82984170
一、前端页面代码
（1）、HTML
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
<table class="layui-table" id="sortable" style="-webkit-text-size-adjust:none; font-size:10px;">
<thead>
<tr>
<th class="sort-alpha" th:text="#{usermoneydetail.userId}"></th>
<th class="sort-numeric" th:text="#{usermoneydetail.userName}"> </th>
<th class="sort-numeric" th:text="#{usermoneydetail.userState}"></th>
<th class="sort-numeric" th:text="#{usermoneydetail.userMoney}"> </th>
<th class="sort-numeric" th:text="#{usermoneydetail.detailType}"> </th>
<th class="sort-numeric" th:text="#{usermoneydetail.createTime}"> </th>
</tr>
</thead>
<tbody>
<tr th:each="list : ${list}">
<td><span th:text="${list.userId}"></span></td>
<td><span th:text="${list.userName}"></span></td>
<td>
<span th:if="${list.userState=='0'}" th:text="#{usermoneydetail.userZeroStar} "> </span>
<span th:if="${list.userState=='1'}" th:text="#{usermoneydetail.userOneStar}"></span>
<span th:if="${list.userState=='2'}" th:text="#{usermoneydetail.userTwoStar}"></span>
<span th:if="${list.userState=='4'}" th:text="#{usermoneydetail.userFourStar}"></span>
<span th:if="${list.userState=='5'}" th:text="#{usermoneydetail.userFiveStar}"></span>
- (<span th:text="${list.userState}"></span>)
</td>
<td><span th:text="${list.userDetailMoney}"></span></td>
<td>
<span th:if="${list.detailTypes=='1'}" th:text="#{usermoneydetail.reflect}"></span>
<span th:if="${list.detailTypes=='2'}" th:text="#{usermoneydetail.consumpte}"></span>
<span th:if="${list.detailTypes=='3'}" th:text="#{usermoneydetail.levelaward}"></span>
<span th:if="${list.detailTypes=='4'}" th:text="#{usermoneydetail.sharebonusaward}"></span>
<span th:if="${list.detailTypes=='5'}" th:text="#{usermoneydetail.rerememberaward}"></span>
<span th:if="${list.detailTypes=='6'}" th:text="#{usermoneydetail.welfareaward}"></span>
</td>
<td><span th:text="${#dates.format(list.createTime, 'yyyy-MM-dd hh:mm:ss')}"></span></td>
</tr>
</tbody>
</table>
<div class="basic">
<!-- 饼图 -->
<div id='main3' style='width:50%;height:450px;float: left;margin-left:10px;'></div>
<!-- 条形图 -->
<div id='main2' style='width:45%;height:450px;float:right;margin-right:0px;'></div>
</div>（2）、 JS
/**查询按钮**/
function searchUserMoneyDetail(){
var userName = $("#userName").val();
$.ajax({
url : '/systemUserMoneyDetail/linkUserMoneyDetail',
type : 'get',
dataType : 'json',
async: false,
data : {'userName':userName},
success : function(data){
}
});
}
二、后台Spring接收代码
/***
* 资金明细 - 所有用户 资金信息记录 -- 用户根据条件选定时
* @return
* @throws Exception
*/
@ResponseBody
@RequestMapping(value = "/linkUserMoneyDetail",method = RequestMethod.GET)
public Map<String, Object> productListSort(HttpSession session,HttpServletRequest request,HttpServletResponse response) throws Exception{
Map<String, Object> map = new HashMap<String, Object>();
String userName = request.getParameter("userName");
String userState = request.getParameter("userState");
String detailType = request.getParameter("detailType");
String startTime = request.getParameter("startTime");
String endTime = request.getParameter("endTime");
//根据条件，查询匹配条件的用户资金明细记录
List<DrpSystemUserMoneyDetail> MoneyList = userMoneyDetailService.linkUserMoneyDetail( userName, userState, detailType, startTime, endTime);
//根据条件，进行统计匹配条件中满足条件下的结果总数
List<BigDecimal> bgSumMoneyBar = userMoneyDetailService.getSumMoneyBar( userName, userState, detailType, startTime, endTime );
map.put("MoneyList", MoneyList);
map.put("bgSumMoneyBar", bgSumMoneyBar);
return map;
} /***
* 根据匹配条件，查询匹配的用户资金明细记录信息
* @throws ParseException
*/
@Override
public List<DrpSystemUserMoneyDetail> linkUserMoneyDetail(String userName,String userState, String detailType, String startTime,String endTime) throws ParseException {
String sql = " From DrpSystemUserMoneyDetail WHERE 1 = 1 ";//原始sql语句
//List<Predicate> predicates = new ArrayList<Predicate>();
//CriteriaBuilder cb = entityManager.getCriteriaBuilder();
//CriteriaQuery<DrpSystemUserMoneyDetail> query = cb.createQuery(DrpSystemUserMoneyDetail.class);
//Root<DrpSystemUserMoneyDetail> root = query.from(DrpSystemUserMoneyDetail.class);
//where
//Predicate Predicate1 = null;
//用户名称
if ( !userName.isEmpty() && userName != null && userName != "" ) {
//Predicate Predicate2 = null;
sql += " AND user_name LIKE '%" + userName + "%'";
/*Predicate2 = cb.equal(root.get("userName"), userName);
if (Predicate2 != null) {
Predicate1 = cb.and(Predicate1, Predicate2);
} else {
Predicate1 = Predicate2;
}
predicates.add(Predicate1);
query.where(predicates.toArray(new Predicate[predicates.size()]));*/
}
//用户星级级别
if ( !userState.isEmpty() && userState != null && userState != "") {
//Predicate Predicate2 = null;
sql += " AND user_state = '" + userState + "'";
/**Predicate2 = cb.equal( root.get("userState"), userState);
if (Predicate2 != null) {
Predicate1 = cb.and(Predicate1, Predicate2);
} else {
Predicate1 = Predicate2;
}
predicates.add(Predicate1);
query.where(predicates.toArray(new Predicate[predicates.size()]));*/
}
//用户流水明细
if ( !detailType.isEmpty() && detailType != null && detailType != "" ) {
//Predicate Predicate2 = null;
sql += " AND detail_types = '" + detailType +"'";
/**Predicate2 = cb.equal( root.get("detailType"), detailType);
if (Predicate2 != null) {
Predicate1 = cb.and(Predicate1, Predicate2);
} else {
Predicate1 = Predicate2;
}
predicates.add(Predicate1);
query.where(predicates.toArray(new Predicate[predicates.size()]));*/
}
//创建时间
if ( (startTime != null && !"".equals(startTime))&&(endTime != null && !"".equals(endTime)) ) {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
//Date dateStartTime = sdf.parse( startTime );
//Date dateEndTime = sdf.parse( endTime );
//Predicate Predicate2 = null;
sql += " AND create_time BETWEEN '" + startTime + "' AND '" + endTime + "' ";
/**Predicate2 = cb.equal( root.get("createTime"), dateCreateTime);
if (Predicate2 != null) {
Predicate1 = cb.and(Predicate1, Predicate2);
} else {
Predicate1 = Predicate2;
}
predicates.add(Predicate1);
query.where(predicates.toArray(new Predicate[predicates.size()]));*/
}
//根据时间进行排序
sql += " ORDER BY create_time DESC";
System.out.println(sql);
@SuppressWarnings("unchecked")
List<DrpSystemUserMoneyDetail> moneyDetailList = entityManager.createQuery(sql).getResultList();
return moneyDetailList;
}三、前端页面回调代码
//时间日期格式化
function formatDate(createTime) {
var d = new Date(createTime);
var dformat = [ d.getFullYear(), d.getMonth() + 1, d.getDate() ].join('-')
+ ' ' + [
d.getHours() < 10 ? ('0' +d.getHours()) : d.getHours(),
d.getMinutes() < 10 ? ('0' + d.getMinutes() ) : d.getMinutes(),
d.getSeconds() < 10 ? ('0' + d.getSeconds() ) : d.getSeconds()
].join(':');
return dformat
} 以上是自己整理的，并测试过，可以直接用
----------------------------------------------------------------------------------------------------------------
文章中，有问题，可以在评论区评论，一起探讨编程中奥秘！
----------------------------------------------------------------------------------------------------------------
来都来了，代码看都看了，那就留个言呗，可以互动下！
----------------------------------------------------------------------------------------------------------------
转载声明：本文为博主原创文章，未经博主允许不得转载