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

手工拣选看板

master
han\hanst 2 months ago
parent
1d8a87a4bd
commit
8d6b140e6c
6 changed files with 2810 additions and 36 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. 4
      src/router/index.js
  2. 683
      src/views/modules/dashboard/picking-board-1028.vue
  3. 683
      src/views/modules/dashboard/picking-board-1043.vue
  4. 153
      src/views/modules/dashboard/picking-board.vue
  5. 662
      src/views/modules/dashboard/robot-picking-container.vue
  6. 663
      src/views/modules/dashboard/robot-picking-material.vue

4
src/router/index.js
View File

@ -21,7 +21,9 @@ const globalRoutes = [
{ path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
{ path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
{ path: '/dashboard-picking-board', component: _import('modules/dashboard/picking-board'), name: 'dashboard-picking-board', meta: { title: '人工拣选看板' } },
{ path: '/dashboard-robot-picking-board', component: _import('modules/dashboard/robot-picking-board'), name: 'dashboard-robot-picking-board', meta: { title: '机械臂拣选看板' } },
{ path: '/dashboard-picking2-board', component: _import('modules/dashboard/picking-board-1028'), name: 'dashboard-picking-board', meta: { title: '人工拣选看板' } },
{ path: '/dashboard-robot-picking-board', component: _import('modules/dashboard/robot-picking-board'), name: 'dashboard-robot-picking-container', meta: { title: '机械臂拣选-周转箱' } },
{ path: '/dashboard-robot-picking-material', component: _import('modules/dashboard/robot-picking-material'), name: 'dashboard-robot-picking-material', meta: { title: '机械臂拣选-原材' } },
{ path: '/dashboard-slitting-board', component: _import('modules/dashboard/slitting-board'), name: 'dashboard-slitting-board', meta: { title: '分切区看板' } },
{ path: '/dashboard-finished-product-board', component: _import('modules/dashboard/finished-product-board'), name: 'dashboard-finished-product-board', meta: { title: '成品入库出库区看板' } },
{ path: '/dashboard-material-receiving-board', component: _import('modules/dashboard/material-receiving-board'), name: 'dashboard-material-receiving-board', meta: { title: '原材收货区看板' } },

683
src/views/modules/dashboard/picking-board-1028.vue
View File

@ -0,0 +1,683 @@
<template>
<div class="picking-board-screen">
<!-- 装饰背景 -->
<div class="bg-decoration">
<div class="decoration-line line-1"></div>
<div class="decoration-line line-2"></div>
<div class="decoration-line line-3"></div>
<div class="decoration-circle circle-1"></div>
<div class="decoration-circle circle-2"></div>
</div>
<!-- 顶部标题栏 -->
<div class="screen-header">
<!-- CCL Logo -->
<div class="header-logo">
<img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
</div>
<div class="header-decoration left"></div>
<div class="header-center">
<div class="title-glow"></div>
<h1 class="screen-title">人工拣选实时看板</h1>
<div class="title-subtitle">Manual Picking Real-time Dashboard</div>
</div>
<div class="header-decoration right"></div>
<div class="header-time">
<div class="time-icon"></div>
<div class="time-text">{{ currentTime }}</div>
</div>
</div>
<!-- 主内容区 -->
<div class="screen-content">
<!-- 拣选面板 -->
<div class="picking-panel">
<!-- 面板标题栏 -->
<div class="panel-title-bar">
<div class="title-left">
<div class="title-icon"></div>
<div class="title-text">
<span class="title-main">人工拣选2</span>
<span class="title-divider">|</span>
<span class="title-sub">工单号码: <strong>{{ workOrderNo }}</strong></span>
<span class="title-divider">|</span>
<span class="title-sub">产品名称: <strong>{{ materialName }}</strong></span>
<span class="title-divider"></span>
<span class="title-sub">工单时间: <strong>{{ workOrderTime }}</strong></span>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="panel-table">
<table class="data-table">
<thead>
<tr>
<th style="width: 60px;">No.</th>
<th style="width: 150px;">拣选托盘码</th>
<th style="width: 200px;">拣选物料名称</th>
<th style="width: 120px;">RFID</th>
<th style="width: 150px;">状态</th>
<th style="width: 120px;">存放位置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in station1028List" :key="idx">
<td class="text-center">{{ idx + 1 }}</td>
<td class="text-center">{{ item.pickingBatchNo }}</td>
<td class="text-center">{{ item.pickingMaterialName }}</td>
<td class="text-center">{{ item.rfidBarcode }}</td>
<td class="text-center">
<span :class="['status-badge', getStatusClass(item.status)]">
{{ item.status }}
</span>
</td>
<td class="text-center">{{ item.storageLocation }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 底部装饰 -->
<div class="screen-footer">
<div class="footer-line"></div>
</div>
</div>
</template>
<script>
import WebSocketClient from '@/utils/websocket'
export default {
name: 'PickingBoard1028',
data() {
return {
currentTime: '',
timeInterval: null,
serverTimeOffset: 0, // 服务器时间偏移量（毫秒）
// WebSocket相关
useWebSocket: true, // 是否使用WebSocket
wsConnected: false, // WebSocket连接状态
wsSubscription: null, // WebSocket订阅ID
// 1028站数据
station1028List: [],
// 工单信息
workOrderNo: '',
materialName: '',
workOrderTime: '',
// 自动滚动相关
scrollInterval: null,
scrollSpeed: 50 // 滚动速度（毫秒）
}
},
mounted() {
// 初始化时间显示
this.currentTime = '等待服务器时间同步...'
// 启动时钟定时器（每秒更新）
this.timeInterval = setInterval(() => {
this.updateTime()
}, 1000)
// 根据配置选择使用WebSocket
if (this.useWebSocket) {
this.initWebSocket()
}
// 启动自动滚动
this.$nextTick(() => {
this.startAutoScroll()
})
},
beforeDestroy() {
// 清理时间更新定时器
if (this.timeInterval) {
clearInterval(this.timeInterval)
}
// 清理自动滚动定时器
if (this.scrollInterval) {
clearInterval(this.scrollInterval)
}
// 断开WebSocket连接
this.disconnectWebSocket()
},
methods: {
/**
* 更新服务器时间偏移量
*/
updateServerTimeOffset(serverTimeString) {
try {
const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
const serverTime = new Date(timeStr).getTime()
const localTime = new Date().getTime()
if (!isNaN(serverTime)) {
this.serverTimeOffset = serverTime - localTime
}
} catch (error) {
console.warn('解析服务器时间失败:', error)
}
},
/**
* 更新当前时间（使用服务器时间偏移量）
*/
updateTime() {
const now = new Date(new Date().getTime() + this.serverTimeOffset)
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const weekDay = weekDays[now.getDay()]
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
},
/**
* 根据状态获取样式类名
*/
getStatusClass(status) {
const statusMap = {
'完成': 'status-success',
'分拣中': 'status-warning',
'等待分拣': 'status-pending'
}
return statusMap[status] || 'status-pending'
},
/**
* 初始化WebSocket连接
*/
initWebSocket() {
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl)
// 连接WebSocket服务器
const wsUrl = apiServer + '/ws/dashboard'
WebSocketClient.connect(
wsUrl,
() => {
this.wsConnected = true
console.log('[1028站看板] WebSocket连接成功')
// 订阅人工拣选看板主题
this.wsSubscription = WebSocketClient.subscribe(
'/topic/dashboard/manual-picking',
this.handleWebSocketMessage
)
},
(error) => {
// 连接失败回调
console.error('[1028站看板] WebSocket连接失败', error)
this.wsConnected = false
}
)
},
/**
* 处理WebSocket推送的消息
*
* @param {object} message WebSocket推送的消息
*/
handleWebSocketMessage(message) {
if (message && message.code === 0) {
// 更新服务器时间偏移量
if (message.serverTime) {
this.updateServerTimeOffset(message.serverTime)
}
// 更新看板数据
if (message.data) {
// 更新1028站数据
if (message.data.station1028List) {
this.station1028List = message.data.station1028List
// 更新工单信息（从第一条数据中提取）
if (this.station1028List.length > 0) {
this.materialName = this.station1028List[0].pickingMaterialName || ''
// 如果后端推送了工单号和工单时间，则更新
this.workOrderNo = this.station1028List[0].workOrderNo || ''
this.workOrderTime = this.station1028List[0].workOrderTime || ''
}
console.log('[1028站看板] 数据更新成功:', this.station1028List.length, '条')
}
}
}
},
/**
* 断开WebSocket连接
*/
disconnectWebSocket() {
if (this.wsSubscription) {
WebSocketClient.unsubscribe(this.wsSubscription)
this.wsSubscription = null
console.log('[1028站看板] 已取消订阅')
}
if (this.wsConnected) {
WebSocketClient.disconnect()
this.wsConnected = false
console.log('[1028站看板] WebSocket已断开')
}
},
/**
* 启动自动滚动
*/
startAutoScroll() {
const tableBody = this.$el.querySelector('.panel-table')
if (!tableBody) return
// 如果数据少于等于10条，不需要滚动
if (this.station1028List.length <= 10) {
return
}
this.scrollInterval = setInterval(() => {
if (tableBody.scrollTop + tableBody.clientHeight >= tableBody.scrollHeight) {
// 滚动到底部，重置到顶部
tableBody.scrollTop = 0
} else {
// 继续向下滚动
tableBody.scrollTop += 1
}
}, this.scrollSpeed)
}
}
}
</script>
<style scoped lang="scss">
/* ===== 整体容器 ===== */
.picking-board-screen {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
position: relative;
overflow: hidden;
font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
}
/* ===== 装饰背景 ===== */
.bg-decoration {
display: none;
}
/* ===== 顶部标题区 ===== */
.screen-header {
position: relative;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
z-index: 10;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
}
/* CCL Logo */
.header-logo {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 20;
}
.logo-img {
height: 40px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
transition: all 0.3s ease;
&:hover {
filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
transform: scale(1.05);
}
}
.header-decoration {
display: none;
}
.header-center {
position: relative;
text-align: center;
}
.title-glow {
display: none;
}
.screen-title {
position: relative;
font-size: 34px;
font-weight: bold;
color: #ffffff;
margin: 0;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
}
.title-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 2px;
margin-top: 3px;
font-family: Arial, sans-serif;
text-transform: uppercase;
}
.header-time {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.time-icon {
font-size: 14px;
color: #17B3A3;
}
.time-text {
font-size: 16px;
color: #ffffff;
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 500;
letter-spacing: 1px;
}
/* ===== 主内容区 ===== */
.screen-content {
position: relative;
z-index: 1;
padding: 20px;
height: calc(100vh - 60px);
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.1);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.5);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.7);
}
}
}
/* ===== 拣选面板 ===== */
.picking-panel {
width: 100%;
height: calc(100vh - 100px);
background: rgba(70, 90, 120, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(23, 179, 163, 0.5);
border-radius: 12px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
&:hover {
border-color: rgba(23, 179, 163, 0.5);
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.5),
0 0 30px rgba(23, 179, 163, 0.2);
transform: translateY(-2px);
}
}
/* ===== 面板标题栏 ===== */
.panel-title-bar {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
border-bottom: 1px solid rgba(23, 179, 163, 0.3);
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.title-left {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.title-icon {
font-size: 16px;
color: #64D8CB;
}
.title-text {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.title-main {
font-size: 20px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
}
.title-divider {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.title-sub {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
strong {
color: #ffffff;
font-weight: 600;
font-family: 'Consolas', monospace;
}
}
/* ===== 数据表格 ===== */
.panel-table {
padding: 10px;
flex: 1;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.05);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.3);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.5);
}
}
}
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
thead {
tr {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
}
th {
padding: 10px 6px;
color: #fcfdfd;
font-size: 16px;
font-weight: bold;
text-align: center;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
white-space: nowrap;
&:first-child {
border-top-left-radius: 8px;
}
&:last-child {
border-top-right-radius: 8px;
}
}
}
tbody {
tr {
background: rgba(60, 80, 105, 0.6);
transition: all 0.3s ease;
&:nth-child(even) {
background: rgba(70, 90, 115, 0.7);
}
&:hover {
background: rgba(23, 179, 163, 0.15);
box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
}
&:last-child {
td:first-child {
border-bottom-left-radius: 8px;
}
td:last-child {
border-bottom-right-radius: 8px;
}
}
}
td {
padding: 8px 6px;
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
border-bottom: 1px solid rgba(23, 179, 163, 0.15);
&.text-center {
text-align: center;
}
&.text-left {
text-align: left;
}
&.text-right {
text-align: right;
}
}
}
}
/* ===== 状态徽章 ===== */
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
font-weight: bold;
text-align: center;
min-width: 80px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
&.status-success {
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}
&.status-warning {
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #ffffff;
box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}
&.status-pending {
background: linear-gradient(135deg, #6b7280, #9ca3af);
color: #ffffff;
box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
}
}
/* ===== 底部装饰 ===== */
.screen-footer {
display: none;
}
/* ===== 响应式适配 ===== */
@media screen and (max-width: 1600px) {
.screen-title {
font-size: 30px;
letter-spacing: 3px;
}
}
@media screen and (min-width: 2560px) {
.screen-title {
font-size: 38px;
}
.data-table {
thead th {
font-size: 20px;
padding: 16px 12px;
}
tbody td {
font-size: 20px;
padding: 14px 12px;
}
}
.status-badge {
font-size: 18px;
padding: 8px 18px;
min-width: 100px;
}
}
</style>

683
src/views/modules/dashboard/picking-board-1043.vue
View File

@ -0,0 +1,683 @@
<template>
<div class="picking-board-screen">
<!-- 装饰背景 -->
<div class="bg-decoration">
<div class="decoration-line line-1"></div>
<div class="decoration-line line-2"></div>
<div class="decoration-line line-3"></div>
<div class="decoration-circle circle-1"></div>
<div class="decoration-circle circle-2"></div>
</div>
<!-- 顶部标题栏 -->
<div class="screen-header">
<!-- CCL Logo -->
<div class="header-logo">
<img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
</div>
<div class="header-decoration left"></div>
<div class="header-center">
<div class="title-glow"></div>
<h1 class="screen-title">人工拣选实时看板</h1>
<div class="title-subtitle">Manual Picking Real-time Dashboard</div>
</div>
<div class="header-decoration right"></div>
<div class="header-time">
<div class="time-icon"></div>
<div class="time-text">{{ currentTime }}</div>
</div>
</div>
<!-- 主内容区 -->
<div class="screen-content">
<!-- 拣选面板 -->
<div class="picking-panel">
<!-- 面板标题栏 -->
<div class="panel-title-bar">
<div class="title-left">
<div class="title-icon"></div>
<div class="title-text">
<span class="title-main">人工拣选1</span>
<span class="title-divider">|</span>
<span class="title-sub">工单号码: <strong>{{ workOrderNo }}</strong></span>
<span class="title-divider">|</span>
<span class="title-sub">产品名称: <strong>{{ materialName }}</strong></span>
<span class="title-divider"></span>
<span class="title-sub">工单时间: <strong>{{ workOrderTime }}</strong></span>
</div>
</div>
</div>
<!-- 数据表格 -->
<div class="panel-table">
<table class="data-table">
<thead>
<tr>
<th style="width: 60px;">No.</th>
<th style="width: 150px;">拣选托盘码</th>
<th style="width: 200px;">拣选物料名称</th>
<th style="width: 120px;">RFID</th>
<th style="width: 150px;">状态</th>
<th style="width: 120px;">存放位置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in station1043List" :key="idx">
<td class="text-center">{{ idx + 1 }}</td>
<td class="text-center">{{ item.pickingBatchNo }}</td>
<td class="text-center">{{ item.pickingMaterialName }}</td>
<td class="text-center">{{ item.rfidBarcode }}</td>
<td class="text-center">
<span :class="['status-badge', getStatusClass(item.status)]">
{{ item.status }}
</span>
</td>
<td class="text-center">{{ item.storageLocation }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 底部装饰 -->
<div class="screen-footer">
<div class="footer-line"></div>
</div>
</div>
</template>
<script>
import WebSocketClient from '@/utils/websocket'
export default {
name: 'PickingBoard1043',
data() {
return {
currentTime: '',
timeInterval: null,
serverTimeOffset: 0, // 服务器时间偏移量（毫秒）
// WebSocket相关
useWebSocket: true, // 是否使用WebSocket
wsConnected: false, // WebSocket连接状态
wsSubscription: null, // WebSocket订阅ID
// 1043站数据
station1043List: [],
// 工单信息
workOrderNo: '',
materialName: '',
workOrderTime: '',
// 自动滚动相关
scrollInterval: null,
scrollSpeed: 50 // 滚动速度（毫秒）
}
},
mounted() {
// 初始化时间显示
this.currentTime = '等待服务器时间同步...'
// 启动时钟定时器（每秒更新）
this.timeInterval = setInterval(() => {
this.updateTime()
}, 1000)
// 根据配置选择使用WebSocket
if (this.useWebSocket) {
this.initWebSocket()
}
// 启动自动滚动
this.$nextTick(() => {
this.startAutoScroll()
})
},
beforeDestroy() {
// 清理时间更新定时器
if (this.timeInterval) {
clearInterval(this.timeInterval)
}
// 清理自动滚动定时器
if (this.scrollInterval) {
clearInterval(this.scrollInterval)
}
// 断开WebSocket连接
this.disconnectWebSocket()
},
methods: {
/**
* 更新服务器时间偏移量
*/
updateServerTimeOffset(serverTimeString) {
try {
const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
const serverTime = new Date(timeStr).getTime()
const localTime = new Date().getTime()
if (!isNaN(serverTime)) {
this.serverTimeOffset = serverTime - localTime
}
} catch (error) {
console.warn('解析服务器时间失败:', error)
}
},
/**
* 更新当前时间（使用服务器时间偏移量）
*/
updateTime() {
const now = new Date(new Date().getTime() + this.serverTimeOffset)
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const weekDay = weekDays[now.getDay()]
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
},
/**
* 根据状态获取样式类名
*/
getStatusClass(status) {
const statusMap = {
'完成': 'status-success',
'分拣中': 'status-warning',
'等待分拣': 'status-pending'
}
return statusMap[status] || 'status-pending'
},
/**
* 初始化WebSocket连接
*/
initWebSocket() {
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl)
// 连接WebSocket服务器
const wsUrl = apiServer + '/ws/dashboard'
WebSocketClient.connect(
wsUrl,
() => {
this.wsConnected = true
console.log('[1043站看板] WebSocket连接成功')
// 订阅人工拣选看板主题
this.wsSubscription = WebSocketClient.subscribe(
'/topic/dashboard/manual-picking',
this.handleWebSocketMessage
)
},
(error) => {
// 连接失败回调
console.error('[1043站看板] WebSocket连接失败', error)
this.wsConnected = false
}
)
},
/**
* 处理WebSocket推送的消息
*
* @param {object} message WebSocket推送的消息
*/
handleWebSocketMessage(message) {
if (message && message.code === 0) {
// 更新服务器时间偏移量
if (message.serverTime) {
this.updateServerTimeOffset(message.serverTime)
}
// 更新看板数据
if (message.data) {
// 更新1043站数据
if (message.data.station1043List) {
this.station1043List = message.data.station1043List
// 更新工单信息（从第一条数据中提取）
if (this.station1043List.length > 0) {
this.materialName = this.station1043List[0].pickingMaterialName || ''
// 如果后端推送了工单号和工单时间，则更新
this.workOrderNo = this.station1043List[0].workOrderNo || ''
this.workOrderTime = this.station1043List[0].workOrderTime || ''
}
console.log('[1043站看板] 数据更新成功:', this.station1043List.length, '条')
}
}
}
},
/**
* 断开WebSocket连接
*/
disconnectWebSocket() {
if (this.wsSubscription) {
WebSocketClient.unsubscribe(this.wsSubscription)
this.wsSubscription = null
console.log('[1043站看板] 已取消订阅')
}
if (this.wsConnected) {
WebSocketClient.disconnect()
this.wsConnected = false
console.log('[1043站看板] WebSocket已断开')
}
},
/**
* 启动自动滚动
*/
startAutoScroll() {
const tableBody = this.$el.querySelector('.panel-table')
if (!tableBody) return
// 如果数据少于等于10条，不需要滚动
if (this.station1043List.length <= 10) {
return
}
this.scrollInterval = setInterval(() => {
if (tableBody.scrollTop + tableBody.clientHeight >= tableBody.scrollHeight) {
// 滚动到底部，重置到顶部
tableBody.scrollTop = 0
} else {
// 继续向下滚动
tableBody.scrollTop += 1
}
}, this.scrollSpeed)
}
}
}
</script>
<style scoped lang="scss">
/* ===== 整体容器 ===== */
.picking-board-screen {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
position: relative;
overflow: hidden;
font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
}
/* ===== 装饰背景 ===== */
.bg-decoration {
display: none;
}
/* ===== 顶部标题区 ===== */
.screen-header {
position: relative;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
z-index: 10;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
}
/* CCL Logo */
.header-logo {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 20;
}
.logo-img {
height: 40px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
transition: all 0.3s ease;
&:hover {
filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
transform: scale(1.05);
}
}
.header-decoration {
display: none;
}
.header-center {
position: relative;
text-align: center;
}
.title-glow {
display: none;
}
.screen-title {
position: relative;
font-size: 34px;
font-weight: bold;
color: #ffffff;
margin: 0;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
}
.title-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 2px;
margin-top: 3px;
font-family: Arial, sans-serif;
text-transform: uppercase;
}
.header-time {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.time-icon {
font-size: 14px;
color: #17B3A3;
}
.time-text {
font-size: 16px;
color: #ffffff;
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 500;
letter-spacing: 1px;
}
/* ===== 主内容区 ===== */
.screen-content {
position: relative;
z-index: 1;
padding: 20px;
height: calc(100vh - 60px);
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.1);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.5);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.7);
}
}
}
/* ===== 拣选面板 ===== */
.picking-panel {
width: 100%;
height: calc(100vh - 100px);
background: rgba(70, 90, 120, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(23, 179, 163, 0.5);
border-radius: 12px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
&:hover {
border-color: rgba(23, 179, 163, 0.5);
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.5),
0 0 30px rgba(23, 179, 163, 0.2);
transform: translateY(-2px);
}
}
/* ===== 面板标题栏 ===== */
.panel-title-bar {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
border-bottom: 1px solid rgba(23, 179, 163, 0.3);
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.title-left {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.title-icon {
font-size: 16px;
color: #64D8CB;
}
.title-text {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.title-main {
font-size: 20px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
}
.title-divider {
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
}
.title-sub {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
strong {
color: #ffffff;
font-weight: 600;
font-family: 'Consolas', monospace;
}
}
/* ===== 数据表格 ===== */
.panel-table {
padding: 10px;
flex: 1;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.05);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.3);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.5);
}
}
}
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
thead {
tr {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
}
th {
padding: 10px 6px;
color: #fcfdfd;
font-size: 16px;
font-weight: bold;
text-align: center;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
white-space: nowrap;
&:first-child {
border-top-left-radius: 8px;
}
&:last-child {
border-top-right-radius: 8px;
}
}
}
tbody {
tr {
background: rgba(60, 80, 105, 0.6);
transition: all 0.3s ease;
&:nth-child(even) {
background: rgba(70, 90, 115, 0.7);
}
&:hover {
background: rgba(23, 179, 163, 0.15);
box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
}
&:last-child {
td:first-child {
border-bottom-left-radius: 8px;
}
td:last-child {
border-bottom-right-radius: 8px;
}
}
}
td {
padding: 8px 6px;
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
border-bottom: 1px solid rgba(23, 179, 163, 0.15);
&.text-center {
text-align: center;
}
&.text-left {
text-align: left;
}
&.text-right {
text-align: right;
}
}
}
}
/* ===== 状态徽章 ===== */
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 14px;
font-weight: bold;
text-align: center;
min-width: 80px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
&.status-success {
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}
&.status-warning {
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #ffffff;
box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}
&.status-pending {
background: linear-gradient(135deg, #6b7280, #9ca3af);
color: #ffffff;
box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
}
}
/* ===== 底部装饰 ===== */
.screen-footer {
display: none;
}
/* ===== 响应式适配 ===== */
@media screen and (max-width: 1600px) {
.screen-title {
font-size: 30px;
letter-spacing: 3px;
}
}
@media screen and (min-width: 2560px) {
.screen-title {
font-size: 38px;
}
.data-table {
thead th {
font-size: 20px;
padding: 16px 12px;
}
tbody td {
font-size: 20px;
padding: 14px 12px;
}
}
.status-badge {
font-size: 18px;
padding: 8px 18px;
min-width: 100px;
}
}
</style>

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

@ -35,7 +35,7 @@
<div
class="picking-panel"
v-for="(order, index) in workOrders"
:key="order.workOrderNo"
:key="index"
>
<!-- 面板标题 -->
<div class="panel-title-bar">
@ -111,7 +111,7 @@
</template>
<script>
import {manualPicking} from '@/api/dashboard/dashboard.js'
import WebSocketClient from '@/utils/websocket'
export default {
name: 'PickingBoard',
@ -120,9 +120,14 @@ export default {
return {
currentTime: '',
timeInterval: null,
dataInterval: null,
serverTimeOffset: 0, // 服务器时间偏移量（毫秒）
// 模拟工单数据
// WebSocket相关
useWebSocket: true, // 是否使用WebSocket
wsConnected: false, // WebSocket连接状态
wsSubscription: null, // WebSocket订阅ID
// 工单数据
workOrders: [
{
workOrderNo: '',
@ -145,51 +150,52 @@ export default {
},
mounted() {
// 时间由HTTP API响应自动更新，不再使用定时器
// 初始化时间显示
this.currentTime = '等待服务器时间同步...'
// 首次加载数据
this.getDataList()
// 启动时钟定时器（每秒更新）
this.timeInterval = setInterval(() => {
this.updateTime()
}, 1000)
// 每10秒刷新一次数据
this.dataInterval = setInterval(() => {
this.getDataList()
}, 10000)
// 根据配置选择使用WebSocket
if (this.useWebSocket) {
this.initWebSocket()
}
},
beforeDestroy() {
if (this.dataInterval) {
clearInterval(this.dataInterval)
// 清理时间更新定时器
if (this.timeInterval) {
clearInterval(this.timeInterval)
}
// 断开WebSocket连接
this.disconnectWebSocket()
},
methods: {
// 获取数据列表
getDataList() {
manualPicking({}).then(({data}) => {
if (data && data.code === 200) {
console.log('获取数据成功:', data.data)
// 更新服务器时间
if (data.serverTime) {
this.currentTime = data.serverTime
}
// TODO: 处理返回的数据，覆盖而非追加，避免内存累积
// if (data.data) {
// this.leftPanelList = data.data.leftPanelList || []
// this.rightPanelList = data.data.rightPanelList || []
// }
}
}).catch(error => {
console.error('获取数据失败:', error)
})
/**
* 更新服务器时间偏移量
*/
updateServerTimeOffset(serverTimeString) {
try {
const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
const serverTime = new Date(timeStr).getTime()
const localTime = new Date().getTime()
if (!isNaN(serverTime)) {
this.serverTimeOffset = serverTime - localTime
}
} catch (error) {
console.warn('解析服务器时间失败:', error)
}
},
/**
* 更新当前时间
* 更新当前时间（使用服务器时间偏移量）
*/
updateTime() {
const now = new Date()
const now = new Date(new Date().getTime() + this.serverTimeOffset)
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
@ -199,7 +205,7 @@ export default {
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const weekDay = weekDays[now.getDay()]
this.currentTime = `${year}-${month}-${day} ${weekDay} ${hours}:${minutes}:${seconds}`
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
},
/**
@ -212,6 +218,81 @@ export default {
'等待分拣': 'status-pending'
}
return statusMap[status] || 'status-pending'
},
/**
* 初始化WebSocket连接
*/
initWebSocket() {
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl)
// 连接WebSocket服务器
const wsUrl = apiServer + '/ws/dashboard'
WebSocketClient.connect(
wsUrl,
() => {
this.wsConnected = true
console.log('[人工拣选看板] WebSocket连接成功')
// 订阅人工拣选看板主题
this.wsSubscription = WebSocketClient.subscribe(
'/topic/dashboard/manual-picking',
this.handleWebSocketMessage
)
},
(error) => {
// 连接失败回调
console.error('[人工拣选看板] WebSocket连接失败', error)
this.wsConnected = false
}
)
},
/**
* 处理WebSocket推送的消息
*
* @param {object} message WebSocket推送的消息
*/
handleWebSocketMessage(message) {
if (message && message.code === 0) {
// 更新服务器时间偏移量
if (message.serverTime) {
this.updateServerTimeOffset(message.serverTime)
}
// 更新看板数据
if (message.data) {
// 更新第一个表格 - 1043站
if (message.data.station1043List) {
this.workOrders[0].details = message.data.station1043List
}
// 更新第二个表格 - 1028站
if (message.data.station1028List) {
this.workOrders[1].details = message.data.station1028List
}
console.log('[人工拣选看板] 数据更新成功 - 1043站:',
this.workOrders[0].details.length, '条, 1028站:', this.workOrders[1].details.length, '条')
}
}
},
/**
* 断开WebSocket连接
*/
disconnectWebSocket() {
if (this.wsSubscription) {
WebSocketClient.unsubscribe(this.wsSubscription)
this.wsSubscription = null
console.log('[人工拣选看板] 已取消订阅')
}
if (this.wsConnected) {
WebSocketClient.disconnect()
this.wsConnected = false
console.log('[人工拣选看板] WebSocket已断开')
}
}
}
}

662
src/views/modules/dashboard/robot-picking-container.vue
View File

@ -0,0 +1,662 @@
<template>
<div class="picking-board-screen">
<!-- 装饰背景 -->
<div class="bg-decoration">
<div class="decoration-line line-1"></div>
<div class="decoration-line line-2"></div>
<div class="decoration-line line-3"></div>
<div class="decoration-circle circle-1"></div>
<div class="decoration-circle circle-2"></div>
</div>
<!-- 顶部标题栏 -->
<div class="screen-header">
<!-- CCL Logo -->
<div class="header-logo">
<img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
</div>
<div class="header-decoration left"></div>
<div class="header-center">
<div class="title-glow"></div>
<h1 class="screen-title">机械臂拣选 - 周转箱</h1>
<div class="title-subtitle">Robot Picking - Container</div>
</div>
<div class="header-decoration right"></div>
<div class="header-time">
<div class="time-icon"></div>
<div class="time-text">{{ currentTime }}</div>
</div>
</div>
<!-- 主内容区 -->
<div class="screen-content">
<!-- 周转箱拣选面板 -->
<div class="picking-panel">
<!-- 面板标题 -->
<!-- 数据表格 -->
<div class="panel-table">
<table class="data-table">
<thead>
<tr>
<th style="width: 60px;">No.</th>
<th style="width: 150px;">拣选托盘码</th>
<th style="width: 200px;">拣选物料名称</th>
<th style="width: 120px;">RFID</th>
<th style="width: 150px;">状态</th>
<th style="width: 150px;">存放托盘码</th>
<th style="width: 120px;">存放位置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in containerPickingList" :key="idx">
<td class="text-center">{{ idx + 1 }}</td>
<td class="text-center">{{ item.pickingBatchNo }}</td>
<td class="text-center">{{ item.pickingMaterialName }}</td>
<td class="text-center">{{ item.rfidBarcode }}</td>
<td class="text-center">
<span :class="['status-badge', getStatusClass(item.status)]">
{{ item.status }}
</span>
</td>
<td class="text-center">{{ item.storageBatchNo.length>10?'-':item.storageBatchNo }}</td>
<td class="text-center">{{ item.storageLocation }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 底部装饰 -->
<div class="screen-footer">
<div class="footer-line"></div>
</div>
</div>
</template>
<script>
import {robotPicking} from '@/api/dashboard/dashboard.js'
import WebSocketClient from '@/utils/websocket'
export default {
name: 'RobotPickingContainer',
data() {
return {
currentTime: '',
timeInterval: null,
serverTimeOffset: 0, // 服务器时间偏移量（毫秒）
// WebSocket相关
useWebSocket: true, // 是否使用WebSocket（可切换为false降级到轮询）
wsConnected: false, // WebSocket连接状态
wsSubscription: null, // WebSocket订阅ID
// 周转箱拣选数据
containerPickingList: []
}
},
mounted() {
// 初始化时间显示
this.currentTime = '等待服务器时间同步...'
// 启动时钟定时器（每秒更新）
this.timeInterval = setInterval(() => {
this.updateTime()
}, 1000)
// 根据配置选择使用WebSocket或轮询
if (this.useWebSocket) {
this.initWebSocket()
}
},
beforeDestroy() {
// 清理时间更新定时器
if (this.timeInterval) {
clearInterval(this.timeInterval)
}
// 断开WebSocket连接
this.disconnectWebSocket()
},
methods: {
/**
* 获取数据列表
*
* <p><b>功能说明：</b>从后端API获取周转箱拣选实时数据</p>
* <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
*/
getDataList() {
robotPicking({}).then(({data}) => {
if (data && data.code === 200) {
console.log('获取周转箱拣选数据成功:', data.data)
// 处理返回的数据
if (data.data) {
// 周转箱拣选数据 (sortingStation=1071)
if (data.data.containerList && data.data.containerList.length > 0) {
this.containerPickingList = data.data.containerList
console.log('周转箱拣选数据已更新，共', this.containerPickingList.length, '条')
} else {
console.log('暂无周转箱拣选数据')
}
}
} else {
console.error('获取周转箱拣选数据失败: 返回码不正确')
}
}).catch(error => {
console.error('获取周转箱拣选数据失败:', error)
})
},
/**
* 更新服务器时间偏移量
*/
updateServerTimeOffset(serverTimeString) {
try {
const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
const serverTime = new Date(timeStr).getTime()
const localTime = new Date().getTime()
if (!isNaN(serverTime)) {
this.serverTimeOffset = serverTime - localTime
}
} catch (error) {
console.warn('解析服务器时间失败:', error)
}
},
/**
* 更新当前时间（使用服务器时间偏移量）
*/
updateTime() {
const now = new Date(new Date().getTime() + this.serverTimeOffset)
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const weekDay = weekDays[now.getDay()]
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
},
/**
* 根据状态获取样式类名
*/
getStatusClass(status) {
const statusMap = {
'完成': 'status-success',
'分拣中': 'status-warning',
'等待分拣': 'status-pending'
}
return statusMap[status] || 'status-pending'
},
/**
* 初始化WebSocket连接
*/
initWebSocket() {
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
// 连接WebSocket服务器
const wsUrl = apiServer + '/ws/dashboard'
WebSocketClient.connect(
wsUrl,
() => {
this.wsConnected = true
// 订阅机械臂拣选主题
this.wsSubscription = WebSocketClient.subscribe(
'/topic/dashboard/robot-picking',
this.handleWebSocketMessage
)
},
(error) => {
// 连接失败回调
console.error('[周转箱拣选看板] WebSocket连接失败，降级到轮询模式', error)
this.wsConnected = false
this.fallbackToPolling()
}
)
},
/**
* 处理WebSocket推送的消息
*
* @param {object} message WebSocket推送的消息
*/
handleWebSocketMessage(message) {
if (message && message.code === 0) {
// 更新服务器时间偏移量
if (message.serverTime) {
this.updateServerTimeOffset(message.serverTime)
}
this.containerPickingList = message.data.containerList || []
// 如果 storageBatchNo.length < 10，则 status 改成 分拣中
this.containerPickingList.forEach(item => {
if (item.storageBatchNo && item.storageBatchNo.length < 10) {
item.status = '分拣中'
}
})
// 排序：分拣中 在最上面
this.containerPickingList.sort((a, b) => {
if (a.status === '分拣中' && b.status !== '分拣中') return -1
if (a.status !== '分拣中' && b.status === '分拣中') return 1
return 0
})
}
},
/**
* 断开WebSocket连接
*/
disconnectWebSocket() {
if (this.wsSubscription) {
WebSocketClient.unsubscribe(this.wsSubscription)
this.wsSubscription = null
}
if (this.wsConnected) {
WebSocketClient.disconnect()
this.wsConnected = false
console.log('[周转箱拣选看板] WebSocket已断开')
}
},
/**
* 降级到轮询模式
*/
fallbackToPolling() {
this.getDataList()
}
}
}
</script>
<style scoped lang="scss">
/* ===== 整体容器 ===== */
.picking-board-screen {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
position: relative;
overflow: hidden;
font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
}
/* ===== 装饰背景 ===== */
.bg-decoration {
display: none;
}
/* ===== 顶部标题区 ===== */
.screen-header {
position: relative;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
z-index: 10;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
}
/* CCL Logo */
.header-logo {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 20;
}
.logo-img {
height: 40px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
transition: all 0.3s ease;
&:hover {
filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
transform: scale(1.05);
}
}
.header-decoration {
display: none;
}
.header-center {
position: relative;
text-align: center;
}
.title-glow {
display: none;
}
.screen-title {
position: relative;
font-size: 34px;
font-weight: bold;
color: #ffffff;
margin: 0;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
}
.title-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 2px;
margin-top: 3px;
font-family: Arial, sans-serif;
text-transform: uppercase;
}
.header-time {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.time-icon {
font-size: 14px;
color: #17B3A3;
}
.time-text {
font-size: 16px;
color: #ffffff;
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 500;
letter-spacing: 1px;
}
/* ===== 主内容区 ===== */
.screen-content {
position: relative;
z-index: 1;
padding: 20px;
height: calc(100vh - 60px);
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.1);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.5);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.7);
}
}
}
/* ===== 拣选面板 ===== */
.picking-panel {
width: 100%;
height: calc(100vh - 100px);
background: rgba(70, 90, 120, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(23, 179, 163, 0.5);
border-radius: 12px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
&:hover {
border-color: rgba(23, 179, 163, 0.5);
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.5),
0 0 30px rgba(23, 179, 163, 0.2);
transform: translateY(-2px);
}
}
/* ===== 面板标题栏 ===== */
.panel-title-bar {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
border-bottom: 1px solid rgba(23, 179, 163, 0.3);
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.title-left {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.title-icon {
font-size: 16px;
color: #64D8CB;
}
.title-text {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.title-main {
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
}
/* ===== 数据表格 ===== */
.panel-table {
padding: 10px;
flex: 1;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.05);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.3);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.5);
}
}
}
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
thead {
tr {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
}
th {
padding: 14px 8px;
color: #fcfdfd;
font-size: 18px;
font-weight: bold;
text-align: center;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
white-space: nowrap;
&:first-child {
border-top-left-radius: 8px;
}
&:last-child {
border-top-right-radius: 8px;
}
}
}
tbody {
tr {
background: rgba(60, 80, 105, 0.6);
transition: all 0.3s ease;
&:nth-child(even) {
background: rgba(70, 90, 115, 0.7);
}
&:hover {
background: rgba(23, 179, 163, 0.15);
box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
}
&:last-child {
td:first-child {
border-bottom-left-radius: 8px;
}
td:last-child {
border-bottom-right-radius: 8px;
}
}
}
td {
padding: 12px 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
border-bottom: 1px solid rgba(23, 179, 163, 0.15);
&.text-center {
text-align: center;
}
&.text-left {
text-align: left;
}
&.text-right {
text-align: right;
}
}
}
}
/* ===== 状态徽章 ===== */
.status-badge {
display: inline-block;
padding: 6px 16px;
border-radius: 14px;
font-size: 16px;
font-weight: bold;
text-align: center;
min-width: 90px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
&.status-success {
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}
&.status-warning {
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}
&.status-pending {
background: linear-gradient(135deg, #6b7280, #9ca3af);
color: #ffffff;
box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
}
}
/* ===== 底部装饰 ===== */
.screen-footer {
display: none;
}
/* ===== 响应式适配 ===== */
@media screen and (max-width: 1600px) {
.screen-title {
font-size: 30px;
letter-spacing: 3px;
}
.title-main {
font-size: 22px;
}
}
@media screen and (min-width: 2560px) {
.screen-title {
font-size: 38px;
}
.panel-title-bar {
padding: 16px 24px;
}
.title-main {
font-size: 28px;
}
.data-table {
thead th {
font-size: 20px;
padding: 16px 12px;
}
tbody td {
font-size: 20px;
padding: 14px 12px;
}
}
.status-badge {
font-size: 18px;
padding: 8px 18px;
min-width: 100px;
}
}
</style>

663
src/views/modules/dashboard/robot-picking-material.vue
View File

@ -0,0 +1,663 @@
<template>
<div class="picking-board-screen">
<!-- 装饰背景 -->
<div class="bg-decoration">
<div class="decoration-line line-1"></div>
<div class="decoration-line line-2"></div>
<div class="decoration-line line-3"></div>
<div class="decoration-circle circle-1"></div>
<div class="decoration-circle circle-2"></div>
</div>
<!-- 顶部标题栏 -->
<div class="screen-header">
<!-- CCL Logo -->
<div class="header-logo">
<img src="~@/assets/img/cclbai.png" alt="CCL Logo" class="logo-img">
</div>
<div class="header-decoration left"></div>
<div class="header-center">
<div class="title-glow"></div>
<h1 class="screen-title">机械臂拣选 - 原材</h1>
<div class="title-subtitle">Robot Picking - Material</div>
</div>
<div class="header-decoration right"></div>
<div class="header-time">
<div class="time-icon"></div>
<div class="time-text">{{ currentTime }}</div>
</div>
</div>
<!-- 主内容区 -->
<div class="screen-content">
<!-- 原材拣选面板 -->
<div class="picking-panel">
<!-- 面板标题 -->
<!-- 数据表格 -->
<div class="panel-table">
<table class="data-table">
<thead>
<tr>
<th style="width: 60px;">No.</th>
<th style="width: 150px;">拣选托盘码</th>
<th style="width: 200px;">拣选物料名称</th>
<th style="width: 120px;">RFID</th>
<th style="width: 150px;">状态</th>
<th style="width: 150px;">存放托盘码</th>
<th style="width: 120px;">存放位置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in materialPickingList" :key="idx">
<td class="text-center">{{ idx + 1 }}</td>
<td class="text-center">{{ item.pickingBatchNo }}</td>
<td class="text-center">{{ item.pickingMaterialName }}</td>
<td class="text-center">{{ item.rfidBarcode }}</td>
<td class="text-center">
<span :class="['status-badge', getStatusClass(item.status)]">
{{ item.status }}
</span>
</td>
<td class="text-center">{{ item.storageBatchNo.length>10?'-':item.storageBatchNo }}</td>
<td class="text-center">{{ item.storageLocation }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 底部装饰 -->
<div class="screen-footer">
<div class="footer-line"></div>
</div>
</div>
</template>
<script>
import {robotPicking} from '@/api/dashboard/dashboard.js'
import WebSocketClient from '@/utils/websocket'
export default {
name: 'RobotPickingMaterial',
data() {
return {
currentTime: '',
timeInterval: null,
serverTimeOffset: 0, // 服务器时间偏移量（毫秒）
// WebSocket相关
useWebSocket: true, // 是否使用WebSocket（可切换为false降级到轮询）
wsConnected: false, // WebSocket连接状态
wsSubscription: null, // WebSocket订阅ID
// 原材拣选数据
materialPickingList: []
}
},
mounted() {
// 初始化时间显示
this.currentTime = '等待服务器时间同步...'
// 启动时钟定时器（每秒更新）
this.timeInterval = setInterval(() => {
this.updateTime()
}, 1000)
// 根据配置选择使用WebSocket或轮询
if (this.useWebSocket) {
this.initWebSocket()
}
},
beforeDestroy() {
// 清理时间更新定时器
if (this.timeInterval) {
clearInterval(this.timeInterval)
}
// 断开WebSocket连接
this.disconnectWebSocket()
},
methods: {
/**
* 获取数据列表
*
* <p><b>功能说明：</b>从后端API获取原材拣选实时数据</p>
* <p><b>数据更新策略：</b>覆盖而非追加，避免内存累积</p>
*/
getDataList() {
robotPicking({}).then(({data}) => {
if (data && data.code === 200) {
console.log('获取原材拣选数据成功:', data.data)
// 处理返回的数据
if (data.data) {
// 原材拣选数据 (sortingStation=1060)
if (data.data.materialList && data.data.materialList.length > 0) {
this.materialPickingList = data.data.materialList
console.log('原材拣选数据已更新，共', this.materialPickingList.length, '条')
} else {
console.log('暂无原材拣选数据')
}
}
} else {
console.error('获取原材拣选数据失败: 返回码不正确')
}
}).catch(error => {
console.error('获取原材拣选数据失败:', error)
})
},
/**
* 更新服务器时间偏移量
*/
updateServerTimeOffset(serverTimeString) {
try {
const timeStr = serverTimeString.split(' ')[0] + ' ' + serverTimeString.split(' ')[1]
const serverTime = new Date(timeStr).getTime()
const localTime = new Date().getTime()
if (!isNaN(serverTime)) {
this.serverTimeOffset = serverTime - localTime
}
} catch (error) {
console.warn('解析服务器时间失败:', error)
}
},
/**
* 更新当前时间（使用服务器时间偏移量）
*/
updateTime() {
const now = new Date(new Date().getTime() + this.serverTimeOffset)
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
const seconds = String(now.getSeconds()).padStart(2, '0')
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
const weekDay = weekDays[now.getDay()]
this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
},
/**
* 根据状态获取样式类名
*/
getStatusClass(status) {
const statusMap = {
'完成': 'status-success',
'分拣中': 'status-warning',
'等待分拣': 'status-pending'
}
return statusMap[status] || 'status-pending'
},
/**
* 初始化WebSocket连接
*/
initWebSocket() {
var apiServer = (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl);
// 连接WebSocket服务器
const wsUrl = apiServer + '/ws/dashboard'
WebSocketClient.connect(
wsUrl,
() => {
this.wsConnected = true
// 订阅机械臂拣选主题
this.wsSubscription = WebSocketClient.subscribe(
'/topic/dashboard/robot-picking',
this.handleWebSocketMessage
)
},
(error) => {
// 连接失败回调
console.error('[原材拣选看板] WebSocket连接失败，降级到轮询模式', error)
this.wsConnected = false
this.fallbackToPolling()
}
)
},
/**
* 处理WebSocket推送的消息
*
* @param {object} message WebSocket推送的消息
*/
handleWebSocketMessage(message) {
if (message && message.code === 0) {
// 更新服务器时间偏移量
if (message.serverTime) {
this.updateServerTimeOffset(message.serverTime)
}
this.materialPickingList = message.data.materialList || []
// 如果 storageBatchNo.length < 10，则 status 改成 分拣中
this.materialPickingList.forEach(item => {
if (item.storageBatchNo && item.storageBatchNo.length < 10) {
item.status = '分拣中'
}
})
// 排序：分拣中 在最上面
this.materialPickingList.sort((a, b) => {
if (a.status === '分拣中' && b.status !== '分拣中') return -1
if (a.status !== '分拣中' && b.status === '分拣中') return 1
return 0
})
}
},
/**
* 断开WebSocket连接
*/
disconnectWebSocket() {
if (this.wsSubscription) {
WebSocketClient.unsubscribe(this.wsSubscription)
this.wsSubscription = null
}
if (this.wsConnected) {
WebSocketClient.disconnect()
this.wsConnected = false
console.log('[原材拣选看板] WebSocket已断开')
}
},
/**
* 降级到轮询模式
*/
fallbackToPolling() {
this.getDataList()
}
}
}
</script>
<style scoped lang="scss">
/* ===== 整体容器 ===== */
.picking-board-screen {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #5f8cc3 0%, #749cc8 100%);
position: relative;
overflow: hidden;
font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
}
/* ===== 装饰背景 ===== */
.bg-decoration {
display: none;
}
/* ===== 顶部标题区 ===== */
.screen-header {
position: relative;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
z-index: 10;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
background: linear-gradient(180deg, rgba(23, 179, 163, 0.08) 0%, transparent 100%);
}
/* CCL Logo */
.header-logo {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 20;
}
.logo-img {
height: 40px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
transition: all 0.3s ease;
&:hover {
filter: drop-shadow(0 4px 12px rgba(23, 179, 163, 0.5));
transform: scale(1.05);
}
}
.header-decoration {
display: none;
}
.header-center {
position: relative;
text-align: center;
}
.title-glow {
display: none;
}
.screen-title {
position: relative;
font-size: 34px;
font-weight: bold;
color: #ffffff;
margin: 0;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
}
.title-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 2px;
margin-top: 3px;
font-family: Arial, sans-serif;
text-transform: uppercase;
}
.header-time {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border-radius: 8px;
backdrop-filter: blur(10px);
}
.time-icon {
font-size: 14px;
color: #17B3A3;
}
.time-text {
font-size: 16px;
color: #ffffff;
font-family: 'Consolas', 'Courier New', monospace;
font-weight: 500;
letter-spacing: 1px;
}
/* ===== 主内容区 ===== */
.screen-content {
position: relative;
z-index: 1;
padding: 20px;
height: calc(100vh - 60px);
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.1);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.5);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.7);
}
}
}
/* ===== 拣选面板 ===== */
.picking-panel {
width: 100%;
height: calc(100vh - 100px);
background: rgba(70, 90, 120, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(23, 179, 163, 0.5);
border-radius: 12px;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
&:hover {
border-color: rgba(23, 179, 163, 0.5);
box-shadow:
0 12px 48px rgba(0, 0, 0, 0.5),
0 0 30px rgba(23, 179, 163, 0.2);
transform: translateY(-2px);
}
}
/* ===== 面板标题栏 ===== */
.panel-title-bar {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.3) 0%, rgba(23, 179, 163, 0.15) 100%);
border-bottom: 1px solid rgba(23, 179, 163, 0.3);
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.title-left {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.title-icon {
font-size: 16px;
color: #64D8CB;
}
.title-text {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.title-main {
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
}
/* ===== 数据表格 ===== */
.panel-table {
padding: 10px;
flex: 1;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: rgba(23, 179, 163, 0.05);
}
&::-webkit-scrollbar-thumb {
background: rgba(23, 179, 163, 0.3);
border-radius: 3px;
&:hover {
background: rgba(23, 179, 163, 0.5);
}
}
}
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
thead {
tr {
background: linear-gradient(135deg, rgba(23, 179, 163, 0.25) 0%, rgba(23, 179, 163, 0.15) 100%);
}
th {
padding: 14px 8px;
color: #fcfdfd;
font-size: 18px;
font-weight: bold;
text-align: center;
border-bottom: 2px solid rgba(23, 179, 163, 0.4);
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
white-space: nowrap;
&:first-child {
border-top-left-radius: 8px;
}
&:last-child {
border-top-right-radius: 8px;
}
}
}
tbody {
tr {
background: rgba(60, 80, 105, 0.6);
transition: all 0.3s ease;
&:nth-child(even) {
background: rgba(70, 90, 115, 0.7);
}
&:hover {
background: rgba(23, 179, 163, 0.15);
box-shadow: 0 4px 12px rgba(23, 179, 163, 0.2);
}
&:last-child {
td:first-child {
border-bottom-left-radius: 8px;
}
td:last-child {
border-bottom-right-radius: 8px;
}
}
}
td {
padding: 12px 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
border-bottom: 1px solid rgba(23, 179, 163, 0.15);
&.text-center {
text-align: center;
}
&.text-left {
text-align: left;
}
&.text-right {
text-align: right;
}
}
}
}
/* ===== 状态徽章 ===== */
.status-badge {
display: inline-block;
padding: 6px 16px;
border-radius: 14px;
font-size: 16px;
font-weight: bold;
text-align: center;
min-width: 90px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
&.status-success {
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}
&.status-warning {
background: linear-gradient(135deg, #10b981, #34d399);
color: #ffffff;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}
&.status-pending {
background: linear-gradient(135deg, #6b7280, #9ca3af);
color: #ffffff;
box-shadow: 0 0 15px rgba(107, 114, 128, 0.5);
}
}
/* ===== 底部装饰 ===== */
.screen-footer {
display: none;
}
/* ===== 响应式适配 ===== */
@media screen and (max-width: 1600px) {
.screen-title {
font-size: 30px;
letter-spacing: 3px;
}
.title-main {
font-size: 22px;
}
}
@media screen and (min-width: 2560px) {
.screen-title {
font-size: 38px;
}
.panel-title-bar {
padding: 16px 24px;
}
.title-main {
font-size: 28px;
}
.data-table {
thead th {
font-size: 20px;
padding: 16px 12px;
}
tbody td {
font-size: 20px;
padding: 14px 12px;
}
}
.status-badge {
font-size: 18px;
padding: 8px 18px;
min-width: 100px;
}
}
</style>
Write Preview
Loading…
Cancel
Save