zhgdlarge/src/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue

<template>
	<div class="leftTop">
		<Card title="项目展示">
			<!-- 全屏icon -->
			<div class="fullScreen" @click="handleFullScreen">
				<el-icon :size="20" color="#fff">
					<FullScreen />
  			</el-icon>
			</div>
			<!-- <div class="map-box" id="mapContainer"></div> -->
			<iframe
				style="width: 100%; height: 100%"
				id="iframeDom"
				src="http://222.80.185.228:6080/#/login?projectId=2"
				allowfullscreen
				frameborder="0"
			></iframe>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue";
import { FullScreen } from "@element-plus/icons-vue";
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
let map = null;
// 项目信息
const projectData = ref({} as any);

const handleFullScreen = () => {
	const dom = document.getElementById('iframeDom');
	requestFullScreen(dom)
};

/**
 * 进入全屏
 * @param element
 */
function requestFullScreen(element) {
	var requestMethod =
		element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
	if (requestMethod) {
		requestMethod.call(element);
	} else if (typeof window.ActiveXObject !== "undefined") {
		var wscript = new ActiveXObject("WScript.Shell");
		if (wscript !== null) {
			wscript.SendKeys("{F11}");
		}
	}
}

/**
 * 退出全屏
 */
function exitFullscreen() {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}
}
watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
		}
	}
);
onMounted(async () => {
	// initMap();
});

// 围栏定位地图
function initMap() {
	//地图加载
	map = new AMap.Map("mapContainer", {
		// viewMode: '3D',
		resizeEnable: true,
		center: [90.604822, 44.329273],
		// layers: [new AMap.TileLayer.Satellite()],
		zoom: 15
		// center: [116.39, 39.9],
		// offset: new AMap.Pixel(-10, -10) // 设置地图偏移量
	});
}
//将方法暴露给父组件
defineExpose({});
</script>

<style lang="scss" scoped>
.leftTop {
	width: 100%;
	height: 100%;
	position: relative;
}
.map-box {
	width: 100%;
	height: 100%;
}
::v-deep .h-card .content {
	background: none;
}
.fullScreen {
	position: absolute;
	right: 24px;
	top: 8px;
	cursor: pointer;
}
</style>
<style>
.amap-logo {
	display: none;
	opacity: 0;
}
.amap-copyright {
	display: none;
	opacity: 0;
}
</style>