Board / HH-board-2026 · Files

<template>
	<div class="stacker-status-container">
		<!-- 顶部标题栏 -->
		<div class="status-header">
			<!-- <span class="div-span-title">设备健康度概览</span> -->
			<span class="div-span-title">设备度概览</span>
			<div class="status-legend">
				<div class="legend-item">
					<span class="legend-color color-run"></span>
					<span>运行</span>
				</div>
				<div class="legend-item">
					<span class="legend-color color-idle"></span>
					<span>待机</span>
				</div>
				<div class="legend-item">
					<span class="legend-color color-error"></span>
					<span>故障</span>
				</div>
				<div class="legend-item">
					<span class="legend-color color-offline"></span>
					<span>离线</span>
				</div>
			</div>
		</div>

		<!-- 主体内容区 -->
		<div class="status-content">
			<!-- 左侧：堆垛机图片 -->
			<div class="stacker-img-box">
				<div class="stacker-img-text">当日妥善率:{{ initDataList.phRateDay }}%</div>
				<img src="../assets/img/ddj.png" alt="堆垛机" style="width:6.5vw;" />
			</div>

			<!-- 箭头 -->
			<div class="status-arrow">
				<div class="status-arrow-text">待执行任务:{{ initDataList.freeTaskCount }}个</div>
			</div>

			<!-- 右侧：状态信息 -->
			<div class="status-info-box">
				<!-- 状态图标（运行状态示例） -->
				<div class="stacker-img-text">近七天妥善率:{{ initDataList.phRateWeek }}%</div>
				<div class="lamp">
					<img v-if="initDataList.srmStatus == 1" src="../assets/img/greenNEW.png" style="width:6vw;margin-top: -1.4vw;" />
					<img v-if="initDataList.srmStatus == 2" src="../assets/img/orangeNew.png" style="width:6vw;margin-top: -1.4vw;" />
					<img v-if="initDataList.srmStatus == 3" src="../assets/img/rednew.gif" style="width:6vw;margin-top: -1.4vw;" />
					<img v-if="initDataList.srmStatus == 4" src="../assets/img/whiteNEW.png" style="width:6vw;margin-top: -1.4vw;" />
				</div>
				<div class="information" v-if="initDataList.taskInfo != null">
					<div>托盘编码：{{ initDataList.taskInfo.barCode }}</div>
					<div>类型：{{ initDataList.taskInfo.taskType }}</div>
					<div>起点：{{ initDataList.taskInfo.from }}</div>
					<div>终点：{{ initDataList.taskInfo.to }}</div>
					<div>创建时间：{{ initDataList.taskInfo.created }}</div>
				</div>
				<div class="information" velse>
					<div>托盘编码：</div>
					<div>类型：</div>
					<div>起点：</div>
					<div>终点：</div>
					<div>创建时间：</div>
				</div>
			</div>
		</div>
		<div class="alarm-info">报警信息：{{ initDataList.equipmentAlarms[0].msg }}</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			initDataList: { equipmentAlarms: [{ msg: '' }] },
		}
	},
	methods: {
		// 生产情况
		getData(data) {
			this.initDataList = data
		},
	},
	mounted() {
		//eslint-disable-next-line no-debugger
		debugger
	},
}
</script>

<style scoped>
/* 最外层容器：深色背景，和截图一致 */
.stacker-status-container {
	width: 32vw;
	height: 22vw;
	border: 1px solid #1e3a7a;
	border-radius: 0.3vw;
	/* padding: 1.5vw; */
	position: relative;
	overflow: hidden;
}

/* 顶部标题栏 */
.status-header {
	width: 100%;
	height: 3vw;
	display: flex;
	border-bottom: 1px solid #2b2f36;
	padding: 0.2vw 0 0 0.5vw;
}

/* 状态图例 */
.status-legend {
	display: flex;
	gap: 1vw;
	font-size: 1.8vw;
	color: #ffffff;
	margin: -1.6vw 0 0 2vw;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 0.5vw;
	font-size: 1.1vw;
}

.legend-color {
	width: 1vw;
	height: 1vw;
	border-radius: 0.2vw;
	margin-left: 1vw;
}
.color-run {
	background-color: #00e068;
}
.color-idle {
	background-color: #ffb800;
}
.color-error {
	background-color: #ff3333;
}
.color-offline {
	background-color: #fff;
}

/* 主体内容区：左右分栏 */
.status-content {
	width: 100%;
	height: calc(100% - 6vw);
	display: flex;
	align-items: center;
}

/* 左侧：堆垛机图片容器 */
.stacker-img-box {
	width: 30%;
	height: 100%;
	position: relative;
}
.stacker-img-text {
	height: 3vw;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1vw;
}

.stacker-img {
	max-width: 90%;
	max-height: 90%;
	width: auto;
	height: auto;
}

.status-arrow {
	width: 5vw;
	height: 1vw;
	background-color: #0066cc;
	position: relative;
}
.status-arrow::after {
	content: '';
	position: absolute;
	right: -1vw;
	top: 50.5%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 0.8vw solid transparent;
	border-bottom: 0.8vw solid transparent;
	border-left: 1.2vw solid #0066cc;
}
.status-arrow-text {
	width: 9vw;
	height: 1vw;
	position: absolute;
	right: -1vw;
	top: -2vw;
	font-size: 1vw;
	color: #0066cc;
}

/* 右侧：状态信息区 */
.status-info-box {
	width: 48%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5vw;
	margin-left: 2vw;
}

/* 状态图标（运行/待机/故障） */
.status-icon {
	width: 8vw;
	height: 8vw;
	margin-bottom: 1vw;
}
.icon-run {
	fill: #00e068;
}
.icon-idle {
	fill: #ffb800;
}
.icon-error {
	fill: #ff3333;
}
.icon-offline {
	/* fill: #888888; */
	fill: #fff;
}
.lamp {
	width: 100%;
	height: 4vw;
}
.information {
	width: 100%;
	height: 60%;
	font-size: 1.2vw;
	line-height: 1.6vw;
	margin-top: 0.5vw;
}
/* 状态信息文本 */
.info-item {
	font-size: 1.2vw;
	color: #ffffff;
	/* line-height: 2.2vw; */
}

/* 底部报警信息 */
.alarm-info {
	position: absolute;
	bottom: 0vw;
	left: 1vw;
	font-size: 1.2vw;
	font-weight: bold;
	color: #ff0000;
}
</style>