|
@@ -0,0 +1,115 @@
|
|
|
+<template>
|
|
|
+ <div class="main-info">
|
|
|
+ <iframe
|
|
|
+ ref="iframe"
|
|
|
+ id="iframe"
|
|
|
+ frameborder="0"
|
|
|
+ :src="iframeSrc"
|
|
|
+ style="min-height:900px;width: 100%;height:100%;"
|
|
|
+ scrolling="auto"
|
|
|
+ >
|
|
|
+ </iframe>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "ThreeDatasModel",
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ iframeSrc: '',
|
|
|
+ isReceiveMsg: false,
|
|
|
+ actionNum: 5,
|
|
|
+ timer: null,
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.iframeSrc = `http://192.168.170.123:8015/scada/gc/128098`
|
|
|
+ // 监听收到消息
|
|
|
+ //window.addEventListener('message', this.handleMessageEvent)
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ const self = this
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const iframe = document.getElementById('iframe')
|
|
|
+ this.loading = true;
|
|
|
+ if (iframe.attachEvent) { // 适配IE
|
|
|
+ iframe.attachEvent('onload', function () {
|
|
|
+ self.clickIframe()
|
|
|
+ setTimeout(() => {
|
|
|
+ self.handlePostMessageFail()
|
|
|
+ }, 1000)
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ iframe.onload = function () {
|
|
|
+ // 坑一,postMessage发送通知时,可能对方的页面还没有加载完成导致发送失败
|
|
|
+
|
|
|
+ self.clickIframe()
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ /*
|
|
|
+ setTimeout(() => {
|
|
|
+ self.handlePostMessageFail()
|
|
|
+ }, 1000) */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleMessageEvent(event) {
|
|
|
+ if (event.data && event.data.data) {
|
|
|
+ const data = event.data.data
|
|
|
+ const body = data.body || ''
|
|
|
+ if (parseInt(data.responseCode) === 0) {
|
|
|
+ // 成功返回
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push({ name: this.backPath })
|
|
|
+ }, 500)
|
|
|
+ } else if (parseInt(data.responseCode) === 2) {
|
|
|
+ // 收到消息
|
|
|
+ console.log('-------已收到消息', data)
|
|
|
+ this.isReceiveMsg = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickIframe() {
|
|
|
+ const iframe =
|
|
|
+ document.getElementById('iframe') &&
|
|
|
+ document.getElementById('iframe').contentWindow
|
|
|
+ if (!iframe) return
|
|
|
+ const list = []
|
|
|
+ list.push(this.processData)
|
|
|
+ const dict = {
|
|
|
+ processList: list
|
|
|
+ }
|
|
|
+ // 不限制域名就用*,否则就是具体域名
|
|
|
+ iframe.postMessage(dict, '*')
|
|
|
+ },
|
|
|
+ handlePostMessageFail () {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (!this.isReceiveMsg) {
|
|
|
+ if (this.actionNum <= 0) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ this.isReceiveMsg = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.clickIframe()
|
|
|
+ this.actionNum--
|
|
|
+ } else {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.timer = null
|
|
|
+ this.isReceiveMsg = true
|
|
|
+ }
|
|
|
+ }, 1500)
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ window.removeEventListener('message', this.handleMessageEvent)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|