Board / HH-board-2026 · Files

<template>
	<div class="device-management">
		<!-- 左右分栏父容器 -->
		<div class="parent-container">
			<!-- 左侧设备列表 -->
			<div class="left-div">
				<div class="task-tabs-wrap">
					<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
						<el-tab-pane label="全部" name="1">全部</el-tab-pane>
						<el-tab-pane label="正常" name="2">正常</el-tab-pane>
						<el-tab-pane label="超时" name="3">超时</el-tab-pane>
						<el-tab-pane label="异常" name="4">异常</el-tab-pane>
					</el-tabs>
				</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 ref="elStepContainer" class="elStep" @mouseenter="onElStepMouseEnter" @mouseleave="onElStepMouseLeave" @touchstart="onElStepTouchStart" @touchmove="onElStepTouchMove" @touchend="onElStepTouchEnd" @touchcancel="onElStepTouchEnd">
						<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>
					<!-- 替换为子组件，传递核心props -->
					<TaskOperationPanel v-else :task-id="TaskId" :current-task-id="currentTaskId" :base-url-button="baseUrlButton" :base-url-off-two="baseUrlOffTwo" :qust-data="qustData" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 引入新创建的子组件
import TaskOperationPanel from './children/TaskOperationPanel.vue' // 路径根据实际目录调整

export default {
	props: {
		userName: {
			type: String,
			default: '',
		},
	},
	components: {
		TaskOperationPanel, // 注册子组件
	},
	watch: {
		userName: {
			immediate: true,
			handler() {
				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 props），移除原有逻辑
		qustData: {
			immediate: true,
			deep: true,
			handler(newVal) {
				// 仅做数据透传，逻辑移到子组件
				if (!newVal || newVal.length === 0) {
					return
				}
			},
		},
		temp() {
			this.scheduleCenterCurrentStep()
		},
		deviceStatus() {
			this.scheduleCenterCurrentStep()
		},
	},
	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,
			isElStepHovered: false,
			isElStepTouching: false,
			elStepTouchEndTimer: null,
			elStepMouseLeaveTimer: null,
			elStepWheelHandler: null,

			// 移除原有的按钮数据/定时器/状态（已迁移到子组件）
			// 仅保留基础API配置
			baseUrlButton: window.appConfig.baseUrlintTotalConversion || 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			TaskId: 1234,
			activeName: '1',
		}
	},
	methods: {
		// 保留原有的任务列表、进度、基础AJAX相关方法
		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.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
			}

			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) => {
				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)
		},
		scheduleCenterCurrentStep() {
			this.$nextTick(() => {
				this.centerCurrentStepIfNeeded()
			})
		},
		centerCurrentStepIfNeeded() {
			if (this.isElStepHovered || this.isElStepTouching) return
			const container = this.$refs.elStepContainer
			if (!container) return
			if (!this.deviceStatus || this.deviceStatus.length === 0) return

			const stepEls = container.querySelectorAll('.el-step')
			if (!stepEls.length) return

			let activeIndex = 0
			if (typeof this.temp === 'number' && this.temp >= 0) {
				activeIndex = Math.min(this.temp, stepEls.length - 1)
			}
			const activeEl = stepEls[activeIndex]
			if (!activeEl) return

			const visibleCenter = activeEl.offsetLeft - container.scrollLeft + activeEl.offsetWidth / 2
			const containerCenter = container.clientWidth / 2
			const threshold = 12

			if (Math.abs(visibleCenter - containerCenter) <= threshold) return

			let targetLeft = activeEl.offsetLeft + activeEl.offsetWidth / 2 - container.clientWidth / 2
			const maxLeft = Math.max(0, container.scrollWidth - container.clientWidth)
			targetLeft = Math.max(0, Math.min(targetLeft, maxLeft))

			container.scrollTo({
				left: targetLeft,
				behavior: 'smooth',
			})
		},
		onElStepMouseEnter() {
			this.isElStepHovered = true
			if (this.elStepMouseLeaveTimer) {
				clearTimeout(this.elStepMouseLeaveTimer)
				this.elStepMouseLeaveTimer = null
			}
		},
		onElStepMouseLeave() {
			this.isElStepHovered = false
			if (this.elStepMouseLeaveTimer) clearTimeout(this.elStepMouseLeaveTimer)
			this.elStepMouseLeaveTimer = setTimeout(() => {
				this.scheduleCenterCurrentStep()
			}, 3000)
		},
		onElStepTouchStart() {
			this.isElStepTouching = true
			if (this.elStepTouchEndTimer) {
				clearTimeout(this.elStepTouchEndTimer)
				this.elStepTouchEndTimer = null
			}
		},
		onElStepTouchMove() {
			this.isElStepTouching = true
		},
		onElStepTouchEnd() {
			if (this.elStepTouchEndTimer) clearTimeout(this.elStepTouchEndTimer)
			this.elStepTouchEndTimer = setTimeout(() => {
				this.isElStepTouching = false
				this.scheduleCenterCurrentStep()
			}, 180)
		},
		intInterval() {
			if (this.globalTimer) clearInterval(this.globalTimer)
			this.globalTimer = setInterval(() => {
				this.getData()
			}, 1000)
		},
	},
	mounted() {
		if (this.userName) {
			// this.intInterval()
		} else {
			this.taskList = []
			this.isRightDetailVisible = false
		}
		// 鼠标滚轮上下触发right-top-box左右滚动
		const rightTopBox = this.$refs.elStepContainer
		if (rightTopBox) {
			this.elStepWheelHandler = (e) => {
				e.preventDefault()
				rightTopBox.scrollLeft += e.deltaY
			}
			rightTopBox.addEventListener('wheel', this.elStepWheelHandler, { passive: false })
		}
		this.scheduleCenterCurrentStep()
	},
	beforeDestroy() {
		this.pauseApiRequest()
		if (this.elStepTouchEndTimer) clearTimeout(this.elStepTouchEndTimer)
		if (this.elStepMouseLeaveTimer) clearTimeout(this.elStepMouseLeaveTimer)
		const rightTopBox = this.$refs.elStepContainer
		if (rightTopBox && this.elStepWheelHandler) {
			rightTopBox.removeEventListener('wheel', this.elStepWheelHandler)
			this.elStepWheelHandler = null
		}
	},
}
</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>