From ced0beac6befefa504e1354cbc04681305a25f8f Mon Sep 17 00:00:00 2001
From: X_Rian <904416525@qq.com>
Date: Mon, 8 Jul 2024 19:02:55 +0800
Subject: [PATCH] =?UTF-8?q?flx=EF=BC=9A=E6=96=B0=E5=A2=9E=E4=BA=BA?=
 =?UTF-8?q?=E5=91=98=E5=AE=9A=E4=BD=8D=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   4 +-
 src/config/config.ts                          |   3 +-
 src/routers/modules/staticRouter.ts           |  10 +-
 .../locationLive/commandCenter/index.vue      | 250 +++++++++
 src/views/locationLive/locationL.vue          | 503 ++++++++++++++++++
 5 files changed, 765 insertions(+), 5 deletions(-)
 create mode 100644 src/views/locationLive/commandCenter/index.vue
 create mode 100644 src/views/locationLive/locationL.vue

diff --git a/.env.development b/.env.development
index 4f79e0e..67b2660 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@ NODE_ENV = 'development'
 # 本地环境接口地址(/api/index.ts文件中使用)
 # 后端本地
 # VITE_API_URL = 'http://192.168.34.155:19111'
-VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
+# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # VITE_API_URL = 'http://182.90.224.237:51234'  #雄哥远程
 # VITE_API_URL = 'http://192.168.34.221:28889'
 # VITE_API_URL = 'http://121.196.214.246/api'
@@ -25,7 +25,7 @@ VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
 # 七参数标准版(演示平台)
 # VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
 # agjt
-# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
+VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
 # VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
 # VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
 # 苏立信/重庆市南岸区
diff --git a/src/config/config.ts b/src/config/config.ts
index fe79fea..9c174db 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -29,9 +29,10 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
 // export const COMPANY: string = "as"; //鞍山项目
 // export const COMPANY: string = "agjt"; //鞍钢集团
 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
-export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
+// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
 // export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
+export const COMPANY: string = "agjtLocationLive"; //鞍钢集团人员定位大屏
 // export const COMPANY: string = "zkjc"; //中科佳成项目
 // export const COMPANY: string = "cqna"; //重庆南岸项目
 // export const COMPANY: string = "slx"; //苏立信项目
diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts
index 6408db4..bb82f40 100644
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@@ -25,9 +25,10 @@ export const staticRouter: RouteRecordRaw[] = [
 		path: "/large",
 		name: "大屏",
 		// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
-		component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
+		// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
 		// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
 		// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
+		component: () => import("@/views/locationLive/locationL.vue"), //人员定位大屏
 		// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
 		// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
 		children: [
@@ -307,11 +308,16 @@ export const staticRouter: RouteRecordRaw[] = [
 				path: "/overviewScreen",
 				name: "大屏总览",
 				component: () => import("@/views/overviewScreen/commandCenter/index.vue")
+			},
+			{
+				path: "/locationLive",
+				name: "人员定位大屏",
+				component: () => import("@/views/locationLive/commandCenter/index.vue")
 			}
 		],
 		meta: {
 			// title: "数字化项目监管平台"
-			title: "智慧工厂安全生产监管平台"		//鞍钢项目
+			title: "智慧工厂安全生产监管平台" //鞍钢项目
 		}
 	}
 
diff --git a/src/views/locationLive/commandCenter/index.vue b/src/views/locationLive/commandCenter/index.vue
new file mode 100644
index 0000000..4cdca3f
--- /dev/null
+++ b/src/views/locationLive/commandCenter/index.vue
@@ -0,0 +1,250 @@
+<!-- eslint-disable vue/v-on-event-hyphenation -->
+<template>
+	<div class="projectContent">
+		<smartSafeHat></smartSafeHat>
+	</div>
+</template>
+
+<script setup lang="ts">
+import smartSafeHat from "@/views/sevenLargeScreen/digitalConstruction/smartSafeHat/index.vue";
+// import { GlobalStore } from "@/stores";
+// import { getCountTaskProgressApi } from "@/api/modules/agjtCommandApi";
+// import * as mqtt from "mqtt/dist/mqtt.min";
+
+// import { getWorkerStatisticsCountApi, getProjectDetail } from "@/api/modules/projectOverview";
+import { onMounted, ref } from "vue";
+// const store = GlobalStore();
+// const statisticsCount = ref(null as any);
+
+// const projectData = ref(null as any);
+
+// const options = {
+// 	connectTimeout: 40000,
+// 	clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
+// 	username: "root",
+// 	password: "123456",
+// 	clean: true
+// };
+// 监听mqtt下发信息然后刷新列表
+// const mqttMSG = () => {
+// 	// this.userId = this.$store.state.userInfo.userId;
+// 	// this.topicName = this.$store.state.userInfo.scope;
+// 	const client = mqtt.connect("ws://jxj.zhgdyun.com:8083/mqtt", options);
+// 	console.log("11111111~~~~~~~~~~~", client);
+// 	// mqtt连接   +"/#"  +workerId
+// 	client.on("connect", () => {
+// 		// console.log('连接成功:', this.topicName + this.userId)
+// 		// this.topicName + this.userId
+// 		client.subscribe("zjsjTopic" + store.userId + "/bigScreen/emergency/alert", { qos: 0 }, (error: any) => {
+// 			if (!error) {
+// 				console.log("订阅成功123");
+// 			} else {
+// 				console.log("订阅失败");
+// 			}
+// 		});
+// 	});
+// 	// 接收消息处理
+// 	client.on("message", (topic: any, message: any) => {
+// 		console.log("~~~~~~~", topic, JSON.parse(message));
+// 		const result = JSON.parse(message);
+// 		openPeopleCountDialog({
+// 			index: 10,
+// 			title: "人员呼叫",
+// 			timeOut: 60,
+// 			timeFlag: null,
+// 			show: true,
+// 			mapsDetail: JSON.parse(result.payload)
+// 		});
+// 	});
+// 	// 断开发起重连
+// 	// client.on("reconnect", (error) => {
+// 	//   console.log("正在重连:", error);
+// 	// });
+// 	// 链接异常处理
+// 	client.on("error", (error: any) => {
+// 		console.log("连接失败:", error);
+// 	});
+// };
+// // 项目剩余天数
+// let projectSurplusDayNum = ref("" as any);
+// // 获取项目总进度/项目剩余天数
+// const getCountTaskProgress = async (showLoading: boolean) => {
+// 	const res: any = await getCountTaskProgressApi(
+// 		{
+// 			projectSn: store.sn
+// 		},
+// 		showLoading
+// 	);
+// 	if (res.result) {
+// 		console.log("项目总进度/项目剩余天数", res);
+// 		projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
+// 	}
+// };
+onMounted(() => {
+	// getCountTaskProgress(false);
+	// mqttMSG();
+	// setTimeout(() => {
+	// 	openPeopleCountDialog({
+	// 		index: 10,
+	// 		title: "人员呼叫",
+	// 		timeOut: 10,
+	// 		timeFlag: null,
+	// 		show: true,
+	// 		mapsDetail: {
+	// 			alarmPersonId: "1795271026055901186",
+	// 			alarmPersonName: "测试0528",
+	// 			alarmTime: "2024-06-03 19:19:23",
+	// 			departmentName: null,
+	// 			disposalReport: null,
+	// 			dispositionStatus: 1,
+	// 			emergencyDetail: null,
+	// 			emergencyTypeId: "-1",
+	// 			emergencyTypeName: "一键报警",
+	// 			enterpriseId: "1786223302337675266",
+	// 			enterpriseName: "测试企业1",
+	// 			id: "1797588887538925569",
+	// 			incidentClosedStatus: 1,
+	// 			incidentSite: "广东省深圳市宝安区福海路福永意库",
+	// 			latitude: 22.67405,
+	// 			livePicture: null,
+	// 			liveVideoSituation: null,
+	// 			longitude: 113.80984,
+	// 			projectSn: "BD3137498CB84BF0969979E0342CDBCA",
+	// 			situations: null,
+	// 			teamName: "司机-1",
+	// 			updateDate: "2024-06-03 19:19:30"
+	// 		}
+	// 	});
+	// }, 3000);
+	// setTimeout(() => {
+	// 	openPeopleCountDialog({
+	// 		index: 10,
+	// 		title: "查看1",
+	// 		timeOut: 10,
+	// 		timeFlag: null,
+	// 		show: true,
+	// 		mapsDetail: {
+	// 			alarmPersonId: "1795271026055901186",
+	// 			alarmPersonName: "测试0528",
+	// 			alarmTime: "2024-06-03 19:19:23",
+	// 			departmentName: null,
+	// 			disposalReport: null,
+	// 			dispositionStatus: 1,
+	// 			emergencyDetail: null,
+	// 			emergencyTypeId: "-1",
+	// 			emergencyTypeName: "一键报警",
+	// 			enterpriseId: "1786223302337675266",
+	// 			enterpriseName: "测试企业1",
+	// 			id: "1797588887538925568",
+	// 			incidentClosedStatus: 1,
+	// 			incidentSite: "广东省深圳市宝安区福海路福永意库",
+	// 			latitude: 22.67405,
+	// 			livePicture: null,
+	// 			liveVideoSituation: null,
+	// 			longitude: 113.80984,
+	// 			projectSn: "BD3137498CB84BF0969979E0342CDBCA",
+	// 			situations: null,
+	// 			teamName: "司机-1",
+	// 			updateDate: "2024-06-03 19:19:30"
+	// 		}
+	// 	});
+	// }, 6000);
+});
+</script>
+<style lang="scss" scoped>
+.finish-restTime {
+	width: 100%;
+	position: absolute;
+	left: 0.8%;
+	top: -6.4%;
+	color: #fff;
+	line-height: 32px;
+	font-size: 16px;
+	.dayImg {
+		margin-left: 2%;
+		font-size: 26px;
+		display: inline-block;
+		width: 29px;
+		height: 32px;
+		font-family: sadigitalNumber;
+		background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
+		background-size: 100% 100%;
+		text-align: center;
+		color: #4ac0f3;
+	}
+}
+.line1 {
+	color: #fff;
+	padding-top: 5px;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	line-height: 30px;
+	height: 30px;
+	font-size: 16px;
+	position: absolute;
+	top: -53px;
+
+	.numberCard {
+		font-size: 26px;
+		padding: 0 8px;
+		margin-left: 3px;
+		font-weight: bold;
+		color: #47bcec;
+		background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
+		background-size: 100% 100%;
+	}
+}
+
+.projectContent {
+	width: 100%;
+	height: 100%;
+	display: flex;
+
+	.left {
+		height: 100%;
+		width: 26%;
+		transform: translateY(0px);
+
+		.leftTop {
+			height: 31%;
+		}
+
+		.leftBottom {
+			height: 69%;
+			margin: 1% 0;
+		}
+	}
+
+	.center {
+		width: 46%;
+		margin: 0 1%;
+
+		.centerTop {
+			height: 66.5%;
+			// margin-bottom: 3%;
+		}
+
+		.centerBottom {
+			height: 33.5%;
+			margin: 1% 0 0 0;
+		}
+	}
+
+	.right {
+		width: 26%;
+		height: 100%;
+		// transform: translateY(-70px);
+		// .rightAll {
+		// 	height: 32%;
+		// }
+		// .rightCenter {
+		// 	height: 33%;
+		// 	margin: 3% 0 3% 0;
+		// }
+		// .rightBottom {
+		// 	height: 32%;
+		// }
+	}
+}
+</style>
diff --git a/src/views/locationLive/locationL.vue b/src/views/locationLive/locationL.vue
new file mode 100644
index 0000000..7c50a17
--- /dev/null
+++ b/src/views/locationLive/locationL.vue
@@ -0,0 +1,503 @@
+<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 === 'agjtLocationLive'">人员定位大屏</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: "/locationLive"
+	}
+]);
+// 鞍山指挥部大屏
+let agjtCommandList = ref([
+	{
+		moduleName: "人员定位大屏",
+		modulePath: "/locationLive"
+	}
+]);
+
+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;
+		// height: 75px;
+		padding-bottom: 4px;
+		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>