hanst
/
wms-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

10秒重试一次

master
han\hanst 3 months ago
parent
692bac93d5
commit
4c8d070bd9
3 changed files with 166 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/utils/websocket.js
  2. 4
      src/views/modules/dashboard/robot-picking-board.vue
  3. 253
      src/views/modules/dashboard/warehouse-3d-board.vue

2
src/utils/websocket.js
View File

@ -29,7 +29,7 @@ class WebSocketClient {
this.connected = false
this.reconnectAttempts = 0
this.maxReconnectAttempts = 3000
this.reconnectInterval = 3000
this.reconnectInterval = 10000
this.subscriptions = new Map()
this.heartbeatInterval = null
this.url = null

4
src/views/modules/dashboard/robot-picking-board.vue
View File

@ -68,7 +68,7 @@
{{ item.status }}
</span>
</td>
<td class="text-center">{{ item.storageBatchNo }}</td>
<td class="text-center">{{ item.storageBatchNo.length>10?'-':item.storageBatchNo }}</td>
<td class="text-center">{{ item.storageLocation }}</td>
</tr>
</tbody>
@ -113,7 +113,7 @@
{{ item.status }}
</span>
</td>
<td class="text-center">{{ item.storageBatchNo }}</td>
<td class="text-center">{{ item.storageBatchNo.length>10?'-':item.storageBatchNo }}</td>
<td class="text-center">{{ item.storageLocation }}</td>
</tr>
</tbody>

253
src/views/modules/dashboard/warehouse-3d-board.vue
View File

@ -104,7 +104,7 @@
<span class="summary-value rate">{{ storageData.utilizationRate }}%</span>
</div>
</div>
<div id="storageChart" style="margin-left: 70px" class="chart-container"></div>
<div id="storageChart" style="margin-left: 90px" class="chart-container"></div>
</div>
</div>
@ -212,93 +212,38 @@
</div>
</div>
</div>
</div>
<!-- 第三行：当日作业统计 -->
<div class="content-row row-3" v-show="false">
<!-- 领料申请单统计 -->
<div class="panel-card daily-operation">
<div class="card-header">
<div class="header-icon"></div>
<span class="header-title">领料申请单统计</span>
<span class="header-subtitle">Material Request Today</span>
</div>
<div class="card-body">
<div class="operation-visual">
<div class="visual-left">
<div id="materialRequestChart" class="mini-chart"></div>
</div>
<div class="visual-right">
<div class="operation-stat">
<div class="stat-row">
<span class="stat-label">总申请单数</span>
<span class="stat-number total">{{ materialRequestData.total }}</span>
</div>
<div class="stat-row">
<span class="stat-label">已完成</span>
<span class="stat-number completed">{{ materialRequestData.completed }}</span>
</div>
<div class="stat-row">
<span class="stat-label">进行中</span>
<span class="stat-number processing">{{ materialRequestData.processing }}</span>
</div>
<div class="stat-row">
<span class="stat-label">待处理</span>
<span class="stat-number pending">{{ materialRequestData.pending }}</span>
</div>
</div>
<div class="completion-rate">
<div class="rate-label">完成率</div>
<div class="rate-value">{{ materialRequestData.completionRate }}%</div>
<div class="rate-bar">
<div class="rate-fill" :style="{width: materialRequestData.completionRate + '%'}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部装饰效果 -->
<div class="bottom-decoration-bar">
<!-- 流光线条 -->
<div class="glow-lines-container">
<div class="glow-line line-1"></div>
<div class="glow-line line-2"></div>
<div class="glow-line line-3"></div>
</div>
<!-- 当日发货统计 -->
<div class="panel-card daily-operation">
<div class="card-header">
<div class="header-icon"></div>
<span class="header-title">当日发货统计</span>
<span class="header-subtitle">Shipment Today</span>
</div>
<div class="card-body">
<div class="operation-visual">
<div class="visual-left">
<div id="shipmentChart" class="mini-chart"></div>
</div>
<div class="visual-right">
<div class="operation-stat">
<div class="stat-row">
<span class="stat-label">总发货单数</span>
<span class="stat-number total">{{ shipmentData.total }}</span>
</div>
<div class="stat-row">
<span class="stat-label">已发货</span>
<span class="stat-number completed">{{ shipmentData.completed }}</span>
</div>
<div class="stat-row">
<span class="stat-label">拣选中</span>
<span class="stat-number processing">{{ shipmentData.processing }}</span>
</div>
<div class="stat-row">
<span class="stat-label">待拣选</span>
<span class="stat-number pending">{{ shipmentData.pending }}</span>
</div>
</div>
<div class="completion-rate">
<div class="rate-label">完成率</div>
<div class="rate-value">{{ shipmentData.completionRate }}%</div>
<div class="rate-bar">
<div class="rate-fill" :style="{width: shipmentData.completionRate + '%'}"></div>
</div>
</div>
</div>
</div>
</div>
<!-- 浮动数据点 -->
<div class="floating-data-points">
<div class="data-point point-1">
<div class="point-ring"></div>
<div class="point-core"></div>
</div>
<div class="data-point point-2">
<div class="point-ring"></div>
<div class="point-core"></div>
</div>
<div class="data-point point-3">
<div class="point-ring"></div>
<div class="point-core"></div>
</div>
<div class="data-point point-4">
<div class="point-ring"></div>
<div class="point-core"></div>
</div>
<div class="data-point point-5">
<div class="point-ring"></div>
<div class="point-core"></div>
</div>
</div>
</div>
@ -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 {

Write Preview
Loading…
Cancel
Save