138 lines
3.0 KiB
Vue
138 lines
3.0 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> -->
|
||
<!-- 旧沙盘地址 http://jxjzw.zhgdyun.com:6080/review1/#/login?projectId=2 -->
|
||
<!-- http://121.37.106.37:9812/#/login?projectId=2 -->
|
||
<!-- projectId=2 木垒标准版，projectId=3 木垒古尔班 -->
|
||
<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>
|