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.
625 lines
14 KiB
625 lines
14 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">异常区域看板
|
|
<span class="ws-status-dot" :class="connectionClass" :title="connectionText"></span>
|
|
</h1>
|
|
|
|
</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">
|
|
<!-- 面板标题 -->
|
|
|
|
<!-- 数据表格 -->
|
|
<!-- 行多时在表体内定时下滚，鼠标进入暂停，表头保持可见 - rqrq -->
|
|
<div ref="tableViewport" class="panel-table" @mouseenter="scrollPaused = true" @mouseleave="scrollPaused = false">
|
|
<table class="data-table error-area-table">
|
|
<colgroup>
|
|
<col style="width: 20%">
|
|
<col style="width: 20%">
|
|
<col style="width: 60%">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th>位置</th>
|
|
<th>栈板</th>
|
|
<th>异常信息</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(item, idx) in boardList" :key="idx + '-' + item.palletId">
|
|
<td class="text-center">{{ item.locationCode || '-' }}</td>
|
|
<td class="text-center">{{ item.palletId || '-' }}</td>
|
|
<td class="text-left error-message">{{ item.errorMessage || '-' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部装饰 -->
|
|
<div class="screen-footer">
|
|
<div class="footer-line"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getErrorAreaBoard } from '@/api/haianWarehouse/errorAreaBoard'
|
|
|
|
// 外观沿用海安看板。每 5 秒无锁查 site=54、区域 A09 的栈板 - rqrq
|
|
export default {
|
|
name: 'HaianErrorAreaBoard54',
|
|
|
|
data() {
|
|
return {
|
|
currentTime: '',
|
|
timeInterval: null,
|
|
serverTimeOffset: 0,
|
|
refreshCheckInterval: null,
|
|
pollTimer: null,
|
|
queryLoading: false,
|
|
// 第一次请求中为黄，查询成功为绿，失败为红。没有栈板也保持绿灯 - rqrq
|
|
connectionState: 'connecting',
|
|
boardList: [],
|
|
scrollTimer: null,
|
|
scrollPaused: false,
|
|
scrollResumeAt: 0
|
|
}
|
|
},
|
|
computed: {
|
|
connectionClass () {
|
|
return {
|
|
'is-connecting': this.connectionState === 'connecting',
|
|
'is-connected': this.connectionState === 'connected',
|
|
'is-disconnected': this.connectionState === 'disconnected'
|
|
}
|
|
},
|
|
connectionText () {
|
|
return { connecting: '正在查询异常区域', connected: '数据正常', disconnected: '查询失败' }[this.connectionState]
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.currentTime = '等待服务器时间同步...'
|
|
this.timeInterval = setInterval(() => {
|
|
this.updateTime()
|
|
}, 1000)
|
|
this.startRefreshCheck()
|
|
// 每 5 秒查一次 A09。上一轮没回来就跳过，避免请求叠在一起 - rqrq
|
|
this.getDataList()
|
|
this.pollTimer = setInterval(() => {
|
|
this.getDataList()
|
|
}, 5000)
|
|
// 和人工分拣一样每 60 毫秒走 1 像素；内容没超出时方法内直接返回 - rqrq
|
|
this.scrollTimer = setInterval(this.scrollTable, 60)
|
|
},
|
|
|
|
beforeDestroy() {
|
|
if (this.timeInterval) {
|
|
clearInterval(this.timeInterval)
|
|
}
|
|
if (this.refreshCheckInterval) {
|
|
clearInterval(this.refreshCheckInterval)
|
|
}
|
|
if (this.pollTimer) {
|
|
clearInterval(this.pollTimer)
|
|
}
|
|
if (this.scrollTimer) {
|
|
clearInterval(this.scrollTimer)
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
startRefreshCheck() {
|
|
this.refreshCheckInterval = setInterval(() => {
|
|
this.checkAndRefreshPage()
|
|
}, 60000)
|
|
this.checkAndRefreshPage()
|
|
},
|
|
checkAndRefreshPage() {
|
|
const now = new Date()
|
|
if (now.getHours() === 5 && now.getMinutes() === 10) {
|
|
location.reload()
|
|
}
|
|
},
|
|
// 查询成功亮绿灯，没有栈板也亮绿灯。查询失败亮红灯并清空表 - rqrq
|
|
getDataList() {
|
|
if (this.queryLoading) return
|
|
this.queryLoading = true
|
|
getErrorAreaBoard({ site: '54' }).then(({ data }) => {
|
|
if (data && data.code === 0 && data.row && data.row.site === '54' && data.row.available === true) {
|
|
this.connectionState = 'connected'
|
|
this.boardList = Array.isArray(data.row.rows) ? data.row.rows : []
|
|
return
|
|
}
|
|
this.connectionState = 'disconnected'
|
|
this.boardList = []
|
|
}).catch(() => {
|
|
this.connectionState = 'disconnected'
|
|
this.boardList = []
|
|
}).finally(() => {
|
|
this.queryLoading = false
|
|
})
|
|
},
|
|
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}`
|
|
},
|
|
// 到底停留 2 秒再回顶。没有数据或表格没超出可视高度时不滚 - rqrq
|
|
scrollTable () {
|
|
const viewport = this.$refs.tableViewport
|
|
if (!viewport || this.scrollPaused || !this.boardList.length || Date.now() < this.scrollResumeAt) return
|
|
if (viewport.scrollHeight <= viewport.clientHeight) return
|
|
if (viewport.scrollTop + viewport.clientHeight >= viewport.scrollHeight - 1) {
|
|
viewport.scrollTop = 0
|
|
this.scrollResumeAt = Date.now() + 2000
|
|
} else {
|
|
viewport.scrollTop += 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
/* ===== 顶部标题区 ===== */
|
|
/* 左右等宽，标题留在中间，时间和标题不再叠在一起 - rqrq */
|
|
.screen-header {
|
|
position: relative;
|
|
height: 60px;
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr);
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
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);
|
|
}
|
|
|
|
.ws-status-dot {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
margin-left: 12px;
|
|
border-radius: 50%;
|
|
vertical-align: middle;
|
|
background: #22c55e;
|
|
box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
|
|
|
|
&.is-connecting {
|
|
background: #f59e0b;
|
|
box-shadow: 0 0 12px rgba(245, 158, 11, 0.85);
|
|
}
|
|
|
|
&.is-disconnected {
|
|
background: #ef4444;
|
|
box-shadow: 0 0 12px rgba(239, 68, 68, 0.85);
|
|
animation: ws-status-blink 1s steps(1, end) infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes ws-status-blink {
|
|
0%, 50% {
|
|
opacity: 1;
|
|
}
|
|
50.01%, 100% {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 时间只占右上角文字，不留底块，避免罩住中间标题 - rqrq */
|
|
.header-time {
|
|
position: absolute;
|
|
right: 24px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1;
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.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: 8px 15px;
|
|
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 - 80px);
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
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);
|
|
}
|
|
|
|
/* ===== 数据表格 ===== */
|
|
/* 滚动容器不能留内边距，否则粘性表头停在内边距下沿，数据行会露到表头上面 - rqrq */
|
|
.panel-table {
|
|
padding: 0;
|
|
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 {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
|
|
tr {
|
|
background: #1b6676;
|
|
}
|
|
|
|
th {
|
|
background: #1b6676;
|
|
padding: 5px 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: 4px 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 异常信息列占 60%，长文本换行，不把位置和栈板挤没 - rqrq */
|
|
.error-area-table {
|
|
table-layout: fixed;
|
|
|
|
td.error-message {
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
/* ===== 状态徽章 ===== */
|
|
.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, #10b981, #34d399);
|
|
color: #ffffff;
|
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
|
|
}
|
|
|
|
&.status-pending {
|
|
background: linear-gradient(135deg, #f59e0b, #fbbf24);
|
|
color: #ffffff;
|
|
box-shadow: 0 0 15px rgba(245, 158, 11, 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: 6px 12px;
|
|
}
|
|
|
|
tbody td {
|
|
font-size: 20px;
|
|
padding: 4px 12px;
|
|
}
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 18px;
|
|
padding: 4px 10px;
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
</style>
|
|
|