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>
				<el-select
					ref="areaSelect"
					v-model="selectedArea"
					clearable
					size="mini"
					class="area-selector"
					popper-class="area-select-popper"
					placement="bottom-start"
					:popper-append-to-body="true"
					:popper-options="areaSelectPopperOptions"
					@change="handleAreaChange"
					@visible-change="handleAreaSelectVisibleChange"
				>
					<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>

			<!-- 右侧内容展示区：只有 pageReady 为 true 才渲染！！ -->
			<div class="right-content" v-if="pageReady">
				<taskModule ref="taskModule" @send-data="getSonData" :userName="selectedArea" v-if="currentActive === 'home'" />
				<historyTask ref="historyTask" :userName="selectedArea" v-if="currentActive === 'device'" />
				<deviceStatus ref="deviceStatus" v-if="currentActive === 'task'" />
				<todaySummary ref="todaySummary" :userName="selectedArea" v-if="currentActive === 'about'" />
			</div>
		</div>
	</div>
</template>

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

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: '全部' }],
			timeTimer: null,
			sonData: '',
			show: '',
			areaSelectPopperOptions: {
				modifiers: {
					computeStyle: {
						gpuAcceleration: false,
					},
					flip: {
						enabled: false,
					},
					preventOverflow: {
						enabled: false,
					},
				},
			},

			// 核心：控制页面是否准备好（接口加载完才变true）
			pageReady: false,
		}
	},
	components: {
		taskModule,
		historyTask,
		deviceStatus,
		todaySummary,
	},
	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: ['L'],
					},
				},
			}
			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.pageReady = 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
		},
		getSonData(data) {
			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() {
			const activePage = this.currentActive
			this.currentActive = ''
			this.$nextTick(() => {
				this.currentActive = activePage
			})
		},
		handleAreaSelectVisibleChange(visible) {
			if (!visible) return
			this.$nextTick(() => {
				this.alignAreaSelectPopper()
				window.setTimeout(() => {
					this.alignAreaSelectPopper()
				}, 0)
			})
		},
		getAreaSelectPopperEl() {
			const poppers = Array.from(document.querySelectorAll('.area-select-popper'))
			return poppers.find((el) => {
				const style = window.getComputedStyle(el)
				return style.display !== 'none' && style.visibility !== 'hidden'
			})
		},
		vwToPx(vw) {
			return (window.innerWidth * vw) / 100
		},
		alignAreaSelectPopper() {
			const selectComp = this.$refs.areaSelect
			const triggerEl = selectComp && selectComp.$el
			const popperEl = this.getAreaSelectPopperEl()
			if (!triggerEl || !popperEl) return

			const triggerRect = triggerEl.getBoundingClientRect()
			const left = Math.round(triggerRect.left)
			const gapPx = this.vwToPx(0.16)
			const top = Math.round(triggerRect.bottom + gapPx)
			const width = Math.round(triggerRect.width)

			popperEl.style.position = 'fixed'
			popperEl.style.left = `${left}px`
			popperEl.style.top = `${top}px`
			popperEl.style.width = `${width}px`
			popperEl.style.minWidth = `${width}px`
			popperEl.style.transform = 'none'
			popperEl.style.marginTop = '0'
		},
		handleWindowResize() {
			this.alignAreaSelectPopper()
		},
		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() {
		// 先加载接口 → 接口成功后才会打开 pageReady → 渲染子组件
		this.getData()

		this.updateTime()
		this.bindWheelScroll()
		window.addEventListener('resize', this.handleWindowResize)
		this.timeTimer = setInterval(() => {
			this.updateTime()
		}, 1000)
	},
	beforeDestroy() {
		clearInterval(this.timeTimer)
		window.removeEventListener('resize', this.handleWindowResize)
	},
}
</script>

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

/* 顶部通栏样式 */
.top-header {
	width: 100%;
	height: 2.5vw;
	background: linear-gradient(to right, #1f2937, #374151);
	color: #e5e7eb;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 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;
}
.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;
}

/* 下拉框样式 */
.area-selector {
	width: 10vw;
}
::v-deep .el-input--mini {
	font-size: 0.8vw;
}
::v-deep .el-input--mini .el-input__inner {
	line-height: 1.8vw !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;
	height: 1.8vw;
	line-height: 1.8vw !important;
	font-size: 0.8vw;
}
::v-deep .el-input__inner {
	padding: 0 0.85vw !important;
	border-radius: 0.4vw !important;
}
::v-deep .el-input__icon {
	height: 100% !important;
	width: 1vw !important;
	font-size: 0.75vw !important;
	line-height: 1.8vw !important;
}
::v-deep .el-select-dropdown__list {
	padding: 0.3vw 0 !important;
}
::v-deep .el-input__suffix {
	right: 0.4vw !important;
}

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

/* 左侧导航栏样式 */
.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 1vw 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: #00c6ff;
	color: #ffffff;
	font-weight: 500;
}

.menu-item:hover:not(.active) {
	background-color: #4a6583;
}
.menu-icon {
	width: 0.95vw;
	height: 0.95vw;
	object-fit: contain;
}

/* 右侧内容展示区 */
.right-content {
	flex: 1;
	height: 100%;
	background-color: #1c2c3b;
	overflow: hidden;
	box-sizing: border-box;
}
</style>

<style>
.area-select-popper {
	background-color: #374151 !important;
	border: 0.05vw solid #4b5563 !important;
	border-radius: 0.4vw !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
	padding: 0 !important;
	z-index: 3000 !important;
}
.area-select-popper .el-select-dropdown__list {
	padding: 0.3vw 0 !important;
}
.area-select-popper .el-select-dropdown__wrap {
	max-height: none !important;
	height: auto !important;
	overflow: hidden !important;
	margin-bottom: 0 !important;
	margin-right: 0 !important;
}
.area-select-popper .el-scrollbar__wrap {
	overflow-x: hidden !important;
	overflow-y: hidden !important;
	margin-bottom: 0 !important;
	margin-right: 0 !important;
}
.area-select-popper .el-scrollbar__bar {
	display: none !important;
}
.area-select-popper .el-select-dropdown__item {
	height: 1.8vw;
	line-height: 1.8vw;
	padding: 0 0.6vw;
	font-size: 0.8vw;
	color: #e5e7eb !important;
	background-color: #374151 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.area-select-popper .el-select-dropdown__item.hover,
.area-select-popper .el-select-dropdown__item:hover {
	background-color: #4b5563 !important;
}
.area-select-popper .el-select-dropdown__item.selected {
	font-size: 0.8vw;
	color: #00c6ff !important;
	font-weight: 500;
	background-color: #374151 !important;
}
.area-select-popper[x-placement^='bottom'] .popper__arrow,
.area-select-popper[x-placement^='bottom'] .popper__arrow::after,
.area-select-popper[x-placement^='top'] .popper__arrow,
.area-select-popper[x-placement^='top'] .popper__arrow::after {
	display: none !important;
}
</style>