<!-- 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>