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="device-status"></span>{{ item.containerCode }}</div>
					<div class="device-text-status">运行中</div>
					<div class="device-info">
						任务阶段: {{ item.taskStatusDescription }}<br />
						所用时间: {{ item.taskDurationSecondsFormat }}<br />
						任务类型: {{ item.taskTypeDescription }}<br />
						任务ID: {{ item.taskId }}
					</div>
				</div>
			</div>

			<!-- 右侧区域：步骤条 + 字段展示 + 预留空间 -->
			<div class="right-div">
				<!-- 顶部带边框div：Element步骤条 -->
				<div class="right-top-box">
					<el-steps finish-status="success" :active="temp + 1">
						<el-step v-for="(item, index) in deviceStatus" :key="index" :title="item.key" :description="item.value">
							<template v-slot:description>
								<!-- <el-button size="small">查看详情</el-button> -->
							</template>
						</el-step>
					</el-steps>
				</div>

				<!-- 字段展示区（20个字段） -->
				<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 class="reserved-area">
					预留空间（30%高度）：可放置操作按钮、日志、图表等内容
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 引入Element UI步骤条组件（按需引入，也可全局注册）
import { Steps, Step, Message } from 'element-ui'

export default {
	name: 'DeviceManagement',
	components: {
		ElSteps: Steps,
		ElStep: Step,
	},
	data() {
		return {
			baseUrlOffOne: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLineOne: window.appConfig.baseUrlintTwo,
			sysData: {},
			// 初始值设为null，无卡片激活 → 无蓝色竖条
			activeDevice: null,
			// 步骤条当前激活步骤
			activeStep: 1,
			taskList: [],
			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: '执行设备ID', value: '' },
				{ label: '设备状态', value: '' },
				{ label: '设备运行模式', value: '' },
				{ label: '设备当前位置', value: '' },
			],
			deviceStatus: [],
			temp: 0,
			currentTaskId: null, // 新增：记录当前选中任务的唯一标识
			taskRefreshTimer: null, // 新增：定时刷新的定时器ID
		}
	},
	methods: {
		getData() {
			const opt = {
				// 修复笔误：baseUrlOffTwo → baseUrlOffOne
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineOne : this.baseUrlOffOne,
				logTitle: '任务列表',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
			}
			const callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				res.data.result.forEach((x) => {
					x.taskDurationSeconds = Number((x.taskDurationSeconds / 60).toFixed(2))
				})
				this.taskList = res.data.result
			}
			''.ajax(this, opt, callBackFn)
		},
		ajaxSuccessDataBefore(res, title) {
			if (!res || !res.data || res.data.result == null || res.data.result.length === 0) {
				this.sysData = []
				''.Log(`${title}无数据`, 'getData')
				return false
			}
			return true
		},
		getTask(index, data) {
			// 原有核心逻辑保留
			this.activeDevice = index
			this.progress(data)
			const taskStatusList = Object.entries(data.taskStatusTimestamps || {}).map(([key, value]) => ({
				key: key,
				value: value,
			}))
			if (!taskStatusList.length) {
				this.temp = -1
				return
			}
			let lastValidIndex = -1
			taskStatusList.forEach((item, index) => {
				if (item.value !== null) {
					lastValidIndex = index
				}
			})
			this.temp = lastValidIndex
			this.deviceStatus = taskStatusList

			// 新增：记录当前选中任务的taskId
			this.currentTaskId = data.taskId

			// 新增：清除旧定时器，启动新的定时刷新（5秒一次）
			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,
						}))
						if (newStatusList.length) {
							let newLastIndex = -1
							newStatusList.forEach((item, idx) => {
								if (item.value !== null) newLastIndex = idx
							})
							this.temp = newLastIndex
							this.deviceStatus = newStatusList
						}
					}
				}, 200)
			}, 5000) // 5秒刷新一次，可调整为1000=1秒/10000=10秒
		},
		progress(item) {
			this.fieldList[0].value = item.taskId
			this.fieldList[1].value = item.taskStatusDescription
			this.fieldList[2].value = item.taskDurationSecondsFormat
			this.fieldList[3].value = item.taskTypeDescription
			this.fieldList[4].value = item.taskPriority
			this.fieldList[5].value = item.roadway
			this.fieldList[6].value = item.orderCode
			this.fieldList[7].value = item.fromLocation
			this.fieldList[8].value = item.toLocation
			this.fieldList[9].value = item.containerCode
			this.fieldList[10].value = item.taskExecutionOrder
			this.fieldList[11].value = item.containerCurrentLocation
			this.fieldList[12].value = item.executionEquipmentId
			this.fieldList[13].value = item.equipmentStatusDescription
			this.fieldList[14].value = item.equipmentOperationMode
			this.fieldList[15].value = item.equipmentCurrentPosition
		},
		intInterval: function() {
			setInterval(() => {
				this.getData()
			}, 2000)
		},
		// 确认工况变更方法
		confirmWorkChange() {
			// 可添加业务逻辑，如接口请求、提示等
			Message({
				type: 'success',
				message: '工况变更已确认！',
			})
		},
	},
	// 新增：组件销毁时清除定时器，避免内存泄漏
	beforeDestroy() {
		if (this.taskRefreshTimer) {
			clearInterval(this.taskRefreshTimer)
			this.taskRefreshTimer = null
		}
	},
	mounted() {
		this.getData()
		this.intInterval()
	},
}
</script>

<style scoped>
/* 全局重置（scoped下作用于当前组件） */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: '微软雅黑', 'Microsoft YaHei', Arial, sans-serif;
}

/* 整体背景调浅：从#1e1e2f改为#2c2c44（更浅的深蓝色） */
.device-management {
	background-color: #1c2c3b;
	color: #f0f0f5; /* 文字也调亮，保证对比度 */
	font-size: 14px;
	width: 100%;
	height: 100%;
}

/* 父容器：左右分栏 */
.parent-container {
	width: 100%;
	height: 100%;
	display: flex;
	padding: 10px;
	gap: 10px;
}

.left-div {
	width: 20%;
	height: 100%;
	background-color: #25364a;
	border-radius: 8px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.device-card {
	background-color: #3f5675;
	border-radius: 6px;
	padding: 10px;
	border-left: 4px solid transparent; /* 初始透明 → 无竖条 */
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

/* 激活卡片背景调浅：从#424268改为#4e4e78 */
.device-card.active {
	background-color: #4e4e78;
	border-left-color: #00c6ff; /* 点击后高亮蓝色竖条（保持原蓝色，对比度足够） */
	box-shadow: 0 2px 8px rgba(0, 198, 255, 0.15); /* 阴影调浅 */
}

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

.device-title {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff; /* 标题保持白色，突出显示 */
	margin-bottom: 6px;
	display: flex;
	align-items: center;
}
.device-text-status {
	width: 60px;
	height: 30px;
	border-radius: 7px;
	background-color: #00e068;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 250px;
	top: 10px;
}
.device-info {
	font-size: 12px;
	color: #e0e0ea; /* 设备信息文字调亮 */
	line-height: 1.4;
}

.device-status {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #00e068; /* 状态圆点保持绿色，对比度足够 */
	margin-right: 6px;
}

.confirm-btn {
	width: 100%;
	background-color: #0099dd; /* 按钮背景调浅，更柔和 */
	color: white;
	border: none;
	border-radius: 4px;
	padding: 6px 0;
	margin-top: 8px;
	cursor: pointer;
	font-size: 12px;
}

.confirm-btn:hover {
	background-color: #00a8ee; /* hover色也调浅 */
}

/* 右侧区域背景调浅：从#2d2d44改为#383858 */
.right-div {
	width: 80%;
	height: 100%;
	/* background-color: #383858; */
	border-radius: 8px;
	/* box-shadow: 0 0 12px rgba(0, 0, 0, 0.2); */
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	overflow: hidden;
}

/* 顶部带边框div背景调浅：从#383852改为#444468 */
.right-top-box {
	width: 98%;
	height: 30%;
	border: 1px solid #b2d1fa;
	border-radius: 6px;
	/* background-color: #444468; */
	padding: 20px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #ffffff;
	overflow-y: auto;
}

/* 适配Element步骤条浅色主题（使用穿透scoped） */
::v-deep .el-steps {
	background-color: transparent !important;
}
::v-deep .el-step__title {
	color: #ffffff !important;
}
::v-deep .el-step__description {
	color: #e0e0ea !important; /* 步骤描述调亮 */
	font-size: 12px !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 {
	background-color: #00c6ff !important;
}

/* 字段展示区背景调浅：从#383852改为#444468 */
.field-display-area {
	width: 98%;
	height: 40%;
	margin: 0 auto;
	/* background-color: #444468;    */
	border-radius: 6px;
	padding: 15px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(5, 1fr);
	gap: 10px;
	overflow-y: auto;
}

/* 字段项背景调浅：从#2d2d44改为#4e4e78 */
.field-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8px;
	/* background-color: #4e4e78; */
	border-radius: 4px;
}

.field-label {
	font-size: 13px;
	color: #ff5767; /* 标签红色调浅，更柔和 */
	margin-bottom: 4px;
	font-weight: 500;
}

.field-value {
	font-size: 14px;
	color: #ffffff;
	word-break: break-all;
}

/* 预留空间背景调浅：从#383852改为#444468 */
.reserved-area {
	width: 98%;
	height: 30%;
	margin: 0 auto;
	background-color: #2e4057;
	border-radius: 6px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #e0e0ea; /* 文字调亮 */
	font-size: 15px;
	border: 1px dashed #5a98e6; /* 虚线边框调浅 */
}

/* 滚动条优化（适配浅色背景） */
.field-display-area::-webkit-scrollbar,
.right-top-box::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.field-display-area::-webkit-scrollbar-track,
.right-top-box::-webkit-scrollbar-track {
	background: #4e4e78; /* 滚动条轨道调浅 */
	border-radius: 3px;
}
.field-display-area::-webkit-scrollbar-thumb,
.right-top-box::-webkit-scrollbar-thumb {
	background: #5a98e6; /* 滚动条滑块调浅 */
	border-radius: 3px;
}
</style>