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 ...
随机推荐
- 【T03】理解私有地址和NAT
1.私有地址包括三块: 10.0.0.0 到 10.255.255.255 172.16.0.0 到 172.31.0.0 192.168.0.0 到 192.168.255.255 2.私有地址接入 ...
- ArrayList vs LinkedList 空间占用
空间占用上,ArrayList完胜 看下两者的内存占用图 这三个图,横轴是list长度,纵轴是内存占用值.两条蓝线是LinkedList,两条红线是ArrayList,可以看到,LinkedLis ...
- 【编码题篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
编写一个方法 求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...
- 基于CentOS搭建VNC远程桌面服务
系统要求:CentOS 7.2 64 位操作系统 安装.启动 VNC VNC 远程桌面原理 名词解释: Xorg:在 Linux 用户中非常流行,已经成为图形用户程序的必备条件,所以大部分发行版都提供 ...
- Swift 值类型和引用类型的内存管理
1.内存分配 1.1 值类型的内存分配 在 Swift 中定长的值类型都是保存在栈上的,操作时不会涉及堆上的内存.变长的值类型(字符串.集合类型是可变长度的值类型)会分配堆内存. 这相当于一个 &qu ...
- CFX构建webservice实例,与Spring整合.
项目结构图: 步骤一: 添加maven包依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu ...
- ASP.NET中TimeSpan的用法
一.TimeSpan常量.字段 TimeSpan.MaxValue; // 10675199.02:48:05.4775807TimeSpan.MinValue; //-10675199.02:48: ...
- 将自己写的HDL代码封装成带AXI总线的IP
将自己写的HDL代码封装成带AXI总线的IP 1.Tools->create and package IP 2.create AXI4总线的IP 3.新建block design 4.点击右键, ...
- [svc]linux下网桥-docker网桥
网桥和交换机 2口交换机=网桥 交换机: 工作在数据链路层,根据源mac学习(控制层),目的mac转发(数据层). linux的网卡 vmware workstation中的桥接 参考: http:/ ...
- Handler消息传递机制浅析
http://www.runoob.com/w3cnote/android-tutorial-handler-message.html https://blog.csdn.net/lowprofile ...