6 changed files with 2810 additions and 36 deletions
-
4src/router/index.js
-
683src/views/modules/dashboard/picking-board-1028.vue
-
683src/views/modules/dashboard/picking-board-1043.vue
-
153src/views/modules/dashboard/picking-board.vue
-
662src/views/modules/dashboard/robot-picking-container.vue
-
663src/views/modules/dashboard/robot-picking-material.vue
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
@ -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> |
||||
|
|
||||
@ -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
Reference in new issue