Board / HH-board-2026 · Files

<template>
	<div class="children-body">
		<div class="children-top-container" id="scrollBox">
			<!-- WMS 模块 → 满足条件后 禁用！-->
			<div class="children-item">
				<div class="children-title">WMS</div>
				<div class="square-box">
					<!-- <button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }">更改优先级</button>

					<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }">下发任务</button> -->

					<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }">取消任务</button>
				</div>
			</div>

			<!-- WCS 模块 → 永远不禁用！正常使用！-->
			<div class="children-item" v-if="isWcsTaskReceived">
				<div class="children-title">WCS</div>
				<div class="square-box">
					<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">复位</button>
				</div>
			</div>
			<!-- 执行设备 模块 → 根据接口获取权限！-->
			<div class="children-item" v-if="isequipment">
				<div class="children-title">{{ titleEquipment }}</div>
				<div class="square-box">
					<button v-for="(item, index) in equipmentData" :key="index" @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">{{ item.buttonName }}</button>
				</div>
			</div>
			<!-- 开始库位 模块 → 根据接口获取权限！-->
			<div class="children-item" v-if="isendLocationt">
				<div class="children-title">{{ titlestartLocationt }}</div>
				<div class="square-box">
					<button v-for="(item, index) in startLocationtData" :key="index" @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">{{ item.buttonName }}</button>
				</div>
			</div>
			<!-- 结束库位 模块 → 根据接口获取权限！-->
			<div class="children-item" v-if="isstartLocationt">
				<div class="children-title">{{ titleendLocationt }}</div>
				<div class="square-box">
					<button v-for="(item, index) in endLocationtData" :key="index" @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp">{{ item.buttonName }}</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		qustData: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			baseUrlOffOne: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLineOne: window.appConfig.baseUrlintTotalConversion,
			sysData: {},
			isLongPress: false,
			pressTimer: null,
			equipmentData: [],
			startLocationtData: [],
			endLocationtData: [],
			titleEquipment: '', //执行设备
			titlestartLocationt: '', //开始库位
			titleendLocationt: '', //结束库位
			isDeviceTaskReceived: false,
			isWcsTaskReceived: false,
			isequipment: false,
			isendLocationt: false,
			isstartLocationt: false,

			lastExecutionEquipmentId: null,
		}
	},
	watch: {
		qustData: {
			immediate: true,
			deep: true,
			handler(newVal) {
				//控制WMS，WCS
				this.permission(newVal)
				//控制设备模块
				this.equipment(newVal)
				//控制开始模块
				// this.startLocation(newVal)
				//控制结束模块
				// this.endLocation(newVal)
			},
		},
	},
	mounted() {
		const scrollBox = document.getElementById('scrollBox')
		scrollBox.addEventListener('wheel', (e) => {
			e.preventDefault()
			scrollBox.scrollLeft += e.deltaY * 1.5
		})
	},
	methods: {
		permission(newVal) {
			// 设备接收任务 → 只控制 WMS 按钮禁用
			const deviceTaskItem = newVal.find((item) => item.key === '设备接收任务')
			this.isDeviceTaskReceived = !!(deviceTaskItem && (deviceTaskItem.value ?? '').trim() !== '')

			// WCS 接收任务 → 控制显示隐藏
			const wcsTaskItem = newVal.find((item) => item.key === 'WCS接收任务')
			this.isWcsTaskReceived = !!(wcsTaskItem && (wcsTaskItem.value ?? '').trim() !== '')
		},

		equipment(newVal) {
			// 1. 先判断newVal是否有值，避免数组越界
			// if (!newVal || newVal.length === 0) {
			// 	this.isequipment = false
			// 	this.lastExecutionEquipmentId = null // 重置缓存
			// 	return
			// }
			// // 2. 获取当前的executionEquipmentId
			// const currentId = newVal[0].executionEquipmentId
			// // 3. 对比当前值与上一次缓存值：无变化则直接返回
			// if (currentId === this.lastExecutionEquipmentId) {
			// 	return
			// }
			// // 4. 有变化时更新缓存值
			// this.lastExecutionEquipmentId = currentId

			if (newVal[0].executionEquipmentId == null) {
				this.isequipment = false
			} else {
				this.titleEquipment = newVal[0].executionEquipmentId
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineOne : this.baseUrlOffTwo,
					logTitle: '执行设备',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: [newVal[0].executionEquipmentId],
					},
				}
				const callBackFn = (res) => {
					const realList = Object.values(res.data.data)[0] || []
					if (realList.length != 0) {
						this.equipmentData = realList
						this.isequipment = true
					}
				}
				''.ajax(this, opt, callBackFn)
			}
		},

		startLocation(newVal) {
			if (newVal[0].fromLocation == null) {
				this.isendLocationt = false
			} else {
				this.titlestartLocationt = newVal[0].fromLocation
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineOne : this.baseUrlOffTwo,
					logTitle: '开始库位',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: [newVal[0].fromLocation],
					},
				}
				const callBackFn = (res) => {
					const realList = Object.values(res.data.data)[0] || []
					if (realList.length != 0) {
						this.startLocationtData = realList
						this.isendLocationt = true
					}
				}
				''.ajax(this, opt, callBackFn)
			}
		},

		endLocation(newVal) {
			if (newVal[0].toLocation == null) {
				this.isstartLocationt = false
			} else {
				this.titleendLocationt = newVal[0].toLocation
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineOne : this.baseUrlOffTwo,
					logTitle: '目标库位',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: [newVal[0].toLocation],
					},
				}
				const callBackFn = (res) => {
					const realList = Object.values(res.data.data)[0] || []
					if (realList.length != 0) {
						this.endLocationtData = realList
						this.isstartLocationt = true
					}
				}
				''.ajax(this, opt, callBackFn)
			}
		},
		// ajaxSuccessDataBefore(res, title) {
		// 	const dynamicData = Object.values(res.data)[0] || []
		// 	console.log(dynamicData, '123')

		// 	if (!res.data || res.data.result == null || res.data.result.length === 0) {
		// 		this.sysData = []
		// 		''.Log(`${title}无数据`, 'getData')
		// 		return false
		// 	}
		// 	return true
		// },
		// 长按
		handleDown() {
			this.isLongPress = false
			clearTimeout(this.pressTimer)

			this.pressTimer = setTimeout(() => {
				this.isLongPress = true
				this.apiLongPress()
			}, 500)
		},

		// 松开
		handleUp() {
			clearTimeout(this.pressTimer)
			if (this.isLongPress) {
				this.apiRelease()
			}
			this.isLongPress = false
		},

		apiLongPress() {
			console.log('长按触发')
		},
		apiRelease() {
			console.log('松开触发')
		},
	},
}
</script>

<style scoped>
.children-body {
	width: 100%;
	height: 100%;
	color: #f0f0f5;
	font-size: 1vw;
	display: flex;
	flex-direction: column;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.children-top-container {
	width: 100%;
	height: 100%;
	display: flex;
	gap: 0.6vw;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.children-top-container::-webkit-scrollbar {
	display: none;
}

.children-item {
	flex: 0 0 auto;
	width: 17.2vw;
	height: 100%;
	background-color: #3f5675;
	border-radius: 0.3vw;
	box-shadow: 0 0 1.2vw rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.children-title {
	height: 1vw;
	color: #ffffff;
	font-size: 1vw;
	font-weight: 600;
	display: flex;
	align-items: center;
	padding: 0.5vw 0 0.4vw 0.65vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.square-box {
	flex: 1;
	background-color: #3f5675;
	padding: 0vw 0.4vw;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.4vw;
	row-gap: 0.4vw;
	align-items: flex-start;
	justify-content: flex-start;
	align-content: flex-start;
}

.square-box button {
	width: 8vw;
	height: 3vw;
	font-size: 0.9vw;
	border: none;
	border-radius: 0.3vw;
	background: #fff;
	color: #000;
	cursor: pointer;
}

/* 禁用样式 */
.square-box button.disabled {
	background: #999 !important;
	color: #ccc !important;
	cursor: not-allowed !important;
}

.square-box button:active {
	background-color: #5a98e6;
}
</style>