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">2023-04-16 09:22:12</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>
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

export default {
	setup() {
		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);
		});
		return {
			menuData,
			menuClick
		};
	}
};
</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>