217 lines
6.6 KiB
HTML
217 lines
6.6 KiB
HTML
|
<!-- index.html -->
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Table Update Example</title>
|
|||
|
|
<!-- 引入 xlsx 库 -->
|
|||
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
<!-- 添加一个导出按钮 -->
|
|||
|
|
<button onclick="exportToExcel()">导出到Excel</button>
|
|||
|
|
<!-- 添加一个清空缓存的按钮 -->
|
|||
|
|
<button onclick="clearLocalStorage()">清空缓存</button>
|
|||
|
|
|
|||
|
|
<select id="scheduleFilter" onchange="filterTable()">
|
|||
|
|
<option value="">全部</option>
|
|||
|
|
<option value="是">是</option>
|
|||
|
|
<option value="否">否</option>
|
|||
|
|
</select>
|
|||
|
|
<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>
|
|||
|
|
const socket = io();
|
|||
|
|
let allRows = [];
|
|||
|
|
window.addEventListener('load', () => {
|
|||
|
|
const storedAllRows = JSON.parse(localStorage.getItem('allRows'));
|
|||
|
|
const storedScheduleFilter = localStorage.getItem('scheduleFilter');
|
|||
|
|
|
|||
|
|
if (storedAllRows && storedAllRows.length > 0) {
|
|||
|
|
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
|
|||
|
|
|
|||
|
|
// 清空现有的表格行，防止重复加载
|
|||
|
|
while (tableBody.firstChild) {
|
|||
|
|
tableBody.removeChild(tableBody.firstChild);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 将存储的行数据插入到表格中
|
|||
|
|
storedAllRows.forEach(rowData => {
|
|||
|
|
const row = tableBody.insertRow();
|
|||
|
|
|
|||
|
|
// 假设rowData是一个数组，其中包含每个单元格的内容
|
|||
|
|
rowData.forEach(cellData => {
|
|||
|
|
const cell = row.insertCell();
|
|||
|
|
cell.textContent = cellData;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (storedScheduleFilter) {
|
|||
|
|
document.getElementById('scheduleFilter').value = storedScheduleFilter;
|
|||
|
|
filterTable(); // 调用筛选函数应用筛选条件
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
socket.on('update_table', function(data) {
|
|||
|
|
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
|
|||
|
|
|
|||
|
|
// 清空现有的数据行
|
|||
|
|
//while (tableBody.firstChild) {
|
|||
|
|
// tableBody.removeChild(tableBody.firstChild);
|
|||
|
|
// }
|
|||
|
|
|
|||
|
|
// 清空allRows数组，准备接受新数据
|
|||
|
|
//allRows = [];
|
|||
|
|
const now = new Date();
|
|||
|
|
// 保存原始行数据并生成新的行
|
|||
|
|
data['未及格成员'].forEach(function(rowData) {
|
|||
|
|
const row = tableBody.insertRow();
|
|||
|
|
allRows.push(row); // 添加新行到allRows数组
|
|||
|
|
|
|||
|
|
// 添加时间列
|
|||
|
|
const timeCell = row.insertCell(0); // 插入到第一列
|
|||
|
|
timeCell.textContent = now.toLocaleString();
|
|||
|
|
|
|||
|
|
// 添加其他数据列
|
|||
|
|
rowData.forEach(function(cellData) {
|
|||
|
|
const cell = row.insertCell();
|
|||
|
|
cell.textContent = cellData;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 更新存储在localStorage中的所有行数据
|
|||
|
|
localStorage.setItem('allRows', JSON.stringify(allRows.map(row => Array.from(row.cells).map(cell => cell.textContent))));
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 连接事件
|
|||
|
|
socket.on('connect', function() {
|
|||
|
|
console.log('Connected to server');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function filterTable() {
|
|||
|
|
const selectElement = document.getElementById('scheduleFilter');
|
|||
|
|
const selectedValue = selectElement.value;
|
|||
|
|
const tableBody = document.getElementById('data-table').getElementsByTagName('tbody')[0];
|
|||
|
|
const rows = Array.from(tableBody.getElementsByTagName('tr'));
|
|||
|
|
|
|||
|
|
rows.forEach(row => {
|
|||
|
|
const isScheduledCell = row.cells[4]; // 假定“是否排班”是第5列
|
|||
|
|
if (selectedValue === '' || isScheduledCell.textContent === selectedValue) {
|
|||
|
|
row.style.display = '';
|
|||
|
|
} else {
|
|||
|
|
row.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 导出到Excel的函数
|
|||
|
|
function exportToExcel() {
|
|||
|
|
// 获取表格
|
|||
|
|
var table = document.getElementById('data-table');
|
|||
|
|
|
|||
|
|
// 创建工作表
|
|||
|
|
var ws = XLSX.utils.table_to_sheet(table);
|
|||
|
|
|
|||
|
|
// 创建工作簿
|
|||
|
|
var wb = XLSX.utils.book_new();
|
|||
|
|
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
|
|||
|
|
|
|||
|
|
// 将工作簿输出为二进制格式
|
|||
|
|
var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
|
|||
|
|
|
|||
|
|
// 将二进制数据转换为Blob对象
|
|||
|
|
var blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
|
|||
|
|
|
|||
|
|
// 创建下载链接
|
|||
|
|
var link = document.createElement('a');
|
|||
|
|
link.href = URL.createObjectURL(blob);
|
|||
|
|
link.download = 'exported_data.xlsx';
|
|||
|
|
link.click();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 辅助函数，用于将二进制字符串转换为ArrayBuffer
|
|||
|
|
function s2ab(s) {
|
|||
|
|
var buf = new ArrayBuffer(s.length);
|
|||
|
|
var view = new Uint8Array(buf);
|
|||
|
|
for (var i=0; i<s.length; i++) {
|
|||
|
|
view[i] = s.charCodeAt(i) & 0xFF;
|
|||
|
|
}
|
|||
|
|
return buf;
|
|||
|
|
}
|
|||
|
|
// 清除本地缓存的函数
|
|||
|
|
function clearLocalStorage() {
|
|||
|
|
localStorage.removeItem('allRows');
|
|||
|
|
localStorage.removeItem('scheduleFilter');
|
|||
|
|
location.reload(); // 刷新页面以重新加载初始状态
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|