zhgdlarge/src/views/sevenLargeScreen/indexL.vue

<template>
	<div class="largeScreen" ref="dataScreenRef">
		<div class="header">
			<span class="projectTitle">
				<p>数字化项目监管平台</p>
			</span>
			<div class="rightIcon" @click.stop>
				<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" @click="showUserBox = !showUserBox">
					<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
				</div>

				<!-- <el-dropdown trigger="click">
					
					<template #dropdown>
						<div class="userDialog" @click="loginOut">退出登录</div>
					</template>
				</el-dropdown> -->
			</div>
			<div class="userBox" v-show="showUserBox">
				<div class="userItem">
					<div class="sanJiao"></div>
					<div class="userIcon">
						<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
						<div class="userName">{{ adminName }}</div>
					</div>
					<div class="loginOut" @click="jumpBgd">
						<div class="loginOutIcon"><img src="@/assets/images/dustNoise/jumpIcon.png" /></div>
						<div class="userName">项目后台</div>
					</div>
					<div class="loginOut" @click="loginOut">
						<div class="loginOutIcon"><img src="@/assets/images/dustNoise/loginOut.png" /></div>
						<div class="userName">退出登录</div>
					</div>
				</div>
			</div>
		</div>
		<div class="menuList">
			<div
				v-for="(item, index) in menuList"
				:key="index"
				:class="{
					right: index > (menuList.length - 1) / 2,
					active: 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";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let nowTime = ref("2023-04-16 09:22:12" as any);
let showUserBox = ref(false as any);
let adminName = ref("" as any);
let menuList = ref([
	{ 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" }
]);
const activeIndex=ref(0)
const router = useRouter();

const menuClick = (item, index) => {
	activeIndex.value = index;
	console.log("点击了tab", item);
	if (item.modulePath.includes("/")) {
		router.push(item.modulePath);
	}
};
const moduleListData = ref([] as any);//动态路由
onMounted(async () => {
	//数据看板跳转免登录
	if (window.location.href.indexOf("token") != -1) {
		const token = window.location.href.split("token=")[1];
		const res = await fetch(import.meta.env.VITE_API_URL + "/xmgl/base/getLoginInfoByToken", {
			method: "POST",
			headers: {
				"Content-Type": "application/json"
			},
			body: JSON.stringify({ token: token })
		});
		const data = await res.json();
		console.log("调用免登录接口返回的数据", data);
		// let arr = data.result.menuAuthority.moduleList;
		// arr.forEach((item: any) => {
		// 	if (item.moduleType == 4) {
		// 		moduleListData.value.push(item);
		// 		return;
		// 	}
		// });
		// console.log("当前项目的看板数据：：", moduleListData.value);
		store.setSN(data.result.sn);
		store.setToken(data.result.token);
		store.setAccount(data.result.account);
		store.setAccountType(data.result.accountType);
	}
	// console.log("进入页面， ");
	adminName.value = store.account;
	// console.log("store数据", store.account);
	menuClick(menuList.value[0], activeIndex.value);
	getNowTime();
	document.addEventListener("click", bodyCloseMenus);
});

let timer = ref(null as any);
onBeforeUnmount(() => {
	clearInterval(timer);
	document.removeEventListener("click", bodyCloseMenus);
});

function bodyCloseMenus() {
	if (showUserBox.value === true) {
		showUserBox.value = false;
	}
}

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;
}

function loginOut() {
	localStorage.removeItem("GlobalState");
	location.reload();
	router.push("/login");
}
//跳转后台
function jumpBgd() {
	window.location.replace("http://192.168.34.226:8081/#/projectIndex");
}
</script>

<style>
.el-popper__arrow {
	background-color: #112d59;
}
</style>

<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: 40%;
			}
			.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%;
}
.userDialog {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 25px;
	text-align: center;
	background-color: #112d59;
	color: #5d75a0;
	font-size: calc(100vw * 12 / 1920);
	cursor: pointer;
}

.userBox {
	.userItem {
		position: absolute;
		width: 100px;
		height: 100px;
		right: 3%;
		top: 4%;
		background: #112d59;
		border-radius: 0px 0px 0px 0px;
		border: 0px solid #405e97;
		.sanJiao {
			position: absolute;
			width: 0;
			height: 0;
			right: 0%;
			top: -10%;
			border-left: 6px solid transparent; /* 左边框透明 */
			border-right: 6px solid transparent; /* 右边框透明 */
			border-bottom: 6px solid #405e97; /* 底部边框颜色 */
			transform: rotate(0deg); /* 旋转45度 */
		}
		.userIcon {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			height: 38px;
			border-bottom: 1px solid #405e97;
			cursor: pointer;
			.icon {
				width: 18px;
				height: 18px;
				img {
					width: 100&;
					height: 100%;
				}
			}
			.userName {
				width: 40px;
				font-size: calc(100vw * 12 / 1920);
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #a9bce6;
			}
		}

		.loginOut {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			height: 26px;
			padding-left: 5px;
			cursor: pointer;
			height: 30px;
			.loginOutIcon {
				width: 12px;
				height: 12px;
				img {
					width: 100&;
					height: 100%;
				}
			}
			.userName {
				width: 50px;
				font-size: calc(100vw * 12 / 1920);
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #a9bce6;
			}
		}
	}
}
.loginOut:hover {
	background-color: #2758c0;
}
</style>