personnel_management_mobile/pages/screen/index.vue

<template>
	<view class="screen-wrap" :style="scaleWrap">
		<!-- 顶部标题栏 -->
		<view class="top-header">
			<text class="title-left">环江毛南族自治县政务服务中心</text>
			<view class="title-right">
				<text>{{dateStr}}</text>
				<text>{{weekStr}} {{timeStr}}</text>
			</view>
		</view>
		<!-- 中间大字播报区 -->
		<view class="big-call">
			<text class="normal-text">请</text>
			<text class="yellow-text">{{currCallNo}}</text>
			<text class="normal-text">到</text>
			<text class="yellow-text">{{currWinNo}}号窗口</text>
		</view>
		<!-- 左右双栏表格区域 -->
		<view class="table-box">
			<!-- 左：当前呼叫 -->
			<view class="table-left">
				<view class="table-head">
					<text>当前呼叫</text>
					<text class="tip-text">(过号需重新取号)</text>
				</view>
				<view class="table-row" v-for="(item,idx) in callList" :key="idx" :class="idx%2===1?'row-blue':''">
					<text>请</text>
					<text class="row-no">{{item.no}}</text>
					<text>到</text>
					<text class="row-no">{{item.win}}号窗口</text>
				</view>
			</view>
			<!-- 右：等候办理 -->
			<view class="table-right">
				<view class="table-head">等候办理</view>
				<view class="table-row wait-row" v-for="(row,idx) in waitList" :key="idx"
					:class="idx%2===1?'row-blue':''">
					<text v-for="(item,i) in row" :key="i">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CallScreen",
		data() {
			return {
				designW: 1920,
				designH: 1080,
				scaleWrap: {
					width: "1920px",
					height: "1080px",
					transformOrigin: "left top",
					transform: "scale(1)"
				},
				// 实时日期时间
				dateStr: "",
				weekStr: "",
				timeStr: "",
				timer: null, // 定时器
				//顶部大字播报
				currCallNo: "A010",
				currWinNo: "2",
				//左侧当前呼叫数据
				callList: [{
						no: "A0009",
						win: "1"
					},
					{
						no: "A0009",
						win: "1"
					},
					{
						no: "A0009",
						win: "1"
					},
					{
						no: "A0009",
						win: "1"
					},
					{
						no: "A0009",
						win: "1"
					},
					{
						no: "A0009",
						win: "1"
					},
					{
						no: "A0009",
						win: "1"
					},
					{
						no: "A0009",
						win: "1"
					},
				],
				//右侧等候队列 三列一组
				waitList: [
					["A0001", "A0002", "A0003"],
					["A0004", "A0005", "A0006"],
					["A0001", "A0001", "A0001"],
					["A0001", "A0001", "A0001"],
					["A0001", "A0001", "A0001"],
					["A0001", "A0001", "A0001"],
					["A0001", "A0001", "A0001"],
					["A0001", "A0001", "A0001"],
				]
			}
		},
		onLoad() {
			this.setScale()
			this.getNowTime() // 首次赋值时间
			// 每秒刷新时间
			this.timer = setInterval(() => {
				this.getNowTime()
			}, 1000)
			window.addEventListener("resize", this.setScale)
		},
		onUnload() {
			window.removeEventListener("resize", this.setScale)
			// 销毁定时器防止内存泄漏
			clearInterval(this.timer)
		},
		methods: {
			//大屏自适应缩放
			setScale() {
				const w = document.documentElement.clientWidth
				const h = document.documentElement.clientHeight
				const sX = w / this.designW
				const sY = h / this.designH
				const scale = Math.min(sX, sY)
				this.scaleWrap.transform = `scale(${scale})`
			},
			// 获取系统实时时间
			getNowTime() {
				const now = new Date()
				const year = now.getFullYear()
				const month = this.addZero(now.getMonth() + 1)
				const day = this.addZero(now.getDate())
				const hour = this.addZero(now.getHours())
				const minute = this.addZero(now.getMinutes())
				// const second = this.addZero(now.getSeconds())
				// 星期映射
				const weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
				const week = weekArr[now.getDay()]

				this.dateStr = `${year}年${month}月${day}日`
				this.weekStr = week
				this.timeStr = `${hour}:${minute}`
			},
			// 数字补0
			addZero(num) {
				return num < 10 ? '0' + num : num
			}
		}
	}
</script>

<style scoped>
	/*基准1920*1080大屏 */
	.screen-wrap {
		width: 1920px;
		height: 1080px;
		background: #083378;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/*顶部蓝色栏 */
	.top-header {
		width: 100%;
		height: 140px;
		background: #167bff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 50px;
		box-sizing: border-box;
	}

	.title-left {
		font-size: 62px;
		color: #fff;
		font-weight: bold;
	}

	.title-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.title-right text {
		font-size: 40px;
		color: #fff;
		line-height: 50px;
	}

	/*中间大字叫号 */
	.big-call {
		height: 260px;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 30px;
	}

	.normal-text {
		font-size: 120px;
		color: #ffffff;
		font-weight: bold;
	}

	.yellow-text {
		font-size: 120px;
		color: #ffef33;
		font-weight: bold;
	}

	/*左右表格容器 */
	.table-box {
		flex: 1;
		display: flex;
		gap: 30px;
		padding: 0 30px 30px;
		box-sizing: border-box;
	}

	.table-left,
	.table-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		border-radius: 16px;
		overflow: hidden;
	}

	.table-head {
		width: 100%;
		height: 110px;
		background: #167bff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 52px;
		color: #fff;
		font-weight: bold;
	}

	.tip-text {
		font-size: 36px;
		margin-left: 20px;
		opacity: 0.9;
	}

	/*表格行样式 */
	.table-row {
		width: 100%;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 54px;
		background: #ffffff;
	}

	.wait-row {
		justify-content: space-around;
	}

	.row-blue {
		background: #e6f0ff;
	}

	.row-no {
		color: #0055ff;
		font-weight: bold;
		margin: 0 20px;
	}
</style>