推荐方法一:前台**.js中ajax请求后台json格式数据,**.js中处理后台返回的json格式数据、js拼接html表格、并将拼接表格添加到**.jsp页面指定位置。实现页面局部实时刷新。
**1.js
$(function(){
var shebeiIdParam=montior.getCheckedShebeiId();
montior.getShebeiCurrentData(shebeiIdParam);
});
var montior={
/**
* 获取当先选中的设备Id;
*/
getCheckedShebeiId:function(){
var shebeiId = $(".sidebar-menu .treeview.menu-open").attr("shebeiId");
return shebeiId;
},
//监控 实时数据
getShebeiCurrentData:function(shebeiIdParam){
$.ajax({
type:"post",
datatype:"json",
url:G.contextPath + "/live/listLiveShebeiDataByShebei.do",
data:{shebeiId:shebeiIdParam},
success:function(data){
montior.createChartPanel(data);
}
});
},
/**
* 创建每个设备的监控实时数据列表
*/
createChartPanel:function(liveShebeiData){
if(!liveShebeiData){
return;
}
for (var i = 0; i < liveShebeiData.length; i++) {
var shebei = liveShebeiData[i];
var shebeiId = shebei.shebeiId;
var shebeiData = shebei.shebeiData;
var yaosuInfos = shebei.yaosuInfos;
if(shebeiData.length==1){
var panel = new Array();
for (var key in shebeiData[0]) {
for (var j = 0; j < yaosuInfos.length; j++) {
var yaosuInfo = yaosuInfos[j];
if(key === G_APP.firstCharToLowerCase(yaosuInfo.fieldName)){
panel.push('<tr>');
panel.push('<td>'+yaosuInfo.showTitle+' :</td>');
panel.push('<td>'+shebeiData[0][key]+'</td>');
panel.push('<td>'+yaosuInfo.yaosuDanwei+'</td>');
panel.push('</tr>');
}
}
}
$(".realtime-datatable").empty().prepend(panel.join(""));//将拼接表格添加到页面指定位置
}
}
}
}
**Controller1.java
@Controller
@RequestMapping(value = "monitor")
public class MonitorController {
@Autowired
private LiveService liveService;
@Autowired
private MonitorService monitorService;
@RequestMapping(value = "monitor.do")
public String monitor(Model model){
String zuzhiId = "001";
List<ShebeiYaosuVO> listShebeiAndYaosu = liveService.listShebeiAndYaosuByZuzhiId(zuzhiId);
List<ShebeiYaosuDataVO> listShebeiYaosuNewData = liveService.listShebeiYaosuNewDataByZuzhiId(zuzhiId);
String shebeiId="GPRS_TEST";
String endtime= TimeUtil.getCurrentDate("yyyy-MM-dd HH:mm:ss");
ShebeiYaosuDataVO shebeiYaosuDataVO = monitorService.listShebeDataByShebeiAndTime(shebeiId,endtime);
model.addAttribute("listShebeiAndYaosu", listShebeiAndYaosu);
model.addAttribute("listShebeiYaosuNewData", listShebeiYaosuNewData);
model.addAttribute("shebeiYaosuDataVO", shebeiYaosuDataVO);
return "monitorControl";
}
}
方法二:后台**Controller.java中,model数据、return "**页面";前台**.jsp页面中接收后台返回数据${}
**Controller2.java
@Controller
@RequestMapping(value = "monitor")
public class MonitorController {
@Autowired
private LiveService liveService;
@Autowired
private MonitorService monitorService;
@RequestMapping(value = "listShebeDataByShebeiAndTime.do")//,method=RequestMethod.POST)
public String listShebeDataByShebeiAndTime1(Model model,String endtime) {
String zuzhiId = "001";
List<ShebeiYaosuVO> listShebeiAndYaosu = liveService.listShebeiAndYaosuByZuzhiId(zuzhiId);
List<ShebeiYaosuDataVO> listShebeiYaosuNewData = liveService.listShebeiYaosuNewDataByZuzhiId(zuzhiId);
String shebeiId="GPRS_TEST";
//String endtime= TimeUtil.getCurrentDate("yyyy-MM-dd HH:mm:ss");
ShebeiYaosuDataVO shebeiYaosuDataVO = monitorService.listShebeDataByShebeiAndTime(shebeiId,endtime);
//String shebeiYaosuDataVOJsonStr=shebeiYaosuDataVO.toString();
JSONObject jsonObject=new JSONObject(shebeiYaosuDataVO);//jsonObjstr转换成jsonObj
System.out.println("----------------源json对象\n"+jsonObject);
JSONArray yaosuInfosJA=jsonObject.getJSONArray("yaosuInfos");//获取到json数据中数组的那一部分
JSONArray shebeiDataJA=jsonObject.getJSONArray("shebeiData");
Float[] array=new Float[yaosuInfosJA.length()];
for(int i=0;i<yaosuInfosJA.length();i++){
JSONObject ob = (JSONObject) yaosuInfosJA.get(i);//得到json对象
System.out.println("json数组中第"+i+"个对象:"+ob);
String fieldName=ob.getString("fieldName");
JSONObject obj = (JSONObject) shebeiDataJA.get(0);//得到json对象
Iterator iterator = obj.keys();
while(iterator.hasNext()){
String key = (String) iterator.next();
if(fieldName.equalsIgnoreCase(key)){//取消大小写匹配
Float value = obj.getFloat(key);
array[i]=value;
}
}
List<Float> shebeiYaosuList = Arrays.asList(array);
shebeiYaosuDataVO.setShebeiYaosuList(shebeiYaosuList);
}
model.addAttribute("listShebeiAndYaosu", listShebeiAndYaosu);
model.addAttribute("listShebeiYaosuNewData", listShebeiYaosuNewData);
model.addAttribute("shebeiYaosuDataVO", shebeiYaosuDataVO);
return "monitorControl";
}
}
**2.jsp
<div class="panel-body" style="height:100%;">
<table class="realtime-datatable">
<tr ng-repeat="x in names">
<td style="border-right:none;">
<c:forEach var="yaosu" items="${shebeiYaosuDataVO.yaosuInfos}">
<li style="list-style-type:none">${yaosu.showTitle }: ${yaosu.yaosuDanwei }</li>
</c:forEach>
</td>
</tr>
</table>
</div>