Board / HH-board-2026 · Files

<template>
	<!-- 整个页面容器 -->
	<div class="single-page-container">
		<!-- 顶部通栏：左-系统名 + 中-品牌 + 右-时间+下拉框 -->
		<div class="top-header">
			<!-- 左侧：系统标识区 -->
			<div class="header-left">
				<span class="sys-name">软控一体系统</span>
				<img src="../assets/img/logo.png" alt="系统图标" class="sys-icon" />
			</div>

			<!-- 中间：品牌展示区 -->
			<div class="header-center">
				<span class="brand-name">F8204_货叉1：当前取货任务，该站台为放货类型</span>
			</div>

			<!-- 右侧：时间 + 下拉选择器（保留时间，替换管理员/退出） -->
			<div class="header-right">
				<span class="info-item" id="current-time">{{ currentTime }}</span>
				<span class="info-separator">|</span>
				<el-select v-model="selectedArea" clearable size="mini" class="area-selector" @change="handleAreaChange">
					<el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</div>
		</div>

		<!-- 左右分栏布局 -->
		<div class="layout-wrap">
			<!-- 左侧导航栏 -->
			<div class="left-nav">
				<ul class="nav-menu">
					<li class="menu-item" :class="{ active: currentActive === 'home' }" @click="switchContent('home')">
						<img src="../assets/img/当前任务.png" alt="任务" class="menu-icon" />
						当前任务
					</li>
					<li class="menu-item" :class="{ active: currentActive === 'device' }" @click="switchContent('device')">
						<img src="../assets/img/历史任务.png" alt="任务" class="menu-icon" />
						历史任务
					</li>
					<li class="menu-item" :class="{ active: currentActive === 'task' }" @click="switchContent('task')">
						<img src="../assets/img/设备状态.png" alt="任务" class="menu-icon" />
						设备状态
					</li>
					<li class="menu-item" :class="{ active: currentActive === 'about' }" @click="switchContent('about')">
						<img src="../assets/img/年.png" alt="任务" class="menu-icon" />
						今日摘要
					</li>
				</ul>
			</div>

			<!-- 右侧内容展示区 -->
			<div class="right-content">
				<taskModule ref="taskModule" v-show="currentActive === 'home'" />

				<div class="content-item" v-show="currentActive === 'device'">
					<h2>设备管理页面</h2>
					<table class="device-table">
						<thead>
							<tr>
								<th>设备ID</th>
								<th>设备名称</th>
								<th>设备状态</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>DEV001</td>
								<td>堆垛机-01</td>
								<td class="status success">运行中</td>
							</tr>
							<tr>
								<td>DEV002</td>
								<td>AGV-01</td>
								<td class="status success">运行中</td>
							</tr>
							<tr>
								<td>DEV003</td>
								<td>传送带-02</td>
								<td class="status error">故障</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="content-item" v-show="currentActive === 'task'">
					<h2>任务统计页面</h2>
					<div class="task-stats">
						<div class="stat-item">
							<span class="stat-label">今日任务总量</span>
							<span class="stat-value">120</span>
						</div>
						<div class="stat-item">
							<span class="stat-label">已完成</span>
							<span class="stat-value success">86</span>
						</div>
						<div class="stat-item">
							<span class="stat-label">进行中</span>
							<span class="stat-value warning">24</span>
						</div>
						<div class="stat-item">
							<span class="stat-label">异常任务</span>
							<span class="stat-value error">10</span>
						</div>
					</div>
				</div>

				<div class="content-item" v-show="currentActive === 'about'">
					<h2>关于我们</h2>
					<p>这是一个 Vue 2 单页面左右布局演示，无需搭建完整系统，直接运行即可。</p>
					<p>布局实现：Flex 布局 + Vue 2 条件渲染（v-show）。</p>
					<p>导航切换：点击左侧菜单更新当前激活状态，右侧展示对应内容。</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import taskModule from '@/components/taskModelTwo'

export default {
	name: 'SinglePageLayout',
	data() {
		return {
			currentActive: 'home',
			currentTime: '',
			selectedArea: 'area2',
			areaOptions: [
				{ value: 'area1', label: '机甲库库区' },
				{ value: 'area2', label: '玻璃库库区' },
				{ value: 'area3', label: '铜箔库库区' },
				{ value: 'area4', label: '主库库区' },
			],
			timeTimer: null,
		}
	},
	components: {
		taskModule,
	},
	methods: {
		switchContent(navKey) {
			this.currentActive = navKey
		},
		// 更新实时时间
		updateTime() {
			const now = new Date()
			const year = now.getFullYear()
			const month = String(now.getMonth() + 1).padStart(2, '0')
			const day = String(now.getDate()).padStart(2, '0')
			const hh = String(now.getHours()).padStart(2, '0')
			const mm = String(now.getMinutes()).padStart(2, '0')
			const ss = String(now.getSeconds()).padStart(2, '0')
			this.currentTime = `${year}/${month}/${day} ${hh}:${mm}:${ss}`
		},
		// 下拉框切换事件
		handleAreaChange(val) {
			// 可添加切换区域后的业务逻辑（如加载对应区域数据）
		},
	},
	mounted() {
		// 初始化时间并启动定时器
		this.updateTime()
		this.timeTimer = setInterval(() => {
			this.updateTime()
		}, 1000)
	},
	beforeDestroy() {
		// 清理定时器
		clearInterval(this.timeTimer)
	},
}
</script>

<style scoped>
/* 全局页面样式 */
.single-page-container {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: '微软雅黑', sans-serif;
	display: flex;
	flex-direction: column;
}

/* 顶部通栏样式 */
.top-header {
	width: 100%;
	height: 48px;
	background: linear-gradient(to right, #1f2937, #374151);
	color: #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	box-sizing: border-box;
	border-bottom: 1px solid #4b5563;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	z-index: 10;
}

/* 左侧：系统图标+名称 */
.header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sys-icon {
	width: 50%;
	height: 28px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
}
.sys-name {
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
}

/* 中间：品牌标识 */
.header-center {
	font-size: 20px;
	font-weight: bold;
	color: red;
	letter-spacing: 2px;
}

/* 右侧：时间+下拉框容器 */
.header-right {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	color: #d1d5db;
}
.info-item {
	display: inline-block;
}
.info-separator {
	color: #4b5563;
	margin: 0 4px;
}

/* 下拉框样式：适配深色背景 */
.area-selector {
	width: 220px;
}
.area-selector ::v-deep .el-input__inner {
	background-color: #374151 !important;
	border: 1px solid #4b5563 !important;
	color: #e5e7eb !important;
	border-radius: 4px;
}
.area-selector ::v-deep .el-input__suffix {
	color: #9ca3af !important;
}
.area-selector ::v-deep .el-select .el-input__inner:focus,
.area-selector ::v-deep .el-select .el-input__inner:hover {
	border-color: #3b82f6 !important;
}
.area-selector ::v-deep .el-popper {
	background-color: #374151 !important;
	border: 1px solid #4b5563 !important;
}
.area-selector ::v-deep .el-select-dropdown__item {
	color: #e5e7eb !important;
	background-color: #374151 !important;
}
.area-selector ::v-deep .el-select-dropdown__item:hover {
	background-color: #4b5563 !important;
}
.area-selector ::v-deep .el-select-dropdown__item.selected {
	background-color: #3b82f6 !important;
	color: #ffffff !important;
}

/* 左右分栏布局 */
.layout-wrap {
	display: flex;
	width: 100%;
	height: calc(100% - 48px);
}

/* 左侧导航栏样式 */
.left-nav {
	width: 130px;
	height: 100%;
	background-color: #2c3e50;
	color: #ffffff;
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.nav-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-item {
	padding: 16px 20px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease;
	border-left: 3px solid transparent;
}

.menu-item.active {
	background-color: #34495e;
	border-left-color: #3498db;
	color: #ffffff;
	font-weight: 500;
}

.menu-item:hover:not(.active) {
	background-color: #4a6583;
}
.menu-icon {
	width: 26px;
	height: 26px;
	position: relative;
	top: 5px;
	left: 0;
	object-fit: contain; /* 保持图标比例 */
}
/* 右侧内容展示区样式 */
.right-content {
	flex: 1;
	height: 100%;
	background-color: #f8f9fa;
	overflow-y: auto;
	box-sizing: border-box;
}

.content-item {
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing: border-box;
}

.content-item h2 {
	color: #2c3e50;
	margin-bottom: 20px;
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 10px;
}

/* 设备管理表格样式 */
.device-table {
	width: 100%;
	border-collapse: collapse;
	background-color: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.device-table th,
.device-table td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #eaeaea;
}

.device-table th {
	background-color: #34495e;
	color: #ffffff;
}

.device-table tr:hover {
	background-color: #f5f5f5;
}

/* 状态标签样式 */
.status.success {
	color: #2ecc71;
	font-weight: 500;
}

.status.error {
	color: #e74c3c;
	font-weight: 500;
}

/* 任务统计样式 */
.task-stats {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.stat-item {
	background-color: #ffffff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	width: 200px;
	text-align: center;
}

.stat-label {
	display: block;
	font-size: 14px;
	color: #666666;
	margin-bottom: 10px;
}

.stat-value {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #2c3e50;
}

.stat-value.success {
	color: #2ecc71;
}

.stat-value.warning {
	color: #f39c12;
}

.stat-value.error {
	color: #e74c3c;
}
</style>