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

<template>
	<!-- <div class="main-content"> -->
	<div class="orderBgc" v-if="screenValue == 0">
		<div class="change-btn">
			<el-button type="primary" @click="changeScreen">切换驾驶舱</el-button>
		</div>
		<!-- <Map2D class="mapStyle" v-if="mapValue == 0"></Map2D> -->
		<!-- <Map3DStyle class="mapStyle" v-if="mapValue == 1"></Map3DStyle> -->
		<maps class="mapStyle" :projectData="projectData" v-if="mapValue == 0"></maps>
		<maps3D class="mapStyle" :projectData="projectData" v-if="mapValue == 1"></maps3D>
		<!-- <headerScreen class="topHeader"></headerScreen> -->
		<leftScreen class="leftScreen"></leftScreen>
		<centerScreen class="centerScreen"></centerScreen>
		<rightScreen class="rightScreen"></rightScreen>
		<!-- <div class="bottomContent"></div> -->
		<div class="mapChange">
			<div @click="changeMap(0)">地图1</div>
			<div @click="changeMap(1)">地图2</div>
		</div>
		<!-- <div class="borderBottom"></div> -->
	</div>
	<!-- <div class="screenTwo" v-if="screenValue == 1">
		<div class="change-btn">
			<el-button type="primary" @click="changeScreen">切换驾驶舱</el-button>
		</div>
		<largeScreenTwo></largeScreenTwo>
	</div> -->
	<!-- </div> -->
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import headerScreen from "./components/header.vue";
import centerScreen from "./components/center.vue";
import leftScreen from "./components/left.vue";
import rightScreen from "./components/right.vue";
// import Map3D from "./components/map3D.vue";
import Map2D from "./components/map2D.vue";
import Map3DStyle from "./components/Map3DStyle.vue";
import maps from "./components/maps.vue";
import maps3D from "./components/maps3D.vue";
import largeScreenTwo from "../largeScreenTwo/index.vue";
import { GlobalStore } from "@/stores";
const route = useRoute();
const router = useRouter();
const globalStore = GlobalStore();
//获取项目信息
const projectData = ref({
	latitude: "",
	longitude: "",
	totalDay: ""
});
const screenValue = ref(0);
const mapValue = ref(0);
const changeMap = (val: any) => {
	mapValue.value = val;
};
const changeScreen = async () => {
	console.log(route);
	console.log({ path: globalStore.path, moduleId: globalStore.moduleId });
	await sendMessage({ path: globalStore.path, moduleId: globalStore.moduleId }, 2);
	// router.push("/goverment/huizhou/largeScreen/largeScreenTwo/index");
	// screenValue.value = screenValue.value == 0 ? 1 : 0;
};
const sendMessage = (msg: any, type: any, iframeEle: any | undefined) => {
	console.log(666);
	if (type === 1) {
		// 父 => 子
		iframeEle.contentWindow.postMessage(msg, "*");
	} else if (type === 2) {
		// 子 => 父
		window.parent.postMessage(msg, "*");
	}
	console.log(777);
};
</script>

<style lang="scss" scoped>
.orderBgc {
	width: 100%;
	height: 100%;
	position: relative;

	.change-btn {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100;
		:deep(.el-button) {
			background-color: transparent;
		}
	}
	.mapStyle {
		width: 100%;
		height: 100%;
		position: absolute;
	}
	.topHeader {
		width: 100%;
		height: 15%;

		// background: linear-gradient(to right, rgb(17 20 25 / 60%), rgb(17 20 25 / 20%), rgb(17 20 25 / 60%));
	}
	.mapChange {
		position: absolute;
		left: calc(50% - 132px);
		bottom: 20px;
		display: flex;
		align-items: center;
		div {
			width: 106px;
			height: 36px;
			color: white;
			font-size: 20px;
			line-height: 36px;
			text-align: center;
			cursor: pointer;
		}
		div:first-child {
			background: url("@/assets/images/screenImg/mapImg/mapIcon1.png") no-repeat 0 0;
			background-size: 100% 100%;
			margin-right: 20px;
		}
		div:last-child {
			background: url("@/assets/images/screenImg/mapImg/mapIcon2.png") no-repeat 0 0;
			background-size: 100% 100%;
		}
	}
	.bottomContent {
		display: flex;
		width: 100%;
		height: 100%;
		position: relative;
		.leftScreen {
			flex: 2.5;
			height: 100%;
		}
		.centerScreen {
			flex: 5;
			height: 100px;
		}
		.rightScreen {
			flex: 2.5;
			height: 100%;
		}
	}
	.borderBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 6%;
		background: url("@/assets/images/screenImg/bottomBorder.png") no-repeat center bottom;
		background-size: 100%;
	}
}
.screenTwo {
	position: relative;
	.change-btn {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 100;
		:deep(.el-button) {
			background-color: transparent;
		}
	}
}
</style>