<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>桶盖管理系统（增强版）</title>
<!-- 引入xlsx库 -->
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
<style>
:root {
--primary-color: #3498db;
--danger-color: #e74c3c;
--success-color: #2ecc71;
--neutral-color: #f8f9fa;
--border-color: #ddd;
}
* {
box-sizing: border-box;
}
body {
font-family: '微软雅黑', Arial, sans-serif;
margin: 0;
padding: 1rem;
background-color: var(--neutral-color);
min-height: 100vh;
}
.container {
background: white;
padding: 1.5rem;
border-radius: 0.75rem;
box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.05);
max-width: 100%;
margin: 0 auto;
}
.record-form {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
[url=home.php?mod=space&uid=945662]@media[/url] (min-width: 640px) {
.record-form {
grid-template-columns: repeat(5, 1fr);
}
}
input, select {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color);
border-radius: 0.25rem;
font-size: 0.9rem;
width: 100%;
}
button {
background: var(--primary-color);
color: white;
padding: 0.5rem 0.75rem;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.9rem;
width: 100%;
}
@media (min-width: 640px) {
button {
width: auto;
}
}
button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
}
.records-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
overflow-x: auto;
display: block;
}
@media (min-width: 640px) {
.records-table {
display: table;
}
}
.records-table th,
.records-table td {
padding: 0.75rem;
border: 1px solid #eee;
text-align: center;
white-space: nowrap;
}
.records-table th {
background-color: var(--neutral-color);
font-weight: 600;
}
.summary {
background: var(--neutral-color);
padding: 1rem;
border-radius: 0.5rem;
margin-top: 1.5rem;
}
.negative {
color: var(--danger-color);
font-weight: bold;
}
.export-btn {
margin-top: 1rem;
}
</style>
</head>
<body>
<div class="container">
<h1>时序桶盖管理系统</h1>
<!-- 操作记录表单 -->
<div class="record-form">
<input type="date" id="operationDate" required>
<select id="operationType">
<option value="ship">发货</option>
<option value="return">回货</option>
</select>
<input type="number" id="drumQty" placeholder="桶数量" step="1" required>
<input type="number" id="lidQty" placeholder="盖数量" step="1" required>
<button onclick="addRecord()">添加记录</button>
</div>
<!-- 导出按钮 -->
<button class="export-btn" onclick="exportToExcel()">📤 导出Excel</button>
<!-- 记录表格 -->
<div class="overflow-x-auto">
<table class="records-table">
<thead>
<tr>
<th>日期</th>
<th>类型</th>
<th>桶数量</th>
<th>盖数量</th>
<th>操作</th>
</tr>
</thead>
<tbody id="recordsBody"></tbody>
</table>
</div>
<!-- 统计面板 -->
<div class="summary">
<h3>实时库存统计</h3>
<p>当前总桶数: <span id="totalDrums" class="negative">0</span></p>
<p>当前总盖数: <span id="totalLids" class="negative">0</span></p>
<button onclick="calculatePeriod()">生成时段报告</button>
<div id="periodReport"></div>
</div>
</div>
<script>
let records = [];
// 初始化日期为今天
document.getElementById('operationDate').valueAsDate = new Date();
function addRecord() {
const type = document.getElementById('operationType').value;
const drumQty = document.getElementById('drumQty');
const lidQty = document.getElementById('lidQty');
// 自动转换回货为负数
const newRecord = {
date: document.getElementById('operationDate').value,
type: type,
drums: type === 'return' ? -Math.abs(parseInt(drumQty.value) || 0) : Math.abs(parseInt(drumQty.value) || 0),
lids: type === 'return' ? -Math.abs(parseInt(lidQty.value) || 0) : Math.abs(parseInt(lidQty.value) || 0)
};
records.push(newRecord);
drumQty.value = '';
lidQty.value = '';
renderTable();
updateTotals();
}
function renderTable() {
const tbody = document.getElementById('recordsBody');
tbody.innerHTML = records.map((record, index) => `
<tr>
<td>${record.date}</td>
<td>${record.type === 'ship' ? '🚚 发货' : '📦 回货'}</td>
<td class="${record.drums < 0 ? 'negative' : ''}">${record.drums}</td>
<td class="${record.lids < 0 ? 'negative' : ''}">${record.lids}</td>
<td>
<button onclick="deleteRecord(${index})" style="background:var(--danger-color)">删除</button>
</td>
</tr>
`).join('');
}
function deleteRecord(index) {
if (confirm('确定要删除这条记录吗？')) {
records.splice(index, 1);
renderTable();
updateTotals();
}
}
function updateTotals() {
const totalDrums = records.reduce((sum, record) => sum + record.drums, 0);
const totalLids = records.reduce((sum, record) => sum + record.lids, 0);
document.getElementById('totalDrums').textContent = totalDrums;
document.getElementById('totalLids').textContent = totalLids;
document.getElementById('totalDrums').className = totalDrums < 0 ? 'negative' : '';
document.getElementById('totalLids').className = totalLids < 0 ? 'negative' : '';
}
function calculatePeriod() {
let startDate = prompt("请输入起始日期 (YYYY-MM-DD)");
let endDate = prompt("请输入结束日期 (YYYY-MM-DD)");
// 检查日期格式
const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
if (!dateRegex.test(startDate) || !dateRegex.test(endDate)) {
alert("日期格式不正确，请使用YYYY-MM-DD格式");
return;
}
const filtered = records.filter(record =>
record.date >= startDate && record.date <= endDate
);
const periodDrums = filtered.reduce((sum, record) => sum + record.drums, 0);
const periodLids = filtered.reduce((sum, record) => sum + record.lids, 0);
document.getElementById('periodReport').innerHTML = `
<h4>时段报告 ${startDate} 至 ${endDate}</h4>
<p>桶数量变动: <span class="${periodDrums < 0 ? 'negative' : ''}">${periodDrums}</span></p>
<p>盖数量变动: <span class="${periodLids < 0 ? 'negative' : ''}">${periodLids}</span></p>
`;
}
// 新增Excel导出功能
function exportToExcel() {
if (records.length === 0) {
alert('没有记录可导出');
return;
}
/* 创建工作表数据 */
const wsData = [
["日期", "操作类型", "桶数量", "盖数量", "备注"],
...records.map(record => [
record.date,
record.type === 'ship' ? '发货' : '回货',
record.drums,
record.lids,
record.drums + record.lids === 0 ? '' : '数量不匹配'
])
];
/* 创建工作表 */
const ws = XLSX.utils.aoa_to_sheet(wsData);
/* 设置列宽 */
ws['!cols'] = [
{ wch: 12 }, // 日期列
{ wch: 10 }, // 类型列
{ wch: 8 }, // 桶数列
{ wch: 8 }, // 盖数列
{ wch: 15 } // 备注列
];
/* 创建工作簿并添加工作表 */
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "操作记录");
/* 生成文件并下载 */
const date = new Date().toISOString().slice(0,10);
XLSX.writeFile(wb, `桶盖管理记录_${date}.xlsx`);
}
</script>
</body>
</html>
发表于 2025-5-12 09:41
发表于 2025-5-12 10:29
|
发表于 2025-5-12 09:44
