map.vue
2.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<template>
<a-modal
:visible="visible"
:confirm-loading="confirmLoading"
@cancel="handleCancel"
@ok="handleOk"
width="85%"
>
<div style="height:650px;">
<iframe ref="mainIframe"
src="/map.html"
class="iframe"
frameborder="0"
style="width: 100%; height: 100%"
id="bdIframe"
scrolling="no">
</iframe>
</div>
</a-modal>
</template>
<script>
import pick from "lodash.pick";
export default {
name: "map",
data(){
return{
confirmLoading: false,
visible: false,
form:{},
bdTokenUrl : 'http://193.112.22.34:8081/WebReport/ReportServer?reportlet=PHBIP_JTXX.cpt&op=view'
}
},
mounted(){
/**
* iframe-宽高自适应显示
*/
const oIframe = document.getElementById('bdIframe');
const deviceWidth = document.documentElement.clientWidth;
const deviceHeight = document.documentElement.clientHeight;
oIframe.style.width = (Number(deviceWidth)-220) + 'px'; //数字是页面布局宽度差值
oIframe.style.height = (Number(deviceHeight)-120) + 'px'; //数字是页面布局高度差
},
methods: {
handleCancel(e) {
this.visible = false
},
handleOk () {
this.visible = false
},
toMap(id) {
this.visible = true
this.$nextTick(() => {
// 使用ref 获取 dom
const mapFrame = this.$refs['mainIframe']
// 因为iframe页面打开就已经加载 获取接口成功后刷新他
mapFrame.contentWindow.location.reload()
if (mapFrame.attachEvent) {
// 兼容浏览器判断 // iframe的加载完成函数
mapFrame.attachEvent('onload', function () {
const iframeWin = mapFrame.contentWindow
//传递参数
iframeWin.postMessage(id, '*')
})
} else {
// iframe的加载完成函数
mapFrame.onload = function () {
const iframeWin = mapFrame.contentWindow
//传递参数
iframeWin.postMessage(id, '*')
}
}
})
}
}
}
</script>
<style scoped>
</style>