57 lines
1.7 KiB
HTML
57 lines
1.7 KiB
HTML
|
<!-- index.html -->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Table Update Example</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<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>
|