You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
717 lines
18 KiB
717 lines
18 KiB
<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 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">机械臂拣选 - 周转箱</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="panel-table">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 10px;">No.</th>
|
|
<th style="width: 110px;">拣选托盘码</th>
|
|
<th style="width: 180px;">拣选物料名称</th>
|
|
<th style="width: 80px;">RFID</th>
|
|
<th style="width: 130px;">状态</th>
|
|
<th style="width: 110px;">存放托盘码</th>
|
|
<th style="width: 80px;">存放位置</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-right">{{ 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 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">机械臂拣选 - 原材</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据表格 -->
|
|
<div class="panel-table">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 10px;">No.</th>
|
|
<th style="width: 110px;">拣选托盘码</th>
|
|
<th style="width: 180px;">拣选物料名称</th>
|
|
<th style="width: 80px;">RFID</th>
|
|
<th style="width: 130px;">状态</th>
|
|
<th style="width: 120px;">存放托盘码</th>
|
|
<th style="width: 80px;">存放位置</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-right">{{ 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: 'RobotPickingBoard',
|
|
|
|
data() {
|
|
return {
|
|
currentTime: '',
|
|
timeInterval: null,
|
|
|
|
// WebSocket相关
|
|
useWebSocket: true, // 是否使用WebSocket（可切换为false降级到轮询）
|
|
wsConnected: false, // WebSocket连接状态
|
|
wsSubscription: null, // WebSocket订阅ID
|
|
|
|
// 周转箱拣选数据
|
|
containerPickingList: [],
|
|
|
|
// 原材拣选数据
|
|
materialPickingList: []
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
// 启动时钟
|
|
this.updateTime()
|
|
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('暂无周转箱拣选数据')
|
|
// 保持原有数据或清空，根据业务需求决定
|
|
// this.containerPickingList = []
|
|
}
|
|
|
|
// 原材拣选数据 (sortingStation=1060)
|
|
if (data.data.materialList && data.data.materialList.length > 0) {
|
|
this.materialPickingList = data.data.materialList
|
|
console.log('原材拣选数据已更新，共', this.materialPickingList.length, '条')
|
|
} else {
|
|
console.log('暂无原材拣选数据')
|
|
// 保持原有数据或清空，根据业务需求决定
|
|
// this.materialPickingList = []
|
|
}
|
|
}
|
|
} else {
|
|
console.error('获取机械臂拣选数据失败: 返回码不正确')
|
|
}
|
|
}).catch(error => {
|
|
console.error('获取机械臂拣选数据失败:', error)
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 更新当前时间
|
|
*/
|
|
updateTime() {
|
|
const now = new Date()
|
|
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} ${weekDay} ${hours}:${minutes}:${seconds}`
|
|
},
|
|
|
|
/**
|
|
* 根据状态获取样式类名
|
|
*/
|
|
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) {
|
|
this.containerPickingList = message.data.containerList || []
|
|
this.materialPickingList = message.data.materialList || []
|
|
|
|
// 如果 storageBatchNo.length < 10，则 status 改成 分拣中
|
|
this.containerPickingList.forEach(item => {
|
|
if (item.storageBatchNo && item.storageBatchNo.length < 10) {
|
|
item.status = '分拣中'
|
|
}
|
|
})
|
|
|
|
this.materialPickingList.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
|
|
})
|
|
|
|
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: 28px;
|
|
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: 10px;
|
|
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;
|
|
background: rgba(23, 179, 163, 0.15);
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(23, 179, 163, 0.4);
|
|
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: 10px 5px;
|
|
height: calc(100vh - 60px);
|
|
overflow-y: auto;
|
|
display: flex;
|
|
gap: 30px;
|
|
|
|
&::-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 {
|
|
margin-left: 5px;
|
|
flex: 1;
|
|
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: 10px 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: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.title-main {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
|
|
}
|
|
|
|
/* ===== 数据表格 ===== */
|
|
.panel-table {
|
|
padding: 5px 5px;
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: rgba(23, 179, 163, 0.05);
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: rgba(23, 179, 163, 0.3);
|
|
border-radius: 2px;
|
|
|
|
&: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: 8px 2px;
|
|
color: #fcfdfd;
|
|
font-size: 10px;
|
|
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: 7px 2px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
font-size: 12px;
|
|
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: 3px 8px;
|
|
border-radius: 12px;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
min-width: 60px;
|
|
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: 26px;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.title-main {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 2560px) {
|
|
.screen-title {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.panel-title-bar {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
.title-main {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.data-table {
|
|
thead th {
|
|
font-size: 12px;
|
|
padding: 9px 5px;
|
|
}
|
|
|
|
tbody td {
|
|
font-size: 14px;
|
|
padding: 8px 12px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|