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>
										<!-- <el-tooltip effect="dark" :hide-after="3000" :content="item.Message" placement="right-start" popper-class="my-tooltip">
											<div class="solt-Moees">
												{{ item.Message }}
											</div>
										</el-tooltip> -->
									</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>

				<div class="reserved-area">
					<children v-if="qustData && qustData.length > 0" ref="children" :qustData="qustData" />
					<button v-show="show == 1" @click="sendToParent">点击传参给父组件</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import children from '@/components/children/children.vue'
export default {
	components: {
		children,
	},
	props: {
		userName: {
			type: String,
			default: '',
		},
	},
	watch: {
		userName: {
			immediate: true,
			handler(newVal) {
				this.getData()
			},
		},
		// 新增：监听taskList变化，控制默认选中和右侧显隐
		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
				}
				// 有数据但无选中项：默认选中第一条
				if (this.activeDevice === null && newList.length > 0) {
					this.getTask(0, newList[0])
				}
			},
		},
	},
	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,
		}
	},
	methods: {
		// 暂停所有接口请求
		pauseApiRequest() {
			if (this.globalTimer) {
				clearInterval(this.globalTimer)
				this.globalTimer = null
			}
			if (this.taskRefreshTimer) {
				clearInterval(this.taskRefreshTimer)
				this.taskRefreshTimer = null
			}
		},

		// 恢复接口请求
		// resumeApiRequest() {
		// 	if (!this.globalTimer) {
		// 		this.globalTimer = setInterval(() => {
		// 			this.getData()
		// 		}, 1000)
		// 	}
		// 	if (this.currentTaskId && !this.taskRefreshTimer) {
		// 		this.taskRefreshTimer = setInterval(() => {
		// 			this.getData()
		// 			setTimeout(() => {
		// 				const latestTask = this.taskList.find((item) => item.taskId === this.currentTaskId)
		// 				if (latestTask) {
		// 					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,
		// 					}))
		// 					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
		// 						this.deviceStatus = this.dataHandle(newStatusList)
		// 					}
		// 				}
		// 			}, 200)
		// 		}, 1000)
		// 	}
		// },
		//任务列表
		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
				// 强制触发taskList监听（兼容异步场景）
				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) {
			// 点击当前已选中的任务 → 关闭详情+停止刷新
			if (this.currentTaskId === data.taskId) {
				this.isRightDetailVisible = false
				this.currentTaskId = null
				this.activeDevice = null
				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
			} 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
				this.deviceStatus = this.dataHandle(taskStatusList)
				this.qustData = JSON.parse(JSON.stringify(this.dataHandle(taskStatusList)))
			}

			// 启动任务详情刷新
			if (this.taskRefreshTimer) clearInterval(this.taskRefreshTimer)
			this.taskRefreshTimer = setInterval(() => {
				this.getData()
				setTimeout(() => {
					const latestTask = this.taskList.find((item) => item.taskId === this.currentTaskId)
					if (latestTask) {
						this.progress(latestTask)
						const newStatusList = Object.entries(latestTask.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 (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
							this.deviceStatus = this.dataHandle(newStatusList)
							this.qustData = JSON.parse(JSON.stringify(this.dataHandle(taskStatusList)))
						}
					}
				}, 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
		},
	},
	mounted() {
		if (this.userName) {
			this.intInterval()
		} else {
			// 无userName时清空数据，关闭右侧
			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 },
			)
		}
	},
	beforeDestroy() {
		this.pauseApiRequest()
	},
}
</script>

<style scoped>
/* 全局重置（scoped下作用于当前组件） */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, sans-serif;
	scrollbar-width: none; /* Firefox隐藏滚动条 */
	-ms-overflow-style: none; /* IE/Edge隐藏滚动条 */
}

/* 整体容器 */
.device-management {
	background-color: #1c2c3b;
	color: #f0f0f5;
	font-size: 1vw;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* 父容器 */
.parent-container {
	width: 100%;
	height: 100%;
	display: flex;
	padding: 0.5vw;
	gap: 0.2vw;
}

/* 左侧容器 */
.left-div {
	flex: 0 1 20%;
	min-width: 10vw;
	max-width: 35vw;
	height: 100%;
	background-color: #25364a;
	border-radius: 0.2vw;
	box-shadow: 0 0 1.2vw rgba(0, 0, 0, 0.2);
	padding: 0.6vw;
	display: flex;
	flex-direction: column;
	gap: 0.7vw;
	overflow-y: auto;
}

.device-card {
	background-color: #3f5675;
	border-radius: 0.2vw;
	padding: 0.5vw;
	border-left: 0.3vw solid transparent;
	cursor: pointer;
	position: relative;
	width: 100%;
}

/* 激活卡片样式 */
.device-card.active {
	background-color: #4e4e78;
	border-left-color: #00c6ff;
	box-shadow: 0 0.3vw 0.5vw rgba(0, 198, 255, 0.15);
}

.device-card:hover {
	background-color: #4a4a70;
}

/* 设备标题 */
.device-title {
	font-size: 1vw;
	font-weight: 600;
	color: #ffffff;
	margin-bottom: 0.6vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5vw;
	position: relative;
}

/* 容器编码文字 */
.container-code-text {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 状态标签 */
.status-tag {
	height: 2.1vw;
	border-radius: 0.2vw;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0 0.6vw;
	min-width: 8vw;
	max-width: 13vw;
	font-size: 0.9vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 不同状态的背景色 */
.status-running {
	border: 0.1vw solid green;
}
.status-error {
	border: 0.1vw solid red;
}
.status-idle {
	border: 0.1vw solid orange;
}

/* 设备状态圆点 */
.device-status-running,
.device-status-error,
.device-status-idle {
	display: inline-block;
	width: 0.6vw;
	height: 0.6vw;
	border-radius: 50%;
	margin-right: 0.2vw;
	flex-shrink: 0;
}
.device-status-running {
	background-color: #00e068;
}
.device-status-error {
	background-color: red;
}
.device-status-idle {
	background-color: orange;
}
.status-offline {
	background-color: #999;
}

/* 设备信息区域 */
.device-info {
	font-size: 0.9vw;
	color: #e0e0ea;
	line-height: 1.4vw;
	padding-top: 0.1vw;
}

/* 右侧容器 */
.right-div {
	flex: 1;
	height: 100%;
	border-radius: 0.2vw;
	padding: 0vw;
	margin-left: 0.3vw;
	display: flex;
	flex-direction: column;
	gap: 0.6vw;
	overflow: hidden;
}

/* 右侧顶部步骤条容器 - 核心修改：左右滚动 */
.right-top-box {
	width: 100%;
	height: 20vw;
	padding: 0.6vw;
	background-color: #25364a;
}
.errorReport {
	display: flex;
}
.error {
	width: 15rem;
	height: 2.2vh;
	color: red;
	font-size: 1rem;
	white-space: pre-line;
	margin: 0.1rem 0.4rem 0rem 0;
}
.elStep {
	width: 100%;
	height: 9.4vw;
	border-radius: 0.2vw;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
/* 字段展示区：一行5列 */
.field-display-area {
	width: 100%;
	height: 9.4vw;
	margin: 0 auto;
	padding: 0rem;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	overflow-y: auto;
	background-color: #25364a;
	border-radius: 0.2vw;
}

/* 字段项 */
.field-item {
	display: flex;
	flex-direction: column;
	padding: 0.6vw;
	border-radius: 0.2vw;
	min-width: 0;
}
.field-label {
	font-size: 1vw;
	color: #fff;
	margin-bottom: 0.4vw;
	font-weight: 500;
}
.field-value {
	width: 100%;
	height: 1vw;
	font-size: 0.8vw;
	color: #a2a2a5;
	word-break: break-all;
}

/* 预留空间 */
.reserved-area {
	width: 100%;
	height: calc(100% - 20vw);
	border-radius: 0.2vw;
	padding: 0.6vw;
	display: flex;
	color: #e0e0ea;
	font-size: 1vw;
	background-color: #25364a;
	border-radius: 0.2vw;
	box-shadow: 0 0 0.9vw rgba(0, 0, 0, 0.2);
}
.step-title-clickable {
	cursor: pointer;
	transition: color 0.2s;
}

/* 步骤条样式 */
.custom-steps {
	position: relative;
	margin: 0.7vw 0.7vw 0.7vw 0.9vw;
}
.step-title-wrapper {
	position: relative;
}
.solt-Moees {
	position: relative;
	top: -0.2vw;
	width: 14vw;
	word-wrap: break-word;
	white-space: normal;
	word-break: break-all;
	line-height: 1vw;
	padding: 0;
	margin: 0;
	font-size: 0.85vw;
	color: red;
	letter-spacing: normal;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.solt-text {
	position: relative;
	top: -0.2vw;
	font-size: 0.85vw;
	color: red;
	word-wrap: break-word;
	white-space: normal;
	word-break: break-all;
	line-height: 1vw;
}
.step-time {
	position: absolute;
	transform: translateX(0%);
	font-size: 1rem;
	color: #ffffff;
	border-radius: 0.2vw;
	white-space: nowrap;
	z-index: 99;
}
/* Element步骤条穿透样式 */
::v-deep .el-steps {
	background-color: transparent !important;
	width: 100%;
}
::v-deep .el-step__main {
	white-space: normal;
	text-align: left;
	width: 15vw !important;
}
::v-deep .el-step__title {
	color: #ffffff !important;
	font-size: 1vw !important;
	line-height: 1.6vw !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
::v-deep .el-step__icon-inner {
	line-height: 0 !important;
}
::v-deep .el-step__description {
	color: #e0e0ea !important;
	font-size: 1vw !important;
}
::v-deep .el-step__head.is-process {
	color: #00c6ff !important;
	border-color: #00c6ff !important;
}
::v-deep .el-step__head.is-finish {
	color: #00e068 !important;
	border-color: #00e068 !important;
}
::v-deep .el-step__head.is-wait {
	color: #a0a0b0 !important;
	border-color: #a0a0b0 !important;
}
::v-deep .el-step__line {
	background-color: #505070 !important;
}
::v-deep .el-step__line-inner {
	border-width: 0.1vw !important;
	background-color: #00c6ff !important;
}
::v-deep .el-step__icon.is-text {
	border: 0.15vw solid !important;
}
::v-deep .el-step.is-horizontal .el-step__line {
	height: 0.15vw !important;
	top: 0.7vw !important;
	left: 0vw !important;
}
::v-deep .el-step__icon-inner.is-status {
	transform: translateY(0vw) !important;
}
::v-deep .el-step__icon {
	width: 1.3vw !important;
	height: 1.3vw !important;
	font-size: 0.7vw !important;
	padding: 0vw 0vw 0vw 0vw !important;
	transition: 0s ease-out !important;
}

/* 滚动条优化 */
.field-display-area::-webkit-scrollbar,
.right-top-box::-webkit-scrollbar,
.left-div::-webkit-scrollbar {
	width: 0.6rem;
	height: 0.6rem;
}
.field-display-area::-webkit-scrollbar-track,
.right-top-box::-webkit-scrollbar-track,
.left-div::-webkit-scrollbar-track {
	background: #4e4e78;
	border-radius: 0.2vw;
}
.field-display-area::-webkit-scrollbar-thumb,
.right-top-box::-webkit-scrollbar-thumb,
.left-div::-webkit-scrollbar-thumb {
	background: #5a98e6;
	border-radius: 0.2vw;
}

/* 美化right-top-box横向滚动条 */
.right-top-box::-webkit-scrollbar {
	height: 0.6rem;
	width: unset;
}
</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>