后台数据页面显示

推荐方法一：前台**.js中ajax请求后台json格式数据，**.js中处理后台返回json格式数据、拼接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 "**页面"；前台**页面${}

**Controller2.java

@Controller
@RequestMapping(value = "monitor")
public class MonitorController {	
	@Autowired
	private LiveService liveService;
	@Autowired
	private MonitorService monitorService;
		
	//http://localhost:8081/osu-env/monitor/listShebeDataByShebeiAndTime.do?endtime=2018-10-17%2011:53:12.800
	@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>