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>
	</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,
			tempData: '',
			isDeviceTaskReceived: false,
			isWcsTaskReceived: false,
		}
	},
	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) {
			if (newVal[0].executionEquipmentId == '') return
			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)
		},
		startLocation(newVal) {
			if (newVal[0].fromLocation == '') return
			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)
		},
		endLocation(newVal) {
			if (newVal[0].toLocation == '') return
			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)
		},
		// 长按
		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>