zhgdlarge/src/views/sevenLargeScreen/indexL.vue

<template>
	<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false" @scaleChange="scaleChange">
	<!-- <div class="container"> -->
	<div class="largeScreen" ref="dataScreenRef" style="width: 100%;height: 100%;">
		<div class="header">
			<!-- <div class="hearderIcon"><img src="@/assets/images/jxjLogo.png" alt="" /></div> -->
			<span class="projectTitle">
				<!-- 新建宁波项目要打开 -->
				<p v-if="COMPANY === 'xjnb'">智慧工地项目监管平台</p>
				<p v-else>数字化项目监管平台</p>
				<!-- <p>江坑110kv变电站智慧工地</p> -->
			</span>

			<span class="projectSmallTitle">
				<p>{{ projectTimeInfo.name || "" }}</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="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">
				<el-scrollbar class="scrollItem">
					<div class="subMenuItem">
						<div class="subItem" :style="COMPANY === 'hfqc' ? 'width:120px' : ''" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
							<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
		<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
			<span
				>自{{ projectTimeInfo.contractPeriodStartTime }}起开始计算，至今日{{ nowDate }}为<span class="numColor">{{
					projectPassDay
				}}</span
				>个日历天</span
			>
		</div>
		<div class="dataBoardContent">
			<router-view></router-view>
		</div>
	</div>
<!-- </div> -->
	</ScaleBox>
</template>

<script lang="ts" setup>
import ScaleBox from "vue3-scale-box";
import { ref, reactive, onMounted, onBeforeUnmount, computed } from "vue";
import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
import { jumpLargeUserInfoApi } from "@/api/modules/login";
import { JSYCMenu, XJNBMenu, AHSAMenu, HFQCMenu } from "@/config/staticMenu";
import { COMPANY } from "@/config/config";

import { useRouter } from "vue-router";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
let nowTime = ref("2023-04-16 09:22:12" as any);

let nowDate = ref("2023.11.16" as any);

let projectPassDay = ref(0 as any);
//获取项目信息
const projectTimeInfo = ref({} as any);
const contentWidth = ref(0);
const contentHeight = ref(0);
const calculateAspectRatio = () => {
	const container = document.querySelector('.largeScreen');
	// const containerWidth = document.body.offsetWidth;
	const containerWidth = document.documentElement.offsetWidth;
    // const containerWidth: number = (<HTMLElement>container).offsetWidth;
    // const containerHeight = document.body.offsetHeight;
    const containerHeight = document.documentElement.offsetHeight;
    // const containerHeight: number = (<HTMLElement>container).offsetHeight;
	console.log(containerWidth, containerHeight)
    const aspectRatio = 16 / 9; // 16:9 比例
    const containerAspectRatio = containerWidth / containerHeight;
    if (containerAspectRatio > aspectRatio) {
        // 以高度为基准，按比例计算宽度
        contentHeight.value = containerHeight;
        contentWidth.value = Math.floor(containerHeight * aspectRatio);
    } else {
        // 以宽度为基准，按比例计算高度
        contentWidth.value = containerWidth;
        contentHeight.value = Math.floor(containerWidth / aspectRatio);
    }
    console.log('contentWidth',contentWidth.value)
    console.log('contentHeight',contentHeight.value)
};
const scaleChange = (data:any) => {
	store.globalScale = data;
}
const getProjectInfo = async () => {
	getNowDate();
	const res: any = await getTaskTimeDetail({ projectSn: store.sn });
	console.log("获取项目信息", res);
	projectTimeInfo.value = res.result;
	projectPassDay.value = calculateDaysPassed(projectTimeInfo.value.contractPeriodStartTime);
};

function calculateDaysPassed(startDate: any) {
	const start = new Date(startDate);
	const today = new Date();
	const timeDiff = today.getTime() - start.getTime();
	const daysPassed = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
	return daysPassed;
}

function getNowDate() {
	const date = new Date();
	const year = date.getFullYear();
	const month = ("0" + (date.getMonth() + 1)).slice(-2);
	const day = ("0" + date.getDate()).slice(-2);
	const formattedDate = `${year}-${month}-${day}`;
	nowDate.value = formattedDate;
	// console.log(formattedDate); // 输出 "2021-06-01"
}

let showUserBox = ref(false as any);
let adminName = ref("" as any);
// let menuList = ref([
// 	{
// 		moduleName: "工程概况",
// 		modulePath: "/projectOverview"
// 	},
// 	{
// 		moduleName: "智慧党建",
// 		modulePath: "/smartPartyBuilding"
// 	},
// 	{
// 		moduleName: "扬尘噪声",
// 		modulePath: "/headNoise"
// 	},
// 	{
// 		moduleName: "劳务管理",
// 		modulePath: "/laborManagement"
// 	},
// 	{
// 		moduleName: "视频管理",
// 		modulePath: "/videoManagement"
// 	},
// 	{
// 		moduleName: "配电箱监测",
// 		modulePath: "/distributionMonitoring"
// 	},
// 	{
// 		moduleName: "AI预警",
// 		modulePath: "/aIEarlyWarning"
// 	}
// ]);
let menuList = ref([
	{
		moduleName: "综合管理",
		modulePath: "/projectOverview",
		menuList: [
			{
				menuName: "工程概况",
				companyPath: "/projectOverview"
			},
			{
				menuName: "智慧党建",
				companyPath: "/smartPartyBuilding"
			}
		]
	},
	{
		moduleName: "数字工地",
		modulePath: "/videoManagement",
		menuList: [
			{
				menuName: "视频管理",
				companyPath: "/videoManagement"
			},
			{
				menuName: "AI预警",
				companyPath: "/aIEarlyWarning"
			},
			{
				menuName: "地磅管理",
				companyPath: "/loadometerManage"
			},
			{
				menuName: "车辆管理",
				companyPath: "/vehicleManagement"
			},
			{
				menuName: "配电箱监测",
				companyPath: "/distributionMonitoring"
			},
			{
				menuName: "标养室监测",
				companyPath: "/standardCureRoom"
			},
			{
				menuName: "车辆定位",
				companyPath: "/carPosition"
			},
			{
				menuName: "机械设备定位",
				companyPath: "/equipmentPosition"
			},
			{
				menuName: "智能安全帽",
				companyPath: "/smartSafeHat"
			}
		]
	},
	{
		moduleName: "劳务管理",
		modulePath: "/laborManagement",
		menuList: [
			{
				menuName: "劳务管理",
				companyPath: "/laborManagement"
			}
		]
	},
	{
		moduleName: "安全管理",
		modulePath: "/securityManagement",
		menuList: [
			{
				menuName: "安全管理",
				companyPath: "/securityManagement"
			},
			{
				companyPath: "/foundationPitMonitor",
				menuName: "基坑监测"
			},
			{
				menuName: "隧道定位监测",
				companyPath: "/tunnelPosition"
			},
			{
				menuName: "临边防护",
				companyPath: "/edgeProtection"
			},
			{
				menuName: "有毒气体监测",
				companyPath: "/toxicGasMonitor"
			},
			{
				menuName: "高支模监测",
				companyPath: "/highFormwork"
			},
			{
				menuName: "高边坡监测",
				companyPath: "/highSlope"
			},
			{
				menuName: "烟感监测",
				companyPath: "/smokeSensor"
			},
			{
				menuName: "安全教育",
				companyPath: "/safeEducation"
			}
		]
	},
	{
		moduleName: "质量管理",
		modulePath: "/qualityManagement",
		menuList: [
			{
				menuName: "质量管理",
				companyPath: "/qualityManagement"
			},
			{
				menuName: "混凝土测温",
				companyPath: "/concreteMonitor"
			},
			{
				menuName: "进度计划",
				companyPath: "/schedulePlan"
			}
		]
	},
	{
		moduleName: "绿色施工",
		modulePath: "/headNoise",
		menuList: [
			{
				menuName: "扬尘噪声",
				companyPath: "/headNoise"
			},
			{
				companyPath: "/electricityMonitor",
				menuName: "用电监测"
			},
			{
				companyPath: "/waterMonitor",
				menuName: "用水监测"
			},
			{
				companyPath: "/sewageMonitor",
				menuName: "污水监测"
			}
		]
	},
	{
		moduleName: "大型机械",
		modulePath: "/towerCraneMonitoring",
		menuList: [
			{
				menuName: "塔吊监测",
				companyPath: "/towerCraneMonitoring"
			},
			{
				menuName: "升降机监测",
				companyPath: "/elevatorMonitoring"
			},
			{
				menuName: "卸料平台",
				companyPath: "/unloadPlatform"
			},
			{
				menuName: "混凝土拌合站",
				companyPath: "/concreteMixingPlant"
			},
			{
				menuName: "龙门吊监测",
				companyPath: "/gantryCrane"
			},
			{
				companyPath: "/erectCrane",
				menuName: "架桥机"
			},
			{
				companyPath: "/hangBasket",
				menuName: "挂篮监测"
			},
			{
				companyPath: "/pressureTestMachine",
				menuName: "压力试验机"
			},
			{
				companyPath: "/universalTestMachine",
				menuName: "万能试验机"
			},
			{
				companyPath: "/compressionIntegrate",
				menuName: "抗压一体机"
			},
			{
				companyPath: "/asphaltMixer",
				menuName: "沥青拌合站"
			},
			{
				companyPath: "/waterStabilizedMixer",
				menuName: "水稳拌合站"
			},
			{
				companyPath: "/intelligentTension",
				menuName: "智能张拉"
			},
			{
				companyPath: "/intelligentGrout",
				menuName: "智能压浆"
			},
			{
				companyPath: "/roadPaving",
				menuName: "路面摊铺"
			},
			{
				companyPath: "/roadCompaction",
				menuName: "路面压实"
			}
		]
	},
	{ moduleName: "BIM模型", modulePath: "/bImModel" }
]);
const itemList = ref([]);
const activeTab = ref(0);
const activeTab2 = ref(0);
const router = useRouter();
const getAspectRatioStyle = computed(() => ({
        width: `${contentWidth.value}px`,
        height: `${contentHeight.value}px`
      }))
//获取动态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 dataBoardContent = document.querySelector(".dataBoardContent");
const navigateTo = (path, type) => {
	console.log("点击的路由---", path, type);
	if (type == 1) {
		activeTab.value = path.modulePath;
		activeTab2.value = path.modulePath;
		itemList.value = path.menuList;
		router.push(path.modulePath);
	} else {
		activeTab2.value = path.companyPath;
		router.push(path.companyPath);
	}
};
onMounted(async () => {
	if (window.location.href.indexOf("token") != -1) {
		console.log("免登录跳转进来了吗----", window.location.href.indexOf("token"));
		const newToken = window.location.href.split("token=")[1];
		const data: any = await jumpLargeUserInfoApi({ token: newToken });
		console.log("跳转请求的数据----", data.result);
		store.setSN(data.result.sn);
		store.setToken(data.result.token);
		store.setAccount(data.result.account);
		store.setAccountType(data.result.accountType);
		store.setProjectDateAuth(data.menuAuthority);
	}
	if (COMPANY === "jsyc") {
		menuList.value = JSYCMenu;
	}
	if (COMPANY === "xjnb") {
		menuList.value = XJNBMenu;
	}
	if (COMPANY === "ahsa") {
		menuList.value = AHSAMenu;
	}
	if (COMPANY === "hfqc") {
		menuList.value = HFQCMenu;
	}

	console.log("配置菜单", menuList.value);
	console.log("当前跳转的路由", router.currentRoute.value);
	// await getAllModelMenu();
	// activeTab2.value = router.currentRoute.value;
	activeTab.value = menuList.value[0].modulePath;
	activeTab2.value = menuList.value[0].modulePath;
	itemList.value = menuList.value[0].menuList;
	//数据看板跳转免登录
	navigateTo(menuList.value[0], 1);

	// 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 && COMPANY !== 'hfqc') {
		subMenus[4].style.marginLeft = "30%";
	}
	if (COMPANY === 'hfqc'){
		subMenus[3].style.marginLeft = "44%";
	}
	await getProjectInfo();


	calculateAspectRatio();
    window.addEventListener('resize', calculateAspectRatio);
});

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

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() {
	// 标准版——跳转演示平台项目后台
	if (COMPANY == "") {
		window.location.replace("http://jxj.zhgdyun.com:100/#/login?token=" + store.token);
	} else {
		// 新项目通用(百色服务器)
		window.location.replace("http://101.43.164.214:11111/#/login?token=" + store.token);
		// window.location.replace("http://192.168.34.138:8080/#/login?token=" + store.token);
	}
}
</script>

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

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.largeScreen {
	background: url("@/assets/images/bigImg.gif") no-repeat;
	background-size: 100% 100%;
	position: relative;
	.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: 44px;
		// 	color: #fff;
		// 	font-family: YouSheBiaoTiHei;
		// }
		.projectTitle {
			display: flex;
			justify-content: center;
			font-size: 38px;
			color: #fff;
			font-family: YouSheBiaoTiHei;
		}
		.projectSmallTitle {
			position: absolute;
			top: 6%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			color: #fff;
			font-family: YouSheBiaoTiHei;
		}
		.rightIcon {
			position: absolute;
			display: flex;
			width: 30%;
			left: 70%;
			color: #fff;
			top: 1%;
			display: flex;
			align-items: center;
			.time {
				font-size: 13px;
				font-family: sadigitalNumber;
				margin: 0.5% 33% 0 6%;
			}
			.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: 9%;
			cursor: pointer;
		}

		.subMenu {
			width: 100%;
			height: 100%;
			display: flex;
			font-size: 20px;

			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: 14px;
			font-family: none;
			background: url("@/assets/images/subTabImg.gif") no-repeat;
			background-size: 100% 100%;
			.scrollItem {
				width: 73%;
				height: max-content;
				margin-top: -2%;
				margin-left: 2%;
				.subMenuItem {
					width: 100%;
					display: flex;
					.subItem {
						width: 100px;
						text-align: center;
					}
					.subItem:not(:last-child) {
						margin-right: 0.3%;
					}
				}
			}
			// :nth-child(1) {
			// 	margin-left: 2%;
			// }
		}
	}
	.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;
	font-size: 16px;
}
.userDialog {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 70px;
	height: 25px;
	text-align: center;
	background-color: #112d59;
	color: #5d75a0;
	font-size: 12px;
	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: 12px;
				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: 12px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				color: #a9bce6;
			}
		}
	}
}
.loginOut:hover {
	background-color: #2758c0;
}
.hearderIcon {
	left: 1%;
	top: 1%;
	height: 3%;
	width: 8%;
	position: absolute;
	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
</style>