<%@ page language="java" contentType="text/html; charset=UTF-8"
|
pageEncoding="UTF-8"%>
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<title>成型机监控-ZL26C</title>
|
<link rel="shortcut icon" href="${pageContext.request.contextPath}/img/favicon.ico" type="image/x-icon">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="keywords" content="上海兰宝数据采集系统,卷接包数据采集" />
|
<meta name="author" content="leejean" />
|
<jsp:include page="../../initlib/initAll.jsp"></jsp:include>
|
<style type="text/css">
|
*{font-family: "Microsoft YaHei","微软雅黑","宋体",Arial;list-style-type :none;padding:0px;margin:0px;}
|
.outIn-tab{margin-left:30px;}
|
.outIn-tab tr{height:25px;}
|
.outIn-title{width: 140px;text-align: right;font-weight: bold;color: #257cbe;font-size: 14px;float: left;}
|
.outIn-value{color: blue;font-weight: bold;float: left;}
|
#error-tab tr{height:30px;}
|
.error-flag{width:20px;height:20px;display: block;margin-top: 7px;background:url(${pageContext.request.contextPath}/pms/isp/img/red.gif) no-repeat;background-size: 100%;}
|
.normal-flag{width:20px;height:20px;display: block; background:url(${pageContext.request.contextPath}/pms/isp/img/green.gif) no-repeat;background-size: 100%;}
|
.craft-tab tr{height:25px;}
|
.craft-title{float: left;font-size: 14px;width:100px;text-align: right;font-weight: bold;color: #257cbe;}
|
.craft-value{float: left;font-size: 14px;width:110px;text-align: left;font-weight: bold;color: blue;}
|
.info_box{
|
width: 100%;
|
height:190px;
|
overflow: hidden;
|
padding-bottom: 10px;
|
min-width: 1315px;
|
}
|
#tt,.tt_title{min-width:1330px;}
|
h1 {
|
margin: 10px 0;
|
font-size: 16px;
|
font-weight: bold;
|
text-align: center;
|
line-height: 26px;
|
border: 1px solid #95B8E7;
|
border-bottom: 1px solid #008597;
|
background: linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -o-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -ms-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -moz-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -webkit-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
color: #257cbe;
|
border-radius: 4px 4px 0px 0px;
|
margin-bottom: 2px;
|
}
|
.tt_title{
|
margin: 10px 0;
|
font-size: 18px;
|
font-weight: bold;
|
text-align: center;
|
line-height: 38px;
|
border: 1px solid #95B8E7;
|
border-bottom: 2px solid #008597;
|
background-color: #E0ECFF;
|
background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
|
background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
|
background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
|
background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);
|
background-repeat: repeat-x;
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
|
border-color: #95B8E7;
|
color: #299DD3;
|
border-radius: 4px 4px 0px 0px;
|
margin-bottom: 2px;
|
}
|
.zb45{
|
float: left;
|
border: 1px solid #95B8E7;
|
margin-top: 10px;
|
font-size: 14px;
|
font-weight: bold;
|
padding-top: 8px;
|
border-radius: 4px;
|
background: radial-gradient(center , circle cover , rgb(251, 253, 253) , rgb(211, 236, 236) 95%);
|
background: -o-radial-gradient(center , circle cover , rgb(251, 253, 253) , rgb(211, 236, 236) 95%);
|
background: -ms-radial-gradient(center , circle cover , rgb(251, 253, 253) , rgb(211, 236, 236) 95%);
|
background: -moz-radial-gradient(center , circle cover , rgb(251, 253, 253) , rgb(211, 236, 236) 95%);
|
background: -webkit-radial-gradient(center , circle cover , rgb(251, 253, 253) , rgb(211, 236, 236) 95%);
|
color: #257cbe;
|
width: 44%;
|
min-width:596px;
|
height: 170px;
|
}
|
.info-div {
|
float: left;
|
border: 1px solid #95B8E7;
|
width:18%;
|
min-width: 240px;
|
margin-left: 15px;
|
height: 170px;
|
margin-top: 10px;
|
font-size: 14px;
|
font-weight: bold;
|
padding-top: 8px;
|
border-radius: 4px;
|
background: linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -o-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -ms-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -moz-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
background: -webkit-linear-gradient(top , rgb(222, 244, 250) 8% , rgb(198, 234, 246) 94%);
|
color: #257cbe;
|
}
|
.info-tab{font-size:14px;width:250px;margin-left: 20px;}
|
.info-tab tr{height:25px;}
|
.tab-val{color:blue;width:65px;}
|
.tab-tt{width:90px;font-weight:bold;}
|
.info_gy{width: 34.5%;min-width: 458px;float: left;margin-left: 15px;margin-top: 0px;}
|
.outIn-tab {padding-left: 8px;border-radius: 4px;border: 1px solid #95B8E7;height: 148px;margin: 0;}
|
</style>
|
<script type="text/javascript">
|
function getArgsFromHref(sArgName){
|
var sHref = window.location.href;
|
//CuPlayer.com提示：测试数据
|
//实际情况是用window.location.href得到URL
|
var args = sHref.split("?");
|
var retval = "";
|
if(args[0] == sHref) /*参数为空*/
|
{
|
return retval; /*CuPlayer.com提示：无需做任何处理*/
|
}
|
var str = args[1];
|
args = str.split("&");
|
for(var i = 0; i < args.length; i++ )
|
{
|
str = args[i];
|
var arg = str.split("=");
|
if(arg.length <= 1) continue;
|
if(arg[0] == sArgName) retval = arg[1];
|
}
|
return retval;
|
}
|
var code = getArgsFromHref("code");
|
function loadData(){
|
var error={"width":"20px","height":"20px","display":" block","margin-top":" 7px","background":"url(${pageContext.request.contextPath}/pms/isp/img/red.gif) no-repeat","background-size":" 100%"}
|
var normal={"width":"20px","height":"20px","display":" block","margin-top":" 7px","background":"url(${pageContext.request.contextPath}/pms/isp/img/green.gif) no-repeat","background-size":" 100%"}
|
//刷新包装机
|
//$.post("${pageContext.request.contextPath}/isp/getFormatted.do",{"code":code},function(json){
|
$.post("${pageContext.request.contextPath}/isp/getAllData.do",{"machineType":3,"type":1},function(datas){
|
if(datas.success){
|
datas=datas.msg;
|
datas=$.parseJSON(datas);
|
console.info(datas.length);
|
for(var i=0;i<datas.length;i++){
|
var json = datas[i];
|
var code2= json.equipmentCode;
|
if(code2==code){
|
var data = json.allData;
|
var online = json.online;
|
if(online==1){
|
$("#bzj-yxzt").html("网络正常");
|
}else{
|
$("#bzj-yxzt").html("网络断开");
|
}
|
//车速
|
$("#bzj-cur-speech").html(json.speed);
|
//产量
|
$("#bzj-clsj").html(json.qty);
|
//运行时间
|
$("#bzj-run-time").html((json.runTime/60).toFixed(2));
|
//停机时间
|
$("#bzj-stop-time").html((json.stopTime/60).toFixed(2));
|
//停机次数
|
$("#bzj-stop-times").html(json.stopTimes);
|
//剔除
|
$("#bzj-tc").html(json.badQty);
|
//盘纸消耗
|
$("#bzj-pzxh").html(json.panzhiVal);
|
}//--if
|
}}
|
},"JSON");
|
}
|
window.setInterval("loadData()",6000);
|
</script>
|
|
</head>
|
<body>
|
<div class="tt_title"> 实时监控</div>
|
<div id="tt" style="width:100%;height:100%;" >
|
<div class="info_box" >
|
<div class="zb45">
|
<img src="${pageContext.request.contextPath}/pms/isp/img/filter_det.png" style="width:538px;height:169px;margin: 0 auto;display: block;"/>
|
</div>
|
<div class="info-div">
|
<table class="info-tab">
|
<tr>
|
<td class="tab-tt">运行状态：</td>
|
<td id="bzj-yxzt" colspan="2"></td>
|
</tr>
|
<tr>
|
<td class="tab-tt">车 速：</td>
|
<td id="bzj-cur-speech" class="tab-val">0</td>
|
<td class="unit">包/分</td>
|
</tr>
|
<tr>
|
<td class="tab-tt">运行时间：</td>
|
<td id="bzj-run-time" class="tab-val">0</td>
|
<td class="unit">分钟</td>
|
</tr>
|
<tr>
|
<td class="tab-tt">停机次数：</td>
|
<td id="bzj-stop-times" class="tab-val">0</td>
|
<td class="unit">次</td>
|
</tr>
|
<tr>
|
<td class="tab-tt">停机时间：</td>
|
<td id="bzj-stop-time" class="tab-val">0</td>
|
<td class="unit">分钟</td>
|
</tr>
|
</table>
|
</div>
|
<%-- <div class="info_gy">
|
<h1>工艺数据</h1>
|
<div class="outIn-tab">
|
<table style="margin-top:15px;line-height: 35px;" class="craft-tab">
|
<tr>
|
<td class="craft-title">工艺数据1：</td><td class="craft-value"><span>10</span>单位</td>
|
<td class="craft-title">工艺数据2：</td><td class="craft-value"><span>10</span>包</td>
|
<td class="craft-title">工艺数据3：</td><td class="craft-value"><span>10</span>单位</td>
|
<td class="craft-title">工艺数据4：</td><td class="craft-value"><span>10</span>单位</td>
|
<td class="craft-title">工艺数据5：</td><td class="craft-value"><span>10</span>单位</td>
|
</tr>
|
</table>
|
</div>
|
<div style="clear:both;"></div>
|
</div>
|
<div style="clear:both;"></div> --%>
|
</div>
|
<div>
|
<h1>产耗数据</h1>
|
<div style="padding: 10px 0px 0px 30px;line-height:53px;">
|
<ul >
|
<li style="border-bottom: 1px solid #008597;width: 98%;">
|
<div colspan="5" style="text-align:left;font-size:16px;font-weight:bold;color:green;float: left;">产量</div>
|
<div class="outIn-title">实时产量：</div><div class="outIn-value"><span id="bzj-clsj">0</span>万支</div>
|
<div class="outIn-title">实时剔除：</div><div class="outIn-value"><span id="bzj-tc">0</span>支</div>
|
<div class="outIn-title">盘纸消耗：</div><div class="outIn-value"><span id="bzj-pzxh">0</span>米</div>
|
</li>
|
|
<div style="clear:both;"></div>
|
</ul>
|
</div>
|
</div>
|
|
</div>
|
|
</body>
|
</html>
|
