123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351 |
- <%@ page contentType="text/html; charset=utf-8" session="false" %>
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
- <head>
- <title>我的工作台</title>
- <%@ include file="../common/header.jsp" %>
- <script type="text/javascript" src="${contextPath}/js/highcharts.js"></script>
- <script type="text/javascript" src="${contextPath}/js/exporting.js"></script>
- <link type="text/css" rel="stylesheet" href="${contextPath}/css/themes/easyui.css" />
- <script type="text/javascript" src="${contextPath }/js/jquery.easyui.min.js"></script>
- <script type="text/javascript">
- var mydata,minWeight,xStr,Series,Aw,Ll,chart,chartHeight,chartWidth,loadcount=0,panelCHeight=0,panelSHeight=0,InterId;
- $(document).ready( function() {
- loadList(); //加载jqgrid
- $("#list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#list").jqGrid("setSelection",1);
-
- $("body").layout("panel","south").panel({
- onClose: function(){
- panelC = $("body").layout("panel","center").panel();
- $("#list").jqGrid("setGridWidth",$(window).width()*0.33);
- $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#list").jqGrid("setGridHeight",panelC.height()-60);
- $("#p1list").jqGrid("setGridHeight",panelC.height()-80);
- $("#p2list").jqGrid("setGridHeight",panelC.height()-80);
- },
- onOpen: function(){
- panelC = $("body").layout("panel","center").panel();
- panelCHeight = panelC.height();
- panelSHeight = $(window).height() - panelC.height();
- chartWidth = $(window).width()*0.99;
- chartHeight = panelSHeight*0.75;
- loadChart(); //加载点线图
- },
- onResize: function(){
- panelS = $("body").layout("panel","south").panel();
- panelCHeight = $(window).height() - panelS.height();
- $("#list").jqGrid("setGridHeight",panelCHeight-110);
- $("#p1list").jqGrid("setGridHeight",panelCHeight-130);
- $("#p2list").jqGrid("setGridHeight",panelCHeight-130);
- $("#list").jqGrid("setGridWidth",$(window).width()*0.33);
- $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
- chartWidth = $(window).width()*0.99;
- chartHeight = panelS.height()*0.99;
- loadChart(); //加载点线图
- }
- });
-
- });
-
- $(window).resize(function(){
- panelS = $("body").layout("panel","south").panel();
- $("#list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
- chartWidth = $(window).width()*0.99;
- chartHeight = panelS.height()*0.9;
- loadChart(); //加载点线图
- });
-
- function showloadChart(){
- var currentpId = $("#currentpId").val();
- var Dno = $("#Dno").val();
- var beginDate = $("#beginDate").val();
- var ActualWeight = $("#ActualWeight").val();
- //获取点线图的数据
- $.ajax({
- async: false,
- type: "POST",
- dataType: "json", //返回类型json
- data: "beginDate="+beginDate+"&SrcAddr="+Dno+"¤tpId="+currentpId+"&ActualWeight="+ActualWeight,
- url: "${contextPath }/admin/statistics/rdxlist.html",
- error: function(){alert("系统错误");},
- success: function(json){
- if(json.status == "success"){
- xStr = json.MTime;
- Series = json.Weight;
- Aw = json.AW;
- Ll = json.Ll;
- }
- }
- });
- $("#p1list").clearGridData();
- loadR1List();
- $("#p2list").clearGridData();
- loadR2List();
- loadChart(); //加载点线图
- }
-
- //jqgrid初始化
- function loadList(){
- jQuery("#list").jqGrid({
- datatype: "local", //从服务器端返回的数据类型,(表格期望接收的数据类型)。可选类型:xml,xmlstring,json,local,function
- height: 150, //高度
- colNames:["主键","TMR","执行计划", "开始时间", "计划日期", "DataCaptureNo","ActualWeight"], //列名
- colModel:[
- {
- name: "ID",
- index: "ID",
- align: "center",
- sorttype: "string",
- hidden: true
- },
- {
- name: "TNAME",
- index: "TNAME",
- align: "center",
- sorttype: "string"
- },
- {
- name: "ProjName",
- index: "ProjName",
- align: "center",
- sorttype: "string"
- },
- {
- name: "InTime",
- index: "InTime",
- width: 300,
- align: "center",
- sorttype: "string"
- },
- {
- name: "Mydate",
- index: "Mydate",
- align: "center",
- sorttype: "string"
- },
- {
- name: "DataCaptureNo",
- index: "DataCaptureNo",
- align: "center",
- sorttype: "string",
- hidden: true
- },
- {
- name: "ActualWeight",
- index: "ActualWeight",
- align: "center",
- sorttype: "string",
- hidden: true
- }
- ],
-
- onSelectRow: function(rowid){
-
- window.clearInterval(InterId);//取消定时
-
- var selId = $("#list").jqGrid("getGridParam","selrow"); //获取当前选中行号
- var rowData = $("#list").jqGrid("getRowData",selId); //获取当前选中行真实对象
- $("#currentpId").val(rowData.ID);
- $("#Dno").val(rowData.DataCaptureNo);
- $("#beginDate").val(rowData.InTime);
- $("#ActualWeight").val(rowData.ActualWeight);
- $("#dl1Result").load("${contextPath }/admin/statistics/realtime1.html");
- $("#dl2Result").load("${contextPath }/admin/statistics/realtime2.html");
-
- panelS = $("body").layout("panel","south").panel();
- panelCHeight = $(window).height() - panelS.height();
- $("#list").jqGrid("setGridHeight",panelCHeight-110);
- $("#p1list").jqGrid("setGridHeight",panelCHeight-130);
- $("#p2list").jqGrid("setGridHeight",panelCHeight-130);
- $("#list").jqGrid("setGridWidth",$(window).width()*0.33);
- $("#p1list").jqGrid("setGridWidth",$(window).width()*0.32);
- $("#p2list").jqGrid("setGridWidth",$(window).width()*0.32);
- chartWidth = $(window).width()*0.99;
- chartHeight = panelS.height()*0.9;
-
- //获取点线图的数据
- $.ajax({
- async: false,
- type: "POST",
- dataType: "json", //返回类型json
- data: "beginDate="+rowData.InTime+"&SrcAddr="+rowData.DataCaptureNo+"¤tpId="+rowData.ID+"&ActualWeight="+rowData.ActualWeight,
- url: "${contextPath }/admin/statistics/rdxlist.html",
- error: function(){alert("系统错误");},
- success: function(json){
- if(json.status == "success"){
- minWeight = json.minWeight;
- xStr = json.MTime;
- Series = json.Weight;
- Aw = json.AW;
- Ll = json.Ll;
- }
- }
- });
- loadChart(); //加载点线图
- InterId = setInterval("showloadChart()","10000");//设置定时器,每10s跳一次
- },
- autowidth: true, //自动调节宽度
- rowNum: 1000, //每页显示条数
- altRows: true, //设置表格是否允许行交替变色值
- altclass:"tdbgmouseover" //自定义隔行变色的样式
-
- });
-
- //获取数据集
- mydata = getLists();
-
- if(mydata!=null){
- for(var i=0;i<=mydata.length;i++){
- jQuery("#list").jqGrid("addRowData",i+1,mydata[i]);
- }
- }
-
-
- }
-
- //获取服务器数据
- function getLists(){
- $.ajax({
- async: false,
- type: "POST",
- dataType: "json", //返回类型json
- url: "${contextPath }/admin/statistics/realtimelist.html",
- error: function(){alert("系统错误");},
- success: function(json){
- mydata = json;
- }
- });
- return mydata;
- }
-
- //Chart初始化
- function loadChart(){
- chart = new Highcharts.Chart({
- chart: {
- backgroundColor:"#FFFFEF",
- animation: false,
- renderTo: "container",
- type: "line",
- zoomType: "x,y",
- height: chartHeight,
- width: chartWidth
- },
- title: {
- text: ""
- },
- xAxis: {
- categories: xStr,
- labels: {
- step: 20
- }
- },
- yAxis: {
- title: {
- text: "重量(kg)"
- },
- min: minWeight,
- tickInterval: 1000 //坐标轴刻度间距:tickPixelInterval像素距离、tickInterval数值距离
- },
- tooltip: {
- crosshairs: true, //鼠标移动x轴显示虚线
- formatter: function() {
- return "<b>"+ this.series.name +"</b><br/>"+
- this.x +" "+ this.y +"kg";
- }
- },
- legend: {
- align: "top",
- verticalAlign: "top",
- x: 100,
- y: 1,
- borderWidth: 1,
- itemMarginBottom: 5
- },
- plotOptions: {
- series: {
- animation: false
- },
- line: {
- lineWidth: 1,
- states: {
- hover: {
- lineWidth: 1
- }
- },
- marker: {
- enabled: false,
- states: {
- hover: {
- enabled: false,
- radius: 1,
- lineWidth: 1
- }
- }
- }
- }
- },
- exporting: {
- enabled: false
- },
- series: [
- {
- name: "重量",
- data: Series
- },
- {
- type: "scatter",
- name: "实际重量",
- data: Aw,
- marker: {
- radius: 4
- },
- color: "#BE77FF"
- },
- {
- name: "设计重量",
- step: "right",
- data: Ll,
- marker: {
- radius: 3
- },
- color: "#EA0000"
- }
- ]
- });
- }
- </script>
- </head>
- <body class="easyui-layout">
- <div region="center" title="实时监控" style="padding:5px;background:#eee;">
- <table cellspacing="1" cellpadding="0" border="0" style="width: 100%;">
- <tr>
- <td width="33%">
- <input type="hidden" id="currentpId" name="currentpId" value="" />
- <input type="hidden" id="beginDate" name="beginDate" value="" />
- <input type="hidden" id="Dno" name="Dno" value="" />
- <input type="hidden" id="ActualWeight" name="ActualWeight" value="" />
- <table id="list"></table>
- </td>
- <td width="33%"><div id="dl1Result"></div></td>
- <td width="33%"><div id="dl2Result"></div></td>
- </tr>
- </table>
- </div>
- <div region="south" split="true" title="监控图" style="height:320px;">
- <table cellspacing="1" cellpadding="0" border="0" style="width: 99%;">
- <tr>
- <td><div id="container"></div></td>
- </tr>
- </table>
- </div>
- </body>
- </html>
|