html写一个仓库大屏
时间: 2023-12-18 12:05:54 浏览: 27
要实现一个仓库大屏,需要先确定需要展示的信息和数据来源。以下是一个简单的示例,展示了仓库的货物总量、货物种类、货物库存量和货物出入库明细等信息。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仓库大屏</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 20px;
padding: 20px;
width: 300px;
height: 200px;
}
.card h2 {
margin: 0;
font-size: 2rem;
color: #333;
text-align: center;
}
.card p {
margin: 0;
font-size: 1.6rem;
color: #666;
text-align: center;
}
.card .detail {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 20px;
width: 100%;
}
.card .detail p {
margin: 0;
font-size: 1.2rem;
color: #999;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h2>货物总量</h2>
<p id="total">0</p>
<div class="detail">
<p>昨日增加:<span id="total-increase">0</span></p>
<p>昨日减少:<span id="total-decrease">0</span></p>
</div>
</div>
<div class="card">
<h2>货物种类</h2>
<p id="category">0</p>
<div class="detail">
<p>昨日增加:<span id="category-increase">0</span></p>
<p>昨日减少:<span id="category-decrease">0</span></p>
</div>
</div>
<div class="card">
<h2>货物库存量</h2>
<p id="stock">0</p>
<div class="detail">
<p>昨日增加:<span id="stock-increase">0</span></p>
<p>昨日减少:<span id="stock-decrease">0</span></p>
</div>
</div>
<div class="card">
<h2>货物出入库明细</h2>
<table>
<thead>
<tr>
<th>货物名称</th>
<th>入库数量</th>
<th>出库数量</th>
<th>库存数量</th>
</tr>
</thead>
<tbody id="detail">
</tbody>
</table>
</div>
</div>
<script>
// 模拟数据
const data = {
total: 1000,
category: 50,
stock: 500,
increase: {
total: 100,
category: 5,
stock: 50
},
decrease: {
total: 50,
category: 2,
stock: 20
},
detail: [
{
name: '货物1',
in: 100,
out: 50,
stock: 50
},
{
name: '货物2',
in: 50,
out: 20,
stock: 30
},
{
name: '货物3',
in: 30,
out: 40,
stock: -10
}
]
};
// 更新数据
function updateData() {
document.getElementById('total').textContent = data.total;
document.getElementById('category').textContent = data.category;
document.getElementById('stock').textContent = data.stock;
document.getElementById('total-increase').textContent = data.increase.total;
document.getElementById('category-increase').textContent = data.increase.category;
document.getElementById('stock-increase').textContent = data.increase.stock;
document.getElementById('total-decrease').textContent = data.decrease.total;
document.getElementById('category-decrease').textContent = data.decrease.category;
document.getElementById('stock-decrease').textContent = data.decrease.stock;
const detailTable = document.getElementById('detail');
detailTable.innerHTML = '';
data.detail.forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.name}</td>
<td>${item.in}</td>
<td>${item.out}</td>
<td>${item.stock}</td>
`;
detailTable.appendChild(tr);
});
}
// 模拟数据更新
setInterval(() => {
data.total += Math.floor(Math.random() * 20);
data.category += Math.floor(Math.random() * 2);
data.stock += Math.floor(Math.random() * 10);
data.increase.total += Math.floor(Math.random() * 10);
data.increase.category += Math.floor(Math.random() * 1);
data.increase.stock += Math.floor(Math.random() * 5);
data.decrease.total += Math.floor(Math.random() * 5);
data.decrease.category += Math.floor(Math.random() * 1);
data.decrease.stock += Math.floor(Math.random() * 2);
data.detail.forEach(item => {
item.in += Math.floor(Math.random() * 10);
item.out += Math.floor(Math.random() * 5);
item.stock = item.in - item.out;
});
updateData();
}, 3000);
// 页面加载时更新数据
window.addEventListener('load', () => {
updateData();
});
</script>
</body>
</html>
```
在示例代码中,使用了 Flexbox 布局来实现卡片的自适应布局,并使用了表格来展示货物出入库明细。数据是模拟的,每隔 3 秒钟更新一次。你可以根据实际需要修改样式和数据来源,以满足不同的需求。