miniUI怎么显示HTML显示整数,MINIUI后台获取数据

1、jsp

pageEncoding="UTF-8"%>

//本地路径以及上下文

String realPath = "http://" + request.getServerName() + ":" + request.getServerPort()

+ request.getContextPath()

+ request.getServletPath().substring(0, request.getServletPath().lastIndexOf("/") + 1);

%>

监控查询

type="text/css" />

span {

padding-right: 5px;

font-weight: bold;

height: 20px;

}

input.mini-textbox {

height: 30px;

}

监控场景：

name="scene" style=" 160px;" textField="text" valueField="id"

emptyText="请选择..." url="${root}/data/monitorScene.txt"

allowInput="true" showNullItem="true" nullItemText="请选择..." /> 时

间 段:

-

type="button" value="查找" οnclick="search()" />

style=" 100%; height: 40%;"

url="${root}/main/getMonitorScene.do" idField="id" multiSelect="true">

renderer="onGenderRenderer" allowSort="true">场景描述

allowSort="true">记录数

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 : '

监控场景示意图

' //图表标题

},

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 : '

'

+ '重复交单' + '

',

data : data[0]

},

{

name : '

' + '完成手机实名认证'

+ '

',

data : data[1]

},

{

name : '

' + '提前清贷很久未返回'

+ '

',

data : data[2]

},

{

name : '

' + '放款中很久未更新'

+ '

',

data : data[3]

},

{

name : '

' + '复核中订单超过一笔'

+ '

',

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);

}

});

}

2、后台代码：

/**

* 柱状图

* @param

* @return

* @throws IOException

*/

@RequestMapping("/getInterfaceData")

@ResponseBody

public List getInterfaceData()throws IOException{

String start = DateFormatUtil.dateToString(new Date());

String end = DateFormatUtil.dateToString(DateFormatUtil.addDays(start, -6));

List list = sceneMonitorService.queySceneCountByTime(start,end);

return list;

}

/**

* 获取最近七天的数据用于矩形图显示

*/

// public List queySceneCountByTime(String date)

// {

// return sceneMonitorRepository.queySceneCountByTime(date);

// }

public List queySceneCountByTime(String start,String end) {

List sceneDisplayList = new ArrayList();

sceneDisplayList = sceneMonitorRepository.queySceneCountByTime(start,end);

List dates = new ArrayList();

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 result = new ArrayList();

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

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)

界面显示：

------生成的list的是7天的数据，所以后台代码根据查询语句做了相应处理；