大屏1.0版本

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

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>MES</title>
+	<style>
+		html, body {
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			background: #00091A;
+		}
+		.rotate-viewport {
+			position: relative;
+			width: 100vw;
+			height: 100vh;
+			overflow: hidden;
+		}
+		.rotate-track {
+			display: flex;
+			width: 300%;
+			height: 100%;
+			transition: transform 0.8s ease;
+			will-change: transform;
+		}
+		.rotate-track iframe {
+			flex: 0 0 33.333333%;
+			width: 33.333333%;
+			height: 100%;
+			border: 0;
+			display: block;
+			background: #00091A;
+		}
+		.rotate-progress {
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+			height: 3px;
+			z-index: 20;
+			background: rgba(77, 201, 245, 0.15);
+		}
+		.rotate-progress-bar {
+			height: 100%;
+			width: 0;
+			background: #4DC9F5;
+		}
+	</style>
+</head>
+<body>
+	<div class="rotate-viewport">
+		<div class="rotate-track" id="rotateTrack">
+			<iframe src="${ctx}/mes/mesProduct/screenAll" title="all"></iframe>
+			<iframe src="${ctx}/mes/mesProduct/screen3" title="mp"></iframe>
+			<iframe src="${ctx}/mes/mesProduct/screen5" title="jj"></iframe>
+		</div>
+	</div>
+	<div class="rotate-progress">
+		<div class="rotate-progress-bar" id="rotateBar"></div>
+	</div>
+	<script>
+	(function () {
+		document.title = 'MES\u7efc\u5408\u5927\u5c4f';
+		var INTERVAL = 2 * 60 * 1000;
+		var COUNT = 3;
+		var index = 0;
+		var startedAt = Date.now();
+		var track = document.getElementById('rotateTrack');
+		var bar = document.getElementById('rotateBar');
+
+		function applyIndex() {
+			track.style.transform = 'translateX(-' + (index * 33.333333) + '%)';
+		}
+
+		function next() {
+			index = (index + 1) % COUNT;
+			startedAt = Date.now();
+			applyIndex();
+		}
+
+		function tickBar() {
+			var elapsed = Date.now() - startedAt;
+			var pct = Math.min(100, (elapsed / INTERVAL) * 100);
+			bar.style.width = pct + '%';
+			requestAnimationFrame(tickBar);
+		}
+
+		applyIndex();
+		setInterval(next, INTERVAL);
+		requestAnimationFrame(tickBar);
+	})();
+	</script>
+</body>
+</html>