109 lines
3.0 KiB
HTML
109 lines
3.0 KiB
HTML
|
<!-- index.html -->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Table Update Example</title>
|
||
|
|
</head>
|
||
|
|
<style>
|
||
|
|
/* 页面样式 */
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 表格样式 */
|
||
|
|
#data-table {
|
||
|
|
width: 95%; /* 减少一些边距 */
|
||
|
|
border-collapse: collapse;
|
||
|
|
border: 1px solid black;
|
||
|
|
margin: auto;
|
||
|
|
page-break-inside: avoid; /* 防止在表格内部分页 */
|
||
|
|
}
|
||
|
|
#data-table th,
|
||
|
|
#data-table td {
|
||
|
|
border: 1px solid black;
|
||
|
|
padding: 8px;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
#data-table th {
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 打印样式 */
|
||
|
|
@media print {
|
||
|
|
body, #data-table {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#data-table {
|
||
|
|
width: 297mm; /* A4 paper width in landscape mode */
|
||
|
|
height: auto;
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow-x: auto; /* 滚动条只在需要时出现 */
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 打印按钮样式 */
|
||
|
|
button {
|
||
|
|
display: block;
|
||
|
|
margin: 1em auto;
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<body>
|
||
|
|
<button onclick="window.print()">打印数据</button>
|
||
|
|
<table id="data-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>时间</th><th> 姓名</th> <th> 时段 </th><th> 上线时间 </th><th> 是否排班 </th><th> 工作状态 </th><th> 全天在线时长</th> <th> 全天背单时长 </th><th> 全天完单量 </th><th> 时段内在线时长 </th><th> 时段内背单时长 </th><th>
|
||
|
|
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<!-- 动态生成的数据行 -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// client.js
|
||
|
|
const socket = io();
|
||
|
|
|
||
|
|
// 监听 'update_table' 事件
|
||
|
|
socket.on('update_table', function(data) {
|
||
|
|
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
|
||
|
|
|
||
|
|
// 获取当前时间
|
||
|
|
const now = new Date();
|
||
|
|
const timeString = now.toLocaleString(); // 或者使用其他格式化方式
|
||
|
|
|
||
|
|
// 生成新的行，并为每行添加当前时间
|
||
|
|
data['未及格成员'].forEach(function(rowData) {
|
||
|
|
const row = tableBody.insertRow();
|
||
|
|
|
||
|
|
// 添加时间列
|
||
|
|
const timeCell = row.insertCell(0); // 插入到第一列
|
||
|
|
timeCell.textContent = timeString;
|
||
|
|
|
||
|
|
// 添加其他数据列
|
||
|
|
rowData.forEach(function(cellData) {
|
||
|
|
const cell = row.insertCell();
|
||
|
|
cell.textContent = cellData;
|
||
|
|
});
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
// 连接事件
|
||
|
|
socket.on('connect', function() {
|
||
|
|
console.log('Connected to server');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|