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

手工拣选看板

master
han\hanst 3 months ago
parent
15fe030ad7
commit
572a1b3aba
3 changed files with 729 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/api/dashboard/dashboard.js
  2. 3
      src/router/index.js
  3. 721
      src/views/modules/dashboard/picking-board.vue

6
src/api/dashboard/dashboard.js
View File

@ -0,0 +1,6 @@
import { createAPI } from "@/utils/httpRequest.js";
export const manualPicking = data => createAPI('/api/dashboard/manualPicking', 'POST', data)

3
src/router/index.js
View File

@ -19,7 +19,8 @@ const _import = require('./import-' + process.env.NODE_ENV)
// 全局路由(无需嵌套上左右整体布局)
const globalRoutes = [
{ path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
{ path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } }
{ path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
{ path: '/dashboard-picking-board', component: _import('modules/dashboard/picking-board'), name: 'dashboard-picking-board', meta: { title: '人工拣选看板' } }
]
// 主入口路由(需嵌套上左右整体布局)

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

@ -0,0 +1,721 @@
<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">Manual Picking Real-time Dashboard</div>
</div>
<div class="header-decoration right"></div>
<div class="header-time">
<div class="time-icon"></div>
<div class="time-text">{{ currentTime }}</div>
</div>
</div>
<!-- 主内容区 -->
<div class="screen-content">
<!-- 工单卡片 -->
<div
class="picking-panel"
v-for="(order, index) in workOrders"
:key="order.workOrderNo"
>
<!-- 面板标题 -->
<div class="panel-title-bar">
<div class="title-left">
<div class="title-icon"></div>
<div class="title-text">
<span class="title-main">人工拣选{{ index + 1 }}</span>
<span class="title-divider">|</span>
<span class="title-sub">工单号码: <strong>{{ order.workOrderNo }}</strong></span>
<span class="title-divider">|</span>
<span class="title-sub">物料名称: <strong>{{ order.materialName }}</strong></span>
</div>
</div>
<!-- <div class="title-right">
<div class="progress-display">
<div class="progress-numbers">
<span class="num-current">{{ order.completedCount }}</span>
<span class="num-divider">/</span>
<span class="num-total">{{ order.totalCount }}</span>
</div>
<div class="progress-bar-container">
<div class="progress-bar-bg">
<div
class="progress-bar-fill"
:style="{ width: (order.completedCount / order.totalCount * 100) + '%' }"
></div>
</div>
<div class="progress-percent">{{ Math.round(order.completedCount / order.totalCount * 100) }}%</div>
</div>
</div>
</div>-->
</div>
<!-- 数据表格 -->
<div class="panel-table">
<table class="data-table">
<thead>
<tr>
<th style="width: 15px;">No.</th>
<th style="width: 110px;">拣选托盘码</th>
<th style="width: 180px;">拣选物料名称</th>
<th style="width: 80px;">拣选数量</th>
<th style="width: 100px;">状态</th>
<th style="width: 110px;">存放托盘码</th>
<th style="width: 80px;">存放位置</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, idx) in order.details" :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 {manualPicking} from '@/api/dashboard/dashboard.js'
export default {
name: 'PickingBoard',
data() {
return {
currentTime: '',
timeInterval: null,
// 模拟工单数据
workOrders: [
{
workOrderNo: '3020124',
materialName: '80506561',
completedCount: 2,
totalCount: 5,
details: [
{
pickingBatchNo: 'W00001',
pickingMaterialName: '70000213-0045',
pickingQty: '1,000',
status: '完成',
storageBatchNo: 'W01100',
storageLocation: 'RG01'
},
{
pickingBatchNo: 'W00010',
pickingMaterialName: '70000235-0046',
pickingQty: '5,000',
status: '分拣中',
storageBatchNo: 'W01100',
storageLocation: 'RG01'
},
{
pickingBatchNo: 'W00012',
pickingMaterialName: '70004562-0075',
pickingQty: '1,000',
status: '等待分拣',
storageBatchNo: 'W01100',
storageLocation: 'RG01'
},
{
pickingBatchNo: 'W00012',
pickingMaterialName: '70004358-0254',
pickingQty: '1,000',
status: '等待分拣',
storageBatchNo: 'W01101',
storageLocation: 'RG02'
},
{
pickingBatchNo: 'W00033',
pickingMaterialName: '70000220-0335',
pickingQty: '5,000',
status: '等待分拣',
storageBatchNo: 'W01101',
storageLocation: 'RG02'
}
]
},
{
workOrderNo: '3020125',
materialName: '80506562',
completedCount: 1,
totalCount: 5,
details: [
{
pickingBatchNo: 'W00002',
pickingMaterialName: '70000213-0046',
pickingQty: '1,000',
status: '完成',
storageBatchNo: 'W01102',
storageLocation: 'RG03'
},
{
pickingBatchNo: 'W00011',
pickingMaterialName: '70000235-0047',
pickingQty: '5,000',
status: '分拣中',
storageBatchNo: 'W01102',
storageLocation: 'RG03'
},
{
pickingBatchNo: 'W00013',
pickingMaterialName: '70004562-0078',
pickingQty: '1,000',
status: '等待分拣',
storageBatchNo: 'W01102',
storageLocation: 'RG03'
},
{
pickingBatchNo: 'W00013',
pickingMaterialName: '70004358-0256',
pickingQty: '1,000',
status: '等待分拣',
storageBatchNo: 'W01103',
storageLocation: 'RG04'
},
{
pickingBatchNo: 'W00034',
pickingMaterialName: '70000220-0337',
pickingQty: '5,000',
status: '等待分拣',
storageBatchNo: 'W01103',
storageLocation: 'RG04'
}
]
}
]
}
},
mounted() {
this.updateTime()
this.timeInterval = setInterval(() => {
this.updateTime()
}, 1000)
this.getDataList()
},
beforeDestroy() {
if (this.timeInterval) {
clearInterval(this.timeInterval)
}
},
methods: {
// 获取数据列表
getDataList() {
manualPicking({}).then(({data}) => {
if (data && data.code === 200) {
console.log('获取数据成功:', data.data)
}
}).catch(error => {
console.error('获取数据失败:', error)
this.$message.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, #1a1f35 0%, #2d3548 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: #17B3A3;
margin: 0;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(23, 179, 163, 0.5);
}
.title-subtitle {
font-size: 10px;
color: rgba(23, 179, 163, 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: 11px;
color: #64D8CB;
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(35, 45, 65, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(23, 179, 163, 0.3);
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: 13px;
font-weight: bold;
color: #64D8CB;
text-shadow: 0 0 10px rgba(100, 216, 203, 0.5);
}
.title-divider {
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
}
.title-sub {
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
strong {
color: #ffffff;
font-weight: 600;
font-family: 'Consolas', monospace;
}
}
.title-right {
min-width: 280px;
}
/* ===== 进度显示 ===== */
.progress-display {
display: flex;
align-items: center;
gap: 15px;
}
.progress-numbers {
font-size: 18px;
font-weight: bold;
font-family: 'Arial', sans-serif;
white-space: nowrap;
.num-current {
color: #FFD54F;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.num-divider {
color: rgba(255, 255, 255, 0.7);
margin: 0 3px;
}
.num-total {
color: #ffffff;
}
}
.progress-bar-container {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.progress-bar-bg {
flex: 1;
height: 6px;
background: rgba(0, 0, 0, 0.3);
border-radius: 3px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #17B3A3, #64D8CB);
border-radius: 3px;
transition: width 0.5s ease;
box-shadow: 0 0 15px rgba(23, 179, 163, 0.6);
position: relative;
}
.progress-percent {
font-size: 11px;
color: #64D8CB;
font-weight: bold;
min-width: 38px;
text-align: right;
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 10px;
color: #64D8CB;
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(25, 33, 50, 0.4);
transition: all 0.3s ease;
&:nth-child(even) {
background: rgba(35, 43, 60, 0.5);
}
&: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 10px;
color: rgba(255, 255, 255, 0.9);
font-size: 10px;
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: 12px;
}
.title-sub {
font-size: 10px;
}
.progress-numbers {
font-size: 16px;
}
}
@media screen and (min-width: 2560px) {
.screen-title {
font-size: 32px;
}
.panel-title-bar {
padding: 12px 20px;
}
.title-main {
font-size: 15px;
}
.data-table {
thead th {
font-size: 12px;
padding: 9px 12px;
}
tbody td {
font-size: 12px;
padding: 8px 12px;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save