<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>大数据统计展示大屏</title>
|
<!-- 新 Bootstrap 核心 CSS 文件 -->
|
<link href="../kanban/css/bootstrap.min.css" rel="stylesheet">
|
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
|
<script src="../kanban/js/jquery.min.js"></script>
|
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
|
<script src="../kanban/js/bootstrap.min.js"></script>
|
<link href="../kanban/css/iqc_check.css" rel="stylesheet"/>
|
<link href="../kanban/css/iqctable.css" rel="stylesheet"/>
|
<style>
|
body, html {
|
margin: 0;
|
padding: 0;
|
height: 100%;
|
}
|
|
.container {
|
display: flex;
|
flex-wrap: wrap;
|
height: 80%; /* 使用视口高度使每个部分铺满整个页面 */
|
}
|
|
.box {
|
flex: 1 1 50%;
|
border: 1px solid black;
|
box-sizing: border-box;
|
overflow: hidden; /* 允许滚动 */
|
height: 50%; /* 设置固定高度 */
|
margin-top: 20px;
|
}
|
|
.table {
|
width: 100%;
|
color: white;
|
}
|
|
.table td, .table th {
|
border: 1px solid black;
|
padding: 8px;
|
text-align: center;
|
vertical-align: middle; /* 将表格中的文本垂直居中对齐 */
|
}
|
|
thead {
|
background-color: blue;
|
color: white;
|
}
|
|
tbody tr:nth-child(even) {
|
background-color: #333399;
|
}
|
|
.sticky-header {
|
position: sticky;
|
top: 0;
|
z-index: 1;
|
background-color: blue;
|
color: white;
|
}
|
|
footer {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
/*background-color: #f8f9fa; !* 设置背景色 *!*/
|
padding: 10px; /* 设置内边距 */
|
text-align: center; /* 文本居中 */
|
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 设置阴影 */
|
z-index: 999; /* 设置 z-index 防止被其他元素遮挡 */
|
}
|
</style>
|
</head>
|
<body>
|
<header>装配车间备料齐套看板</header>
|
|
|
<div class="head">
|
|
<div class="logo_w">
|
<span class="logo_word"> 巨发电器 </span>
|
</div>
|
<div class="logo"></div>
|
<div class="weather">
|
<span class="time" id="showTime"></span>
|
</div>
|
|
<script>
|
var t = null;
|
t = setTimeout(time, 1000);//開始运行
|
function time() {
|
clearTimeout(t);//清除定时器
|
dt = new Date();
|
var y = dt.getFullYear();
|
var mt = dt.getMonth() + 1;
|
var day = dt.getDate();
|
var h = dt.getHours();//获取时
|
var m = dt.getMinutes();//获取分
|
var s = dt.getSeconds();//获取秒
|
document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日 " + h + "时" + m + "分" + s + "秒";
|
t = setTimeout(time, 1000); //设定定时器，循环运行
|
}
|
|
</script>
|
</div>
|
<div class="container">
|
<div class="box" id="wlqt3">
|
<table class="table" border="0" cellspacing="0" cellpadding="0">
|
<thead class="sticky-header"> <!-- 添加 sticky-header 类 -->
|
<tr>
|
<th colspan="7">三天备料齐套</th>
|
</tr>
|
<!-- 第一个表格内容 -->
|
<tr>
|
<td>工单号</td>
|
<td>预计开工时间</td>
|
<td>销售订单号</td>
|
<td>通知备料</td>
|
<td>总数</td>
|
<td>未齐数</td>
|
<td>占比</td>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
<div class="box" id="item3">
|
<table class="table">
|
<thead class="sticky-header"> <!-- 添加 sticky-header 类 -->
|
<tr>
|
<th colspan="6">三天未备料齐套的物料明细</th>
|
</tr>
|
<!-- 第二个表格内容 -->
|
<tr>
|
<td>物料编号</td>
|
<td>物料名称</td>
|
<td>物料型号</td>
|
<td>需领数</td>
|
<td>还需领数</td>
|
<td>库存数量</td>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
<div class="box" id="wlqt7">
|
<table class="table">
|
<thead class="sticky-header"> <!-- 添加 sticky-header 类 -->
|
<tr>
|
<th colspan="7">七天备料齐套</th>
|
</tr>
|
<!-- 第一个表格内容 -->
|
<tr>
|
<td>工单号</td>
|
<td>预计开工时间</td>
|
<td>销售订单号</td>
|
<td>通知备料</td>
|
<td>总数</td>
|
<td>未齐数</td>
|
<td>占比</td>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
<div class="box" id="item7">
|
<table class="table">
|
<thead class="sticky-header"> <!-- 添加 sticky-header 类 -->
|
<tr>
|
<th colspan="6">七天未备料齐套的物料明细</th>
|
</tr>
|
<!-- 第二个表格内容 -->
|
<tr>
|
<td>物料编号</td>
|
<td>物料名称</td>
|
<td>物料型号</td>
|
<td>需领数</td>
|
<td>还需领数</td>
|
<td>库存数量</td>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
|
|
<div class="bz">
|
注：“齐套状态”为0的说明还有其它仓库发料不齐
|
</div>
|
<footer>
|
<div class="logo_bottom"></div>
|
宁波广深科技有限公司(技术支持)
|
</footer>
|
<script th:inline="javascript">
|
var context = [[@{/}]];
|
var KANBAN_DATA = [[${KANBAN_DATA}]];
|
//var FLOOR=[[${FLOOR}]];
|
var FLOOR = "";
|
//console.log(KANBAN_DATA)
|
//document.title = '物料齐套看板'+FLOOR+'楼'
|
document.title = '装配车间备料齐套看板'
|
</script>
|
<!-- <script type="text/javascript" src="../kanban/scripts/tablebox.js"></script> -->
|
<script type="text/javascript" src="../kanban/js/echarts.min.js"></script>
|
<script type="text/javascript" src="../kanban/scripts/ZPQT.js"></script>
|
<script>
|
// 监听滚动事件
|
document.addEventListener('DOMContentLoaded', function () {
|
var tables = document.querySelectorAll('.table');
|
tables.forEach(function (table) {
|
var thead = table.querySelector('thead.sticky-header');
|
var tbody = table.querySelector('tbody');
|
|
tbody.addEventListener('scroll', function () {
|
thead.style.transform = 'translateY(' + tbody.scrollTop + 'px)';
|
});
|
});
|
});
|
</script>
|
</body>
|
</html>
|
