JT-CIM-ZHNY/src/views/Main/MainView.vue

<script setup>
	import {
		defineAsyncComponent
	} from 'vue';
	import JtHeader from './components/header.vue';
	import modifyModule from './components/modifyPassword.vue';
	import ZhHeader from "./components/ZhHeader.vue";
	import map3d from './components/map.vue';

	// import basicLayer from './components/basicLayer.vue';
	const layer = defineAsyncComponent(() => import('./components/layer.vue'));
	const basicLayer = defineAsyncComponent(() => import('./components/basicLayer.vue'));
	import {
		provide
	} from "vue";
	provide("getMapInstance", () => {
		return jt3d;
	});
</script>
<template>
	<div class="Mainpage">
		<!-- 顶栏容器 -->
		<!-- <JtHeader @handleSelect="handleSelect" /> -->
		<ZhHeader></ZhHeader>
		<map3d @onload="jtMap3DOnload" ref="refMap3d" class="map3d" />

		<template v-if="mapLoaded">
			<!-- 图层控制按钮 -->
			<div class="layerButton" @click="layerIsShow">

			</div>



			<!-- 底图组件 -->
			<basicLayer style="display: none;" ref="basicLayers"></basicLayer>

			<!-- 图层列表 -->
			<jt-popup width="300rem" height="650rem" title="图层列表" bottom="140rem" right="1240rem" v-show="layershow"
				class="layerStyle">
				<layer></layer>
			</jt-popup>



			<!-- <div  v-show="layershow" class="layerStyle">
				<layer></layer>
			</div> -->

			<!-- 控制路由页面是否缓存 -->
			<router-view v-slot="{ Component }">
				<keep-alive>
					<component :is=" Component" v-if="$route.meta.keepAlive" />
				</keep-alive>
				<component :is="Component" v-if="!$route.meta.keepAlive" />
			</router-view>

		</template>


		<!-- 修改密码 -->
		<!-- <modifyModule ref="modifyMoudle"></modifyModule> -->
	</div>

</template>

<script>
	import {
		Store
	} from '@/store/index'
	let store = Store();
	let jt3d = undefined;
	export default {
		name: 'MainView',
		/* 数据 */
		data() {
			return {
				mapLoaded: false, //保证地图加载完成，在加载子路由
				layershow: false, //图层是否显示

			}
		},
		computed: {
			rotate() {
				// 使用 inject 函数来获取 store 实例
				return store.rotate;
			},
		},
		watch: {
			rotate(newValue) {
				if (newValue) {
					jt3d.setMapSpinByPoint([117.47086573, 36.33604045]);
				}
			}
		},

		/* 方法 */
		methods: {
			//修改密码弹出框事件
			modifyMoudle() {
				this.$refs.modifyMoudle.isshow = true
			},
			jtMap3DOnload(map) {
				jt3d = map;
				this.mapLoaded = true;
				console.log('地图实例', jt3d)
				store.jt3d = jt3d
			},

			layerIsShow() {
				this.layershow = !this.layershow
			},


		},
		mounted() {

		},
		beforeUnmount() {
			console.log('重新设置一张图！！！')
			localStorage.setItem("currenttab", "YzTtitle");
		},
		// beforeRouteLeave(to, from, next) {
		// 	console.log(123)
		// 	this.$unmounted();
		// 	next();
		// }
	}
</script>

<style lang="scss" scoped>
	@charset "UTF-8";

	@font-face {
		font-family: "TTTGB-Medium";
		src: url("@/assets/fonts/fonts/TTTGB-Medium.ttf") format("truetype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.eot") format("embedded-opentype"),
			url("@/assets/fonts/fonts/TTTGB-Medium.svg") format("svg");
		font-weight: normal;
		font-style: normal;
	}

	.layerStyle {
		// position: fixed;
		// left: 400rem;
		// bottom:130rem;
		// width: 320rem;
		// height: 650rem;
		overflow: hidden;
		// background-color: rgba(5, 45, 115, 0.5) !important;
		z-index: 11;
		user-select: none;
		font-family: "TTTGB-Medium", sans-serif !important;
	}

	.layerButton {
		background: url('@/assets/images/layer/selLayer.png') no-repeat;
		background-size: 100% 100%;
		font-family: "TTTGB-Medium", sans-serif !important;
		position: fixed;
		left: 400rem;
		bottom: 80rem;
		width: 150rem;
		height: 40rem;
		// background-color: rgba(255,255,255,0.5);
		color: #000;
		line-height: 40rem;
		cursor: pointer;
		z-index: 11;
		user-select: none;
	}

	.Mainpage {
		position: relative;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.map3d {
		z-index: 5;
	}
</style>