大屏全屏按钮

src/main/resources/views/modules/mes/mesScreen3.html

@@ -79,6 +79,7 @@
 		.mes3-header-right {
 			text-align: right;
 			font-family: "Microsoft YaHei", sans-serif;
+			margin-right: 88px;
 		}
 		.mes3-header-right .mes3-date {
 			font-size: 16px;
@@ -91,6 +92,29 @@
 			font-weight: bold;
 			color: #FFFFFF;
 		}
+		.mes-fullscreen-btn {
+			position: absolute;
+			top: 22px;
+			right: 18px;
+			z-index: 30;
+			padding: 6px 14px;
+			font-size: 14px;
+			line-height: 1.2;
+			color: #4DC9F5;
+			background: rgba(0, 20, 50, 0.65);
+			border: 1px solid #4DC9F5;
+			border-radius: 4px;
+			cursor: pointer;
+			font-family: "Microsoft YaHei", sans-serif;
+		}
+		.mes-fullscreen-btn:hover {
+			color: #FFFFFF;
+			background: rgba(77, 201, 245, 0.28);
+		}
+		html:fullscreen .mes-fullscreen-btn,
+		html:-webkit-full-screen .mes-fullscreen-btn {
+			display: none !important;
+		}
 
 		/* ===== 中间主体区域 ===== */
 		.mes3-body {
@@ -637,6 +661,7 @@
 			<div class="mes3-date" id="mes3Date"></div>
 			<div class="mes3-time" id="mes3Time"></div>
 		</div>
+		<button type="button" class="mes-fullscreen-btn" id="btnFullscreen" title="全屏">全屏</button>
 	</div>
 
 	<!-- 中间主体 -->
@@ -1879,7 +1904,23 @@
 	function changeZoom() {
 		var wb = $(window).width() / 1920;
 		var hb = $(window).height() / 1080;
-		$('body').css({'zoom': wb >= hb ? hb : wb});
+		var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement);
+		var $app = $('#app');
+		if (isFs) {
+			$('html, body').css({ 'zoom': 1, 'width': '100%', 'height': '100%', 'overflow': 'hidden', 'margin': 0, 'background': '#00091A' });
+			$app.css({
+				'transform': 'scale(' + wb + ', ' + hb + ')',
+				'transform-origin': 'left top',
+				'margin': 0,
+				'position': 'absolute',
+				'left': 0,
+				'top': 0
+			});
+		} else {
+			$('html').css({ 'width': '', 'height': '', 'overflow': '', 'margin': '', 'background': '', 'zoom': '' });
+			$app.css({ 'transform': 'none', 'transform-origin': '', 'margin': '0 auto', 'position': 'relative', 'left': '', 'top': '' });
+			$('body').css({ 'zoom': wb >= hb ? hb : wb, 'width': '', 'height': '', 'overflow': 'hidden', 'margin': '', 'background': '' });
+		}
 	}
 
 	function drawAllCharts() {
@@ -1901,11 +1942,33 @@
 		drawAllCharts();
 	});
 
+	function initFullscreenBtn() {
+		var btn = document.getElementById('btnFullscreen');
+		if (!btn) return;
+		btn.addEventListener('click', function () {
+			var el = document.documentElement;
+			if (el.requestFullscreen) {
+				el.requestFullscreen();
+			} else if (el.webkitRequestFullscreen) {
+				el.webkitRequestFullscreen();
+			}
+		});
+		function syncFullscreenBtn() {
+			var fs = document.fullscreenElement || document.webkitFullscreenElement;
+			btn.style.display = fs ? 'none' : '';
+			changeZoom();
+			drawAllCharts();
+		}
+		document.addEventListener('fullscreenchange', syncFullscreenBtn);
+		document.addEventListener('webkitfullscreenchange', syncFullscreenBtn);
+	}
+
 	$(function() {
 		changeZoom();
 		updateClock();
 		setInterval(updateClock, 1000);
 		refreshData();
+		initFullscreenBtn();
 
 		// 每2分钟刷新一次数据
 		setInterval(refreshData, 1000 * 60 * 2);

src/main/resources/views/modules/mes/mesScreen4.html

@@ -52,7 +52,7 @@
 		.mes4-datetime {
 			position: absolute;
 			top: 30px;
-			right: 50px;
+			right: 110px;
 			text-align: right;
 		}
 		.mes4-datetime .mes4-date {
@@ -69,6 +69,29 @@
 			font-weight: bold;
 			line-height: 30px;
 		}
+		.mes-fullscreen-btn {
+			position: absolute;
+			top: 28px;
+			right: 18px;
+			z-index: 30;
+			padding: 6px 14px;
+			font-size: 14px;
+			line-height: 1.2;
+			color: #4DC9F5;
+			background: rgba(0, 20, 50, 0.65);
+			border: 1px solid #4DC9F5;
+			border-radius: 4px;
+			cursor: pointer;
+			font-family: "Microsoft YaHei", sans-serif;
+		}
+		.mes-fullscreen-btn:hover {
+			color: #FFFFFF;
+			background: rgba(77, 201, 245, 0.28);
+		}
+		html:fullscreen .mes-fullscreen-btn,
+		html:-webkit-full-screen .mes-fullscreen-btn {
+			display: none !important;
+		}
 
 		/* ===== 面板通用 - 使用自定义类名避免与 Bootstrap 的 .panel 冲突 ===== */
 		.mes4-panel {
@@ -274,6 +297,7 @@
 			<span class="mes4-date" id="mes4Date"></span>
 			<span class="mes4-time" id="mes4Time"></span>
 		</div>
+		<button type="button" class="mes-fullscreen-btn" id="btnFullscreen" title="全屏">全屏</button>
 	</div>
 
 	<div class="mes4-panel p-alert">
@@ -1090,7 +1114,23 @@
 	function changeZoom() {
 		var wb = $(window).width() / 1920;
 		var hb = $(window).height() / 1080;
-		$('body').css({ 'zoom': wb >= hb ? hb : wb });
+		var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement);
+		var $app = $('#app');
+		if (isFs) {
+			$('html, body').css({ 'zoom': 1, 'width': '100%', 'height': '100%', 'overflow': 'hidden', 'margin': 0, 'background': '#00091A' });
+			$app.css({
+				'transform': 'scale(' + wb + ', ' + hb + ')',
+				'transform-origin': 'left top',
+				'margin': 0,
+				'position': 'absolute',
+				'left': 0,
+				'top': 0
+			});
+		} else {
+			$('html').css({ 'width': '', 'height': '', 'overflow': '', 'margin': '', 'background': '', 'zoom': '' });
+			$app.css({ 'transform': 'none', 'transform-origin': '', 'margin': '0 auto', 'position': 'relative', 'left': '', 'top': '' });
+			$('body').css({ 'zoom': wb >= hb ? hb : wb, 'width': '', 'height': '', 'overflow': 'hidden', 'margin': '', 'background': '' });
+		}
 	}
 
 	$(window).resize(function() {
@@ -1098,11 +1138,33 @@
 		drawAllCharts();
 	});
 
+	function initFullscreenBtn() {
+		var btn = document.getElementById('btnFullscreen');
+		if (!btn) return;
+		btn.addEventListener('click', function () {
+			var el = document.documentElement;
+			if (el.requestFullscreen) {
+				el.requestFullscreen();
+			} else if (el.webkitRequestFullscreen) {
+				el.webkitRequestFullscreen();
+			}
+		});
+		function syncFullscreenBtn() {
+			var fs = document.fullscreenElement || document.webkitFullscreenElement;
+			btn.style.display = fs ? 'none' : '';
+			changeZoom();
+			drawAllCharts();
+		}
+		document.addEventListener('fullscreenchange', syncFullscreenBtn);
+		document.addEventListener('webkitfullscreenchange', syncFullscreenBtn);
+	}
+
 	$(function() {
 		changeZoom();
 		updateClock();
 		setInterval(updateClock, 1000);
 		refreshData();
+		initFullscreenBtn();
 		// 定期刷新数据 (2 分钟)
 		setInterval(refreshData, 1000 * 60 * 2);
 		// 每秒重绘 (应对 zoom / resize)

src/main/resources/views/modules/mes/mesScreen5.html

@@ -52,7 +52,7 @@
 		.mes4-datetime {
 			position: absolute;
 			top: 32px;
-			right: 50px;
+			right: 110px;
 			text-align: right;
 		}
 		.mes4-datetime .mes4-date {
@@ -69,6 +69,29 @@
 			font-weight: bold;
 			line-height: 28px;
 		}
+		.mes-fullscreen-btn {
+			position: absolute;
+			top: 28px;
+			right: 18px;
+			z-index: 30;
+			padding: 6px 14px;
+			font-size: 14px;
+			line-height: 1.2;
+			color: #4DC9F5;
+			background: rgba(0, 20, 50, 0.65);
+			border: 1px solid #4DC9F5;
+			border-radius: 4px;
+			cursor: pointer;
+			font-family: "Microsoft YaHei", sans-serif;
+		}
+		.mes-fullscreen-btn:hover {
+			color: #FFFFFF;
+			background: rgba(77, 201, 245, 0.28);
+		}
+		html:fullscreen .mes-fullscreen-btn,
+		html:-webkit-full-screen .mes-fullscreen-btn {
+			display: none !important;
+		}
 
 		/* ===== 面板通用 - 使用自定义类名避免与 Bootstrap 的 .panel 冲突 ===== */
 		.mes4-panel {
@@ -291,6 +314,7 @@
 			<span class="mes4-date" id="mes4Date"></span>
 			<span class="mes4-time" id="mes4Time"></span>
 		</div>
+		<button type="button" class="mes-fullscreen-btn" id="btnFullscreen" title="全屏">全屏</button>
 	</div>
 
 	<div class="mes4-panel p-alert">
@@ -1173,7 +1197,23 @@
 	function changeZoom() {
 		var wb = $(window).width() / 1920;
 		var hb = $(window).height() / 1080;
-		$('body').css({ 'zoom': wb >= hb ? hb : wb });
+		var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement);
+		var $app = $('#app');
+		if (isFs) {
+			$('html, body').css({ 'zoom': 1, 'width': '100%', 'height': '100%', 'overflow': 'hidden', 'margin': 0, 'background': '#00091A' });
+			$app.css({
+				'transform': 'scale(' + wb + ', ' + hb + ')',
+				'transform-origin': 'left top',
+				'margin': 0,
+				'position': 'absolute',
+				'left': 0,
+				'top': 0
+			});
+		} else {
+			$('html').css({ 'width': '', 'height': '', 'overflow': '', 'margin': '', 'background': '', 'zoom': '' });
+			$app.css({ 'transform': 'none', 'transform-origin': '', 'margin': '0 auto', 'position': 'relative', 'left': '', 'top': '' });
+			$('body').css({ 'zoom': wb >= hb ? hb : wb, 'width': '', 'height': '', 'overflow': 'hidden', 'margin': '', 'background': '' });
+		}
 	}
 
 	$(window).resize(function() {
@@ -1181,11 +1221,33 @@
 		drawAllCharts();
 	});
 
+	function initFullscreenBtn() {
+		var btn = document.getElementById('btnFullscreen');
+		if (!btn) return;
+		btn.addEventListener('click', function () {
+			var el = document.documentElement;
+			if (el.requestFullscreen) {
+				el.requestFullscreen();
+			} else if (el.webkitRequestFullscreen) {
+				el.webkitRequestFullscreen();
+			}
+		});
+		function syncFullscreenBtn() {
+			var fs = document.fullscreenElement || document.webkitFullscreenElement;
+			btn.style.display = fs ? 'none' : '';
+			changeZoom();
+			drawAllCharts();
+		}
+		document.addEventListener('fullscreenchange', syncFullscreenBtn);
+		document.addEventListener('webkitfullscreenchange', syncFullscreenBtn);
+	}
+
 	$(function() {
 		changeZoom();
 		updateClock();
 		setInterval(updateClock, 1000);
 		refreshData();
+		initFullscreenBtn();
 		// 定期刷新数据 (2 分钟)
 		setInterval(refreshData, 1000 * 60 * 2);
 		// 每秒重绘 (应对 zoom / resize)