Board / HH-board-2026 · Files

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

			<!-- 中间：报警 -->
			<div class="header-center">
				<span class="brand-name">{{ sonData }}</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.code" :label="item.name" :value="item.code"></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" @send-data="getSonData" :userName="selectedArea" v-if="currentActive === 'home'" />
				<!-- <taskModule ref="taskModule" @send-data="getSonData" :userName="selectedArea" v-if="currentActive === 'home'" /> -->

				<!-- <historyTask ref="historyTask" @send-data="getSonData" :userName="selectedArea" v-if="currentActive === 'device' && selectedArea" /> -->

				<historyTask ref="historyTask" v-if="currentActive === 'device'" />

				<deviceStatus ref="deviceStatus" v-show="currentActive === 'task'" />

				<div class="content-item" v-show="currentActive === 'about'">
					<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>
		</div>
	</div>
</template>

<script>
import taskModule from '@/components/taskModel'
import historyTask from '@/components/historyTaskModule'
import deviceStatus from '@/components/deviceStatusModule'

export default {
	name: 'SinglePageLayout',
	data() {
		return {
			baseUrlOffOne: 'http://127.0.0.1:6002/api/BulletinBoard/Mes/V1/ReadData1',
			baseUrlOnLineOne: window.appConfig.baseUrlintTotalConversion,
			sysData: {},
			currentActive: 'home',
			currentTime: '',
			selectedArea: '',
			areaOptions: [
				{ code: '', name: '全部' },
				// { code: 'area2', name: '玻璃库库区' },
				// { code: 'area3', name: '铜箔库库区' },
				// { code: 'area4', name: '主库库区' },
			],
			timeTimer: null,
			sonData: '', // 存储子组件传递的数据
			show: '',
		}
	},
	components: {
		taskModule,
		historyTask,
		deviceStatus,
	},
	methods: {
		getData() {
			const opt = {
				urlSuffix: window.baseOnLineOrOff ? this.baseUrlOnLineOne : this.baseUrlOffOne,
				logTitle: '总转换接口',
				isUrlALL: true,
				headers: window.baseOnLineOrOff,
				header: window.baseOnLineOrOff,
				type: 'post',
				data: {
					requestMethod: 'post',
					requestUrl: '/api/cmc/getZones',
					requestService: 'WMS',
					requestBody: {
						zoneTypeList: [''],
					},
				},
			}
			const callBackFn = (res) => {
				if (!this.ajaxSuccessDataBefore(res, opt.logTitle)) return
				let temp = { code: '', name: '全部' }
				res.data.result.push(temp)
				this.selectedArea = res.data.result[0].code
				this.areaOptions = res.data.result
				this.show = true
			}
			''.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
		},
		// 3. 接收子组件数据的方法（参数就是子组件传的值）
		getSonData(data) {
			console.log(data, '23456')

			this.sonData = data
		},
		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) {
			console.log(val, 'erer')

			// this.selectedArea = val
			this.$refs.taskModule.getData()
		},
		bindWheelScroll() {
			const container = document.querySelector('.device-management')
			if (!container) return

			container.addEventListener(
				'wheel',
				(e) => {
					const target = e.target
					// 找到最近的可滚动父元素
					const scrollEl = target.closest('.field-display-area, .right-top-box, .left-div, .parent-container')
					if (!scrollEl) return

					// 横向能滚 → 就横向滚
					if (scrollEl.scrollWidth > scrollEl.clientWidth) {
						e.preventDefault()
						scrollEl.scrollLeft += e.deltaY * 1.5
					}
					// 否则正常纵向滚
				},
				{ passive: false },
			)
		},
	},
	mounted() {
		// 初始化时间并启动定时器
		this.getData()
		this.updateTime()
		this.bindWheelScroll()
		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: 100vw;
	height: 2.6vw;
	background: linear-gradient(to right, #1f2937, #374151);
	color: #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.6vw 0 0.6vw;
	box-sizing: border-box;
	border-bottom: 0vw solid #4b5563;
	box-shadow: 0 0.1vw 0.3vw rgba(0, 0, 0, 0.4);
	z-index: 10;
}

/* 左侧：系统图标+名称 */
.header-left {
	display: flex;
	align-items: center;
	gap: 0.6vw;
}
.sys-icon {
	width: 9.5vw;
	height: 1.3vw;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: bold;
}
.sys-name {
	font-size: 1.2vw;
	font-weight: 600;
	color: #ffffff;
	line-height: 1.2vw;
}

/* 中间：品牌标识 */
.header-center {
	width: 50vw;
	font-size: 1vw;
	font-weight: bold;
	color: red;
	letter-spacing: 0.2vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

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

/* 下拉框样式：适配深色背景 */
.area-selector {
	width: 10vw;
}
::v-deep .el-input--mini {
	font-size: 1vw;
}
::v-deep .el-input--mini .el-input__inner {
	line-height: 1.9vw !important;
	padding: 0 0.4vw !important;
}
.area-selector ::v-deep .el-input__inner {
	background-color: #374151 !important;
	border: 0.05vw solid #4b5563 !important;
	color: #e5e7eb !important;
	/* border-radius: 54vw; */
	height: 1.6vw;
	font-size: 0.7vw;
}
::v-deep .el-input__inner {
	padding: 0 16vw !important;
	border-radius: 0.4vw !important;
}
::v-deep .el-input__icon {
	height: 100% !important;
	width: 1vw !important;
	font-size: 0.8vw !important;
	text-align: center !important;
	transition: all 0.3s !important;
	line-height: 1.6vw !important;
}
::v-deep .el-select-dropdown__list {
	padding: 10vw 0 !important;
}
::v-deep .el-input__suffix {
	right: 0.4vw !important;
	transition: all 0.3s;
}
/* .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: 0.1vw 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;
}

.el-input__icon {
	height: 100% !important;
	width: 2.5vw !important;
	font-size: 1vw !important;
	text-align: center !important;
	transition: all 0.3s !important;
	line-height: 40vw !important;
} */

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

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

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

.menu-item {
	padding: 1vw 0.94vw 1vw 0.5vw;
	font-size: 0.8vw;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
	border-left: 0.3vw 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: 0.95vw;
	height: 0.95vw;
	position: relative;
	top: 0.05vw;
	left: -0.05vw;
	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: 320px;
	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>