realtime.jsp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. <%@ page contentType="text/html; charset=utf-8" session="false" %>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  4. <head>
  5. <title>我的工作台</title>
  6. <%@ include file="../common/header.jsp" %>
  7. <script type="text/javascript" src="${contextPath}/js/highcharts.js"></script>
  8. <script type="text/javascript" src="${contextPath}/js/exporting.js"></script>
  9. <link type="text/css" rel="stylesheet" href="${contextPath}/css/themes/easyui.css" />
  10. <script type="text/javascript" src="${contextPath }/js/jquery.easyui.min.js"></script>
  11. <script type="text/javascript">
  12. var mydata,minWeight,xStr,Series,Aw,Ll,chart,chartHeight,chartWidth,loadcount=0,panelCHeight=0,panelSHeight=0,InterId;
  13. $(document).ready( function() {
  14. loadList(); //加载jqgrid
  15. $("#list").jqGrid("setGridWidth",$(window).width()*0.32);
  16. $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
  17. $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
  18. $("#list").jqGrid("setSelection",1);
  19. $("body").layout("panel","south").panel({
  20. onClose: function(){
  21. panelC = $("body").layout("panel","center").panel();
  22. $("#list").jqGrid("setGridWidth",$(window).width()*0.33);
  23. $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
  24. $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
  25. $("#list").jqGrid("setGridHeight",panelC.height()-60);
  26. $("#p1list").jqGrid("setGridHeight",panelC.height()-80);
  27. $("#p2list").jqGrid("setGridHeight",panelC.height()-80);
  28. },
  29. onOpen: function(){
  30. panelC = $("body").layout("panel","center").panel();
  31. panelCHeight = panelC.height();
  32. panelSHeight = $(window).height() - panelC.height();
  33. chartWidth = $(window).width()*0.99;
  34. chartHeight = panelSHeight*0.75;
  35. loadChart(); //加载点线图
  36. },
  37. onResize: function(){
  38. panelS = $("body").layout("panel","south").panel();
  39. panelCHeight = $(window).height() - panelS.height();
  40. $("#list").jqGrid("setGridHeight",panelCHeight-110);
  41. $("#p1list").jqGrid("setGridHeight",panelCHeight-130);
  42. $("#p2list").jqGrid("setGridHeight",panelCHeight-130);
  43. $("#list").jqGrid("setGridWidth",$(window).width()*0.33);
  44. $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
  45. $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
  46. chartWidth = $(window).width()*0.99;
  47. chartHeight = panelS.height()*0.99;
  48. loadChart(); //加载点线图
  49. }
  50. });
  51. });
  52. $(window).resize(function(){
  53. panelS = $("body").layout("panel","south").panel();
  54. $("#list").jqGrid("setGridWidth",$(window).width()*0.32);
  55. $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
  56. $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
  57. chartWidth = $(window).width()*0.99;
  58. chartHeight = panelS.height()*0.9;
  59. loadChart(); //加载点线图
  60. });
  61. function showloadChart(){
  62. var currentpId = $("#currentpId").val();
  63. var Dno = $("#Dno").val();
  64. var beginDate = $("#beginDate").val();
  65. var ActualWeight = $("#ActualWeight").val();
  66. //获取点线图的数据
  67. $.ajax({
  68. async: false,
  69. type: "POST",
  70. dataType: "json", //返回类型json
  71. data: "beginDate="+beginDate+"&SrcAddr="+Dno+"&currentpId="+currentpId+"&ActualWeight="+ActualWeight,
  72. url: "${contextPath }/admin/statistics/rdxlist.html",
  73. error: function(){alert("系统错误");},
  74. success: function(json){
  75. if(json.status == "success"){
  76. xStr = json.MTime;
  77. Series = json.Weight;
  78. Aw = json.AW;
  79. Ll = json.Ll;
  80. }
  81. }
  82. });
  83. $("#p1list").clearGridData();
  84. loadR1List();
  85. $("#p2list").clearGridData();
  86. loadR2List();
  87. loadChart(); //加载点线图
  88. }
  89. //jqgrid初始化
  90. function loadList(){
  91. jQuery("#list").jqGrid({
  92. datatype: "local", //从服务器端返回的数据类型,(表格期望接收的数据类型)。可选类型:xml,xmlstring,json,local,function
  93. height: 150, //高度
  94. colNames:["主键","TMR","执行计划", "开始时间", "计划日期", "DataCaptureNo","ActualWeight"], //列名
  95. colModel:[
  96. {
  97. name: "ID",
  98. index: "ID",
  99. align: "center",
  100. sorttype: "string",
  101. hidden: true
  102. },
  103. {
  104. name: "TNAME",
  105. index: "TNAME",
  106. align: "center",
  107. sorttype: "string"
  108. },
  109. {
  110. name: "ProjName",
  111. index: "ProjName",
  112. align: "center",
  113. sorttype: "string"
  114. },
  115. {
  116. name: "InTime",
  117. index: "InTime",
  118. width: 300,
  119. align: "center",
  120. sorttype: "string"
  121. },
  122. {
  123. name: "Mydate",
  124. index: "Mydate",
  125. align: "center",
  126. sorttype: "string"
  127. },
  128. {
  129. name: "DataCaptureNo",
  130. index: "DataCaptureNo",
  131. align: "center",
  132. sorttype: "string",
  133. hidden: true
  134. },
  135. {
  136. name: "ActualWeight",
  137. index: "ActualWeight",
  138. align: "center",
  139. sorttype: "string",
  140. hidden: true
  141. }
  142. ],
  143. onSelectRow: function(rowid){
  144. window.clearInterval(InterId);//取消定时
  145. var selId = $("#list").jqGrid("getGridParam","selrow"); //获取当前选中行号
  146. var rowData = $("#list").jqGrid("getRowData",selId); //获取当前选中行真实对象
  147. $("#currentpId").val(rowData.ID);
  148. $("#Dno").val(rowData.DataCaptureNo);
  149. $("#beginDate").val(rowData.InTime);
  150. $("#ActualWeight").val(rowData.ActualWeight);
  151. $("#dl1Result").load("${contextPath }/admin/statistics/realtime1.html");
  152. $("#dl2Result").load("${contextPath }/admin/statistics/realtime2.html");
  153. panelS = $("body").layout("panel","south").panel();
  154. panelCHeight = $(window).height() - panelS.height();
  155. $("#list").jqGrid("setGridHeight",panelCHeight-110);
  156. $("#p1list").jqGrid("setGridHeight",panelCHeight-130);
  157. $("#p2list").jqGrid("setGridHeight",panelCHeight-130);
  158. $("#list").jqGrid("setGridWidth",$(window).width()*0.33);
  159. $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
  160. $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
  161. chartWidth = $(window).width()*0.99;
  162. chartHeight = panelS.height()*0.9;
  163. //获取点线图的数据
  164. $.ajax({
  165. async: false,
  166. type: "POST",
  167. dataType: "json", //返回类型json
  168. data: "beginDate="+rowData.InTime+"&SrcAddr="+rowData.DataCaptureNo+"&currentpId="+rowData.ID+"&ActualWeight="+rowData.ActualWeight,
  169. url: "${contextPath }/admin/statistics/rdxlist.html",
  170. error: function(){alert("系统错误");},
  171. success: function(json){
  172. if(json.status == "success"){
  173. minWeight = json.minWeight;
  174. xStr = json.MTime;
  175. Series = json.Weight;
  176. Aw = json.AW;
  177. Ll = json.Ll;
  178. }
  179. }
  180. });
  181. loadChart(); //加载点线图
  182. InterId = setInterval("showloadChart()","10000");//设置定时器,每10s跳一次
  183. },
  184. autowidth: true, //自动调节宽度
  185. rowNum: 1000, //每页显示条数
  186. altRows: true, //设置表格是否允许行交替变色值
  187. altclass:"tdbgmouseover" //自定义隔行变色的样式
  188. });
  189. //获取数据集
  190. mydata = getLists();
  191. if(mydata!=null){
  192. for(var i=0;i<=mydata.length;i++){
  193. jQuery("#list").jqGrid("addRowData",i+1,mydata[i]);
  194. }
  195. }
  196. }
  197. //获取服务器数据
  198. function getLists(){
  199. $.ajax({
  200. async: false,
  201. type: "POST",
  202. dataType: "json", //返回类型json
  203. url: "${contextPath }/admin/statistics/realtimelist.html",
  204. error: function(){alert("系统错误");},
  205. success: function(json){
  206. mydata = json;
  207. }
  208. });
  209. return mydata;
  210. }
  211. //Chart初始化
  212. function loadChart(){
  213. chart = new Highcharts.Chart({
  214. chart: {
  215. backgroundColor:"#FFFFEF",
  216. animation: false,
  217. renderTo: "container",
  218. type: "line",
  219. zoomType: "x,y",
  220. height: chartHeight,
  221. width: chartWidth
  222. },
  223. title: {
  224. text: ""
  225. },
  226. xAxis: {
  227. categories: xStr,
  228. labels: {
  229. step: 20
  230. }
  231. },
  232. yAxis: {
  233. title: {
  234. text: "重量(kg)"
  235. },
  236. min: minWeight,
  237. tickInterval: 1000 //坐标轴刻度间距:tickPixelInterval像素距离、tickInterval数值距离
  238. },
  239. tooltip: {
  240. crosshairs: true, //鼠标移动x轴显示虚线
  241. formatter: function() {
  242. return "<b>"+ this.series.name +"</b><br/>"+
  243. this.x +" "+ this.y +"kg";
  244. }
  245. },
  246. legend: {
  247. align: "top",
  248. verticalAlign: "top",
  249. x: 100,
  250. y: 1,
  251. borderWidth: 1,
  252. itemMarginBottom: 5
  253. },
  254. plotOptions: {
  255. series: {
  256. animation: false
  257. },
  258. line: {
  259. lineWidth: 1,
  260. states: {
  261. hover: {
  262. lineWidth: 1
  263. }
  264. },
  265. marker: {
  266. enabled: false,
  267. states: {
  268. hover: {
  269. enabled: false,
  270. radius: 1,
  271. lineWidth: 1
  272. }
  273. }
  274. }
  275. }
  276. },
  277. exporting: {
  278. enabled: false
  279. },
  280. series: [
  281. {
  282. name: "重量",
  283. data: Series
  284. },
  285. {
  286. type: "scatter",
  287. name: "实际重量",
  288. data: Aw,
  289. marker: {
  290. radius: 4
  291. },
  292. color: "#BE77FF"
  293. },
  294. {
  295. name: "设计重量",
  296. step: "right",
  297. data: Ll,
  298. marker: {
  299. radius: 3
  300. },
  301. color: "#EA0000"
  302. }
  303. ]
  304. });
  305. }
  306. </script>
  307. </head>
  308. <body class="easyui-layout">
  309. <div region="center" title="实时监控" style="padding:5px;background:#eee;">
  310. <table cellspacing="1" cellpadding="0" border="0" style="width: 100%;">
  311. <tr>
  312. <td width="33%">
  313. <input type="hidden" id="currentpId" name="currentpId" value="" />
  314. <input type="hidden" id="beginDate" name="beginDate" value="" />
  315. <input type="hidden" id="Dno" name="Dno" value="" />
  316. <input type="hidden" id="ActualWeight" name="ActualWeight" value="" />
  317. <table id="list"></table>
  318. </td>
  319. <td width="33%"><div id="dl1Result"></div></td>
  320. <td width="33%"><div id="dl2Result"></div></td>
  321. </tr>
  322. </table>
  323. </div>
  324. <div region="south" split="true" title="监控图" style="height:320px;">
  325. <table cellspacing="1" cellpadding="0" border="0" style="width: 99%;">
  326. <tr>
  327. <td><div id="container"></div></td>
  328. </tr>
  329. </table>
  330. </div>
  331. </body>
  332. </html>