zhgdlarge/src/views/commandScreen/indexCommand.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 v-if="COMPANY === 'agjtCommand'">指挥部大屏</p>
				</span>
				<div class="leftIcon">
					<div class="info">数字化项目监管平台</div>
				</div>
				<div class="rightIcon" @click.stop>
					<div class="time">{{ nowTime }}</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>
				</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="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";
import { jumpLargeUserInfoApi } from "@/api/modules/login";
import { COMPANY } from "@/config/config";
const BASEURL = import.meta.env.VITE_API_URL;
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: "/commandScreen"
	},
]);
// 鞍山指挥部大屏
let agjtCommandList = ref([
	{
		moduleName: "指挥部大屏",
		modulePath: "/commandScreen"
	},
]);

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 () => {
	if (COMPANY === "agjtCommand") {
		// menuList.value = AGJTCommandMenu;
		menuList.value = agjtCommandList.value;
	}
	//这里是跳转过来后免登录的操作，接收token 登录 懂了
	//数据看板跳转免登录
	if (window.location.href.indexOf("token") != -1) {
		console.log("跳转进来了吗----", window.location.href.indexOf("token"));

		const newToken = window.location.href.split("token=")[1];
		const data = 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);
		// 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);
	}
	// await getAllModelMenu();
	navigateTo(menuList.value[0], 1);
	activeTab.value = menuList.value[0].modulePath;
	itemList.value = menuList.value[0].menuList;

	// 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%";
	}
});

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:8080/#/projectIndex");
	if (COMPANY === "syhy") {
		window.location.replace("http://101.43.164.214:45020/#/projectIndex"); //沈阳和盈
	}
	if (COMPANY === "jxwjj") {
		window.location.replace("http://183.249.224.118:9000/#/projectIndex"); //嘉兴王江泾公用码头
	}
	if (COMPANY === "phmw") {
		window.location.replace("http://101.43.164.214:11111/#/projectIndex"); // 鄱湖美湾医疗、医美产业集群项目
	}
	if (COMPANY === "hfqc") {
		window.location.replace("http://101.43.164.214:11111/#/projectIndex"); // 鄱湖美湾医疗、医美产业集群项目
	}
	if (COMPANY === "as") {
		window.location.replace("http://182.90.224.237:15551/#/projectIndex"); // 鞍山项目
	}
	if(COMPANY === "agjtCommand"){
		window.location.replace("http://47.93.215.234:9809" + "/#/login?token=" + store.token);
	}
}
</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: 10%;
		background: url("@/assets/images/headerImg.webp") no-repeat;
		background-size: 100% 100%;
		.projectTitle {
			display: flex;
			justify-content: center;
			align-items: 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;
		}
		.leftIcon {
			position: absolute;
			display: flex;
			width: 30%;
			left: 15%;
			color: #fff;
			top: 1%;
			.info {
				font-size: 14px;
				font-family: sadigitalNumber;
				margin: 0.1% 40% 0 10%;
				letter-spacing: 2px;
			}
		}
		.rightIcon {
			position: absolute;
			display: flex;
			width: 30%;
			left: 70%;
			color: #fff;
			top: 1%;
			.time {
				font-size: 13px;
				font-family: sadigitalNumber;
				margin: 0.5% 40% 0 10%;
			}
			.Icon {
				margin-right: 2%;
				cursor: pointer;
				width: 25px;
				// margin-top: 0.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%; //二级
			// width: 10%;//一级
			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%;
			margin-left: -1%;
			.subItem {
				width: 100px;
				margin-top: -1.5%;
				text-align: center;
			}
			: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: 85%; //一级
		// height: calc(100% - 15px - 50px - 60px - 20px);
		// margin: 75px auto 16px auto;//二级
		margin: 10px auto 10px 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: 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: 5%;
	width: 12%;
	position: absolute;
	img {
		width: 100%;
	}
}
</style>