<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>物流监控平台</title>
|
<style>
|
body {
|
background-color: #002b5c;
|
color: white;
|
font-family: Arial, sans-serif;
|
}
|
.conveyor {
|
fill: green;
|
transition: fill 0.3s;
|
}
|
#logistics-map {
|
border: 1px solid #fff;
|
margin: 0 auto;
|
display: block;
|
background-color: #003366;
|
}
|
.section {
|
fill: none;
|
stroke: #00ff00;
|
stroke-width: 2;
|
}
|
</style>
|
</head>
|
<body>
|
<h1 style="text-align:center;">物流监控平台</h1>
|
<svg id="logistics-map" width="1200" height="600" viewBox="0 0 1200 600">
|
<!-- 绘制100节输送线 -->
|
<g id="conveyors">
|
<rect id="conveyor-1" class="conveyor" x="10" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-2" class="conveyor" x="70" y="10" width="50" height="10"></rect>
|
<!-- 添加更多输送线 -->
|
<!-- 示例添加多条输送线 -->
|
<rect id="conveyor-3" class="conveyor" x="130" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-4" class="conveyor" x="190" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-5" class="conveyor" x="250" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-6" class="conveyor" x="310" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-7" class="conveyor" x="370" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-8" class="conveyor" x="430" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-9" class="conveyor" x="490" y="10" width="50" height="10"></rect>
|
<rect id="conveyor-10" class="conveyor" x="550" y="10" width="50" height="10"></rect>
|
<!-- 为了简化代码，这里只列出10节输送线，请根据需要增加到100节 -->
|
</g>
|
</svg>
|
<div style="text-align:center; margin-top:20px;">
|
<button onclick="updateConveyorColor('red')">变为红色</button>
|
<button onclick="updateConveyorColor('blue')">变为蓝色</button>
|
<button onclick="updateConveyorColor('green')">变为绿色</button>
|
</div>
|
|
<script>
|
function updateConveyorColor(color) {
|
var conveyors = document.getElementsByClassName('conveyor');
|
for (var i = 0; i < conveyors.length; i++) {
|
conveyors[i].style.fill = color;
|
}
|
}
|
|
// 模拟后台更新颜色
|
function simulateBackendUpdate() {
|
var colors = ['red', 'blue', 'green', 'yellow'];
|
setInterval(function () {
|
var randomColor = colors[Math.floor(Math.random() * colors.length)];
|
updateConveyorColor(randomColor);
|
}, 5000); // 每5秒更新一次颜色
|
}
|
|
simulateBackendUpdate(); // 启动模拟后台更新
|
</script>
|
</body>
|
</html>
|
