Board / HH-board-2026 · Files

<template>
	<div class="wms-ccs-container">
		<div class="task-section">
			<div class="table-wrapper">
				<table class="task-table">
					<thead>
						<tr>
							<th>任务ID</th>
							<th>单据编码</th>
							<th>任务类型</th>
							<th>库区</th>
							<th>巷道</th>
							<th>执行设备ID</th>
							<th>任务起始位置</th>
							<th>任务目标位置</th>
							<th>托盘编码</th>
							<th>任务优先级</th>
							<th>任务状态</th>
							<th>任务持续时间</th>
						</tr>
					</thead>
					<tbody>
						<tr
							v-for="(item, index) in taskList"
							:key="index"
							:class="{
								'green-text': item.taskDurationSeconds <= 10,
								'yellow-text': item.taskDurationSeconds > 10 && item.taskDurationSeconds < 60,
								'red-text': item.taskDurationSeconds >= 60,
							}"
						>
							<td>{{ item.taskId }}</td>
							<td>{{ item.orderCode }}</td>
							<td>{{ item.taskTypeDescription }}</td>
							<td>{{ item.zoneCodeDescription }}</td>
							<td>{{ item.roadway }}</td>
							<td>{{ item.executionEquipmentId }}</td>
							<td>{{ item.fromLocation }}</td>
							<td>{{ item.toLocation }}</td>
							<td>{{ item.containerCode }}</td>
							<td>{{ item.taskPriority }}</td>
							<td>{{ item.taskStatusDescription }}</td>
							<td>{{ item.taskDurationSecondsFormat }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		userName: {
			type: String,
			default: '',
		},
	},
	watch: {
		userName: {
			immediate: true,
			handler(newVal) {
				if (newVal) {
					this.getData() // 区域切换时重新请求数据
				}
			},
		},
	},
	data() {
		return {
			baseUrlOffOne: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLineOne: window.appConfig.baseUrlintHistory,
			sysData: {},
			taskList: [],
			direction: 'rtl',
			device: {},
			temp: 0,
			// 新增：定时器控制字段
			refreshTimer: null, // 全局刷新定时器ID
		}
	},
	methods: {
		// 获取历史任务数据
		getAGVDataOne() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineOne : this.baseUrlOffTwo,
				logTitle: '历史任务列表',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
			}
			const callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				res.data.result.forEach((x) => {
					x.taskDurationSeconds = Number((x.taskDurationSeconds / 60).toFixed(2))
				})
				this.taskList = res.data.result
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (!res || !res.data || res.data.result == null || res.data.result.length === 0) {
				this.sysData = []
				''.Log(`${title}无数据`, 'getData')
				return false
			}
			return true
		},
		// 修改：定时器启动方法
		intInterval: function() {
			// 清理现有定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
			}

			// 启动新的定时器
			this.refreshTimer = setInterval(() => {
				this.getAGVDataOne()
			}, 2000)

			console.log('历史任务定时器已启动')
		},

		// 新增：暂停接口请求
		pauseApiRequest() {
			// 停止全局刷新定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
			}
			console.log('历史任务接口请求已暂停')
		},
		// 修改：定时器启动方法
		intInterval: function() {
			// 清理现有定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
			}

			// 启动新的定时器
			this.refreshTimer = setInterval(() => {
				this.getAGVDataOne()
			}, 2000)

			console.log('历史任务定时器已启动')
		},

		// 新增：暂停接口请求
		pauseApiRequest() {
			// 停止全局刷新定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
			}
			console.log('历史任务接口请求已暂停')
		},
	},
	mounted() {
		this.getAGVDataOne()
		this.intInterval()
	},
	// 新增：组件销毁时停止定时器
	beforeDestroy() {
		this.pauseApiRequest()
	},

	// 新增：激活组件时恢复请求
	activated() {
		this.resumeApiRequest()
	},

	// 新增：停用组件时暂停请求
	deactivated() {
		this.pauseApiRequest()
	},
}
</script>

<style scoped>
/* 全局基础样式 */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.wms-ccs-container {
	background-color: #000814;
	color: #e2e8f0;
	font-family: '微软雅黑', sans-serif;
	height: 94.5vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 1vw;
	box-sizing: border-box;
	background-image: linear-gradient(145deg, #00122e 0%, #000814 100%);
}
.wms-ccs-container * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* 任务表格区域样式 */
.task-section {
	background-color: rgba(0, 20, 46, 0.8);
	/* border: 0.1vw solid #00509d; */
	border-radius: 0.2vw;
	/* padding: 0.7vw; */
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.table-wrapper {
	flex: 1;
	overflow-y: auto;
	overflow-x: auto;
}
.task-table {
	width: 100%;
	border-collapse: collapse;
	/* min-width: 1600px; */
	background-color: rgba(0, 15, 38, 0.9);
	table-layout: fixed;
}
.task-table th {
	/* padding: 10px 5px; */
	text-align: center;
	font-size: 1vw;
	border: 0.1vw solid #00509d;
	background-color: #003554;
	color: #00e5ff;
	font-weight: bold;
	position: sticky;
	top: 0;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 2.5vw;
	line-height: 2.5vw;
}
.task-table td {
	padding: 0px 0px;
	text-align: center;
	font-size: 1vw;
	border: 0.1vw solid #004080;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
	height: 2.1vw;
	line-height: 1.6;
	max-height: 2.1vw;
	overflow: hidden;
	text-overflow: ellipsis;
	display: table-cell;
	vertical-align: middle;
}
/* 表格行hover效果 */
.task-table tr:hover {
	background-color: rgba(0, 80, 157, 0.3);
}

/* 任务时长文字颜色样式 */
.red-text {
	color: #ff2d55 !important;
}
.green-text {
	color: #00ff9d !important;
}
.yellow-text {
	color: #ffc107 !important;
}
/* 滚动条样式 */
.table-wrapper::-webkit-scrollbar {
	width: 0.4vw;
	height: 0.4vw;
}
.table-wrapper::-webkit-scrollbar-thumb {
	background-color: #0077b6;
	border-radius: 0.2vw;
}
.table-wrapper::-webkit-scrollbar-track {
	background-color: #001e3c;
}
</style>