110 lines
2.4 KiB
Vue
110 lines
2.4 KiB
Vue
<template>
|
||
<div v-loading="loading">
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
style="margin-bottom: 10px"
|
||
@click="dianji"
|
||
>
|
||
全屏
|
||
</el-button>
|
||
<iframe
|
||
id="iframeId"
|
||
ref="iframe"
|
||
:src="src"
|
||
style="width: 100%; height: 495px"
|
||
></iframe>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
deviceCode: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
// screenView: {
|
||
// type: String,
|
||
// default: '',
|
||
// },
|
||
},
|
||
data() {
|
||
return {
|
||
technologyData: [],
|
||
loading: true,
|
||
fullscreenLoading: true,
|
||
queryForm: {
|
||
deviceCode: '',
|
||
},
|
||
src: '',
|
||
};
|
||
},
|
||
watch: {
|
||
deviceCode: function (newVal, oldVal) {
|
||
this.queryForm.deviceCode = newVal;
|
||
this.src =
|
||
'https://dp.lidinghb.com/chudy_visual/view/' +
|
||
newVal[1] +
|
||
'?' +
|
||
'deviceCode=' +
|
||
newVal[0];
|
||
console.log(111, newVal);
|
||
console.log(123, this.src);
|
||
},
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
const { iframe } = this.$refs;
|
||
// IE和非IE浏览器，监听iframe加载事件不一样，需要兼容
|
||
const that = this;
|
||
if (iframe.attachEvent) {
|
||
// IE
|
||
iframe.attachEvent('onload', () => {
|
||
that.stateChange();
|
||
});
|
||
} else {
|
||
// 非IE
|
||
iframe.onload = function () {
|
||
that.stateChange();
|
||
};
|
||
}
|
||
},
|
||
methods: {
|
||
showData(row) {
|
||
console.log(row);
|
||
},
|
||
stateChange() {
|
||
this.loading = false;
|
||
},
|
||
dianji() {
|
||
//设置后就是id==con_lf_top_div 的容器全屏
|
||
debugger;
|
||
const case1 = document.getElementById('iframeId');
|
||
if (this.fullscreen) {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
} else if (document.webkitCancelFullScreen) {
|
||
document.webkitCancelFullScreen();
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen();
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen();
|
||
}
|
||
} else {
|
||
if (case1.requestFullscreen) {
|
||
case1.requestFullscreen();
|
||
} else if (case1.webkitRequestFullScreen) {
|
||
case1.webkitRequestFullScreen();
|
||
} else if (case1.mozRequestFullScreen) {
|
||
case1.mozRequestFullScreen();
|
||
} else if (case1.msRequestFullscreen) {
|
||
// IE11
|
||
case1.msRequestFullscreen();
|
||
}
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|