<template>
|
<dv-scroll-board :config="config" style="width:100%;height:400px" />
|
</template>
|
|
<script>
|
import axios from 'axios';
|
|
export default {
|
name: 'SC02TaskInfo',
|
components: {
|
// 如果组件已全局注册，则不需要在这里注册
|
},
|
data() {
|
return {
|
taskList: [],
|
refreshInterval: null,
|
config: null
|
};
|
},
|
mounted() {
|
this.getTaskData();
|
this.startAutoRefresh();
|
},
|
beforeDestroy() {
|
this.stopAutoRefresh();
|
},
|
methods: {
|
// 获取任务数据
|
getTaskData() {
|
import('@/api/api').then(({ WCS_GET }) => {
|
WCS_GET('/api/Task/GetRoadwayTaskProgress', { roadway: 'SC02' })
|
.then((response) => {
|
console.log("SC02任务数据响应:", response);
|
|
if (response && response.data && response.data.tasks) {
|
// 过滤掉异常状态的任务
|
this.taskList = response.data.tasks.map(task => ({
|
taskNum: task.taskNum,
|
taskStatus: task.taskState,
|
warehouseId: 1,
|
palletType: task.taskType,
|
targetAddress: task.targetAddress,
|
createDate: task.createDate
|
})).filter(task =>
|
![999, 298, 299, 198, 199].includes(task.taskStatus)
|
);
|
this.updateBoardData();
|
} else {
|
this.taskList = [];
|
this.updateBoardData();
|
}
|
})
|
.catch((error) => {
|
console.error("获取SC02任务数据失败:", error);
|
this.taskList = [];
|
this.updateBoardData();
|
});
|
});
|
},
|
|
// 更新滚动表格数据
|
updateBoardData() {
|
let boardData = [];
|
if (this.taskList.length === 0) {
|
boardData = [['--', '--', '--', '--', '--', '暂无任务数据']];
|
return;
|
}
|
boardData = this.taskList.map((task) => {
|
// 设置任务类型颜色
|
const taskType = this.getTaskType(task);
|
const typeColor = this.getTaskTypeColor(taskType);
|
const typeHtml = `<span style="color:${typeColor};font-weight:bold;font-size:18px">${taskType}</span>`;
|
|
// 设置托盘类型
|
const palletType = this.getPalletTypeText(task);
|
const palletColor = this.getPalletTypeColor(task);
|
const palletHtml = `<span style="color:${palletColor};font-weight:bold;font-size:18px;padding:2px 6px;border-radius:3px;background:rgba(255,255,255,0.1)">${palletType}</span>`;
|
|
// 设置目的地（显示完整货位编码）
|
let targetAddress = task.targetAddress || '--';
|
const addressHtml = `<span style="color:#67e0e3;font-size:20px;font-weight:bold;font-family:monospace">${targetAddress}</span>`;
|
|
// 设置状态
|
const statusText = this.getStatusText(task);
|
const statusClass = this.getStatusClass(task);
|
const statusColor = this.getStatusColor(statusClass);
|
const statusHtml = `<span style="color:${statusColor};font-weight:bold;font-size:18px;padding:4px 8px;border-radius:4px;background:${this.getStatusBgColor(statusClass)}">${statusText}</span>`;
|
|
// 格式化时间
|
const timeText = this.formatDate(task.createDate);
|
|
return [
|
`<span style="color:#37a2da;font-family:monospace;font-size:18px">${task.taskNum || '--'}</span>`,
|
typeHtml,
|
addressHtml,
|
`<span style="color:#9fe6b8;font-size:18px">${timeText}</span>`,
|
statusHtml
|
];
|
});
|
this.config = {
|
header: ['任务号', '类型', '目的地', '创建时间', '状态'],
|
data: boardData,
|
index: false,
|
columnWidth: [100, 80, 339, 140, 180],
|
align: ['center', 'center', 'center', 'center', 'center'],
|
waitTime: 2000,
|
rowNum: 8,
|
headerBGC: 'rgba(0, 0, 0, 0.5)',
|
headerHeight: 55,
|
oddRowBGC: 'rgba(0, 0, 0, 0.3)',
|
evenRowBGC: 'rgba(0, 0, 0, 0.5)',
|
carousel: 'single',
|
// 添加字体大小设置
|
headerStyle: {
|
fontSize: 22,
|
fontWeight: 'bold'
|
},
|
rowStyle: {
|
fontSize: 20,
|
height: 50
|
}
|
};
|
},
|
|
// 获取任务类型颜色
|
getTaskTypeColor(type) {
|
const colorMap = {
|
'入库': '#37a2da',
|
'出库': '#32c5e9',
|
'移库': '#67e0e3',
|
'未知': '#ffdb5c'
|
};
|
return colorMap[type] || '#ffdb5c';
|
},
|
|
// 获取托盘类型文字
|
getPalletTypeText(task) {
|
// 根据 warehouseId 和 palletType 判断
|
const warehouseId = task.warehouseId;
|
const palletType = task.palletType;
|
|
if (warehouseId === 2) {
|
// warehouseId=2是成品
|
return '成品';
|
} else if (warehouseId === 1) {
|
// warehouseId=1，根据palletType判断
|
if (palletType === '1' || palletType === 1) {
|
return '布卷';
|
} else if (palletType === '2' || palletType === 2) {
|
return '松布卷';
|
}
|
}
|
|
return '未知';
|
},
|
|
// 获取托盘类型颜色
|
getPalletTypeColor(task) {
|
const warehouseId = task.warehouseId;
|
const palletType = task.palletType;
|
|
if (warehouseId === 2) {
|
return '#ff9f7f'; // 成品 - 橙色
|
} else if (warehouseId === 1) {
|
if (palletType === '1' || palletType === 1) {
|
return '#9fe6b8'; // 布卷 - 绿色
|
} else if (palletType === '2' || palletType === 2) {
|
return '#ffdb5c'; // 松布卷 - 黄色
|
}
|
}
|
|
return '#95a5a6'; // 未知 - 灰色
|
},
|
|
// 获取状态颜色
|
getStatusColor(statusClass) {
|
const colorMap = {
|
'status-completed': '#ffffff', // 完成 - 白色文字
|
'status-processing': '#ffffff', // 执行中 - 白色文字
|
'status-pending': '#ffffff', // 待处理 - 白色文字
|
'status-cancelled': '#ffffff', // 取消 - 白色文字
|
'status-error': '#ffffff', // 错误 - 白色文字
|
'status-default': '#ffffff' // 默认 - 白色文字
|
};
|
return colorMap[statusClass] || '#ffffff';
|
},
|
|
// 获取状态背景颜色
|
getStatusBgColor(statusClass) {
|
const colorMap = {
|
'status-completed': 'rgba(46, 204, 113, 0.7)', // 完成 - 绿色
|
'status-processing': 'rgba(52, 152, 219, 0.7)', // 执行中 - 蓝色
|
'status-pending': 'rgba(243, 156, 18, 0.7)', // 待处理 - 橙色
|
'status-cancelled': 'rgba(149, 165, 166, 0.7)', // 取消 - 灰色
|
'status-error': 'rgba(231, 76, 60, 0.7)', // 错误 - 红色
|
'status-default': 'rgba(127, 140, 141, 0.7)' // 默认 - 深灰色
|
};
|
return colorMap[statusClass] || 'rgba(127, 140, 141, 0.7)';
|
},
|
|
// 启动自动刷新
|
startAutoRefresh() {
|
this.refreshInterval = setInterval(() => {
|
this.getTaskData();
|
}, 30000);
|
},
|
|
// 停止自动刷新
|
stopAutoRefresh() {
|
if (this.refreshInterval) {
|
clearInterval(this.refreshInterval);
|
this.refreshInterval = null;
|
}
|
},
|
|
// 格式化日期（简化版）
|
formatDate(dateString) {
|
if (!dateString) return '--';
|
try {
|
const date = new Date(dateString);
|
return date.toLocaleTimeString('zh-CN', {
|
hour: '2-digit',
|
minute: '2-digit',
|
second: '2-digit',
|
hour12: false
|
});
|
} catch (e) {
|
return '--';
|
}
|
},
|
|
// 获取任务类型文字
|
getTaskType(task) {
|
const status = parseInt(task.taskStatus) || 0;
|
|
if (status >= 200 && status < 300) {
|
return '入库';
|
} else if (status >= 100 && status < 200) {
|
return '出库';
|
} else if (status >= 300 && status <= 410) {
|
return '移库';
|
}
|
|
return '未知';
|
},
|
|
// 根据状态值获取状态文字描述
|
getStatusText(task) {
|
const status = parseInt(task.taskStatus) || 0;
|
|
if (status >= 200 && status < 300) {
|
const inStatusMap = {
|
215: '输送线执行中',
|
220: '输送完成',
|
230: '堆垛机执行中',
|
235: '堆垛完成',
|
290: '完成',
|
297: '挂起',
|
298: '取消',
|
299: '异常'
|
};
|
return inStatusMap[status] || '入库';
|
} else if (status >= 100 && status < 200) {
|
const outStatusMap = {
|
100: '新建',
|
110: '堆垛机执行中',
|
115: '堆垛完成',
|
120: '输送线执行中',
|
125: '输送完成',
|
190: '完成',
|
197: '挂起',
|
198: '取消',
|
199: '异常'
|
};
|
return outStatusMap[status] || '出库';
|
} else if (status >= 300 && status < 400) {
|
const relocationStatusMap = {
|
300: '新建',
|
315: '移库执行中',
|
310: '完成',
|
330: '异常'
|
};
|
return relocationStatusMap[status] || '移库';
|
}
|
|
return '未知';
|
},
|
|
// 获取状态对应的CSS类
|
getStatusClass(task) {
|
const status = parseInt(task.taskStatus) || 0;
|
|
if ([298, 299, 198, 199, 330].includes(status)) {
|
return 'status-error';
|
} else if ([290, 190, 310].includes(status)) {
|
return 'status-completed';
|
} else if ([297, 197].includes(status)) {
|
return 'status-cancelled';
|
} else if ([230, 235, 240, 245, 110, 115, 120, 125, 315].includes(status)) {
|
return 'status-processing';
|
} else if ([200, 100, 300].includes(status)) {
|
return 'status-pending';
|
}
|
|
return 'status-default';
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 确保滚动表格正确显示 */
|
dv-scroll-board {
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
}
|
</style>
|
