147 lines
4.0 KiB
Vue
147 lines
4.0 KiB
Vue
<template>
|
|
<div v-loading="loading" class="big-screen-iframe" style="height: calc(100vh - 0px);">
|
|
<iframe id="bigIframe" ref="iframeRef" :src="iframeUrl" allow="*" allowfullscreen="true" class="big-iframe" frameborder="0" name='test' style="width: 100%; height: 100%;" @error="onIframeError" @load="onIframeLoad"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { debounce } from 'debounce'
|
|
export default {
|
|
name: "bigScreenIframe",
|
|
data() {
|
|
return {
|
|
src: "https://goview.drgyen.cn/#/chart/preview/202409060982078",
|
|
loading: true,
|
|
token: "",
|
|
iframeRef: null,
|
|
userType: "",
|
|
};
|
|
},
|
|
computed: {
|
|
iframeUrl() {
|
|
let token = this.getCookie("Admin-Token");
|
|
let src = this.$store.getters.attributeInfo['bigScreenUrl'];
|
|
if(src){
|
|
return src + "?token=" + this.token || this.src;
|
|
}else{
|
|
return process.env.VUE_APP_BIGSCREEN_PLATFORM_URL + "?token=" + this.token;
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.token = this.getCookie("Admin-Token");
|
|
this.userType = this.$store.getters.userType;
|
|
// this.src = process.env.VUE_APP_BIGSCREEN_PLATFORM_URL + "?token=" + this.token;
|
|
|
|
// document.getElementById('bigIframe').onload = function () {
|
|
//
|
|
// }
|
|
|
|
},
|
|
mounted() {
|
|
this.iframeRef = this.$refs.iframeRef;
|
|
window.addEventListener('message',this.receiveMsg, false);
|
|
},
|
|
beforeMount() {
|
|
window.removeEventListener('message', this.receiveMsg, false);
|
|
},
|
|
methods: {
|
|
getCookie(name) {
|
|
const cookies = document.cookie.split("; ");
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i].split("=");
|
|
if (cookie[0] === name) {
|
|
return cookie[1];
|
|
}
|
|
}
|
|
return "";
|
|
},
|
|
onIframeLoad() {
|
|
this.loading = false;
|
|
// const iframeContentWindow = this.iframeRef.contentWindow;
|
|
// const domain = this.extractDomain(this.iframeUrl);
|
|
// console.log("iframeContentWindow",iframeContentWindow.location)
|
|
|
|
// setInterval(()=>{
|
|
// // test.window.postMessage('hello, child!', 'http://127.0.0.1:8002');
|
|
// let obj = {
|
|
// type: 'GlobalVar',
|
|
// key: 'nowTime',
|
|
// data: new Date()
|
|
// }
|
|
// iframeContentWindow.postMessage(obj, domain);
|
|
// console.log("父页面-发送消息")
|
|
// },10000)
|
|
},
|
|
receiveMsg(e) {
|
|
// e.data
|
|
// {type:'path',url:'/project/project?id=1'}
|
|
// {type:'pathType',typeName:'设备列表',query: { id: 123 }}
|
|
if (e.data.type === 'path') {
|
|
if(e.data.url){
|
|
this.$router.push(e.data.url);
|
|
}
|
|
}else if (e.data.type === 'pathType') {
|
|
if(e.data.typeName === '设备'){
|
|
if(this.userType === 'SYSTEM'){
|
|
this.$router.push({
|
|
path: '/device/device',
|
|
query: e.data.query
|
|
});
|
|
}else{
|
|
this.$router.push({
|
|
path: '/device_tenant/device_tenant',
|
|
query: e.data.query
|
|
});
|
|
}
|
|
}else if(e.data.typeName === '项目'){
|
|
if(this.userType === 'SYSTEM'){
|
|
this.$router.push({
|
|
path: '/project/project',
|
|
query: e.data.query
|
|
});
|
|
}else{
|
|
this.$router.push({
|
|
path: '/project_tenant/project_tenant',
|
|
query: e.data.query
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onIframeError() {
|
|
this.loading = false;
|
|
console.error("Iframe load failed.");
|
|
},
|
|
extractDomain(url) {
|
|
try {
|
|
const urlObj = new URL(url);
|
|
return urlObj.origin;
|
|
} catch (error) {
|
|
console.error("Invalid URL:", error);
|
|
return "*"; // 如果 URL 无效，使用通配符
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.big-screen-iframe {
|
|
width: 100%;
|
|
height: calc(100vh - 0px);
|
|
position: relative;
|
|
}
|
|
|
|
.big-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.app-main {
|
|
width: 100% !important;
|
|
height: 100vh !important;
|
|
}
|
|
</style>
|