Merge branch 'yjl_dev' into 'shenzhen-dev'

大屏可视化页面自动适配调整 See merge request !10
2023-09-05 10:37:34 +08:00 · 2023-09-05 10:37:34 +08:00 · 0025e26c27
commit 0025e26c27
parent 7d699ddae5 665b6a49f1
9 changed files with 215 additions and 75 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -42,6 +42,7 @@
 				"vue": "^3.2.47",
 				"vue-i18n": "^9.1.9",
 				"vue-router": "^4.1.6",
+				"vue3-scale-box": "^0.1.9",
 				"vue3-seamless-scroll": "^1.2.0",
 				"vuedraggable": "^4.1.0"
 			},
@ -15679,6 +15680,11 @@
 				"typescript": "*"
 			}
 		},
+		"node_modules/vue3-scale-box": {
+			"version": "0.1.9",
+			"resolved": "https://registry.npmjs.org/vue3-scale-box/-/vue3-scale-box-0.1.9.tgz",
+			"integrity": "sha512-URKBWivTHglmwoqQTs9UBA+lWg7pMuyYusxI5ghU1ks3qZHcM+jCF5uoSiwlKpSd9XP47R3sO12oS+Sc5lW9ig=="
+		},
 		"node_modules/vue3-seamless-scroll": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/vue3-seamless-scroll/-/vue3-seamless-scroll-1.2.0.tgz",
@ -27439,6 +27445,11 @@
 				"semver": "^7.3.8"
 			}
 		},
+		"vue3-scale-box": {
+			"version": "0.1.9",
+			"resolved": "https://registry.npmjs.org/vue3-scale-box/-/vue3-scale-box-0.1.9.tgz",
+			"integrity": "sha512-URKBWivTHglmwoqQTs9UBA+lWg7pMuyYusxI5ghU1ks3qZHcM+jCF5uoSiwlKpSd9XP47R3sO12oS+Sc5lW9ig=="
+		},
 		"vue3-seamless-scroll": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/vue3-seamless-scroll/-/vue3-seamless-scroll-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@ -54,6 +54,7 @@
 		"vue": "^3.2.47",
 		"vue-i18n": "^9.1.9",
 		"vue-router": "^4.1.6",
+		"vue3-scale-box": "^0.1.9",
 		"vue3-seamless-scroll": "^1.2.0",
 		"vuedraggable": "^4.1.0"
 	},
--- a/src/assets/images/subTabImg.gif
+++ b/src/assets/images/subTabImg.gif
--- a/src/routers/modules/staticRouter.ts
+++ b/src/routers/modules/staticRouter.ts
@ -72,6 +72,16 @@ export const staticRouter: RouteRecordRaw[] = [
 				path: "/bImModel",
 				name: "BIM模型",
 				component: () => import("@/views/sevenLargeScreen/bImModel/index.vue")
+			},
+			{
+				path: "/safetyManagement/securityManagement",
+				name: "安全管理",
+				component: () => import("@/views/sevenLargeScreen/safetyManagement/securityManagement.vue")
+			},
+			{
+				path: "/safetyManagement/foundationPitMonitoring",
+				name: "基坑监测",
+				component: () => import("@/views/sevenLargeScreen/safetyManagement/foundationPitMonitoring.vue")
 			}
 		],
 		meta: {
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@ -23,7 +23,7 @@ export const GlobalStore = defineStore({
 		editPassword: false,
 		openDropdown: false,
 		Message: null, // 点击跳转的时候存的数据
-		projectDateAuth: null, //是否拥有所属工程的必填
+		projectDateAuth: null, //动态路由
 		isManager: "",
 		// element组件大小
 		assemblySize: "default",
@ -77,7 +77,7 @@ export const GlobalStore = defineStore({
 		setAccount(account: string | null) {
 			this.account = account;
 		},
-		// 判断所属工程有没有校验
+		// 动态路由
 		setProjectDateAuth(projectDateAuth: number | null) {
 			this.projectDateAuth = projectDateAuth;
 		},
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -85,7 +85,7 @@ const login = (formEl: FormInstance | undefined) => {
 			globalStore.setToken(result.token);
 			globalStore.setAccount(result.account);
 			globalStore.setAccountType(result.accountType);
-			globalStore.setProjectDateAuth(result.projectDateAuth);
+			globalStore.setProjectDateAuth(result.menuAuthority);
 			globalStore.setIsManager(result.isManager); //我已知晓

 			// 2.添加动态路由
--- a/src/views/sevenLargeScreen/indexL.vue
+++ b/src/views/sevenLargeScreen/indexL.vue
@ -1,12 +1,13 @@
 <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">
+	<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">
@ -18,58 +19,59 @@
 				<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>
+					<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">
+					<!-- <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 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>
-		<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 class="menuList">
+				<div v-for="(item, index) in menuList" :key="index">
+					<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="dataBoardContent">
+				<router-view></router-view>
 			</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";
@ -78,8 +80,28 @@ 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: "/safetyManagement/securityManagement",
+		menuList: [
+			{
+				menuName: "安全管理",
+				companyPath: "/safetyManagement/securityManagement"
+			},
+			{
+				companyPath: "/safetyManagement/foundationPitMonitoring",
+				menuName: "基坑监测"
+			},
+		]
+	},
+	{
+		moduleName: "扬尘噪声",
+		modulePath: "/headNoise"
+	},
+	{
+		moduleName: "劳务管理",
+		modulePath: "/laborManagement"
+	},
 	{ moduleName: "视频管理", modulePath: "/videoManagement" },
 	{ moduleName: "配电箱监测", modulePath: "/distributionMonitoring" },
 	{ moduleName: "车辆管理", modulePath: "/vehicleManagement" },
@ -87,18 +109,37 @@ let menuList = ref([
 	{ moduleName: "升降机监测", modulePath: "/elevatorMonitoring" },
 	{ moduleName: "BIM模型", modulePath: "/bImModel" }
 ]);
-const activeIndex=ref(0)
+const itemList = ref([]);
+const activeTab = ref(0);
+const activeTab2 = ref(0);
 const router = useRouter();

-const menuClick = (item, index) => {
-	activeIndex.value = index;
-	console.log("点击了tab", item);
-	if (item.modulePath.includes("/")) {
-		router.push(item.modulePath);
+//获取动态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);
 	}
 };
-const moduleListData = ref([] as any);//动态路由
 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];
@ -109,25 +150,27 @@ onMounted(async () => {
 			},
 			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);
+		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);
+	// menuClick(menuList.value[0], activeIndex.value);
 	getNowTime();
 	document.addEventListener("click", bodyCloseMenus);
 });
@ -227,33 +270,71 @@ function jumpBgd() {
 		margin: -4% auto 0 2%;
 		font-family: pmzd;
 		div {
+			position: relative;
 			margin-top: 1%;
 			height: 60%;
 			width: 10%;
 			cursor: pointer;
-			text-align: center;
-			line-height: 36px;
-			font-size: calc(100vw * 20 / 1920);
+			// text-align: center;
 		}
 		:nth-child(5) {
 			margin-left: 35%;
 		}
+		.subMenu {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			font-size: calc(100vw * 20 / 1920);
+			span {
+				width: 90%;
+				height: 10%;
+				margin-top: -2%;
+				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%;
+			}
+		}
 	}
 	.dataBoardContent {
-		height: 83%;
+		height: 81%;
 		// height: calc(100% - 15px - 50px - 60px - 20px);
-		margin: 15px auto 16px auto;
+		margin: 75px auto 16px auto;
 		width: calc(100% - 40px);
 		// background-color: #01131F;
 		// opacity: 0.9;
 	}
 }
 .active {
+	display: inline-block;
 	height: 100%;
-	width: 20%;
+	width: 90%;
 	// background: pink;
 	background: url("@/assets/images/dustNoise/menuImg.png") no-repeat;
 	background-size: 100% 100%;
+	color: #fff;
+}
+.active2 {
+	color: #fff;
+	font-family: none;
 }
 .userDialog {
 	display: flex;
--- a/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitoring.vue
+++ b/src/views/sevenLargeScreen/safetyManagement/foundationPitMonitoring.vue
@ -0,0 +1,19 @@
+<template>
+  <div class="box">
+       基坑监测
+       <div style="color: #fff;">456</div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+ .box{
+  width: 100%;
+  height: 100%;
+  background-color: skyblue;
+ }
+</style>
--- a/src/views/sevenLargeScreen/safetyManagement/securityManagement.vue
+++ b/src/views/sevenLargeScreen/safetyManagement/securityManagement.vue
@ -0,0 +1,18 @@
+<template>
+  <div class="box">
+       安全管理
+       <div style="color: #fff;">123</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+ .box{
+  width: 100%;
+  height: 100%;
+  /* background-color: pink; */
+ }
+</style>