zhgdlarge/src/views/sevenLargeScreen/indexL.vue

<template>
	<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false">
		<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" style=":nth-child(5):margin-left: 35%;" class="menStyle">
					<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
						<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
					</div>
				</div>
				<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
					<div class="subItem" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
						<span :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
					</div>
				</div>
			</div>
			<div class="contentDate">
				<span>自2022.02.28起开始计算，至今日2023.04.16为<span class="numColor">412</span>个日历天</span>
			</div>
			<div class="dataBoardContent">
				<router-view></router-view>
			</div>
		</div>
	</ScaleBox>
</template>

<script lang="ts" setup>
import ScaleBox from "vue3-scale-box";
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: "/comprehensiveManage/projectOverview",
		menuList: [
			{
				menuName: "工程概况",
				companyPath: "/comprehensiveManage/projectOverview"
			},
			{
				menuName: "智慧党建",
				companyPath: "/comprehensiveManage/smartPartyBuilding"
			}
		]
	},
	{
		moduleName: "数字工地",
		modulePath: "/digitalConstruction/aIEarlyWarning",
		menuList: [
			{
				menuName: "视频管理",
				companyPath: "/videoManagement"
			},
			{
				menuName: "AI预警",
				companyPath: "/digitalConstruction/aIEarlyWarning"
			},
			{
				menuName: "地磅管理",
				companyPath: "/digitalConstruction/loadometerManage"
			},
			{
				menuName: "车辆管理",
				companyPath: "/vehicleManagement"
			},
			{
				menuName: "配电箱监测",
				companyPath: "/distributionMonitoring"
			}
		]
	},
	{
		moduleName: "安全管理",
		modulePath: "/safetyManagement/securityManagement",
		menuList: [
			{
				menuName: "安全管理",
				companyPath: "/safetyManagement/securityManagement"
			}
		]
	},
	{
		moduleName: "质量管理",
		modulePath: "/qualityControl/qualityManagement",
		menuList: [
			{
				menuName: "质量管理",
				companyPath: "/qualityControl/qualityManagement"
			}
		]
	},

	{
		moduleName: "劳务管理",
		modulePath: "/laborManagement"
	},

	{ moduleName: "塔吊监测", modulePath: "/towerCraneMonitoring" },
	{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
	{ moduleName: "BIM模型", modulePath: "/bImModel" }
]);
const itemList = ref([]);
const activeTab = ref(0);
const activeTab2 = ref(0);
const router = useRouter();

//获取动态tab
const getAllModelMenu = () => {
	let half = store.projectDateAuth.moduleList;
	half.forEach((item: any) => {
		if (item.moduleType == 4) {
			menuList.value.push(item);
			return;
		}
	});
	console.log("筛选出的数据看板路由", menuList.value);
};
const navigateTo = (path, type) => {
	console.log("点击的路由---", path, type);
	if (type == 1) {
		activeTab.value = path.modulePath;
		itemList.value = path.menuList;
		router.push(path.modulePath);
	} else {
		activeTab2.value = path.companyPath;
		router.push(path.companyPath);
	}
};
onMounted(async () => {
	// await getAllModelMenu();
	activeTab.value = menuList.value[0].modulePath;
	itemList.value = menuList.value[0].menuList;
	//数据看板跳转免登录
	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 })
		});
		store.setSN(data.result.sn);
		store.setToken(data.result.token);
		store.setAccount(data.result.account);
		store.setAccountType(data.result.accountType);
		store.setProjectDateAuth(data.menuAuthority);
		// const data = await res.json();
		// console.log("调用免登录接口返回的数据", data);
		// let arr = data.result.menuAuthority.moduleList;
		// arr.forEach((item: any) => {
		// 	if (item.moduleType == 4) {
		// 		menuList.value.push(item);
		// 		return;
		// 	}
		// });
		// console.log("当前项目的看板数据：：", moduleListData.value);
	}

	// console.log("进入页面， ");
	adminName.value = store.account;
	// console.log("store数据", store.account);
	// menuClick(menuList.value[0], activeIndex.value);
	getNowTime();
	document.addEventListener("click", bodyCloseMenus);
	const subMenus = document.querySelectorAll('.menStyle');
  if (subMenus.length >= 5) {
  subMenus[4].style.marginLeft = '30%';
}
});

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: 100%;
		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: 42px;
			color: #fff;
			font-family: YouSheBiaoTiHei;
		}
		.rightIcon {
			position: absolute;
			display: flex;
			width: 30%;
			left: 70%;
			color: #fff;
			top: 1%;
			.time {
				font-size: calc(100vw * 13 / 1920);
				font-family: sadigitalNumber;
				margin: 1% 40% 0 10%;
			}
			.Icon {
				margin-right: 2%;
				cursor: pointer;
				width: 25px;
				margin-top: 1%;
			}
		}
	}
	.menuList {
		display: flex;
		height: 6%;
		color: #ccc;
		line-height: 55px;
		margin: -4% auto 0 2%;
		font-family: pmzd;
		div {
			position: relative;
			margin-top: 1%;
			height: 60%;
			width: 10%;
			cursor: pointer;
		}

		.subMenu {
			width: 100%;
			height: 100%;
			display: flex;
			font-size: calc(100vw * 20 / 1920);

			span {
				width: 90%;
				height: 10%;
				margin-left: 2%;
				line-height: 40px;
				text-align: center;
			}
		}

		.subMenuList {
			position: absolute;
			width: 98%;
			height: 4%;
			display: flex;
			margin-top: 5%;
			font-size: calc(100vw * 14 / 1920);
			font-family: none;
			background: url("@/assets/images/subTabImg.gif") no-repeat;
			background-size: 100% 100%;
			margin-left: -1%;
			.subItem {
				width: 5%;
				margin-top: -1.5%;
			}
			:nth-child(1) {
				margin-left: 3%;
			}
		}
	}
	.contentDate {
		color: #fff;
		float: right;
		margin-right: 2%;
		font-size: 14px;
		.numColor {
			color: #82fbea;
			font-family: sadigitalNumber;
			font-size: 24px;
			font-weight: bold;
		}
	}

	.dataBoardContent {
		height: 81%;
		// height: calc(100% - 15px - 50px - 60px - 20px);
		margin: 75px auto 16px auto;
		width: calc(100% - 40px);
		// background-color: #01131F;
		// opacity: 0.9;
	}
}
.active {
	display: inline-block;
	height: 100%;
	width: 90%;
	background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
	background-size: 100% 100%;
	color: #fff;
}
.active2 {
	color: #fff;
	font-family: none;
}
.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: 110px;
		height: 100px;
		right: 2%;
		top: 4%;
		background: #112d59;
		border-radius: 0px 0px 0px 0px;
		border: 0px solid #405e97;
		z-index: 9;
		.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;
				white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			}
		}

		.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>