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>托盘编码</th>
							<th>任务优先级</th>
							<th>任务状态</th>
							<th>执行设备</th>
							<!-- 🔥 只给这列加 class -->
							<th class="time-column">任务开始时间</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.taskTypeDescription }}</td>
							<td>{{ item.zoneCodeDescription }}</td>
							<td>{{ item.fromLocation }}</td>
							<td>{{ item.toLocation }}</td>
							<td>{{ item.containerCode }}</td>
							<td>{{ item.taskPriority }}</td>
							<td>{{ item.taskStatusDescription }}</td>
							<td>{{ item.executionEquipmentId }}</td>
							<!-- 🔥 只给这列加 class -->
							<td class="time-column">{{ item.taskStartTime }}</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,
		}
	},
	methods: {
		getAGVDataOne() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? `${this.baseUrlOnLineOne}?zoneCode=${this.userName}` : `${this.baseUrlOffOne}?zoneCode=${this.userName}`,
				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() {
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
			}
			this.refreshTimer = setInterval(() => {
				this.getAGVDataOne()
			}, 2000)
		},
		pauseApiRequest() {
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
			}
		},
	},
	mounted() {
		this.getAGVDataOne()
		this.intInterval()
	},
	beforeDestroy() {
		this.pauseApiRequest()
	},
	activated() {
		this.intInterval()
	},
	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: 100%;
	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-radius: 0.2vw;
	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;
	background-color: rgba(0, 15, 38, 0.9);
}
.task-table th {
	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;
	height: 2.5vw;
	line-height: 2.5vw;
}
.task-table td {
	text-align: center;
	font-size: 1vw;
	border: 0.1vw solid #004080;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
	height: 3.5vw;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

/* 🔥 🔥 只给 任务开始时间 这一列设置固定宽度 🔥 🔥 */
.time-column {
	width: 12vw !important; /* 你可以自己改大小：10vw / 12vw / 15vw */
	/* min-width: 12vw !important;
	max-width: 12vw !important; */
}

.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>