101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<template>
|
||
<div>
|
||
<DataTable :columns="columns" :data="rows" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted } from 'vue';
|
||
import DataTable from '../components/DataTable.vue';
|
||
import { getPickTaskDataP3 } from '@/services/api';
|
||
|
||
// 拣选字段
|
||
const columns = [
|
||
{ key: 'vehicleId', title: '料箱号' },
|
||
{ key: 'pickStand', title: '拣选站台' },
|
||
{ key: 'pickStatus', title: '状态' },
|
||
];
|
||
|
||
const rows = ref([]);
|
||
let timer = null;
|
||
|
||
function mapStatus(status) {
|
||
const code = Number(status);
|
||
// 对齐后端 WmsPickTaskStatusEnum
|
||
switch (code) {
|
||
case -2: return '入库用';
|
||
case -1: return '暂存中';
|
||
case 0: return '待下发';
|
||
case 1: return '已下发';
|
||
case 2: return '执行中';
|
||
case 3: return '已到达';
|
||
case 4: return '已离开';
|
||
case 5: return '已取消';
|
||
default: return String(status ?? '');
|
||
}
|
||
}
|
||
|
||
async function load() {
|
||
try {
|
||
const tasksData = await getPickTaskDataP3({ pageNum: 1, pageSize: 1000 });
|
||
const tasks = tasksData || [];
|
||
rows.value = tasks.map((t) => ({
|
||
vehicleId: t?.vehicleId ?? '',
|
||
pickStand: t?.pickStand ?? t?.pick_stand ?? t?.pickStation ?? t?.station ?? '',
|
||
createTime: t?.createTime ?? t?.gmtCreate ?? '',
|
||
arriveTime: t?.arriveTime ?? t?.reachTime ?? '',
|
||
pickStatus: mapStatus(t?.pickStatus ?? t?.pick_status ?? t?.taskStatus ?? t?.status),
|
||
}));
|
||
} catch (error) {
|
||
console.error('加载拣选数据失败:', error);
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
load();
|
||
timer = setInterval(load, 5000);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
if (timer) {
|
||
clearInterval(timer);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.title-center {
|
||
text-align: center;
|
||
}
|
||
/* 增大表格整体字体 */
|
||
:deep(.table-wrapper) {
|
||
font-size: 40px;
|
||
}
|
||
|
||
:deep(thead th) {
|
||
font-size: 40px; /* 表头字体稍大 */
|
||
}
|
||
|
||
:deep(tbody td) {
|
||
font-size: 40px; /* 表格内容字体 */
|
||
padding: 16px 12px; /* 同时增加内边距使布局更舒适 */
|
||
}
|
||
|
||
/* 设置第一列（料箱号）宽度为30% */
|
||
:deep(th:nth-child(1)),
|
||
:deep(td:nth-child(1)) {
|
||
width: 50%;
|
||
}
|
||
|
||
/* 设置第二列（起点）宽度为10% */
|
||
:deep(th:nth-child(2)),
|
||
:deep(td:nth-child(2)) {
|
||
width: 25%;
|
||
}
|
||
/* 设置第三列（终点）宽度 */
|
||
:deep(th:nth-child(3)),
|
||
:deep(td:nth-child(3)) {
|
||
width: 25%;
|
||
}
|
||
</style>
|