wisdomisitezwfront-web/src/views/goverment/huizhou/largeScreen/largeScreenTwo/index.vue

<template>
	<div class="project">
		<div class="change-btn">
			<el-button type="primary" @click="changeScreen">切换驾驶舱</el-button>
		</div>
		<div class="Leftcent">
			<LeftcentView></LeftcentView>
		</div>
		<div class="RigthTop">
			<RigthTopView></RigthTopView>
		</div>
		<div class="rigthBo">
			<RigthBottLeftView></RigthBottLeftView>
		</div>
		<div class="rigthBottRig">
			<RigthBottRigthView></RigthBottRigthView>
		</div>
	</div>
</template>

<script setup lang="tsx" name="largeScreenTwo">
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import LeftcentView from "./components/LeftcentView.vue";
import RigthTopView from "./components/RigthTopView.vue";
import RigthBottLeftView from "./components/RigthBottLeftView.vue";
import RigthBottRigthView from "./components/RigthBottRigthView.vue";
import { GlobalStore } from "@/stores";
import { sendIframeMessage } from "@/utils/util";
const globalStore = GlobalStore();
const router = useRouter();
const changeScreen = async () => {
	router.push("/goverment/huizhou/largeScreen/largeScreenOne/index");
	// screenValue.value = screenValue.value == 0 ? 1 : 0;
};
onMounted(async () => {
	await sendIframeMessage({ obj: { path: globalStore.path, moduleId: globalStore.moduleId } }, 2, undefined);
});
</script>
<style scoped lang="scss">
.project {
	position: relative;
	height: calc(100% - 100px);
	width: 100%;
	.change-btn {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100;
		:deep(.el-button) {
			background-color: transparent;
		}
	}
	.Leftcent {
		position: absolute;
		top: 0px;
		width: 24.9%;
	}

	.RigthTop {
		position: absolute;
		top: 0px;
		width: 74.5%;
		right: 0px;
		height: 260px;
	}
	.rigthBo {
		position: absolute;
		width: 37%;
		top: 267px;
		left: 25.5%;
	}
	.rigthBottRig {
		position: absolute;
		width: 37%;
		top: 267px;
		left: 62.8%;
	}
}
</style>