为了表达作为一个弱小程序员可望而不可即的很多事情~~~摸索了4天~~~被shift哥1小时搞定的查询+echar数据显示,立马秒得渣都不剩~~~
其实我还没完全懂啊~~~╮(╯▽╰)╭。。。只能说哎,作为一只^(* ̄(oo) ̄)^一样的队友~~还是不要拖后腿。。好好学习颠颠向上,才不浪费shitf哥的苦心教导。。。
DateUtil.java 文件当中加了个日期查询:
/**
* 运算日期,返回当前时间之后的Integer为正数,返回当前时间之前的Integer为负数
* @param date Integer
* @param year Integer
* @param month Integer
* @param day Integer
* @param hours Integer
* @param minute Integer
* @return Date 返回运算日期
*/
public static Date countDate(Date date, Integer year, Integer month, Integer day, Integer hours, Integer minute) {
Calendar calendar = Calendar.getInstance();
calendar.setTime(date);
calendar.set(Calendar.YEAR, calendar.get(Calendar.YEAR) + year);//年相加
calendar.set(Calendar.MONTH, calendar.get(Calendar.MONTH) + month);//月相加
calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) + day);//日相加
calendar.set(Calendar.HOUR_OF_DAY, calendar.get(Calendar.HOUR_OF_DAY) + hours);//小时相加
calendar.set(Calendar.MINUTE, calendar.get(Calendar.MINUTE) + minute);//分钟相加
return calendar.getTime();
}
//自己写了个,传入时间的查询类,底层已经写好,剩下调用这种东西还是比较轻松的。但是自己也是用来蛮长时间才搞清楚,配置要加getter和setter方法。。。不然系统根本找不到property。。。这个自己折腾了起码3、4个小时,被zhong少一语点破~~真是伤心,(;′⌒`)。。。很简单的问题
VoiceInfoSingleTitleGroupByDates.java
@QueryInfo(select="voiceTitle.voiceInfoDiscoverDate,count(voiceTitle.infoSingleTitleId) "
,from = "com.spower.voice.valueobject.VoiceInfoSingleTitle as voiceTitle"
,groupBy="voiceTitle.voiceInfoDiscoverDate")
public class VoiceInfoSingleTitleGroupByDates extends BaseCommandInfo {
@QueryParam(fieldName = "voiceTitle.voiceInfoDiscoverDate",op = QueryOperator.GT_EQU)
private Date voiceInfoDiscoverStartDate; // 收录时间
@QueryParam(fieldName = "voiceTitle.voiceInfoDiscoverDate",op = QueryOperator.LESS_EQU)
private Date voiceInfoDiscoverEndDate; // 收录时间
// @QueryParam(fieldName = "voiceTitle.voiceInfoTitle", op = QueryOperator.LIKE)
// private String voiceInfoTitle;
@QueryParam(fieldName = "voiceTitle.infoSingleTitleId")
private Long infoSingleTitleId;
@QueryParam(fieldName = "voiceTitle.infoId")
private Long infoId;
/** 默认查询时间段 */
private String queryDateType;
/**
* @return the infoSingleTitleId
*/
public Long getInfoSingleTitleId() {
return infoSingleTitleId;
}
/**
* @param infoSingleTitleId the infoSingleTitleId to set
*/
public void setInfoSingleTitleId(Long infoSingleTitleId) {
this.infoSingleTitleId = infoSingleTitleId;
}
/**
* @return the infoId
*/
public Long getInfoId() {
return infoId;
}
/**
* @param infoId the infoId to set
*/
public void setInfoId(Long infoId) {
this.infoId = infoId;
}
/**
* @return the voiceInfoDiscoverStartDate
*/
public Date getVoiceInfoDiscoverStartDate() {
return voiceInfoDiscoverStartDate;
}
/**
* @param voiceInfoDiscoverStartDate the voiceInfoDiscoverStartDate to set
*/
public void setVoiceInfoDiscoverStartDate(Date voiceInfoDiscoverStartDate) {
this.voiceInfoDiscoverStartDate = voiceInfoDiscoverStartDate;
}
/**
* @return the voiceInfoDiscoverEndDate
*/
public Date getVoiceInfoDiscoverEndDate() {
return voiceInfoDiscoverEndDate;
}
/**
* @param voiceInfoDiscoverEndDate the voiceInfoDiscoverEndDate to set
*/
public void setVoiceInfoDiscoverEndDate(Date voiceInfoDiscoverEndDate) {
this.voiceInfoDiscoverEndDate = voiceInfoDiscoverEndDate;
}
}
//至于service,也没写多少,倒是在group by.having这里纠结了许久
VoiceInfoSingleTitleService.java
@Service
public class VoiceInfoSingleTitleService extends AbstractAnnoCommonService {
/*
* 查询 过滤采集的统计量,根据日期统计每天的采集量
* select voice_info_discover_date,count(*) from voice_info_single_title group by voice_info_discover_date;//
* */
@Transactional
public List<Object [ ]> findListVoiceInfoSingleTitle(VoiceInfoSingleTitleGroupByDates info) {
IQueryObject qo = super.getQueryObject(info);
return super.executeSql(qo.getQueryString(), qo.getParam());
}
}
// voiceshowmapcontroller。。。。于页面交互的controller界面,具体还是操作,shift哥加了个判断,总算有点茅塞顿开的感觉。。。
@Controller
@RequestMapping(value = "/voice/")
public class VoiceShowMapController extends AbstractAnnotationController{
//虽然我也没明白注入是什么意思
@Autowired
private BulletinCommonService bulletinCommonService;
@Autowired
private BulletinSectionCharService bulletinSectionCharService;
@Autowired
private BulletinSectionService bulletinSectionService;
@Autowired
private BulletinCharService bulletinCharService;
@Autowired
private CharCountService CharCountService;
@Autowired
public VoiceInfoSingleTitleService VoiceInfoSingleTitleService;
/**进入页面,直接生成图片**/
@RequestMapping("/getVoiceShowMap.do")
public ModelAndView getVoiceShowMap(HttpServletRequest request,HttpServletResponse response, VoiceInfoSingleTitleGroupByDates voiceInfo) {
Map<String, Object> model = new HashMap<String, Object>();
//时间的判断
if (null == voiceInfo.getVoiceInfoDiscoverStartDate() && null == voiceInfo.getVoiceInfoDiscoverEndDate()) {
voiceInfo.setVoiceInfoDiscoverStartDate(DateUtil.countDate(new Date(), 0, 0, -5, 0, 0));
voiceInfo.setVoiceInfoDiscoverEndDate(new Date());
}
//查询数据
List<Object []> singleTitleResult=VoiceInfoSingleTitleService.findListVoiceInfoSingleTitle(voiceInfo);
model.put("voiceInfo", voiceInfo);
model.put("singleTitleResult", singleTitleResult);
//返回页面
return new ModelAndView("/voice/voiceShowMap/VoiceShowMap",model);
}
}
//最后才是页面的内容,重点还是数据传值,这个调花的时间最久~~~~伤心的就是,调了很久还不一定能调对。。。。
重点:输出数据的foreach
#foreach($Data in $singleTitleResult)
#if( $!{velocityCount} > 1) , "$!{Data[1]}"
#else "$!{Data[1]}"
#end
#end
整个页面的主要:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>${ApplicationProperties.appTitle}</title>
<link rel="stylesheet" type="text/css" href="../app/right/right.css">
<script language="JavaScript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/validator.js"></script>
<script src="../jquery/jquery-1.10.2.min.js"></script>
<script src="../jquery/jquery.tmpl.min.js"></script>
<script language="JavaScript" src="../base/js/autoform.js"></script>
<script language="JavaScript" src="../script/common.js"></script>
<link rel="stylesheet" type="text/css" href="../app/right/form.css"/>
<link href="../script/DHTML_calendar_style.css" rel="stylesheet" type="text/css" media="all" title="calendar_style" />
<script language="JavaScript" type="text/javascript" src="../script/DHTML_calendar.js"></script>
<script type="text/javascript" src="../script/validator.js"></script>
<script type="text/javascript" src="../script/selectStaff.js"></script>
<script src="../script/cc.selector.js"></script>
<script type="text/javascript" src="../base/js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="../base/js/swfupload/swfupload_handlers.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
#parse("common/tableRulerJS.vm")
<script language=javascript >
window.onload = function () {
#if($singleTitleResult && $singleTitleResult.size() <= 0)
return;
#end
//------------------------------------折线图-------------------------------------
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line' // 使用折线图就加载line模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('echartSeries'));
var option = {
title : {
text: '一周舆情变化',
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
## data : ['周一','周二','周三','周四','周五','周六','周日']
data:[
#foreach($Data in $singleTitleResult)
#if( $!{velocityCount} > 1) , "#displayOnlyDate($!{Data[0]})"
#else "#displayOnlyDate($!{Data[0]})"
#end
#end
]
}
],
yAxis : [
{
type : 'value',
boundaryGap : false,
data : [
#foreach($Data in $singleTitleResult)
#if( $!{velocityCount} > 1) , "$!{Data[1]}"
#else "$!{Data[1]}"
#end
#end
]
}
],
//最低气温
series : [
{
name:'舆情趋势',
type:'line',
data:[
#foreach($Data in $singleTitleResult)
#if( $!{velocityCount} > 1) , "$!{Data[1]}"
#else "$!{Data[1]}"
#end
#end
],
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
}
function searchMap(){
var flag= true;
if(flag){
var e = document.searchForm;
e.action = "../voice/getVoiceShowMap.do";
e.submit();
}
else {
alert("请选择查询时间查询图表内容!!");
}
}
$(function(){
$("#checkAll").click(function(){
var checkedFlag = $(this).is(':checked');
$("input[name=infoSingleTitleId]").each(function(){
checkedFlag?$(this).attr('checked','checked'):$(this).removeAttr('checked');
});
});
$("div[class=tableContainer]").width($(document).width());
$('label').click(function(){
var radioId = $(this).attr('name');
$('label').removeAttr('class') && $(this).attr('class', 'checked');
$('input[name="voiceInfoMetaType"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
});
});
function exportXls(){
var e = document.voiceQueryForm;
e.action = e.action+"?type="+'$!{type}';
if (validator.checkAll()) {
e.submit();
}
}
</script>
</head>
<body scroll="yes" onload ="">
<table cellpadding="0" cellspacing="0" class="over_tab">
<tr>
<td>
<div id="dymenu" class="dymenu">
<A href="#" class="index"><SPAN>舆情图表</SPAN></A>
</div>
</td>
</tr>
<!--查询 begin-->
<tr valign="top">
<td>
<fieldset class="search_border">
<legend class="search_title"><img src="../app/right/images/search_ico.gif" border="0" align="absmiddle"> 查询</legend>
<table width="100%" style="margin:0px;cellpadding:0px;cellspacing=0px;">
<!--查询表单-->
<form name="searchForm" action="" method="post" >
<tr style="text-align:center;" class="tr_font">
</tr>
<tr style="text-align:center;" class="tr_font">
<td width="10%" align="right"></td>
<td width="50%" align="left">舆情监测系统采集数量统计图</td>
</tr>
<tr style="text-align:center;" class="tr_font">
<td align="right" >采集日期</td>
<td align="left">
#datetimePicker("voiceInfoDiscoverStartDate" "#displayOnlyDate($!{voiceInfo.voiceInfoDiscoverStartDate} )" "" 15)
#datetimePicker("voiceInfoDiscoverEndDate" "#displayOnlyDate($!{voiceInfo.voiceInfoDiscoverEndDate})" "" 15)
</td>
</tr>
<tr style="text-align:center;line-height:7px;" class="tr_font">
<td colspan="8">
#qbutton('search.png', '确定查询图表', 'javascript:searchMap()')
#qbutton('clean.png', '清空', 'javascript:clearQueryCondition(document.voiceQueryForm)')
</td>
</tr>
</form>
</table>
</fieldset>
</td>
</tr>
<!--查询 end-->
<div style="overflow:scroll;height=500px;">
<tr valign="top" style="height=500px;overflow:scroll;">
<td width="100%" height="100%">
<table cellpadding="0" cellspacing="0" class="roll_tab" style="height=500px;overflow:scroll;">
<tr>
<td>
<!--插入折线图图表-->
<div id="echartSeries" style="width:100%;height:300px" style="overflow:scroll;"></div>
</td>
</tr>
<tr>
<td>
<!--插入柱状图图表-->
<div id="echartBar" style="width:100%;height:300px" style="overflow:scroll;"></div>
</td>
</tr>
<tr>
<td>
<!--插入饼状图图表-->
<div id="echartPie" style="width:100%;height:300px"></div>
</td>
</tr>
</table>
</td>
</tr>
</div>
<!--列表 end-->
#if($page)
<!--分页-->
<tr valign="top" height="100%">
<td>
#changePage($page "#getRequestUri()")
</td>
</tr>
<!--分页end-->
#end
</table>
</body>
<script>
</script>
</html>
感谢百度echar.......
http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D