<template>
|
<div class="data-screen" :style="screenStyle">
|
<div v-if="!isFullscreen" class="fullscreen-mask" @click="enterFullScreen">
|
<div class="fullscreen-tip">
|
<i class="el-icon-full-screen"></i>
|
<p>点击进入全屏模式</p>
|
</div>
|
</div>
|
<header-panel />
|
<left-panel v-if="!loading" :data="data" />
|
<center-panel v-if="!loading" :data="data" />
|
<right-panel v-if="!loading" :data="data" />
|
</div>
|
</template>
|
|
<script>
|
import HeaderPanel from '@/components/datascreen/HeaderPanel.vue';
|
import LeftPanel from '@/components/datascreen/LeftPanel.vue';
|
import CenterPanel from '@/components/datascreen/CenterPanel.vue';
|
import RightPanel from '@/components/datascreen/RightPanel.vue';
|
import { getData } from './service';
|
|
export default {
|
name: 'DataScreen',
|
components: {
|
HeaderPanel,
|
LeftPanel,
|
CenterPanel,
|
RightPanel
|
},
|
data() {
|
return {
|
screenStyle: {
|
width: '1920px',
|
height: '1080px',
|
transform: `scale(${window.innerWidth / 1920})`,
|
transformOrigin: 'left top'
|
},
|
data: {},
|
loading: true,
|
isFullscreen: false,
|
timer: null
|
};
|
},
|
created() {
|
this.handleResize();
|
getData().then(res => {
|
this.data = res.data;
|
this.loading = false;
|
});
|
this.timer = setInterval(() => {
|
getData().then(res => {
|
this.data = res.data;
|
this.loading = false;
|
});
|
}, 10000);
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleResize);
|
document.addEventListener('fullscreenchange', this.handleFullscreenChange);
|
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
|
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
|
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleResize);
|
document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
|
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
|
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
|
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
|
this.exitFullScreen();
|
clearInterval(this.timer);
|
},
|
methods: {
|
handleResize() {
|
const widthScale = window.innerWidth / 1920;
|
const heightScale = window.innerHeight / 1080;
|
const scale = Math.min(widthScale, heightScale);
|
this.screenStyle.transform = `scale(${scale})`;
|
},
|
handleFullscreenChange() {
|
this.isFullscreen = document.fullscreenElement ||
|
document.webkitFullscreenElement ||
|
document.mozFullScreenElement ||
|
document.msFullscreenElement;
|
},
|
enterFullScreen() {
|
const element = document.documentElement;
|
try {
|
if (element.requestFullscreen) {
|
element.requestFullscreen();
|
} else if (element.webkitRequestFullscreen) {
|
element.webkitRequestFullscreen();
|
} else if (element.mozRequestFullScreen) {
|
element.mozRequestFullScreen();
|
} else if (element.msRequestFullscreen) {
|
element.msRequestFullscreen();
|
}
|
} catch (error) {
|
console.error('全屏请求失败:', error);
|
}
|
},
|
exitFullScreen() {
|
const element = document;
|
try {
|
if (element.exitFullscreen) {
|
element.exitFullscreen();
|
} else if (element.webkitExitFullscreen) {
|
element.webkitExitFullscreen();
|
} else if (element.mozCancelFullScreen) {
|
element.mozCancelFullScreen();
|
} else if (element.msExitFullscreen) {
|
element.msExitFullscreen();
|
}
|
} catch (error) {
|
console.error('退出全屏失败:', error);
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.data-screen {
|
position: relative;
|
background: #000033;
|
color: #fff;
|
overflow: hidden;
|
background: url('@/assets/背景色.png') no-repeat center center;
|
background-size: 100% 100%;
|
|
.fullscreen-mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0, 0, 0, 0.8);
|
z-index: 9999;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
|
.fullscreen-tip {
|
text-align: center;
|
color: #fff;
|
|
i {
|
font-size: 48px;
|
margin-bottom: 16px;
|
}
|
|
p {
|
font-size: 24px;
|
}
|
}
|
}
|
}
|
</style>
|
