<!DOCTYPE html>
|
<html lang="zh-cn">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>GJ8-08</title>
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
|
<link rel="stylesheet" type="text/css" href="css/index.css">
|
<script src="js/jquery.min.js"></script>
|
<script src='js/echarts.min.js'></script>
|
<script src="js/bootstrap.min.js"></script>
|
<script src='js/bootstrap-table.min.js'></script>
|
<script src='js/bootstrap-table-zh-CN.min.js'></script>
|
<script src="js/jquery.SuperSlide.2.1.3.js"></script>
|
<script src='js/template.js'></script>
|
<script src="js/jquery.qrcode.min.js"></script>
|
<style>
|
body {
|
background: #000000 url(img/DL-Top.png) no-repeat !important;
|
background-size: cover;
|
width: 100%;
|
height: 100%;
|
}
|
|
#main-div {
|
padding-left: 20px;
|
padding-right: 20px;
|
padding-top: 30px;
|
}
|
|
#main-div .title_s {
|
color: #09d1ea;
|
font-size: 80px;
|
margin-bottom: 55px;
|
|
}
|
|
#main {
|
border: 3px solid #080c1c;
|
border-radius: 5px;
|
margin-bottom: 25px;
|
}
|
|
.flex {
|
display: flex;
|
display: -webkit-flex;
|
justify-content: space-between;
|
flex-direction: row;
|
flex-wrap: wrap;
|
}
|
|
.flex .flex_item {
|
width: 16%;
|
height: 210px;
|
border: 3px solid #080c1c;
|
border-radius: 5px;
|
margin-bottom: 10px;
|
background: url(img/3-3.png) #02040d no-repeat center;
|
position: relative;
|
|
}
|
|
.flex span {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
margin-left: -25px;
|
margin-top: 18px;
|
font-size: 18px;
|
}
|
|
.flex p {
|
|
margin-bottom: 5px;
|
color: #a5a5a7;
|
position: absolute;
|
bottom: 0;
|
|
width: 100%
|
}
|
</style>
|
<script type="text/javascript">
|
var interval;//计时器
|
$(function () {
|
resresh();
|
// 定时器
|
interval = setInterval(function () {
|
resresh();
|
}, 120000);
|
})
|
function resresh() {
|
$.ajax({
|
url: "http://172.16.72.3:86/DaLian/FourData",
|
dataType: "JSON",
|
async: false,//使用同步的方式,true为异步方式
|
type: "POST",
|
success: function (data) {
|
var ZZqty = 0;
|
for (var i = 0; i < data.dt0.length; i++) {
|
ZZqty += parseFloat(data.dt0[i].Value);
|
}
|
$("#zq").html(parseFloat(data.dt[0].COUNTIME).toFixed(2));
|
$("#io").html(parseFloat(data.dt[0].PEOPLELV).toFixed(2) + "%");
|
$("#jh").html(parseFloat(data.dt[0].DEVICELV).toFixed(2) + "%");
|
$("#sb").html(parseFloat(data.dt[0].DIFFTIME).toFixed(2) + "%");
|
if (ZZqty == "0" || data.dt[0].SPOTRATE == "0") {
|
$("#zz").html(0);
|
}
|
else {
|
$("#zz").html(parseFloat(ZZqty / data.dt[0].SPOTRATE).toFixed(2));
|
}
|
$("#pj").html(parseFloat(data.dt[0].SPOTRATE).toFixed(0));
|
},
|
error: function (data) {
|
|
}
|
})
|
}
|
</script>
|
</head>
|
|
<body>
|
<div id='main-div'>
|
<p class='title_s'>数字化工厂驾驶舱</p>
|
<div class='flex'>
|
<div class='flex_item'>
|
<span id="zq"></span>
|
<p>生产周期/小时</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="io"></span>
|
<p>投入产出率</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="jh"></span>
|
<p>计划达成率</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="sb"></span>
|
<p>设备OEE</p>
|
</div>
|
|
<div class='flex_item'>
|
<span id="zz"></span>
|
<p>在制品天数</p>
|
</div>
|
|
|
<div class='flex_item'>
|
<span id="pj"></span>
|
<p>平均日产量</p>
|
</div>
|
|
</div>
|
</div>
|
</body>
|
|
</html>
|
