Board / HH-board-2026 · Files

<template>
	<div class="device-management">
		<!-- 左右分栏父容器 -->
		<div class="parent-container">
			<!-- 左侧设备列表 -->
			<div class="left-div">
				<div class="device-card" v-for="(item, index) in taskList" :key="index" :class="{ active: activeDevice === index }" @click="getTask(index, item)">
					<div class="device-title">
						<span :class="getState(item.taskStatusColor)"></span>
						<span class="container-code-text">{{ item.containerCode }}</span>
						<div :class="['status-tag', getStateClass(item.taskStatusColor)]">{{ item.taskStatusDescription }}</div>
					</div>
					<div class="device-info">
						任务ID: {{ item.taskId }}<br />
						任务类型: {{ item.taskTypeDescription }}<br />
						任务持续时间: {{ item.taskDurationSecondsFormat }}
					</div>
				</div>
			</div>

			<div class="right-div" v-show="isRightDetailVisible">
				<div class="right-top-box">
					<div class="elStep">
						<el-steps finish-status="success" :active="temp + 1" space="auto" class="custom-steps">
							<el-step v-for="(item, index) in deviceStatus" :key="index">
								<template #title>
									<div class="step-title-wrapper">
										<span v-if="item.value != null" class="step-title-clickable">
											{{ item.key }}
										</span>
										<span v-else>
											{{ item.key }}
										</span>
										<span class="step-time">{{ item.time }}</span>
									</div>
									<div style="position: relative;top: -0.2vw;">{{ item.value }}</div>
									<div>
										<div class="solt-Moees">
											{{ item.Message }}
										</div>
									</div>
									<div class="solt-text">
										{{ item.handlePlan }}
									</div>
								</template>
							</el-step>
						</el-steps>
					</div>
					<div class="field-display-area">
						<div class="field-item" v-for="(field, index) in fieldList" :key="index">
							<div class="field-label">{{ field.label }}</div>
							<div class="field-value">{{ field.value }}</div>
						</div>
					</div>
				</div>

				<!-- 原来的children组件内容整合到这里 -->
				<div class="reserved-area">
					<!-- 增加加载态，避免数据切换时空白/闪烁 -->
					<div v-if="isLoadingChildren" class="children-loading">加载中...</div>
					<!-- 原children组件的内容 -->
					<div v-else 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">
									<div v-for="(item, index) in wmsData" :key="index">
										<u-subsection v-if="item.ButtonShowType === 'SwitchButton'" v-model="item.Start" :list="item.ButtonName" @tab-change="(val) => handleSubsectionChange(val, item)" />
										<el-switch v-if="item.ButtonShowType === 'RadioButton'" v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
										<!-- 动态wms按钮 -->
										<button
											v-if="item.ButtonShowType === 'DefaultButton' && !isWmsCancelDisabled(item)"
											@mousedown="handleDown(item, 'wms')"
											@mouseup="handleUp(item, 'wms')"
											@mouseleave="handleUp(item, 'wms')"
											class="reset-btn"
											:style="{
												backgroundColor: item.ButtonStatus == 'True' ? item.ButtonTurnOnColor : item.ButtonTurnOffColor,
											}"
										>
											{{ item.ButtonName }}
										</button>
										<button
											v-else-if="item.ButtonShowType === 'DefaultButton'"
											:disabled="true"
											tabindex="-1"
											class="reset-btn disabled"
											:style="{
												backgroundColor: '#999',
											}"
										>
											{{ item.ButtonName }}
										</button>
									</div>
									<!-- <button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }" class="reset-btn">取消任务</button> -->
								</div>
							</div>

							<!-- WCS 模块 - 修改为动态接口加载 -->
							<div class="children-item" v-show="isWcsTaskReceived && wcsData.length > 0">
								<div class="children-title">WCS</div>
								<div class="square-box">
									<div v-for="(item, index) in wcsData" :key="index">
										<u-subsection v-if="item.ButtonShowType === 'SwitchButton'" v-model="item.Start" :list="item.ButtonName" @tab-change="(val) => handleSubsectionChange(val, item)" />
										<el-switch v-if="item.ButtonShowType === 'RadioButton'" v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
										<!-- 动态WCS按钮 -->
										<button
											v-if="item.ButtonShowType === 'DefaultButton'"
											@mousedown="handleDown(item, 'wcs')"
											@mouseup="handleUp(item, 'wcs')"
											@mouseleave="handleUp(item, 'wcs')"
											class="reset-btn"
											:style="{
												backgroundColor: item.ButtonStatus == 'True' ? item.ButtonTurnOnColor : item.ButtonTurnOffColor,
											}"
										>
											{{ item.ButtonName }}
										</button>
									</div>
								</div>
							</div>

							<!-- 执行设备 模块 -->
							<div class="children-item" v-show="isequipment">
								<div class="children-title">{{ titleEquipment }}</div>
								<div class="square-box">
									<button
										v-for="(item, index) in equipmentData"
										:key="index"
										@mousedown="handleDown(item, 'equipment')"
										@mouseup="handleUp(item, 'equipment')"
										@mouseleave="handleUp(item, 'equipment')"
										class="reset-btn"
										:style="{
											backgroundColor: item.ButtonStatus == 'True' ? item.ButtonTurnOnColor : item.ButtonTurnOffColor,
										}"
									>
										{{ item.ButtonName }}
									</button>
								</div>
							</div>

							<!-- 开始库位 模块 -->
							<div class="children-item" v-show="isstartLocationt">
								<div class="children-title">{{ titlestartLocationt }}</div>
								<div class="square-box">
									<button
										v-for="(item, index) in startLocationtData"
										:key="index"
										@mousedown="handleDown(item, 'startLocation')"
										@mouseup="handleUp(item, 'startLocation')"
										@mouseleave="handleUp(item, 'startLocation')"
										class="reset-btn"
										:style="{
											backgroundColor: item.ButtonStatus == 'True' ? item.ButtonTurnOnColor : item.ButtonTurnOffColor,
										}"
									>
										{{ item.ButtonName }}
									</button>
								</div>
							</div>

							<!-- 结束库位 模块 -->
							<div class="children-item" v-show="isendLocationt">
								<div class="children-title">{{ titleendLocationt }}</div>
								<div class="square-box">
									<button
										v-for="(item, index) in endLocationtData"
										:key="index"
										@mousedown="handleDown(item, 'endLocation')"
										@mouseup="handleUp(item, 'endLocation')"
										@mouseleave="handleUp(item, 'endLocation')"
										class="reset-btn"
										:style="{
											backgroundColor: item.ButtonStatus == 'True' ? item.ButtonTurnOnColor : item.ButtonTurnOffColor,
										}"
									>
										{{ item.ButtonName }}
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import USubsection from './children/subsection.vue'
export default {
	props: {
		userName: {
			type: String,
			default: '',
		},
	},
	components: {
		USubsection,
	},
	watch: {
		userName: {
			immediate: true,
			handler(newVal) {
				this.getData()
			},
		},
		taskList: {
			immediate: true,
			handler(newList) {
				if (!newList || newList.length === 0) {
					this.isRightDetailVisible = false
					this.activeDevice = null
					this.currentTaskId = null
					if (this.taskRefreshTimer) {
						clearInterval(this.taskRefreshTimer)
						this.taskRefreshTimer = null
					}
					return
				}
				const isCurrentTaskExist = newList.some((item) => item.taskId === this.currentTaskId)

				if (this.activeDevice === null || !isCurrentTaskExist) {
					this.getTask(0, newList[0])
				} else {
					const currentIndex = newList.findIndex((item) => item.taskId === this.currentTaskId)
					this.activeDevice = currentIndex
				}
			},
		},
		// 监听qustData变化，处理权限和按钮数据
		qustData: {
			immediate: true,
			deep: true,
			handler(newVal) {
				if (!newVal || newVal.length === 0) {
					this.clearModuleData()
					return
				}

				// 提取关键字段
				const currentId = newVal[0]?.executionEquipmentId
				const currentFrom = newVal[0]?.fromLocation
				const currentTo = newVal[0]?.toLocation

				// 防抖处理
				if (this.updateTimer) {
					clearTimeout(this.updateTimer)
				}

				this.updateTimer = setTimeout(() => {
					this.handleQuDataUpdate(newVal, currentId, currentFrom, currentTo)
				}, 100)
			},
		},
	},
	data() {
		return {
			// 原有数据
			baseUrlOffOne: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLineOne: window.appConfig.baseUrlintTwo,
			baseUrlOffTwo: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLineTwo: window.appConfig.baseUrlintTotalConversion,
			sysData: {},
			activeDevice: null,
			activeStep: 1,
			taskList: [],
			operation: '',
			fieldList: [
				{ label: '任务ID', value: '' },
				{ label: '任务类型', value: '' },
				{ label: '库区', value: '' },
				{ label: '任务起始位置', value: '' },
				{ label: '任务目标位置', value: '' },
				{ label: '托盘编码', value: '' },
				{ label: '托盘当前位置', value: '' },
				{ label: '任务优先级', value: '' },
				{ label: '任务状态', value: '' },
				{ label: '执行设备', value: '' },
				{ label: '设备状态', value: '' },
				{ label: '设备运行模式', value: '' },
				{ label: '设备当前位置', value: '' },
				{ label: '任务持续时间', value: '' },
			],
			deviceStatus: [],
			qustData: [],
			temp: 0,
			currentTaskId: null,
			taskRefreshTimer: null,
			globalTimer: null,
			isRightDetailVisible: true,
			apiData: '',
			show: 0,
			isLoadingChildren: false,

			// 从children组件整合的数据
			isLongPress: false,
			pressTimer: null,
			equipmentData: [],
			startLocationtData: [],
			endLocationtData: [],
			wmsData: [],
			wcsData: [], // 新增：WCS模块按钮数据
			titleEquipment: '',
			titlestartLocationt: '',
			titleendLocationt: '',
			titleWcs: 'WCS', // 新增：WCS模块标题（固定）
			isWmsCancelTaskLocked: false,
			isWcsTaskReceived: false,
			isequipment: false,
			isendLocationt: false,
			isstartLocationt: false,
			lastExecutionEquipmentId: null,
			lastFromLocation: null,
			lastToLocation: null,
			isUpdating: false,
			updateTimer: null,
			// 默认选中第1个
			activeTab: 1,
			list: [],
			tabClickTimer: null,
			qustDataTimer: null,
			value: true,
			lastPermissionData: null, // 用于存储上一次的权限数据

			// 新增的API地址
			baseUrlButton: window.appConfig.baseUrlintTotalConversion || 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			equipmentRefreshTimer: null, // 执行设备接口刷新定时器
			lastEquipmentData: [], // 上一次的执行设备接口数据
			startLocationRefreshTimer: null, // 开始库位接口刷新定时器
			lastStartLocationData: [], // 上一次的开始库位接口数据
			endLocationRefreshTimer: null, // 结束库位接口刷新定时器
			lastEndLocationData: [], // 上一次的结束库位接口数据
			wcsRefreshTimer: null, // 新增：WCS模块定时器
			lastWcsData: [], // 新增：上一次的WCS数据缓存

			currentButtonContext: null, // 暂存当前按钮的上下文数据

			lastSwitchActiveTab: null, // 上一次的 activeTab 值
			lastSwitchList: [], // 上一次的 list 数据
			TaskId: 1234,
		}
	},
	methods: {
		// 原有的父组件方法保持不变
		pauseApiRequest() {
			if (this.globalTimer) {
				clearInterval(this.globalTimer)
				this.globalTimer = null
			}
			if (this.taskRefreshTimer) {
				clearInterval(this.taskRefreshTimer)
				this.taskRefreshTimer = null
			}
		},

		getData() {
			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
				this.querdata(res.data.result)

				res.data.result.forEach((x) => {
					x.taskDurationSeconds = Number((x.taskDurationSeconds / 60).toFixed(2))
				})

				this.taskList = res.data.result
			}
			''.ajax(this, opt, callBackFn)
		},

		priority() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineTwo : this.baseUrlOffTwo,
				logTitle: '更改优先级',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: 'post',
					requestUrl: '/api/cmc/updatePriority',
					requestService: 'WMS',
					requestBody: {
						id: this.operation.taskId,
						priority: this.operation.taskPriority,
					},
				},
			}
			const callBackFn = (res) => {
				if (res.data.code == 200) {
					this.$message({
						showClose: true,
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						showClose: true,
						message: res.data.message,
						type: 'error',
					})
				}
			}
			''.ajax(this, opt, callBackFn)
		},

		cancelTask() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineTwo : this.baseUrlOffTwo,
				logTitle: '取消任务',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: 'post',
					requestUrl: '/api/cmc/cancelTask',
					requestService: 'WMS',
					requestBody: {
						id: this.operation.taskId,
					},
				},
			}
			const callBackFn = (res) => {
				if (res.data.code == 200) {
					this.$message({
						showClose: true,
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						showClose: true,
						message: res.data.message,
						type: 'error',
					})
				}
			}
			''.ajax(this, opt, callBackFn)
		},

		ajaxSuccessDataBefore(res, title) {
			if (!res || !res.data || res.data.result == null || res.data.result.length === 0) {
				this.sysData = []
				this.taskList = []
				this.querdata([])
				''.Log(`${title}无数据`, 'getData')
				return false
			}
			return true
		},

		getState(state) {
			const classMap = {
				green: 'device-status-running',
				orange: 'device-status-idle',
				red: 'device-status-error',
			}
			return classMap[state] || 'status-offline'
		},

		getStateClass(state) {
			const classMap = {
				green: 'status-running',
				orange: 'status-idle',
				red: 'status-error',
			}
			return classMap[state] || 'status-offline'
		},

		getTask(index, data) {
			this.isLoadingChildren = true
			this.qustData = []
			this.deviceStatus = []

			if (this.currentTaskId === data.taskId) {
				this.isRightDetailVisible = false
				this.currentTaskId = null
				this.activeDevice = null
				this.isLoadingChildren = false
				if (this.taskRefreshTimer) {
					clearInterval(this.taskRefreshTimer)
					this.taskRefreshTimer = null
				}
				return
			}
			this.clearWcsData()
			this.isRightDetailVisible = true
			this.activeDevice = index
			this.currentTaskId = data.taskId
			this.progress(data)

			const taskStatusList = Object.entries(data.taskStatusTimestamps || {}).map(([key, value]) => ({
				key: key,
				value: value,
				color: data.taskStatusColor,
				Message: data.exceptionMessage,
				handlePlan: data.exceptionHandlePlan,
				taskId: data.taskId,
				taskPriority: data.taskPriority,
				executionEquipmentId: data.executionEquipmentId,
				fromLocation: data.fromLocation,
				toLocation: data.toLocation,
			}))
			if (!taskStatusList.length) {
				this.temp = -1
				this.deviceStatus = []
				this.qustData = []
				this.isLoadingChildren = false
			} else {
				let lastValidIndex = -1
				taskStatusList.forEach((item, idx) => {
					if (item.color == 'red') {
						if (item.value !== null) lastValidIndex = idx - 1
					} else {
						if (item.value !== null) lastValidIndex = idx
					}
				})
				this.temp = lastValidIndex
				const handledStatus = this.dataHandle(taskStatusList)
				this.deviceStatus = handledStatus
				this.qustData = JSON.parse(JSON.stringify(handledStatus))
				this.isLoadingChildren = false
				// ========== 新增：重新打开后主动触发WCS权限检查和数据拉取 ==========
				this.updatePermissionWCS(this.qustData)
				if (this.isWcsTaskReceived) {
					this.getWcsData()
				}
			}

			if (this.taskRefreshTimer) clearInterval(this.taskRefreshTimer)
			this.taskRefreshTimer = setInterval(() => {
				this.getData()
				setTimeout(() => {
					const latestTask = this.taskList.find((item) => item.taskId === this.currentTaskId)
					if (!latestTask) return

					this.isLoadingChildren = true
					this.progress(latestTask)
					const newStatusList = Object.entries(latestTask.taskStatusTimestamps || {}).map(([key, value]) => ({
						key: key,
						value: value,
						color: latestTask.taskStatusColor,
						Message: latestTask.exceptionMessage,
						handlePlan: latestTask.exceptionHandlePlan,
						taskId: latestTask.taskId,
						taskPriority: latestTask.taskPriority,
						executionEquipmentId: latestTask.executionEquipmentId,
						fromLocation: latestTask.fromLocation,
						toLocation: latestTask.toLocation,
					}))
					if (newStatusList.length) {
						let newLastIndex = -1
						newStatusList.forEach((item, idx) => {
							if (item.color == 'red') {
								if (item.value !== null) newLastIndex = idx - 1
							} else {
								if (item.value !== null) newLastIndex = idx
							}
						})
						this.temp = newLastIndex
						const newHandledStatus = this.dataHandle(newStatusList)
						this.deviceStatus = newHandledStatus
						this.qustData = JSON.parse(JSON.stringify(newHandledStatus))
					} else {
						this.deviceStatus = []
						this.qustData = []
					}
					this.isLoadingChildren = false
				}, 200)
			}, 1000)
		},

		dataHandle(data) {
			let temp = data.map((item, index) => {
				const res = { ...item, time: '' }
				return res
			})
			const lastValidIndex = temp.findLastIndex((item) => item.value !== null)
			temp.forEach((item, idx) => {
				if (idx !== lastValidIndex) {
					item.handlePlan = item.Message = ''
				}
			})
			return temp
		},

		progress(item) {
			this.fieldList[0].value = item.taskId
			this.fieldList[1].value = item.taskTypeDescription
			this.fieldList[2].value = item.zoneCodeDescription
			this.fieldList[3].value = item.fromLocation
			this.fieldList[4].value = item.toLocation
			this.fieldList[5].value = item.containerCode
			this.fieldList[6].value = item.containerCurrentLocation
			this.fieldList[7].value = item.taskPriority
			this.fieldList[8].value = item.taskStatusDescription
			this.fieldList[9].value = item.executionEquipmentId
			this.fieldList[10].value = item.equipmentStatusDescription
			this.fieldList[11].value = item.equipmentOperationModeDescription
			this.fieldList[12].value = item.equipmentCurrentPosition
			this.fieldList[13].value = item.taskDurationSecondsFormat
		},

		querdata(data) {
			const targetItem = data.find((item) => item.exceptionMessage)
			const result = targetItem ? targetItem.exceptionMessage : ''
			this.sendToParent(result)
		},

		sendToParent(data) {
			this.$emit('send-data', data)
		},

		intInterval() {
			if (this.globalTimer) clearInterval(this.globalTimer)
			this.globalTimer = setInterval(() => {
				this.getData()
			}, 1000)
		},
		// 从children组件整合的方法
		handleQuDataUpdate(newVal, currentId, currentFrom, currentTo) {
			// 【优化方案】使用哈希值比较，避免大对象比较开销
			const newValString = JSON.stringify(newVal)
			if (newValString !== this.lastPermissionData) {
				// 1. 更新权限
				this.updatePermissionWMS(newVal)
				this.updatePermissionWCS(newVal)
				// 保存当前值用于下一次比较
				this.lastPermissionData = newValString
			}

			// 2. 检查关键字段是否变化
			const hasRealChange = currentId !== this.lastExecutionEquipmentId || currentFrom !== this.lastFromLocation || currentTo !== this.lastToLocation

			if (!hasRealChange) {
				return
			}

			// 3. 更新缓存
			this.lastExecutionEquipmentId = currentId
			this.lastFromLocation = currentFrom
			this.lastToLocation = currentTo

			// 4. 更新标题
			this.titleEquipment = currentId || ''
			this.titlestartLocationt = currentFrom || ''
			this.titleendLocationt = currentTo || ''
			// 5. 获取设备数据
			this.getEquipmentData(currentId)
			// 5. 获取起始位置数据
			this.startLocation(currentFrom)
			// 5. 获取目标位置数据
			this.endLocation(currentTo)
		},
		updatePermissionWMS(newVal) {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
				logTitle: 'WMS1',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: 'post',
					requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
					requestService: 'WCS',
					requestBody: ['WMS'],
				},
			}

			''.ajax(this, opt, (res) => {
				const realList = Object.values(res.data?.data || {})[0] || []
				this.wmsData = realList
				this.isWmsCancelTaskLocked = this.shouldDisableWmsCancelTask(newVal)
			})
		},
		isWmsCancelDisabled(item) {
			return this.isWmsCancelTaskLocked && this.isWmsCancelButton(item)
		},
		isWmsCancelButton(item) {
			return String(item?.ButtonName || '').includes('取消任务')
		},
		shouldDisableWmsCancelTask(statusList) {
			const disableStages = ['设备接收任务', '设备执行开始', '设备执行完成', 'WCS确认完成', 'WMS确认完成']
			return disableStages.some((stageKey) => {
				const stage = statusList.find((item) => item.key === stageKey)
				return !!(stage && String(stage.value ?? '').trim() !== '')
			})
		},
		updatePermissionWCS(newVal) {
			// WCS 接收任务 → 控制WCS模块显示隐藏
			const wcsTaskItem = newVal.find((item) => item.key === 'WCS接收任务')
			const shouldShowWcs = !!(wcsTaskItem && (wcsTaskItem.value ?? '').trim() !== '')

			// 如果 WCS 状态变化，重新获取数据
			if (shouldShowWcs !== this.isWcsTaskReceived) {
				this.isWcsTaskReceived = shouldShowWcs
				// 强制触发视图更新（关键：解决状态更新但视图不刷新的问题）
				this.$nextTick(() => {
					// 如果 WCS 模块需要显示，获取数据
					if (shouldShowWcs) {
						this.getWcsData()
					} else {
						// 如果不需要显示，清除数据和定时器
						this.clearWcsData()
					}
				})
			}
		},

		// 优化：执行设备数据获取 + 2秒定时刷新 + 数据对比
		getEquipmentData(equipmentId) {
			// 清除旧定时器，避免重复刷新
			if (this.equipmentRefreshTimer) {
				clearInterval(this.equipmentRefreshTimer)
				this.equipmentRefreshTimer = null
			}

			// 无设备ID时清空数据
			if (!equipmentId) {
				this.isequipment = false
				this.equipmentData = []
				this.lastEquipmentData = []
				return
			}

			// 定义数据请求逻辑（抽离为内部函数，方便定时器调用）
			const fetchEquipmentData = () => {
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
					logTitle: '执行设备',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: [equipmentId],
					},
				}

				''.ajax(this, opt, (res) => {
					const realList = Object.values(res.data?.data || {})[0] || []
					// 对比新数据与缓存数据，只有不一致时才更新
					const dataStr = JSON.stringify(realList)
					const lastDataStr = JSON.stringify(this.lastEquipmentData)

					if (dataStr !== lastDataStr) {
						this.equipmentData = realList
						this.isequipment = realList.length > 0
						this.lastEquipmentData = JSON.parse(JSON.stringify(realList)) // 更新缓存
						// 强制触发组件更新（可选，确保数据变动后渲染）
						this.$forceUpdate()
					}
				})
			}

			// 立即执行一次请求
			fetchEquipmentData()
			// 设置2秒定时刷新
			this.equipmentRefreshTimer = setInterval(fetchEquipmentData, 2000)
		},

		// 新增：获取 WCS 模块数据
		getWcsData() {
			// 清除旧定时器
			if (this.wcsRefreshTimer) {
				clearInterval(this.wcsRefreshTimer)
				this.wcsRefreshTimer = null
			}

			// 如果 WCS 模块不应该显示，清空数据
			if (!this.isWcsTaskReceived) {
				this.wcsData = []
				this.lastWcsData = []
				return
			}

			// 定义数据请求逻辑
			const fetchWcsData = () => {
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
					logTitle: 'WCS模块',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: ['WCS'], // 使用WCS作为标识
					},
				}

				''.ajax(this, opt, async (res) => {
					const realList = Object.values(res.data?.data || {})[0] || []

					// 步骤1：先处理 SwitchButton 类型的数据（保持原有逻辑）
					for (const x of realList) {
						if (x.ButtonShowType === 'SwitchButton') {
							await this.SwitchData(x) // 等待异步处理完成
						}
					}

					// 步骤2：对比 Start 字段是否变化（核心改动）
					const isStartChanged = this.isWcsDataStartChanged(realList, this.lastWcsData)

					// 步骤3：仅当 Start 变化时才更新数据

					if (isStartChanged) {
						console.log(realList, 'realList')

						this.wcsData = realList
						this.lastWcsData = JSON.parse(JSON.stringify(realList)) // 更新缓存
						this.$forceUpdate() // 强制更新（仅必要时）
						console.log('WCS数据 Start 字段变化，更新视图')
					} else {
						console.log('WCS数据 Start 字段无变化，跳过更新')
					}
				})
			}

			// 立即执行一次请求
			fetchWcsData()
			// 设置6秒定时刷新
			this.wcsRefreshTimer = setInterval(fetchWcsData, 2000)
		},
		isWcsDataStartChanged(newList, oldList) {
			// 长度不同直接判定为变化
			if (newList.length !== oldList.length) return true

			// 遍历每条数据对比 Start 字段
			for (let i = 0; i < newList.length; i++) {
				const newItem = newList[i]
				const oldItem = oldList[i]
				// 字段不存在/值不同都判定为变化
				if (newItem.Start !== oldItem.Start) {
					return true
				}
			}
			// 无变化
			return false
		},

		// 新增：清除 WCS 模块数据
		clearWcsData() {
			// 清除定时器
			if (this.wcsRefreshTimer) {
				clearInterval(this.wcsRefreshTimer)
				this.wcsRefreshTimer = null
			}
			// 清空数据
			this.wcsData = []
			this.lastWcsData = []
			// 重置状态（关键：避免残留状态导致显示异常）
			this.isWcsTaskReceived = false
			// 强制视图更新
			this.$forceUpdate()
		},
		SwitchData(data) {
			return new Promise((resolve) => {
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
					logTitle: 'WCS模块',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: data.ButtonRequestType,
						requestUrl: data.ButtonStatusPLCAddress,
						requestService: 'WCS',
						requestBody: [''],
					},
				}
				''.ajax(this, opt, (res) => {
					data.ButtonName = data.ButtonName.split('-').map((item) => ({ label: item }))
					data.Start = res.data.data == true ? 1 : 2
					resolve(data)
				})
			})
		},
		RadioData(x) {},

		// 优化开始库位数据获取（如需同样2秒刷新）
		startLocation(currentFrom) {
			// 清除旧定时器
			if (this.startLocationRefreshTimer) {
				clearInterval(this.startLocationRefreshTimer)
				this.startLocationRefreshTimer = null
			}

			if (!currentFrom) {
				this.isstartLocationt = false
				this.startLocationtData = []
				this.lastStartLocationData = []
				return
			}

			const fetchStartLocationData = () => {
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
					logTitle: '开始库位',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: [currentFrom],
					},
				}

				''.ajax(this, opt, (res) => {
					const realList = Object.values(res.data?.data || {})[0] || []
					const dataStr = JSON.stringify(realList)
					const lastDataStr = JSON.stringify(this.lastStartLocationData)

					if (dataStr !== lastDataStr) {
						this.startLocationtData = realList
						this.isstartLocationt = realList.length > 0
						this.lastStartLocationData = JSON.parse(JSON.stringify(realList))
						this.$forceUpdate()
					}
				})
			}

			fetchStartLocationData()
			this.startLocationRefreshTimer = setInterval(fetchStartLocationData, 2000)
		},

		// 优化结束库位数据获取（如需同样2秒刷新）
		endLocation(currentTo) {
			// 清除旧定时器
			if (this.endLocationRefreshTimer) {
				clearInterval(this.endLocationRefreshTimer)
				this.endLocationRefreshTimer = null
			}

			if (!currentTo) {
				this.isendLocationt = false
				this.endLocationtData = []
				this.lastEndLocationData = []
				return
			}

			const fetchEndLocationData = () => {
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
					logTitle: '目标库位',
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/GetEquipmentButtonByEquipmentIDs',
						requestService: 'WCS',
						requestBody: [currentTo],
					},
				}

				''.ajax(this, opt, (res) => {
					const realList = Object.values(res.data?.data || {})[0] || []
					const dataStr = JSON.stringify(realList)
					const lastDataStr = JSON.stringify(this.lastEndLocationData)

					if (dataStr !== lastDataStr) {
						this.endLocationtData = realList
						this.isendLocationt = realList.length > 0
						this.lastEndLocationData = JSON.parse(JSON.stringify(realList))
						this.$forceUpdate()
					}
				})
			}

			fetchEndLocationData()
			this.endLocationRefreshTimer = setInterval(fetchEndLocationData, 2000)
		},

		// 清空模块数据时，同时清除所有定时器
		clearModuleData() {
			// 清除各类定时器
			if (this.equipmentRefreshTimer) clearInterval(this.equipmentRefreshTimer)
			if (this.startLocationRefreshTimer) clearInterval(this.startLocationRefreshTimer)
			if (this.endLocationRefreshTimer) clearInterval(this.endLocationRefreshTimer)
			if (this.wcsRefreshTimer) clearInterval(this.wcsRefreshTimer) // 新增

			// 重置定时器缓存
			this.equipmentRefreshTimer = null
			this.startLocationRefreshTimer = null
			this.endLocationRefreshTimer = null
			this.wcsRefreshTimer = null // 新增

			// 原有清空逻辑
			this.equipmentData = []
			this.startLocationtData = []
			this.endLocationtData = []
			this.wcsData = [] // 新增
			this.isequipment = false
			this.isendLocationt = false
			this.isstartLocationt = false
			this.isWmsCancelTaskLocked = false
			this.isWcsTaskReceived = false // 新增
			this.titleEquipment = ''
			this.titlestartLocationt = ''
			this.titleendLocationt = ''
			this.titleWcs = 'WCS' // 保持固定标题
			this.lastExecutionEquipmentId = null
			this.lastFromLocation = null
			this.lastToLocation = null

			// 重置数据缓存
			this.lastEquipmentData = []
			this.lastStartLocationData = []
			this.lastEndLocationData = []
			this.lastWcsData = [] // 新增
		},

		// 按钮事件处理
		handleDown(item, moduleType) {
			if (moduleType === 'wms' && this.isWmsCancelDisabled(item)) {
				return
			}
			this.isLongPress = false
			clearTimeout(this.pressTimer)

			// 保存当前按钮的上下文
			this.currentButtonContext = { item, moduleType }

			// 直接传递参数
			this.pressTimer = setTimeout(() => {
				this.isLongPress = true
				this.apiLongPress(item, moduleType)
			}, 500)
		},

		handleUp(item, moduleType) {
			clearTimeout(this.pressTimer)
			if (this.isLongPress) {
				this.apiRelease(item, moduleType)
			}
			this.isLongPress = false
			this.currentButtonContext = null
		},

		apiLongPress(item, moduleType) {
			if (moduleType == 'wms') {
				if (item.EquipmentButtonActions.length == 1) {
					this.wcsPressbtn(item.EquipmentButtonActions, moduleType)
				}
			} else {
				let logTitle = '执行设备'
				let requestBody = {
					equipmentID: item.EquipmentID, //设备
					buttonID: item.ButtonID, //id
					buttonActionType: 'press', //按下
				}
				// 根据不同模块设置不同的参数
				if (moduleType === 'wcs') {
					logTitle = 'WCS模块'
					// WCS模块可能使用不同的参数
				} else if (moduleType === 'startLocation') {
					logTitle = '开始库位'
				} else if (moduleType === 'endLocation') {
					logTitle = '结束库位'
				}
				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
					logTitle: logTitle,
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/SendEquipmentButtonAction',
						requestService: 'WCS',
						requestBody: requestBody,
					},
				}
				''.ajax(this, opt, (res) => {
					if (res.data.code == 200) {
						this.$message({
							message: res.data.message,
							type: 'success',
						})
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning',
						})
					}
				})
			}
		},
		// wms按下按钮
		wcsPressbtn(item, moduleType) {
			let requestBody = { id: this.currentTaskId }
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
				logTitle: 'wms按下',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: 'post',
					requestUrl: item[0].ActionPLCAddress,
					requestService: 'WMS',
					requestBody: { id: this.TaskId },
				},
			}
			''.ajax(this, opt, (res) => {
				if (res.data.code == 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'warning',
					})
				}
			})
		},

		apiRelease(item, moduleType) {
			if (moduleType == 'wms') {
			} else {
				let logTitle = '执行设备'
				let requestBody = {
					equipmentID: item.EquipmentID, //设备
					buttonID: item.ButtonID, //id
					buttonActionType: 'release', //松开
				}

				// 根据不同模块设置不同的参数
				if (moduleType === 'wcs') {
					logTitle = 'WCS模块'
				} else if (moduleType === 'startLocation') {
					logTitle = '开始库位'
				} else if (moduleType === 'endLocation') {
					logTitle = '结束库位'
				}

				const opt = {
					urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
					logTitle: logTitle,
					isUrlALL: true,
					headers: window.baseOnLineOrOff,
					header: window.baseOnLineOrOff,
					type: 'post',
					data: {
						requestMethod: 'post',
						requestUrl: '/api/Button/SendEquipmentButtonAction',
						requestService: 'WCS',
						requestBody: requestBody,
					},
				}
				''.ajax(this, opt, (res) => {
					if (res.data.code == 200) {
						this.$message({
							message: res.data.message,
							type: 'success',
						})
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning',
						})
					}
				})
			}
		},
		handleSubsectionChange(activeValue, itemData) {
			let requestBody = ''
			let tempUrl = ''
			let tempTpel = ''
			if (activeValue == 1) {
				requestBody = itemData.EquipmentButtonActions[0].ActionWriteValue
				tempUrl = itemData.EquipmentButtonActions[0].ActionPLCAddress
				tempTpel = itemData.EquipmentButtonActions[0].ActionRequestType
			} else {
				requestBody = itemData.EquipmentButtonActions[1].ActionWriteValue
				tempUrl = itemData.EquipmentButtonActions[1].ActionPLCAddress
				tempTpel = itemData.EquipmentButtonActions[1].ActionRequestType
			}
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlButton : this.baseUrlOffTwo,
				logTitle: '大滑动开关',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: tempTpel,
					requestUrl: tempUrl,
					requestService: 'WCS',
					requestBody: requestBody,
				},
			}
			''.ajax(this, opt, (res) => {
				if (res.data.code == 200) {
					this.$message({
						message: res.data.message,
						type: 'success',
					})
				} else {
					this.$message({
						message: res.data.message,
						type: 'warning',
					})
				}
			})
		},
	},
	mounted() {
		if (this.userName) {
			// this.intInterval()
		} else {
			this.taskList = []
			this.isRightDetailVisible = false
		}

		// 鼠标滚轮上下触发right-top-box左右滚动
		const rightTopBox = document.querySelector('.elStep')
		if (rightTopBox) {
			rightTopBox.addEventListener(
				'wheel',
				(e) => {
					e.preventDefault()
					rightTopBox.scrollLeft += e.deltaY
				},
				{ passive: false },
			)
		}

		// 添加children区域的滚动事件
		const scrollBox = document.getElementById('scrollBox')
		if (scrollBox) {
			scrollBox.addEventListener('wheel', (e) => {
				e.preventDefault()
				scrollBox.scrollLeft += e.deltaY * 1.5
			})
		}
	},
	beforeDestroy() {
		this.pauseApiRequest()
		if (this.updateTimer) clearTimeout(this.updateTimer)
		if (this.pressTimer) clearTimeout(this.pressTimer)

		// 新增：清除设备/库位刷新定时器
		if (this.equipmentRefreshTimer) clearInterval(this.equipmentRefreshTimer)
		if (this.startLocationRefreshTimer) clearInterval(this.startLocationRefreshTimer)
		if (this.endLocationRefreshTimer) clearInterval(this.endLocationRefreshTimer)
		if (this.wcsRefreshTimer) clearInterval(this.wcsRefreshTimer) // 新增
	},
}
</script>

<style src="./children/taskModel.css" scoped></style>
<style>
.my-tooltip {
	width: 15vw;
	font-size: 1vw !important;
}
.el-tooltip__popper {
	position: absolute;
	border-radius: 0.2vw;
	padding: 1vw;
	z-index: 2000;
	font-size: 1vw;
}
</style>