zhgdlarge/src/views/sevenLargeScreen/indexL.vue

<template>
	<div class="largeScreen" ref="dataScreenRef">
		<div class="header">
			<span class="projectTitle">
				<p>数字化项目监管平台</p>
			</span>
			<div class="rightIcon">
				<div class="time">{{ nowTime }}</div>
				<div class="Icon">
					<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
				</div>
				<div class="Icon">
					<img src="@/assets/images/dustNoise/ysbfIcon.png" alt="" />
				</div>
				<div class="Icon">
					<img src="@/assets/images/dustNoise/sjzxIcon.png" alt="" />
				</div>
				<div class="Icon">
					<img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
				</div>
				<div class="Icon">
					<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
				</div>
				<div class="Icon">
					<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
				</div>
			</div>
		</div>
		<div class="menuList">
			<div
				v-for="(item, index) in menuData.menuList"
				:key="index"
				:class="{
					right: index > (menuData.menuList.length - 1) / 2,
					active: menuData.activeIndex == index ? 'active' : ''
				}"
				@click="menuClick(item, index)"
			>
				{{ item.moduleName }}
			</div>
		</div>
		<div class="dataBoardContent">
			<router-view></router-view>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
let nowTime = ref("2023-04-16 09:22:12" as any);

let menuData = reactive({
	menuList: [
		{ moduleName: "扬尘噪声", modulePath: "/headNoise" },
		{ moduleName: "劳务管理", modulePath: "/laborManagement" },
		{ moduleName: "视频管理", modulePath: "/videoManagement" },
		{ moduleName: "配电箱监测", modulePath: "/distributionMonitoring" },
		{ moduleName: "车辆管理", modulePath: "/vehicleManagement" },
		{ moduleName: "塔吊监测", modulePath: "/towerCraneMonitoring" },
		{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
		{ moduleName: "BIM模型", modulePath: "/bImModel" }
	],
	activeIndex: 0
});
const router = useRouter();

const menuClick = (item, index) => {
	menuData.activeIndex = index;
	console.log("点击了tab", item);
	if (item.modulePath.includes("/")) {
		router.push(item.modulePath);
	}
};
onMounted(() => {
	console.log("进入页面， ");
	menuClick(menuData.menuList[0], menuData.activeIndex);
	getNowTime();
});

let timer = ref(null as any);
onBeforeUnmount(() => {
	clearInterval(timer);
});

function getNowTime() {
	let speed = 1000;
	let theNowTime = function () {
		nowTime.value = timeNumber();
	};
	timer.value = setInterval(theNowTime, speed);
}
function timeNumber() {
	let today = new Date();
	let date = today.getFullYear() + "-" + twoDigits(today.getMonth() + 1) + "-" + twoDigits(today.getDate());
	let time = twoDigits(today.getHours()) + ":" + twoDigits(today.getMinutes()) + ":" + twoDigits(today.getSeconds());
	return date + "  " + time;
}
function twoDigits(val: any) {
	if (val < 10) return "0" + val;
	return val;
}
</script>

<style lang="scss" scoped>
.largeScreen {
	width: 100%;
	height: 100%;
	background: url("@/assets/images/bigImg.gif") no-repeat;
	background-size: 100% 100%;

	.header {
		width: 100vw;
		height: 12%;
		background: url("@/assets/images/headerImg.webp") no-repeat;
		background-size: 100% 100%;
		.projectTitle {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: calc(100vw * 42 / 1920);
			color: #fff;
			font-family: YouSheBiaoTiHei;
			line-height: 4vh;
		}
		.rightIcon {
			position: absolute;
			display: flex;
			width: 30%;
			left: 70%;
			color: #fff;
			top: 1%;
			.time {
				font-size: calc(100vw * 12 / 1920);
				font-family: sadigitalNumber;
				margin-left: 10%;
				margin-right: 18%;
			}
			.Icon {
				margin-right: 2%;
				cursor: pointer;
			}
		}
	}
	.menuList {
		display: flex;
		height: 6%;
		color: #ccc;
		line-height: 55px;
		margin: -4% auto 0 2%;
		font-family: pmzd;
		div {
			margin-top: 1%;
			height: 60%;
			width: 10%;
			cursor: pointer;
			text-align: center;
			line-height: 36px;
			font-size: calc(100vw * 20 / 1920);
		}
		:nth-child(5) {
			margin-left: 35%;
		}
	}
	.dataBoardContent {
		height: 83%;
		// height: calc(100% - 15px - 50px - 60px - 20px);
		margin: 15px auto 16px auto;
		width: calc(100% - 40px);
		// background-color: #01131F;
		// opacity: 0.9;
	}
}
.active {
	height: 100%;
	width: 20%;
	// background: pink;
	background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
	background-size: 100% 100%;
}
</style>