1、jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="root" value="${pageContext.request.contextPath}" />
<%
//本地路径以及上下文
String realPath = "http://" + request.getServerName() + ":" + request.getServerPort()
+ request.getContextPath()
+ request.getServletPath().substring(0, request.getServletPath().lastIndexOf("/") + 1);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
<title>监控查询</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<script src="${root}/scripts/boot.js?v=${version}"
type="text/javascript"></script>
<link href="${root}/resources/css/myCss/login.css" rel="stylesheet"
type="text/css" />
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<style>
span {
padding-right: 5px;
font-weight: bold;
height: 20px;
}
input.mini-textbox {
height: 30px;
}
</style>
</head>
<body>
<input type="button" value="OpenChart" onclick="showChartWindow()" />
<div id="win1" class="mini-window" style=" 100%; height: 100%;">
<div class="mini-toolbar" style="border-bottom: 0; padding: 1px;">
<span>监控场景：</span> <input id="scene" class="mini-combobox"
name="scene" style=" 160px;" textField="text" valueField="id"
emptyText="请选择..." url="${root}/data/monitorScene.txt"
allowInput="true" showNullItem="true" nullItemText="请选择..." /> <span>时
间 段:</span><input id="startDate" name="startDate" class="mini-datepicker" />
-<input id="endDate" name="endDate" class="mini-datepicker" /> <input
type="button" value="查找" onclick="search()" />
</div>
<div class="mini-fit" style="float: left;" />
<div id="listGrid" class="mini-datagrid" allowResize="true"
style=" 100%; height: 40%;"
url="${root}/main/getMonitorScene.do" idField="id" multiSelect="true">
<div property="columns">
<div type="indexcolumn" width="10"></div>
<div field="scene" width="120" headerAlign="center"
renderer="onGenderRenderer" allowSort="true">场景描述</div>
<div field="recordNum" width="120" headerAlign="center"
allowSort="true">记录数</div>
</div>
</div>
<div id="chartContainer" style="height: 50%; 100%;"></div>
</div>
<script type="text/javascript">
mini.parse();
var Genders = [ {
id : 2,
text : '完成手机实名认证'
}, {
id : 6,
text : '提前清贷很久未返回'
}, {
id : 7,
text : '放款中很久未更新'
}, {
id : 8,
text : '复核中订单超过一笔'
}, {
id : 10,
text : '交单重复'
} ];
var listGrid = mini.get("listGrid");
listGrid.load();
function onGenderRenderer(e) {
for (var i = 0, l = Genders.length; i < l; i++) {
var g = Genders[i];
if (g.id == e.value)
return g.text;
}
return "";
}
function search() {
//获取表单多个控件的数据,序列化成JSON
var scene = mini.get("scene").getValue();
var startDate = mini.get("startDate").getValue();
var endDate = mini.get("endDate").getValue();
if (startDate != null && startDate != "") {
startDate = new Date(startDate);
startDate = startDate.getFullYear() + "-"
+ (startDate.getMonth() + 1) + "-"
+ startDate.getDate() + " " + startDate.getHours()
+ ":" + startDate.getMinutes() + ":"
+ startDate.getSeconds();
}
if (startDate != null && startDate != "") {
endDate = new Date(endDate);
endDate = endDate.getFullYear() + "-"
+ (endDate.getMonth() + 1) + "-" + endDate.getDate()
+ " " + endDate.getHours() + ":" + endDate.getMinutes()
+ ":" + endDate.getSeconds();
}
listGrid.load({
"scene" : scene,
"startDate" : startDate,
"endDate" : endDate
});
}
function addDate(dd, dadd) {
var a = new Date(dd)
a = a.valueOf()
a = a + dadd * 24 * 60 * 60 * 1000
a = new Date(a)
return a;
}
function showHighCharts(categories, data, name) {
var date = new Date().toLocaleDateString();
var series = {};
series.name = name;
chart = new Highcharts.Chart({
chart : {
renderTo : 'chartContainer', //图表放置的容器，关联DIV#id
type : 'column', //矩形
reflow : false
//自适应div的大小
},
credits : {
enabled : false
},
title : {
text : '<h1 style="color:#6495ED;">监控场景示意图<h1>' //图表标题
},
xAxis : { //X轴标签
categories : categories
},
yAxis : { //设置Y轴
title : {
text : '总计(条数)'
}
},
legend : { //设置图例
layout : 'vertical',
backgroundColor : '#FFFFFF',
align : 'left',
verticalAlign : 'top',
x : 100,
y : 10,
floating : true,
shadow : true
},
series : [
{
name : '<p id="queryField" style="font-size:0.5">'
+ '重复交单' + '</p>',
data : data[0]
},
{
name : '<p style="font-size:0.5;">' + '完成手机实名认证'
+ '</p>',
data : data[1]
},
{
name : '<p style="font-size:0.5">' + '提前清贷很久未返回'
+ '</p>',
data : data[2]
},
{
name : '<p style="font-size:0.5">' + '放款中很久未更新'
+ '</p>',
data : data[3]
},
{
name : '<p style="font-size:0.5">' + '复核中订单超过一笔'
+ '</p>',
data : data[4]
} ]
});
}
function showChartWindow() {
getDataForHighcharts();
var win = mini.get("win1");
win.show();
}
showChartWindow();
/**获取柱状图所需数据*/
function getDataForHighcharts() {
debugger;
var name = null;
var categories = [];
$.ajax({
async : false,
cache : false,
type : 'POST',
dataType : "json",
url : '${root}/main/getInterfaceData.do',
success : function(data) {
if (data.length != 0) {
var list1 = new Array();
var list2 = new Array();
var list3 = new Array();
var list4 = new Array();
var list5 = new Array();
var k = 0;
for (var i = 0; i < data.length; i++) {
var data1 = {};
var data2 = {};
var data3 = {};
var data4 = {};
var data5 = {};
data1.y = data[i].decisionOver2Cnt;//次数(y轴)
data2.y = data[i].phoneVerifyCnt;
data3.y = data[i].preRepayCnt;
data4.y = data[i].lendingCnt;
data5.y = data[i].over2ordersCnt;
list1.push(data1);
list2.push(data2);
list3.push(data3);
list4.push(data4);
list5.push(data5);
categories[i] = data[i].date;
}
var datas = new Array();
datas.push(list1);
datas.push(list2);
datas.push(list3);
datas.push(list4);
datas.push(list5);
}
showHighCharts(categories, datas, name);
}
});
}
</script>
</body>
</html>
2、后台代码：
/**
* 柱状图
* @param
* @return
* @throws IOException
*/
@RequestMapping("/getInterfaceData")
@ResponseBody
public List<SceneDisplayEntity> getInterfaceData()throws IOException{
String start = DateFormatUtil.dateToString(new Date());
String end = DateFormatUtil.dateToString(DateFormatUtil.addDays(start, -6));
List<SceneDisplayEntity> list = sceneMonitorService.queySceneCountByTime(start,end);
return list;
}
/**
* 获取最近七天的数据用于矩形图显示
*/
// public List<SceneDisplayEntity> queySceneCountByTime(String date)
// {
// return sceneMonitorRepository.queySceneCountByTime(date);
// }
public List<SceneDisplayEntity> queySceneCountByTime(String start,String end) {
List<SceneDisplayEntity> sceneDisplayList = new ArrayList<SceneDisplayEntity>();
sceneDisplayList = sceneMonitorRepository.queySceneCountByTime(start,end);
List<String> dates = new ArrayList<String>();
dates.add(start);
dates.add(DateFormatUtil.dateToString(DateFormatUtil.addDays(start, -1)));
dates.add(DateFormatUtil.dateToString(DateFormatUtil.addDays(start, -2)));
dates.add(DateFormatUtil.dateToString(DateFormatUtil.addDays(start, -3)));
dates.add(DateFormatUtil.dateToString(DateFormatUtil.addDays(start, -4)));
dates.add(DateFormatUtil.dateToString(DateFormatUtil.addDays(start, -5)));
dates.add(end);
//用于显示矩形的list
List<SceneDisplayEntity> result = new ArrayList<SceneDisplayEntity>();
for (String date:dates){
SceneDisplayEntity sceneDisplay = new SceneDisplayEntity();
sceneDisplay.setDate(date);
for (SceneDisplayEntity entity : sceneDisplayList) {
if(date.equals(entity.getDate())){
if (MonitorScenes.PHONE_NUMBER_VERIFY.getValue().equals(entity.getScene())){//手机认证
sceneDisplay.setPhoneVerifyCnt(entity.getCount());
}else if (MonitorScenes.PRE_REPAY.getValue().equals(entity.getScene())) {//提前清贷很久未返回
sceneDisplay.setPreRepayCnt(entity.getCount());
} else if (MonitorScenes.OVER2ORDERS.getValue().equals(entity.getScene())) {//超过2笔复核中订单
sceneDisplay.setOver2ordersCnt(entity.getCount());
} else if (MonitorScenes.LENDING.getValue().equals(entity.getScene())) {//放款中很久未更新
sceneDisplay.setLendingCnt(entity.getCount());
} else if (MonitorScenes.DECISIONOVER2.getValue().equals(entity.getScene())) {//重复交单
sceneDisplay.setDecisionOver2Cnt(entity.getCount());
}
}
}
result.add(sceneDisplay);
}
return result;
}
---实体类：
package com.vcredit.ddcash.monitor.model.entity;
public class SceneDisplayEntity {
private String scene;
//重复交单量10
private Integer decisionOver2Cnt;
//手机认证量 2
private Integer phoneVerifyCnt;
//提前清贷未返回量6
private Integer preRepayCnt;
//长期放款中 7
private Integer lendingCnt;
//复核中超过一笔订单8
private Integer over2ordersCnt;
//日期
private String date;
private Integer count;
public SceneDisplayEntity() {
// TODO Auto-generated constructor stub
}
public Integer getDecisionOver2Cnt() {
return decisionOver2Cnt;
}
public void setDecisionOver2Cnt(Integer decisionOver2Cnt) {
this.decisionOver2Cnt = decisionOver2Cnt;
}
public Integer getPhoneVerifyCnt() {
return phoneVerifyCnt;
}
public void setPhoneVerifyCnt(Integer phoneVerifyCnt) {
this.phoneVerifyCnt = phoneVerifyCnt;
}
public Integer getPreRepayCnt() {
return preRepayCnt;
}
public void setPreRepayCnt(Integer preRepayCnt) {
this.preRepayCnt = preRepayCnt;
}
public Integer getLendingCnt() {
return lendingCnt;
}
public void setLendingCnt(Integer lendingCnt) {
this.lendingCnt = lendingCnt;
}
public Integer getOver2ordersCnt() {
return over2ordersCnt;
}
public void setOver2ordersCnt(Integer over2ordersCnt) {
this.over2ordersCnt = over2ordersCnt;
}
public String getDate() {
return date;
}
public void setDate(String date) {
this.date = date;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public String getScene() {
return scene;
}
public void setScene(String scene) {
this.scene = scene;
}
}
---xml:
<select id="queySceneCountByTime" parameterType="java.util.Map" resultType="SceneDisplayEntity">
SELECT
scene,
DATE(create_date) date,
COUNT(1) count
FROM
t_ddq_business_monitor
WHERE DATE(create_date) BETWEEN #{end} AND #{start}
GROUP BY scene, DATE(create_date)
</select>
界面显示：
------生成的list的是7天的数据，所以后台代码根据查询语句做了相应处理；