From 03cd344a15bf63bf7968dc77a026c77c78c304f4 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期三, 26 三月 2025 11:44:32 +0800
Subject: [PATCH] Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/chongzhou-screen
---
src/views/DataScreen.vue | 100 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 97 insertions(+), 3 deletions(-)
diff --git a/src/views/DataScreen.vue b/src/views/DataScreen.vue
index 07a15a8..8c89475 100644
--- a/src/views/DataScreen.vue
+++ b/src/views/DataScreen.vue
@@ -1,9 +1,15 @@
<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 />
+ <right-panel v-if="!loading" :data="data" />
</div>
</template>
@@ -31,24 +37,84 @@
transformOrigin: 'left top'
},
data: {},
- loading: true
+ 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() {
- this.screenStyle.transform = `scale(${window.innerWidth / 1920})`;
+ 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);
+ }
}
}
};
@@ -62,5 +128,33 @@
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>
\ No newline at end of file
--
Gitblit v1.7.1