+
+
-
-
-
-
-
-
-
-
-
- 总发货单数
- {{ shipmentData.total }}
-
-
- 已发货
- {{ shipmentData.completed }}
-
-
- 拣选中
- {{ shipmentData.processing }}
-
-
- 待拣选
- {{ shipmentData.pending }}
-
-
-
-
完成率
-
{{ shipmentData.completionRate }}%
-
-
-
-
-
+
+
@@ -332,12 +277,13 @@ export default {
// 库位数据
storageData: {
- totalSlots: 2400,
+ totalSlots: 1960,// 固定不变的
usedSlots: 1856,
utilizationRate: 77.3,
steelPallet: 680,
guardPallet: 520,
- flatPallet: 656
+ flatPallet: 656,
+ otherPallet: 200
},
// 机器人数据
@@ -619,7 +565,7 @@ export default {
this.charts.storage = echarts.init(chartDom)
const option = {
- color: ['#00d4ff', '#7b68ee', '#00ff88'],
+ color: ['#00d4ff', '#7b68ee', '#00ff88','#c5d9ed'],
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(20, 40, 70, 0.95)',
@@ -714,6 +660,20 @@ export default {
]
}
}
+ },
+ {
+ value: this.storageData.otherPallet,
+ name: '其他',
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0, y: 0, x2: 1, y2: 1,
+ colorStops: [
+ { offset: 0, color: '#c5d9ed' },
+ { offset: 1, color: '#f4edb9' }
+ ]
+ }
+ }
}
]
}
@@ -1447,7 +1407,7 @@ export default {
position: relative;
z-index: 1;
padding: 15px;
- height: calc(100vh - 100px);
+ height: calc(100vh - 140px); /* 减去顶部80px和底部装饰效果40px */
overflow-y: auto;
display: flex;
flex-direction: column;
@@ -2032,6 +1992,119 @@ export default {
}
}
+/* ========== 底部装饰效果 ========== */
+.bottom-decoration-bar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 40px;
+ z-index: 100;
+ pointer-events: none;
+}
+
+
+/* 浮动数据点 */
+.floating-data-points {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 40px;
+}
+
+.data-point {
+ position: absolute;
+ bottom: 8px;
+
+ &.point-1 {
+ left: 15%;
+ animation: float-up 3s ease-in-out infinite;
+ }
+
+ &.point-2 {
+ left: 30%;
+ animation: float-up 3.5s ease-in-out infinite 0.5s;
+ }
+
+ &.point-3 {
+ left: 50%;
+ animation: float-up 3.2s ease-in-out infinite 1s;
+ }
+
+ &.point-4 {
+ left: 70%;
+ animation: float-up 3.8s ease-in-out infinite 1.5s;
+ }
+
+ &.point-5 {
+ left: 85%;
+ animation: float-up 3.3s ease-in-out infinite 2s;
+ }
+}
+
+.point-ring {
+ width: 14px;
+ height: 14px;
+ border: 2px solid rgba(0, 212, 255, 0.6);
+ border-radius: 50%;
+ animation: ring-expand 2s ease-out infinite;
+}
+
+.point-core {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 6px;
+ height: 6px;
+ background: #00d4ff;
+ border-radius: 50%;
+ box-shadow:
+ 0 0 8px #00d4ff,
+ 0 0 12px #00d4ff;
+}
+
+/* 动画定义 */
+@keyframes glow-slide {
+ 0% {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ 20% {
+ opacity: 1;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ transform: translateX(100%);
+ opacity: 0;
+ }
+}
+
+@keyframes float-up {
+ 0%, 100% {
+ transform: translateY(0);
+ opacity: 0.6;
+ }
+ 50% {
+ transform: translateY(-15px);
+ opacity: 1;
+ }
+}
+
+@keyframes ring-expand {
+ 0% {
+ transform: scale(0.6);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(2.5);
+ opacity: 0;
+ }
+}
+
/* ========== 响应式设计 ========== */
@media screen and (max-width: 1920px) {
.screen-header {