<template>
|
<dv-scroll-board :config="config" style="width:100%;height:400px" />
|
</template>
|
|
<script>
|
import axios from 'axios';
|
|
export default {
|
name: 'TaskListScrollBoard',
|
components: {
|
// 如果组件已全局注册，则不需要在这里注册
|
},
|
data() {
|
return {
|
taskList: [],
|
refreshInterval: null,
|
config: null
|
};
|
},
|
mounted() {
|
this.getTaskData();
|
this.startAutoRefresh();
|
},
|
beforeDestroy() {
|
this.stopAutoRefresh();
|
},
|
methods: {
|
// 获取任务数据
|
getTaskData() {
|
axios.get("http://127.0.0.1:8889/api/Dashboard/CurrentTasks")
|
.then((response) => {
|
|
if (response && Array.isArray(response)) {
|
// 不用data,选择有数据
|
const tasks = response;
|
// 过滤，只显示异常状态的任务 (298, 299, 198, 199, 999)
|
this.taskList = tasks.filter(task =>
|
[298, 299, 198, 199, 999].includes(task.taskStatus)
|
);
|
this.updateBoardData();
|
} else {
|
this.taskList = [];
|
this.updateBoardData();
|
}
|
})
|
.catch((error) => {
|
console.error("获取任务数据失败:", error);
|
this.taskList = [];
|
this.updateBoardData();
|
});
|
},
|
|
// 更新滚动表格数据
|
updateBoardData() {
|
let boardData = [];
|
if (this.taskList.length === 0) {
|
boardData = [['--', '--', '--', '--', '--', '无异常任务']];
|
} else {
|
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:4px 8px;border-radius:3px;background:rgba(255,255,255,0.1)">${palletType}</span>`;
|
|
// 设置目的地（只显示后8位）
|
let targetAddress = task.targetAddress || '--';
|
if (targetAddress.length > 8) {
|
targetAddress = targetAddress.slice(-8); // 只取后8位
|
}
|
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)};animation: pulse 1.5s infinite;">${statusText}</span>`;
|
|
// 格式化时间
|
const timeText = this.formatDate(task.createDate);
|
|
return [
|
`<span style="color:#37a2da;font-family:monospace;font-size:18px">${task.taskNum || '--'}</span>`,
|
typeHtml,
|
palletHtml,
|
addressHtml,
|
`<span style="color:#9fe6b8;font-size:18px">${timeText}</span>`,
|
statusHtml
|
];
|
});
|
}
|
|
this.config = {
|
header: ['任务号', '类型', '物料', '目的地', '创建时间', '异常'],
|
data: boardData,
|
index: false,
|
columnWidth: [100, 100, 150, 180, 180, 150],
|
align: ['center', '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();
|
}, 5000);
|
},
|
|
// 停止自动刷新
|
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 = task.taskStatus;
|
|
// 入库异常状态
|
if (status === 298 || status === 299) {
|
return '入库';
|
}
|
// 出库异常状态
|
else if (status === 198 || status === 199) {
|
return '出库';
|
}
|
// 移库异常
|
else if (status === 999) {
|
return '移库';
|
}
|
|
return '未知';
|
},
|
|
// 根据状态值获取状态文字描述
|
getStatusText(task) {
|
const status = task.taskStatus;
|
|
const statusMap = {
|
298: '输送线入库异常',
|
299: '堆垛机入库异常',
|
198: '输送线出库异常',
|
199: '堆垛机出库异常',
|
999: '移库异常'
|
};
|
return statusMap[status] || `未知异常(${status})`;
|
},
|
|
// 获取状态对应的CSS类
|
getStatusClass(task) {
|
const status = task.taskStatus;
|
|
// 所有要显示的状态都是异常状态
|
if ([298, 299, 198, 199, 999].includes(status)) {
|
return 'status-error';
|
}
|
return 'status-default';
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 确保滚动表格正确显示 */
|
dv-scroll-board {
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
}
|
|
/* 错误状态闪烁动画 */
|
@keyframes pulse {
|
0% {
|
opacity: 1;
|
}
|
50% {
|
opacity: 0.7;
|
}
|
100% {
|
opacity: 1;
|
}
|
}
|
</style>
|
