135 lines
2.8 KiB
Vue
135 lines
2.8 KiB
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>
|