MINIUI后台获取数据
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="width: 100%; height: 100%;">
<div class="mini-toolbar" style="border-bottom: 0; padding: 1px;">
<span>监控场景:</span> <input id="scene" class="mini-combobox"
name="scene" style="width: 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="width: 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%; width: 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天的数据,所以后台代码根据查询语句做了相应处理;
MINIUI后台获取数据的更多相关文章
- Swift - 后台获取数据(Background Fetch)的实现
前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是 ...
- ligerUI---下拉菜单(menubar)动态显示(从后台获取数据)
写在前面: ligerui的下拉菜单是有点丑的,这也是没有办法的事........这里主要记录下,如何从后台获取数据进行菜单显示. 有两种方式:1.使用json数组来动态添加 2.字符串拼接. 其 ...
- jsTree通过AJAX从后台获取数据
页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { ...
- Vue---从后台获取数据vue-resource的使用方法
作为前端人员,在开发过程中,我们大多数情况都需要从后台请求数据,那么在vue中怎样从后台获取数据呢?接下来,我简单介绍一下vue-resource的使用方法,希望对大家有帮助. 一.下载vue-res ...
- 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效??
在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效?? 是因为swiper提前初始化了,那时候数据还没有完全出来.这里有两种解决办法 1. 使用vue提供的$nextTic ...
- 一、表单和ajax中的post请求&&后台获取数据方法
一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...
- aceAdmin fuelux tree 从后台获取数据,并设置节点ID等属性
如题,从后台封装数据,有两种方式渲染节点的数据: 1.全部节点加载 2.根据父节点加载子节点 首先,先介绍下第一种渲染方式: 后台返回数据格式(所有的附加属性,都可放在additionalParame ...
- MVC后台获取数据和插入数据的三种方式【二】
MVC模式下,从前端获取数据返回后台,总共有三种形式.下面的代码示例将演示如何将数据返回到后端. 一.首先我们看看表单代码,注意input标签中name的值. <html> <hea ...
- vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据
在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...
随机推荐
- [Unit Testing] Using Mockito Annotations - @Mock, @InjectMocks, @RunWith
Previously we have seen how to do Unit testing with Mockito; import org.junit.Test; import static or ...
- 解决Ubuntu Chrome浏览器很卡不响应的问题
1. 设定字体,使用Ubuntu Tweak Tool把系统字体设定为默认字体,而不是文泉驿字体: 2. 使用ADBLock Plus把垃圾的广告过滤掉,不然网页上很多Flash就会导致网页非常的卡顿 ...
- 如何制作initrd.img文件
2008-11-12 16:02:37 initrd.img文件是redhat,mandrake等linux发布使用的内存镜像文件.镜像中是一个微型系统.在安装系统时,将initrd.img展开 ...
- MVC项目实践,在三层架构下实现SportsStore-11,使用Knockout实现增删改查
SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...
- 微软自然语言理解平台LUIS:从零开始,帮你开发智能音箱
今年微软开发者大会Build 2017上展示了一款Invoke智能音箱,受到了媒体和大众的广泛关注.近两年,不少大公司纷纷涉足该领域,使得智能音箱逐渐成为一款热门的人工智能家用电器.智能音箱的兴起也改 ...
- 关于Installation error: INSTALL_FAILED_NO_MATCHING_ABIS的解决方法
遇到过好几次这种错误提示,工程代码没有任何错误,但是连安装都安装不上模拟器,console控制台就报出上面的错误: [2015-11-25 15:15:37 - Em4.x] Installation ...
- 《网络编程》IPv4 与 IPv6 相互操作
前言 因为互联网终端不断添加.IPv4 地址长度(32位)已不可以满足要求.所以出现了 IPv6地址(128位).可是现有应用程序大部分还是採用 IPv4 地址形式,所以必须解决 IPv4 与 IPv ...
- 源码分析HotSpot GC过程(一)
«上一篇:源码分析HotSpot GC过程(一)»下一篇:源码分析HotSpot GC过程(三):TenuredGeneration的GC过程 https://blogs.msdn.microsoft ...
- ORA-03297: 文件包含在请求的 RESIZE 值以外使用的数据
本文中的45,对应 修改数据文件大小 里面的45 1.移动表前先对表空间做整理 alter tablespace data_cis_test coalesce; 2.在dba_extents找到与ID ...
- 读“40 分,60 分,90 分”
原文链接: http://mp.weixin.qq.com/s?__biz=MzA5MjYyNzY1OQ==&mid=2650901947&idx=1&sn=89af64d3b ...