From 80740fa2d68fb14149282d64df4d51f62807dd06 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期三, 26 三月 2025 09:03:13 +0800
Subject: [PATCH] 优化
---
src/views/DataScreen.vue | 84 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 83 insertions(+), 1 deletions(-)
diff --git a/src/views/DataScreen.vue b/src/views/DataScreen.vue
index 93e4948..47993a0 100644
--- a/src/views/DataScreen.vue
+++ b/src/views/DataScreen.vue
@@ -1,5 +1,11 @@
<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" />
@@ -31,7 +37,8 @@
transformOrigin: 'left top'
},
data: {},
- loading: true
+ loading: true,
+ isFullscreen: false
};
},
created() {
@@ -43,9 +50,18 @@
},
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();
},
methods: {
handleResize() {
@@ -53,6 +69,44 @@
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);
+ }
}
}
};
@@ -66,5 +120,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