8 changed files with 3849 additions and 1 deletions
-
12src/api/dashboard/dashboard.js
-
8src/router/index.js
-
617src/views/modules/dashboard/buffer-board.vue
-
666src/views/modules/dashboard/finished-product-board.vue
-
665src/views/modules/dashboard/material-receiving-board.vue
-
655src/views/modules/dashboard/robot-picking-board.vue
-
645src/views/modules/dashboard/slitting-board.vue
-
582src/views/modules/dashboard/workshop-feeding-board.vue
@ -0,0 +1,617 @@ |
|||
<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"> |
|||
<div class="header-decoration left"></div> |
|||
<div class="header-center"> |
|||
<div class="title-glow"></div> |
|||
<h1 class="screen-title">缓存区实时看板</h1> |
|||
<div class="title-subtitle">Buffer Area 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-single"> |
|||
<!-- 缓存区面板 --> |
|||
<div class="picking-panel-single"> |
|||
<!-- 面板标题 --> |
|||
<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: 120px;">AGV位置</th> |
|||
<th style="width: 150px;">托盘码</th> |
|||
<th style="width: 180px;">物料名称</th> |
|||
<th style="width: 150px;">工单号码</th> |
|||
<th style="width: 200px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in bufferList" :key="idx"> |
|||
<td class="text-center">{{ item.agvLocation }}</td> |
|||
<td class="text-center">{{ item.palletCode }}</td> |
|||
<td class="text-center">{{ item.materialName || '-' }}</td> |
|||
<td class="text-center">{{ item.workOrderNo || '-' }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部装饰 --> |
|||
<div class="screen-footer"> |
|||
<div class="footer-line"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {bufferBoard} from '@/api/dashboard/dashboard.js' |
|||
|
|||
export default { |
|||
name: 'BufferBoard', |
|||
|
|||
data() { |
|||
return { |
|||
currentTime: '', |
|||
timeInterval: null, |
|||
dataInterval: null, |
|||
|
|||
// 缓存区数据 |
|||
bufferList: [ |
|||
{ |
|||
agvLocation: 'HC05', |
|||
palletCode: 'W00015', |
|||
materialName: '80451239', |
|||
workOrderNo: '3002149', |
|||
status: '待送人工拣选' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC06', |
|||
palletCode: 'W00016', |
|||
materialName: '80451240', |
|||
workOrderNo: '3002150', |
|||
status: '待送人工拣选' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC07', |
|||
palletCode: 'W00017', |
|||
materialName: '80451241', |
|||
workOrderNo: '3002151', |
|||
status: '待送3楼车间' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC08', |
|||
palletCode: 'W00018', |
|||
materialName: '80451242', |
|||
workOrderNo: '3002152', |
|||
status: '待送1楼车间' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC09', |
|||
palletCode: 'G00013', |
|||
materialName: '', |
|||
workOrderNo: '', |
|||
status: '待送分切区' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC10', |
|||
palletCode: 'G00014', |
|||
materialName: '', |
|||
workOrderNo: '', |
|||
status: '待送分切区' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC01', |
|||
palletCode: 'P00011', |
|||
materialName: '', |
|||
workOrderNo: '', |
|||
status: '待送包装区' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC02', |
|||
palletCode: 'P00012', |
|||
materialName: '', |
|||
workOrderNo: '', |
|||
status: '待送包装区' |
|||
}, |
|||
{ |
|||
agvLocation: 'HC03', |
|||
palletCode: 'P00013', |
|||
materialName: '', |
|||
workOrderNo: '', |
|||
status: '待送包装区' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.updateTime() |
|||
this.timeInterval = setInterval(() => { |
|||
this.updateTime() |
|||
}, 1000) |
|||
|
|||
// 首次加载数据 |
|||
this.getDataList() |
|||
|
|||
// 每30秒刷新一次数据 |
|||
this.dataInterval = setInterval(() => { |
|||
this.getDataList() |
|||
}, 30000) |
|||
}, |
|||
|
|||
beforeDestroy() { |
|||
if (this.timeInterval) { |
|||
clearInterval(this.timeInterval) |
|||
} |
|||
if (this.dataInterval) { |
|||
clearInterval(this.dataInterval) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 获取数据列表 |
|||
*/ |
|||
getDataList() { |
|||
bufferBoard({}).then(({data}) => { |
|||
if (data && data.code === 200) { |
|||
console.log('获取缓存区数据成功:', data.data) |
|||
// TODO: 处理返回的数据 |
|||
// if (data.data) { |
|||
// this.bufferList = data.data.bufferList || [] |
|||
// } |
|||
} |
|||
}).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-warning', |
|||
'待送3楼车间': 'status-info', |
|||
'待送1楼车间': 'status-info', |
|||
'待送分切区': 'status-success', |
|||
'待送包装区': 'status-pending' |
|||
} |
|||
return statusMap[status] || 'status-pending' |
|||
} |
|||
} |
|||
} |
|||
</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%); |
|||
} |
|||
|
|||
.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: 40px; |
|||
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-single { |
|||
position: relative; |
|||
z-index: 1; |
|||
padding: 20px; |
|||
height: calc(100vh - 60px); |
|||
overflow-y: auto; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
|
|||
&::-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-single { |
|||
width: 100%; |
|||
max-width: 1400px; |
|||
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: 20px; |
|||
color: #64D8CB; |
|||
} |
|||
|
|||
.title-text { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.title-main { |
|||
font-size: 22px; |
|||
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: 15px 10px; |
|||
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: 15px 10px; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
font-size: 16px; |
|||
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: 12px; |
|||
font-size: 14px; |
|||
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, #f59e0b, #fbbf24); |
|||
color: #ffffff; |
|||
box-shadow: 0 0 15px rgba(245, 158, 11, 0.5); |
|||
} |
|||
|
|||
&.status-info { |
|||
background: linear-gradient(135deg, #3b82f6, #60a5fa); |
|||
color: #ffffff; |
|||
box-shadow: 0 0 15px rgba(59, 130, 246, 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: 20px; |
|||
} |
|||
|
|||
.data-table { |
|||
thead th { |
|||
font-size: 14px; |
|||
padding: 12px 8px; |
|||
} |
|||
|
|||
tbody td { |
|||
font-size: 14px; |
|||
padding: 12px 8px; |
|||
} |
|||
} |
|||
|
|||
.status-badge { |
|||
font-size: 12px; |
|||
padding: 5px 12px; |
|||
min-width: 80px; |
|||
} |
|||
} |
|||
|
|||
@media screen and (min-width: 2560px) { |
|||
.screen-title { |
|||
font-size: 32px; |
|||
} |
|||
|
|||
.panel-title-bar { |
|||
padding: 18px 24px; |
|||
} |
|||
|
|||
.title-main { |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.data-table { |
|||
thead th { |
|||
font-size: 18px; |
|||
padding: 18px 12px; |
|||
} |
|||
|
|||
tbody td { |
|||
font-size: 18px; |
|||
padding: 18px 12px; |
|||
} |
|||
} |
|||
|
|||
.status-badge { |
|||
font-size: 16px; |
|||
padding: 8px 20px; |
|||
min-width: 110px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,666 @@ |
|||
<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"> |
|||
<div class="header-decoration left"></div> |
|||
<div class="header-center"> |
|||
<div class="title-glow"></div> |
|||
<h1 class="screen-title">成品入库出库区实时看板</h1> |
|||
<div class="title-subtitle">Finished Product Area 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: 60px;">No.</th> |
|||
<th style="width: 100px;">存放位置</th> |
|||
<th style="width: 110px;">托盘码</th> |
|||
<th style="width: 100px;">拣选位置</th> |
|||
<th style="width: 180px;">拣选物料名称</th> |
|||
<th style="width: 100px;">拣选数量</th> |
|||
<th style="width: 120px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in packagingList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.storageLocation }}</td> |
|||
<td class="text-center">{{ item.palletCode }}</td> |
|||
<td class="text-center">{{ item.pickingLocation }}</td> |
|||
<td class="text-left">{{ item.materialName }}</td> |
|||
<td class="text-right">{{ item.quantity }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</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: 80px;">No.</th> |
|||
<th style="width: 150px;">存放位置</th> |
|||
<th style="width: 150px;">托盘码</th> |
|||
<th style="width: 150px;">任务分类</th> |
|||
<th style="width: 200px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in inboundList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.storageLocation }}</td> |
|||
<td class="text-center">{{ item.palletCode }}</td> |
|||
<td class="text-center">{{ item.taskType }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部装饰 --> |
|||
<div class="screen-footer"> |
|||
<div class="footer-line"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {finishedProductBoard} from '@/api/dashboard/dashboard.js' |
|||
|
|||
export default { |
|||
name: 'FinishedProductBoard', |
|||
|
|||
data() { |
|||
return { |
|||
currentTime: '', |
|||
timeInterval: null, |
|||
dataInterval: null, |
|||
|
|||
// 成品包装区数据 |
|||
packagingList: [ |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '2-1', |
|||
materialName: '80501234', |
|||
quantity: '1,000', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '1-2', |
|||
materialName: '80501235', |
|||
quantity: '5000', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '1-2', |
|||
materialName: '80501236', |
|||
quantity: '1000', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '1-3', |
|||
materialName: '80501237', |
|||
quantity: '1000', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '1-4', |
|||
materialName: '80501238', |
|||
quantity: '5000', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '2-2', |
|||
materialName: '80501239', |
|||
quantity: '1000', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '2-3', |
|||
materialName: '80501240', |
|||
quantity: '2000', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00001', |
|||
pickingLocation: '2-4', |
|||
materialName: '80501241', |
|||
quantity: '123', |
|||
status: '已到达' |
|||
} |
|||
], |
|||
|
|||
// 成品入库区数据 |
|||
inboundList: [ |
|||
{ |
|||
storageLocation: 'CP01', |
|||
palletCode: 'P00002', |
|||
taskType: '入库', |
|||
status: 'AGV运送中' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP02', |
|||
palletCode: 'P00003', |
|||
taskType: '入库', |
|||
status: '已组盘' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP03', |
|||
palletCode: 'P00004', |
|||
taskType: '入库', |
|||
status: '已组盘' |
|||
}, |
|||
{ |
|||
storageLocation: 'CP04', |
|||
palletCode: 'P00010', |
|||
taskType: '生产送货', |
|||
status: '已到达' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.updateTime() |
|||
this.timeInterval = setInterval(() => { |
|||
this.updateTime() |
|||
}, 1000) |
|||
|
|||
// 首次加载数据 |
|||
this.getDataList() |
|||
|
|||
// 每30秒刷新一次数据 |
|||
this.dataInterval = setInterval(() => { |
|||
this.getDataList() |
|||
}, 30000) |
|||
}, |
|||
|
|||
beforeDestroy() { |
|||
if (this.timeInterval) { |
|||
clearInterval(this.timeInterval) |
|||
} |
|||
if (this.dataInterval) { |
|||
clearInterval(this.dataInterval) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 获取数据列表 |
|||
*/ |
|||
getDataList() { |
|||
finishedProductBoard({}).then(({data}) => { |
|||
if (data && data.code === 200) { |
|||
console.log('获取成品入库出库区数据成功:', data.data) |
|||
// TODO: 处理返回的数据 |
|||
// if (data.data) { |
|||
// this.packagingList = data.data.packagingList || [] |
|||
// this.inboundList = data.data.inboundList || [] |
|||
// } |
|||
} |
|||
}).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', |
|||
'AGV运送中': 'status-warning', |
|||
'已组盘': 'status-info', |
|||
'等待': 'status-pending' |
|||
} |
|||
return statusMap[status] || 'status-pending' |
|||
} |
|||
} |
|||
} |
|||
</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%); |
|||
} |
|||
|
|||
.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: 40px; |
|||
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: 70px; |
|||
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-info { |
|||
background: linear-gradient(135deg, #3b82f6, #60a5fa); |
|||
color: #ffffff; |
|||
box-shadow: 0 0 15px rgba(59, 130, 246, 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> |
|||
|
|||
@ -0,0 +1,665 @@ |
|||
<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"> |
|||
<div class="header-decoration left"></div> |
|||
<div class="header-center"> |
|||
<div class="title-glow"></div> |
|||
<h1 class="screen-title">原材收货区实时看板</h1> |
|||
<div class="title-subtitle">Material Receiving Area 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: 60px;">No.</th> |
|||
<th style="width: 120px;">到达时间</th> |
|||
<th style="width: 180px;">拣选物料名称</th> |
|||
<th style="width: 100px;">数量</th> |
|||
<th style="width: 100px;">库位</th> |
|||
<th style="width: 120px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in receivingList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.arrivalTime }}</td> |
|||
<td class="text-left">{{ item.materialName }}</td> |
|||
<td class="text-right">{{ item.quantity }}</td> |
|||
<td class="text-center">{{ item.location }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</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: 80px;">No.</th> |
|||
<th style="width: 150px;">存放位置</th> |
|||
<th style="width: 150px;">托盘码</th> |
|||
<th style="width: 150px;">任务分类</th> |
|||
<th style="width: 200px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in inboundList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.storageLocation }}</td> |
|||
<td class="text-center">{{ item.palletCode }}</td> |
|||
<td class="text-center">{{ item.taskType }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部装饰 --> |
|||
<div class="screen-footer"> |
|||
<div class="footer-line"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {materialReceivingBoard} from '@/api/dashboard/dashboard.js' |
|||
|
|||
export default { |
|||
name: 'MaterialReceivingBoard', |
|||
|
|||
data() { |
|||
return { |
|||
currentTime: '', |
|||
timeInterval: null, |
|||
dataInterval: null, |
|||
|
|||
// 原材收货区数据 |
|||
receivingList: [ |
|||
{ |
|||
arrivalTime: '2025/10/15', |
|||
materialName: '80501234', |
|||
quantity: '1,000', |
|||
location: 'FMQ', |
|||
status: '待检验' |
|||
}, |
|||
{ |
|||
arrivalTime: '2025/10/15', |
|||
materialName: '80501235', |
|||
quantity: '5000', |
|||
location: 'FMQ', |
|||
status: '待检验' |
|||
}, |
|||
{ |
|||
arrivalTime: '2025/10/15', |
|||
materialName: '80501236', |
|||
quantity: '1000', |
|||
location: 'FMQ', |
|||
status: '检验OK' |
|||
}, |
|||
{ |
|||
arrivalTime: '2025/10/15', |
|||
materialName: '80501237', |
|||
quantity: '1000', |
|||
location: 'FMQ', |
|||
status: '检验OK' |
|||
}, |
|||
{ |
|||
arrivalTime: '2025/10/15', |
|||
materialName: '80501238', |
|||
quantity: '5000', |
|||
location: 'FMQ', |
|||
status: '检验NG' |
|||
}, |
|||
{ |
|||
arrivalTime: '1902/10/10', |
|||
materialName: '80501239', |
|||
quantity: '1000', |
|||
location: 'YCHC01', |
|||
status: '待入库' |
|||
}, |
|||
{ |
|||
arrivalTime: '1902/10/10', |
|||
materialName: '80501240', |
|||
quantity: '2000', |
|||
location: 'YCHC01', |
|||
status: '待入库' |
|||
}, |
|||
{ |
|||
arrivalTime: '1902/10/10', |
|||
materialName: '80501241', |
|||
quantity: '123', |
|||
location: 'YCHC01', |
|||
status: '待入库' |
|||
} |
|||
], |
|||
|
|||
// 原材入库区数据 |
|||
inboundList: [ |
|||
{ |
|||
storageLocation: 'YC01', |
|||
palletCode: 'G00002', |
|||
taskType: '入库', |
|||
status: 'AGV运送中' |
|||
}, |
|||
{ |
|||
storageLocation: 'YC02', |
|||
palletCode: 'G00003', |
|||
taskType: '入库', |
|||
status: '已组盘' |
|||
}, |
|||
{ |
|||
storageLocation: 'YC03', |
|||
palletCode: 'G00004', |
|||
taskType: '入库', |
|||
status: '已组盘' |
|||
}, |
|||
{ |
|||
storageLocation: 'YC04', |
|||
palletCode: 'G00010', |
|||
taskType: '退料', |
|||
status: '已到达' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.updateTime() |
|||
this.timeInterval = setInterval(() => { |
|||
this.updateTime() |
|||
}, 1000) |
|||
|
|||
// 首次加载数据 |
|||
this.getDataList() |
|||
|
|||
// 每30秒刷新一次数据 |
|||
this.dataInterval = setInterval(() => { |
|||
this.getDataList() |
|||
}, 30000) |
|||
}, |
|||
|
|||
beforeDestroy() { |
|||
if (this.timeInterval) { |
|||
clearInterval(this.timeInterval) |
|||
} |
|||
if (this.dataInterval) { |
|||
clearInterval(this.dataInterval) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 获取数据列表 |
|||
*/ |
|||
getDataList() { |
|||
materialReceivingBoard({}).then(({data}) => { |
|||
if (data && data.code === 200) { |
|||
console.log('获取原材收货区数据成功:', data.data) |
|||
// TODO: 处理返回的数据 |
|||
// if (data.data) { |
|||
// this.receivingList = data.data.receivingList || [] |
|||
// this.inboundList = data.data.inboundList || [] |
|||
// } |
|||
} |
|||
}).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-pending', |
|||
'检验OK': 'status-success', |
|||
'检验NG': 'status-danger', |
|||
'待入库': 'status-info', |
|||
'AGV运送中': 'status-warning', |
|||
'已组盘': 'status-info', |
|||
'已到达': 'status-success' |
|||
} |
|||
return statusMap[status] || 'status-pending' |
|||
} |
|||
} |
|||
} |
|||
</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%); |
|||
} |
|||
|
|||
.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: 40px; |
|||
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: 70px; |
|||
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-info { |
|||
background: linear-gradient(135deg, #3b82f6, #60a5fa); |
|||
color: #ffffff; |
|||
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
|||
} |
|||
|
|||
&.status-danger { |
|||
background: linear-gradient(135deg, #ef4444, #f87171); |
|||
color: #ffffff; |
|||
box-shadow: 0 0 15px rgba(239, 68, 68, 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> |
|||
|
|||
@ -0,0 +1,655 @@ |
|||
<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"> |
|||
<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;">拣选数量</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-left">{{ item.pickingMaterialName }}</td> |
|||
<td class="text-right">{{ item.pickingQty }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</td> |
|||
<td class="text-center">{{ 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;">拣选数量</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 materialPickingList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.pickingBatchNo }}</td> |
|||
<td class="text-left">{{ item.pickingMaterialName }}</td> |
|||
<td class="text-right">{{ item.pickingQty }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</td> |
|||
<td class="text-center">{{ 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' |
|||
|
|||
export default { |
|||
name: 'RobotPickingBoard', |
|||
|
|||
data() { |
|||
return { |
|||
currentTime: '', |
|||
timeInterval: null, |
|||
dataInterval: null, |
|||
|
|||
// 周转箱拣选数据 |
|||
containerPickingList: [ |
|||
{ |
|||
pickingBatchNo: 'P00001', |
|||
pickingMaterialName: '80565653', |
|||
pickingQty: '1,000', |
|||
status: '分拣中', |
|||
storageBatchNo: 'P01100', |
|||
storageLocation: 'ZD01' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'P00010', |
|||
pickingMaterialName: '80568657', |
|||
pickingQty: '5,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'P01100', |
|||
storageLocation: 'ZD01' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'P00012', |
|||
pickingMaterialName: '80505658', |
|||
pickingQty: '1,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'P01100', |
|||
storageLocation: 'ZD01' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'P00012', |
|||
pickingMaterialName: '80525659', |
|||
pickingQty: '1,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'P01103', |
|||
storageLocation: 'ZD02' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'P00033', |
|||
pickingMaterialName: '80542546', |
|||
pickingQty: '5,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'P01103', |
|||
storageLocation: 'ZD02' |
|||
} |
|||
], |
|||
|
|||
// 原材拣选数据 |
|||
materialPickingList: [ |
|||
{ |
|||
pickingBatchNo: 'G00001', |
|||
pickingMaterialName: '70000213', |
|||
pickingQty: '1,000', |
|||
status: '分拣中', |
|||
storageBatchNo: 'G01102', |
|||
storageLocation: 'ZD03' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'G00010', |
|||
pickingMaterialName: '70000235', |
|||
pickingQty: '5,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'G01102', |
|||
storageLocation: 'ZD03' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'G00012', |
|||
pickingMaterialName: '70004562', |
|||
pickingQty: '1,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'G01102', |
|||
storageLocation: 'ZD03' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'G00012', |
|||
pickingMaterialName: '70004358', |
|||
pickingQty: '1,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'W11003', |
|||
storageLocation: 'ZD04' |
|||
}, |
|||
{ |
|||
pickingBatchNo: 'W00033', |
|||
pickingMaterialName: '70000220', |
|||
pickingQty: '5,000', |
|||
status: '等待分拣', |
|||
storageBatchNo: 'W11003', |
|||
storageLocation: 'ZD04' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.updateTime() |
|||
this.timeInterval = setInterval(() => { |
|||
this.updateTime() |
|||
}, 1000) |
|||
|
|||
// 首次加载数据 |
|||
this.getDataList() |
|||
|
|||
// 每30秒刷新一次数据 |
|||
this.dataInterval = setInterval(() => { |
|||
this.getDataList() |
|||
}, 30000) |
|||
}, |
|||
|
|||
beforeDestroy() { |
|||
if (this.timeInterval) { |
|||
clearInterval(this.timeInterval) |
|||
} |
|||
if (this.dataInterval) { |
|||
clearInterval(this.dataInterval) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 获取数据列表 |
|||
*/ |
|||
getDataList() { |
|||
robotPicking({}).then(({data}) => { |
|||
if (data && data.code === 200) { |
|||
console.log('获取机械臂拣选数据成功:', data.data) |
|||
// TODO: 处理返回的数据 |
|||
// if (data.data) { |
|||
// this.containerPickingList = data.data.containerList || [] |
|||
// this.materialPickingList = data.data.materialList || [] |
|||
// } |
|||
} |
|||
}).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' |
|||
} |
|||
} |
|||
} |
|||
</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%); |
|||
} |
|||
|
|||
.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: 40px; |
|||
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, #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: 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> |
|||
|
|||
@ -0,0 +1,645 @@ |
|||
<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"> |
|||
<div class="header-decoration left"></div> |
|||
<div class="header-center"> |
|||
<div class="title-glow"></div> |
|||
<h1 class="screen-title">分切区实时看板</h1> |
|||
<div class="title-subtitle">Slitting Area 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: 60px;">No.</th> |
|||
<th style="width: 100px;">存放位置</th> |
|||
<th style="width: 110px;">托盘码</th> |
|||
<th style="width: 100px;">拣选位置</th> |
|||
<th style="width: 180px;">拣选物料名称</th> |
|||
<th style="width: 100px;">拣选数量</th> |
|||
<th style="width: 120px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in assistArmList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.storageLocation }}</td> |
|||
<td class="text-center">{{ item.palletCode }}</td> |
|||
<td class="text-center">{{ item.pickingLocation }}</td> |
|||
<td class="text-left">{{ item.materialName }}</td> |
|||
<td class="text-right">{{ item.quantity }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</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: 80px;">No.</th> |
|||
<th style="width: 150px;">存放位置</th> |
|||
<th style="width: 150px;">托盘码</th> |
|||
<th style="width: 150px;">任务分类</th> |
|||
<th style="width: 200px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in slittingInboundList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.storageLocation }}</td> |
|||
<td class="text-center">{{ item.palletCode }}</td> |
|||
<td class="text-center">{{ item.taskType }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部装饰 --> |
|||
<div class="screen-footer"> |
|||
<div class="footer-line"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {slittingBoard} from '@/api/dashboard/dashboard.js' |
|||
|
|||
export default { |
|||
name: 'SlittingBoard', |
|||
|
|||
data() { |
|||
return { |
|||
currentTime: '', |
|||
timeInterval: null, |
|||
dataInterval: null, |
|||
|
|||
// 助力臂区数据 |
|||
assistArmList: [ |
|||
{ |
|||
storageLocation: 'FQ01', |
|||
palletCode: 'G00100', |
|||
pickingLocation: '1', |
|||
materialName: '70000213', |
|||
quantity: '400', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'FQ01', |
|||
palletCode: 'G00100', |
|||
pickingLocation: '2', |
|||
materialName: '70000235', |
|||
quantity: '203', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'FQ01', |
|||
palletCode: 'G00100', |
|||
pickingLocation: '3', |
|||
materialName: '70000237', |
|||
quantity: '500', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'FQ01', |
|||
palletCode: 'G00100', |
|||
pickingLocation: '4', |
|||
materialName: '70002546', |
|||
quantity: '500', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'FQ02', |
|||
palletCode: 'G00200', |
|||
pickingLocation: '1', |
|||
materialName: '70000033', |
|||
quantity: '500', |
|||
status: '已到达' |
|||
}, |
|||
{ |
|||
storageLocation: 'FQ02', |
|||
palletCode: 'G00200', |
|||
pickingLocation: '2', |
|||
materialName: '70000212', |
|||
quantity: '2000', |
|||
status: '已到达' |
|||
} |
|||
], |
|||
|
|||
// 分切入库区数据 |
|||
slittingInboundList: [ |
|||
{ |
|||
storageLocation: 'FQ05', |
|||
palletCode: 'W000001', |
|||
taskType: '入库', |
|||
status: 'AGV取货中' |
|||
}, |
|||
{ |
|||
storageLocation: 'FQ06', |
|||
palletCode: 'W000002', |
|||
taskType: '移库', |
|||
status: 'AGV运送中' |
|||
}, |
|||
{ |
|||
storageLocation: 'FQ07', |
|||
palletCode: 'G000001', |
|||
taskType: '分切退料', |
|||
status: '已组盘' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.updateTime() |
|||
this.timeInterval = setInterval(() => { |
|||
this.updateTime() |
|||
}, 1000) |
|||
|
|||
// 首次加载数据 |
|||
this.getDataList() |
|||
|
|||
// 每30秒刷新一次数据 |
|||
this.dataInterval = setInterval(() => { |
|||
this.getDataList() |
|||
}, 30000) |
|||
}, |
|||
|
|||
beforeDestroy() { |
|||
if (this.timeInterval) { |
|||
clearInterval(this.timeInterval) |
|||
} |
|||
if (this.dataInterval) { |
|||
clearInterval(this.dataInterval) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 获取数据列表 |
|||
*/ |
|||
getDataList() { |
|||
slittingBoard({}).then(({data}) => { |
|||
if (data && data.code === 200) { |
|||
console.log('获取分切区数据成功:', data.data) |
|||
// TODO: 处理返回的数据 |
|||
// if (data.data) { |
|||
// this.assistArmList = data.data.assistArmList || [] |
|||
// this.slittingInboundList = data.data.slittingInboundList || [] |
|||
// } |
|||
} |
|||
}).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', |
|||
'AGV取货中': 'status-warning', |
|||
'AGV运送中': 'status-warning', |
|||
'已组盘': 'status-info', |
|||
'等待': 'status-pending' |
|||
} |
|||
return statusMap[status] || 'status-pending' |
|||
} |
|||
} |
|||
} |
|||
</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%); |
|||
} |
|||
|
|||
.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: 40px; |
|||
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: 70px; |
|||
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-info { |
|||
background: linear-gradient(135deg, #3b82f6, #60a5fa); |
|||
color: #ffffff; |
|||
box-shadow: 0 0 15px rgba(59, 130, 246, 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> |
|||
|
|||
@ -0,0 +1,582 @@ |
|||
<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"> |
|||
<div class="header-decoration left"></div> |
|||
<div class="header-center"> |
|||
<div class="title-glow"></div> |
|||
<h1 class="screen-title">车间AGV放料区实时看板</h1> |
|||
<div class="title-subtitle">Workshop AGV Feeding Area 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-single"> |
|||
<!-- 车间AGV放料区面板 --> |
|||
<div class="picking-panel-single"> |
|||
<!-- 面板标题 --> |
|||
<div class="panel-title-bar"> |
|||
<div class="title-left"> |
|||
<div class="title-icon"></div> |
|||
<div class="title-text"> |
|||
<span class="title-main">车间AGV放料区</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 数据表格 --> |
|||
<div class="panel-table"> |
|||
<table class="data-table"> |
|||
<thead> |
|||
<tr> |
|||
<th style="width: 80px;">NO.</th> |
|||
<th style="width: 120px;">AGV位置</th> |
|||
<th style="width: 150px;">托盘码</th> |
|||
<th style="width: 180px;">物料名称</th> |
|||
<th style="width: 150px;">工单号码</th> |
|||
<th style="width: 150px;">生产区域</th> |
|||
<th style="width: 180px;">状态</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in feedingList" :key="idx"> |
|||
<td class="text-center">{{ idx + 1 }}</td> |
|||
<td class="text-center">{{ item.agvLocation }}</td> |
|||
<td class="text-center">{{ item.palletCode }}</td> |
|||
<td class="text-center">{{ item.materialName }}</td> |
|||
<td class="text-center">{{ item.workOrderNo }}</td> |
|||
<td class="text-center">{{ item.productionArea }}</td> |
|||
<td class="text-center"> |
|||
<span :class="['status-badge', getStatusClass(item.status)]"> |
|||
{{ item.status }} |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 底部装饰 --> |
|||
<div class="screen-footer"> |
|||
<div class="footer-line"></div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {workshopFeedingBoard} from '@/api/dashboard/dashboard.js' |
|||
|
|||
export default { |
|||
name: 'WorkshopFeedingBoard', |
|||
|
|||
data() { |
|||
return { |
|||
currentTime: '', |
|||
timeInterval: null, |
|||
dataInterval: null, |
|||
|
|||
// 车间AGV放料区数据 |
|||
feedingList: [ |
|||
{ |
|||
agvLocation: 'SC001', |
|||
palletCode: 'W00015', |
|||
materialName: '80451239', |
|||
workOrderNo: '3002149', |
|||
productionArea: 'Diecut', |
|||
status: '已送达' |
|||
}, |
|||
{ |
|||
agvLocation: 'SC002', |
|||
palletCode: 'W00016', |
|||
materialName: '80451240', |
|||
workOrderNo: '3002150', |
|||
productionArea: 'Diecut1', |
|||
status: '已送达' |
|||
}, |
|||
{ |
|||
agvLocation: 'SC003', |
|||
palletCode: 'W00017', |
|||
materialName: '80451241', |
|||
workOrderNo: '3002151', |
|||
productionArea: 'Screen', |
|||
status: '已送达' |
|||
}, |
|||
{ |
|||
agvLocation: 'SC004', |
|||
palletCode: 'W00018', |
|||
materialName: '80451242', |
|||
workOrderNo: '3002152', |
|||
productionArea: 'Screen', |
|||
status: '已送达' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
this.updateTime() |
|||
this.timeInterval = setInterval(() => { |
|||
this.updateTime() |
|||
}, 1000) |
|||
|
|||
// 首次加载数据 |
|||
this.getDataList() |
|||
|
|||
// 每30秒刷新一次数据 |
|||
this.dataInterval = setInterval(() => { |
|||
this.getDataList() |
|||
}, 30000) |
|||
}, |
|||
|
|||
beforeDestroy() { |
|||
if (this.timeInterval) { |
|||
clearInterval(this.timeInterval) |
|||
} |
|||
if (this.dataInterval) { |
|||
clearInterval(this.dataInterval) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
/** |
|||
* 获取数据列表 |
|||
*/ |
|||
getDataList() { |
|||
workshopFeedingBoard({}).then(({data}) => { |
|||
if (data && data.code === 200) { |
|||
console.log('获取车间AGV放料区数据成功:', data.data) |
|||
// TODO: 处理返回的数据 |
|||
// if (data.data) { |
|||
// this.feedingList = data.data.feedingList || [] |
|||
// } |
|||
} |
|||
}).catch(error => { |
|||
console.error('获取车间AGV放料区数据失败:', 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', |
|||
'AGV运送中': 'status-warning', |
|||
'等待取货': 'status-pending' |
|||
} |
|||
return statusMap[status] || 'status-pending' |
|||
} |
|||
} |
|||
} |
|||
</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%); |
|||
} |
|||
|
|||
.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: 40px; |
|||
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-single { |
|||
position: relative; |
|||
z-index: 1; |
|||
padding: 20px; |
|||
height: calc(100vh - 60px); |
|||
overflow-y: auto; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
|
|||
&::-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-single { |
|||
width: 100%; |
|||
max-width: 1600px; |
|||
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: 20px; |
|||
color: #64D8CB; |
|||
} |
|||
|
|||
.title-text { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 8px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.title-main { |
|||
font-size: 22px; |
|||
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: 15px 10px; |
|||
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: 15px 10px; |
|||
color: rgba(255, 255, 255, 0.9); |
|||
font-size: 16px; |
|||
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: 12px; |
|||
font-size: 14px; |
|||
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, #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: 26px; |
|||
letter-spacing: 3px; |
|||
} |
|||
|
|||
.title-main { |
|||
font-size: 20px; |
|||
} |
|||
|
|||
.data-table { |
|||
thead th { |
|||
font-size: 14px; |
|||
padding: 12px 8px; |
|||
} |
|||
|
|||
tbody td { |
|||
font-size: 14px; |
|||
padding: 12px 8px; |
|||
} |
|||
} |
|||
|
|||
.status-badge { |
|||
font-size: 12px; |
|||
padding: 5px 12px; |
|||
min-width: 80px; |
|||
} |
|||
} |
|||
|
|||
@media screen and (min-width: 2560px) { |
|||
.screen-title { |
|||
font-size: 32px; |
|||
} |
|||
|
|||
.panel-title-bar { |
|||
padding: 18px 24px; |
|||
} |
|||
|
|||
.title-main { |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.data-table { |
|||
thead th { |
|||
font-size: 18px; |
|||
padding: 18px 12px; |
|||
} |
|||
|
|||
tbody td { |
|||
font-size: 18px; |
|||
padding: 18px 12px; |
|||
} |
|||
} |
|||
|
|||
.status-badge { |
|||
font-size: 16px; |
|||
padding: 8px 20px; |
|||
min-width: 110px; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue