<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="webtest.aspx.cs" Inherits="Dashboard.webtest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style>
.tablebox
{
height: 100%; /*overflow: hidden;*/
position: relative;
100%;
margin: -10px auto;
background-color: rgba(6,26,103,1);
}
.tbl-header
{
100%;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
.tbl-body
{
100%;
position: absolute;
top: 0;
left: 0;
}
.tablebox table
{
100%;
}
.tablebox table th
{
font-size: 24px;
color: white;
line-height: 45px;
text-align: center;
}
.tablebox table td
{
font-size: 24px;
color: black;
line-height: 45px;
text-align: center;
}
.tablebox table tr th
{
background-color: #1f1f9c;
cursor: pointer;
}
.tablebox table tr td
{
background-color: transparent;
}
.tbl-body tr:nth-child(even) td, .tbl-body1 tr:nth-child(even) td
{
background-color: rgba(31, 31, 156, .5);
}
.tablebox table tr td span, .tablebox table tr td span
{
font-size: 24px;
}
</style>
<script type="text/javascript" src="../jquery-easyui-1.5.5.2/jquery.min.js"></script>
</head>
<body>
<div class="tablebox">
<div class="tbl-header">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th align="center">
产品名称
</th>
<th align="center">
工单号码
</th>
<th>
工单数量
</th>
<th align="center">
工序名称
</th>
<th>
已通过良品数
</th>
<th>
不良数量
</th>
<th>
维修数量
</th>
<th>
完成率
</th>
</tr>
</thead>
<tbody style="opacity: 0;">
</tbody>
</table>
</div>
<div class="tbl-body">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th align="center">
产品名称
</th>
<th align="center">
工单号码
</th>
<th>
工单数量
</th>
<th align="center">
工序名称
</th>
<th>
已通过良品数
</th>
<th>
不良数量
</th>
<th>
维修数量
</th>
<th>
完成率
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
setInterval(function () {
location.reload();
}, 6000000);
});
var MyMarhq = '';
clearInterval(MyMarhq);
$('.tbl-body tbody').empty();
$('.tbl-header tbody').empty();
var str = '';
var Items = "";
$.ajax({
type: "post",
cache: false,
async: false,
url: "webtest.aspx?Oper=load_list&key=" + Math.random(),
dataType: "json",
success: function (data) {
Items = data;
}
});
$.each(Items, function (i, item) {
str = '<tr>' +
'<td>' + item.PRODUCT_NAME + '</td>' +
'<td>' + item.LOT_NAME + '</td>' +
'<td>' + item.QUANTITY + '</td>' +
'<td>' + item.STEP_NAME + '</td>' +
'<td>' + item.PASS_QTY + '</td>' +
'<td>' + item.FAIL_QTY + '</td>' +
'<td>' + item.REPAIR_QTY + '</td>' +
'<td>' + item.RATE + '%</td>' +
'</tr>'
$('.tbl-body tbody').append(str);
$('.tbl-header tbody').append(str);
});
if (Items.length > 10) {
$('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
$('.tbl-body').css('top', '0');
var tblTop = 0;
var speedhq = 50; // 数值越大越慢
var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Items.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body').css('top', tblTop + 'px');
}
MyMarhq = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$(".tbl-header tbody").hover(function () {
clearInterval(MyMarhq);
}, function () {
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq, speedhq);
})
}
</script>
</body>
</html>