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" @click="handleStepClick(index, item)">
											{{ 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">
									<!-- <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 }" class="reset-btn">取消任务</button>
									<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }" class="reset-btn">取消任务</button>
									<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }" class="reset-btn">取消任务</button>
									<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }" class="reset-btn">取消任务</button>
									<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }" class="reset-btn">取消任务</button>
									<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" :class="{ disabled: isDeviceTaskReceived }" class="reset-btn">取消任务</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" class="reset-btn">复位</button>
									<button @mousedown="handleDown" @mouseup="handleUp" @mouseleave="handleUp" class="reset-btn">复位</button>
									<u-subsection v-model="activeTab" :list="list" />
									<!-- <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> -->
								</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" @mouseup="handleUp" @mouseleave="handleUp" class="reset-btn">
										{{ 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" @mouseup="handleUp" @mouseleave="handleUp" class="reset-btn">
										{{ 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" @mouseup="handleUp" @mouseleave="handleUp" class="reset-btn">
										{{ 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: [],
			titleEquipment: '',
			titlestartLocationt: '',
			titleendLocationt: '',
			isDeviceTaskReceived: false,
			isWcsTaskReceived: false,
			isequipment: false,
			isendLocationt: false,
			isstartLocationt: false,
			lastExecutionEquipmentId: null,
			lastFromLocation: null,
			lastToLocation: null,
			isUpdating: false,
			updateTimer: null,
			// 默认选中第1个
			activeTab: 1,
			list: [{ label: '暂停处理' }, { label: '开始处理' }],
			tabClickTimer: null,
			qustDataTimer: null,
			value: true,
			lastPermissionData: null, // 用于存储上一次的权限数据

			// 新增的API地址
			baseUrlButton: window.appConfig.baseUrlintTotalConversion || 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
		}
	},
	methods: {
		handleChange(val) {
			console.log('当前选中：', val)
		},
		// 原有的父组件方法保持不变
		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
				// this.$nextTick(() => {
				// 	this.$forceUpdate()
				// })
			}
			''.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.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,
			}))

			// this.$nextTick(() => {
			// 	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
			// 	}
			// })
			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
			}

			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,
					}))

					// this.$nextTick(() => {
					// 	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
					// })
					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)
		},

		handleStepClick(e, s) {
			// this.operation = s
		},

		// 从children组件整合的方法
		handleQuDataUpdate(newVal, currentId, currentFrom, currentTo) {
			// 【优化方案】使用哈希值比较，避免大对象比较开销
			const newValString = JSON.stringify(newVal)
			if (newValString !== this.lastPermissionData) {
				// 1. 更新权限
				this.updatePermission(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)
		},

		updatePermission(newVal) {
			// 设备接收任务 → 控制 WMS 按钮禁用
			const deviceTaskItem = newVal.find((item) => item.key === '设备接收任务')
			this.isDeviceTaskReceived = !!(deviceTaskItem && (deviceTaskItem.value ?? '').trim() !== '')

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

		getEquipmentData(equipmentId) {
			if (!equipmentId) {
				this.isequipment = false
				this.equipmentData = []
				return
			}

			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] || []

				if (realList.length > 0) {
					console.log(realList, '34')

					this.equipmentData = realList
					this.isequipment = true
				} else {
					console.log('123434')
					this.equipmentData = []
					this.isequipment = false
				}
			})
		},
		startLocation(currentFrom) {
			if (!currentFrom) {
				this.isstartLocationt = false
				this.startLocationtData = []
				return
			}

			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: [currentFrom],
				},
			}

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

				if (realList.length > 0) {
					this.startLocationtData = realList
					this.isstartLocationt = true
				} else {
					this.startLocationtData = []
					this.isstartLocationt = false
				}
			})
		},
		endLocation(currentTo) {
			if (!currentTo) {
				this.isendLocationt = false
				this.endLocationtData = []
				return
			}

			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: [currentTo],
				},
			}

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

				if (realList.length > 0) {
					this.endLocationtData = realList
					this.isendLocationt = true
				} else {
					this.endLocationtData = []
					this.isendLocationt = false
				}
			})
		},

		clearModuleData() {
			this.equipmentData = []
			this.startLocationtData = []
			this.endLocationtData = []
			this.isequipment = false
			this.isendLocationt = false
			this.isstartLocationt = false
			this.titleEquipment = ''
			this.titlestartLocationt = ''
			this.titleendLocationt = ''
			this.lastExecutionEquipmentId = null
			this.lastFromLocation = null
			this.lastToLocation = null
		},

		// 按钮事件处理
		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('松开触发')
		},
	},
	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)
		}
	},
}
</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>