Board / HH-board-2026 · Files

<template>
	<div class="wms-ccs-container">
		<!-- <div class="header">
			<div class="wms-title">机加库区</div>
			<div class="status-lights">
				<div class="status-value big-value">{{ timeStr }}</div>
				<div class="status-item status-switch">
					<button class="search-btn green-btn">库区切换</button>
				</div>
			</div>
		</div> -->

		<div class="task-section">
			<div class="table-wrapper">
				<table class="task-table">
					<thead>
						<tr>
							<th>设备ID</th>
							<!-- <th>设备状态</th> -->
							<th>设备状态</th>
							<th>设备运行模式</th>
							<th>设备当前位置</th>
							<th>异常信息</th>
							<th>异常处理方案</th>
							<th>异常开始时间</th>
							<th>上报时间戳</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in taskList" :key="index" :class="{ 'green-text': item.equipmentStatusDescription === '运行中', 'red-text': item.equipmentStatusDescription === '异常' }">
							<td>{{ item.equipmentId }}</td>
							<!-- <td>{{ item.equipmentStatus }}</td> -->
							<td>{{ item.equipmentStatusDescription }}</td>
							<td>{{ item.equipmentOperationModeDescription }}</td>
							<td>{{ item.equipmentCurrentPosition }}</td>
							<td>
								<div class="multiline-content" :title="item.exceptionMessage">
									{{ formatLongText(item.exceptionMessage) }}
								</div>
								<!-- <el-tooltip effect="dark" :content="item.exceptionMessage || '无'" placement="top" :disabled="!item.exceptionMessage || item.exceptionMessage.length <= 20">
									<div class="multiline-content" :title="item.exceptionMessage">
										{{ formatLongText(item.exceptionMessage) }}
									</div>
								</el-tooltip> -->
							</td>
							<td>
								<div class="multiline-content" :title="item.exceptionHandlePlan">
									{{ formatLongText(item.exceptionHandlePlan) }}
								</div>
								<!-- <el-tooltip effect="dark" :content="item.exceptionHandlePlan || '无'" placement="top" :disabled="!item.exceptionHandlePlan || item.exceptionHandlePlan.length <= 20">
									<div class="multiline-content" :title="item.exceptionHandlePlan">
										{{ formatLongText(item.exceptionHandlePlan) }}
									</div>
								</el-tooltip> -->
							</td>
							<td>{{ item.exceptionStartTime }}</td>
							<td>{{ item.timestampFormat }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<el-dialog title="任务阶段查看" :visible.sync="drawer" width="75%" :before-close="handleClose">
			<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>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			baseUrlOff: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData2',
			baseUrlOnLine: window.appConfig.baseUrlintOne,
			sysData: {},
			timer: null,
			deviceStatus: [],
			taskList: [],
			drawer: false,
			direction: 'rtl',
			device: {},
			temp: 0,

			// 新增：定时器控制字段
			refreshTimer: null, // 全局刷新定时器ID
		}
	},
	methods: {
		getData() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLine : this.baseUrlOff,
				logTitle: '设备状态查询',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
			}
			const callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				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
		},

		progress(item) {
			const taskStatusList = Object.entries(item.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
			this.drawer = true
		},

		handleClose(done) {
			done()
		},

		// 新增：格式化长文本，只显示2行
		formatLongText(text) {
			if (!text) return '无'

			// 如果文本长度超过20个字符，截断并添加"..."
			if (text.length > 20) {
				return text.substring(0, 20) + '...'
			}

			return text
		},

		// 修改：定时器启动方法
		intInterval: function() {
			// 清理现有定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
			}

			// 启动新的定时器
			this.refreshTimer = setInterval(() => {
				this.getData()
			}, 10000)

			// console.log('设备状态定时器已启动')
		},

		// 新增：暂停接口请求
		pauseApiRequest() {
			// 停止全局刷新定时器
			if (this.refreshTimer) {
				clearInterval(this.refreshTimer)
				this.refreshTimer = null
			}
			// console.log('设备状态接口请求已暂停')
		},

		// 新增：恢复接口请求
		resumeApiRequest() {
			// 重启全局刷新
			if (!this.refreshTimer) {
				this.intInterval()
			}
			// console.log('设备状态接口请求已恢复')
		},
	},
	mounted() {
		this.getData()
		this.intInterval()
	},

	// 新增：组件销毁时停止定时器
	beforeDestroy() {
		this.pauseApiRequest()
	},

	// 新增：激活组件时恢复请求
	activated() {
		this.resumeApiRequest()
	},

	// 新增：停用组件时暂停请求
	deactivated() {
		this.pauseApiRequest()
	},
}
</script>

<style scoped>
/* 全局基础样式 */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.wms-ccs-container {
	background-color: #1c2c3b;
	color: #e2e8f0;
	font-family: '微软雅黑', sans-serif;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 1vw;
	box-sizing: border-box;
	background-image: #1c2c3b;
}
.wms-ccs-container * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 任务表格区域样式 */
.task-section {
	background-color: #1c2c3b;
	/* border: 0.1vw solid #00509d; */
	border-radius: 0.2vw;
	/* padding: 0.7vw; */
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.table-wrapper {
	flex: 1;
	overflow-y: auto;
	overflow-x: auto;
}
.task-table {
	width: 100%;
	border-collapse: collapse;
	/* min-width: 1600px; */
	background-color: #1c2c3b;
	table-layout: fixed;
}
.task-table th {
	/* padding: 10px 5px; */
	text-align: center;
	font-size: 1vw;
	border: 0.1vw solid #00509d;
	background-color: #034c77;
	color: #fff;
	font-weight: bold;
	position: sticky;
	top: 0;
	z-index: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 2.5vw;
	line-height: 2.5vw;
}
.task-table td {
	padding: 0px 0px;
	text-align: center;
	font-size: 1vw;
	border: 0.1vw solid #004080;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
	height: 3.5vw;
	line-height: 1.6;
	/* max-height: 2.1vw; */
	overflow: hidden;
	text-overflow: ellipsis;
	display: table-cell;
	vertical-align: middle;
}
/* 表格行hover效果 */
.task-table tr:hover {
	background-color: rgba(0, 80, 157, 0.3);
}

/* 新增：多行内容显示样式 */
.multiline-content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 限制显示2行 */
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
	max-height: 2.8em; /* 2行的高度 */
	word-wrap: break-word;
	word-break: break-all;
	width: 100%;
	text-align: center;

	/* 确保垂直居中 */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 任务时长文字颜色样式 */
.red-text {
	color: #ff2d55 !important;
}
.green-text {
	color: #00ff9d !important;
}
.yellow-text {
	color: #ffc107 !important;
}

/* 滚动条样式 */
.table-wrapper::-webkit-scrollbar {
	width: 0.4vw;
	height: 0.4vw;
}
.table-wrapper::-webkit-scrollbar-thumb {
	background-color: #0077b6;
	border-radius: 0.2vw;
}
.table-wrapper::-webkit-scrollbar-track {
	background-color: #001e3c;
}

/* 自定义tooltip样式 */
:deep(.el-tooltip__popper) {
	max-width: 30vw;
	word-wrap: break-word;
	white-space: pre-line;
	line-height: 1.5;
	font-size: 0.9vw;
	background-color: #034c77;
	border-color: #034c77;
}

:deep(.el-tooltip__popper[x-placement^='top'] .popper__arrow) {
	border-top-color: #034c77;
}

:deep(.el-tooltip__popper[x-placement^='top'] .popper__arrow:after) {
	border-top-color: #034c77;
}
</style>