大屏

src/main/resources/static/css/style.css

@@ -177,4 +177,5 @@ tr.aaa:hover{background: #1d3152; cursor: pointer;}
 	width: 12%;
 	margin-left: 2%;
 }
-
+.dtuplc1{width: 355px; height: 117px; padding: 15px 15px 0 15px; border: 1px solid #2C58A6;
+	box-shadow: inset 5px 10px 30px 13px #2C58A6;margin-top: 3%}

src/main/resources/static/index.html

@@ -186,7 +186,7 @@
 				</div>
 			</div>
 			<div class="content_right">
-				<div class="dtuplc" style="height: 181px;">
+				<div class="dtuplc" style="height: 220px;margin-top: 5%;">
 					<span style="font-size: 33px;">设备状态</span>
 					<table class="device">
 						<tr>
@@ -203,107 +203,74 @@
 						</tr>
 					</table>
 				</div>
-				<div class="dtuplc">
+				<div class="dtuplc1">
 					<div class="dtu">
-						<div class="container11" id="container1111" style="height: 100%;">
-							<img class="phImg" src="./images/icons8-ph计-96.png">
+						<div class="container111" id="container1111" style="height: 100%;">
+							<img class="phImg" src="./images/icons8-温度-96.png">
 							<div style="float: right" class="divTable">
 								<table>
 									<tr>
 										<td class="zhi">8.123</td>
 									</tr>
 									<tr class="tr">
-										<td class="ph">电导率</td>
+										<td class="ph">出液温度正常</td>
 									</tr>
 								</table>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="dtuplc">
+				<div class="dtuplc1">
 					<div class="dtu">
-						<div class="container11" id="container1212" style="height: 100%;">
-							<img class="phImg" src="./images/icons8-ph计-96.png">
+						<div class="container111" id="container1212" style="height: 100%;">
+							<img class="phImg" src="./images/icons8-温度-96-1.png">
 							<div style="float: right" class="divTable">
 								<table>
 									<tr>
 										<td class="zhi">8.123</td>
 									</tr>
 									<tr class="tr">
-										<td class="ph">温度值</td>
+										<td class="ph">排液温度正常</td>
 									</tr>
 								</table>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="dtuplc">
+				<div class="dtuplc1">
 					<div class="dtu">
-						<div class="container11" id="container1313" style="height: 100%;">
-							<img class="phImg" src="./images/icons8-ph计-96.png">
+						<div class="container111" id="container1313" style="height: 100%;">
+							<img class="phImg" src="./images/icons8-温度-96-2.png">
 							<div style="float: right" class="divTable">
 								<table>
 									<tr>
 										<td class="zhi">8.123</td>
 									</tr>
 									<tr class="tr">
-										<td class="ph">TDS值</td>
+										<td class="ph">盘管温度正常</td>
 									</tr>
 								</table>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="dtuplc">
+				<div class="dtuplc1">
 					<div class="dtu">
-						<div class="container11" id="container1414" style="height: 100%;">
-							<img class="phImg" src="./images/icons8-ph计-96.png">
+						<div class="container111" id="container1414" style="height: 100%;">
+							<img class="phImg" src="./images/icons8-温度-96-3.png">
 							<div style="float: right" class="divTable">
 								<table>
 									<tr>
 										<td class="zhi">8.123</td>
 									</tr>
 									<tr class="tr">
-										<td class="ph">熔盐值</td>
+										<td class="ph">环境温度正常</td>
 									</tr>
 								</table>
 							</div>
 						</div>
 					</div>
 				</div>
-				<div class="dtuplc">
-					<div class="dtu">
-						<div class="container11" id="container1515" style="height: 100%;">
-							<img class="phImg" src="./images/icons8-ph计-96.png">
-							<div style="float: right" class="divTable">
-								<table>
-									<tr>
-										<td class="zhi">8.123</td>
-									</tr>
-									<tr class="tr">
-										<td class="ph">浊度值</td>
-									</tr>
-								</table>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="dtuplc">
-					<div class="dtu">
-						<div class="container11" id="container1616" style="height: 100%;">
-							<img class="phImg" src="./images/icons8-ph计-96.png">
-							<div style="float: right" class="divTable">
-								<table>
-									<tr>
-										<td class="zhi">8.123</td>
-									</tr>
-									<tr class="tr">
-										<td class="ph">PH值</td>
-									</tr>
-								</table>
-							</div>
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>
@@ -463,8 +430,9 @@
 
 			callAPI();
 			// 首次调用函数开始刷新
-			setInterval(function() {
-			}, 10000); // 设置10秒钟的定时器
+			/*setInterval(function() {
+				location.reload(true);
+			}, 10000); // 设置10秒钟的定时器*/
 		}
 
 
@@ -498,7 +466,7 @@
 											<div class="dtuplc">
 											<div class="dtu">
 											<div class="container11" id="container22" style="height: 100%;">
-											<img class="phImg" src="./images/icons8-ph计-96.png">
+											<img class="phImg" src="./images/icons8-氧-96.png">
 											<div style="float: right" class="divTable">
 											<table>
 											<tr>
@@ -515,7 +483,7 @@
 											<div class="dtuplc">
 											<div class="dtu">
 											<div class="container11" id="container33" style="height: 100%;">
-											<img class="phImg" src="./images/icons8-ph计-96.png">
+											<img class="phImg" src="./images/icons8-lightning-bolt-96.png">
 											<div style="float: right" class="divTable">
 											<table>
 											<tr>
@@ -532,7 +500,7 @@
 											<div class="dtuplc">
 											<div class="dtu">
 											<div class="container11" id="container88" style="height: 100%;">
-											<img class="phImg" src="./images/icons8-ph计-96.png">
+											<img class="phImg" src="./images/icons8-电阻-96.png">
 											<div style="float: right" class="divTable">
 											<table>
 											<tr>
@@ -549,7 +517,7 @@
 											<div class="dtuplc">
 											<div class="dtu">
 											<div class="container11" id="container44" style="height: 100%;">
-											<img class="phImg" src="./images/icons8-ph计-96.png">
+											<img class="phImg" src="./images/icons8-temperature-96.png">
 											<div style="float: right" class="divTable">
 											<table>
 											<tr>
@@ -566,7 +534,7 @@
 											<div class="dtuplc">
 											<div class="dtu">
 											<div class="container11" id="container55" style="height: 100%;">
-											<img class="phImg" src="./images/icons8-ph计-96.png">
+											<img class="phImg" src="./images/icons8-循环-96.png">
 											<div style="float: right" class="divTable">
 											<table>
 											<tr>
@@ -583,7 +551,7 @@
 											<div class="dtuplc">
 											<div class="dtu">
 											<div class="container11" id="container66" style="height: 100%;">
-											<img class="phImg" src="./images/icons8-ph计-96.png">
+											<img class="phImg" src="./images/icons8-盐-96.png">
 											<div style="float: right" class="divTable">
 											<table>
 											<tr>
@@ -600,7 +568,7 @@
 											<div class="dtuplc">
 											<div class="dtu">
 											<div class="container11" id="container77" style="height: 100%;">
-											<img class="phImg" src="./images/icons8-ph计-96.png">
+											<img class="phImg" src="./images/icons8-climate-96.png">
 											<div style="float: right" class="divTable">
 											<table>
 											<tr>
@@ -622,32 +590,6 @@
 				}
 			});
 		}
-		function fullScreen() {
-			const element = document.documentElement; // 获取整个页面元素
-			if (!document.fullscreenElement) {
-				// 如果当前不是全屏状态，则请求全屏
-				if (element.requestFullscreen) {
-					element.requestFullscreen();
-				} else if (element.webkitRequestFullscreen) {
-					// 兼容性处理，针对某些浏览器
-					element.webkitRequestFullscreen();
-				} else if (element.msRequestFullscreen) {
-					// 兼容性处理，针对IE浏览器
-					element.msRequestFullscreen();
-				}
-			} else {
-				// 如果当前是全屏状态，则退出全屏
-				if (document.exitFullscreen) {
-					document.exitFullscreen();
-				} else if (document.webkitExitFullscreen) {
-					// 兼容性处理，针对某些浏览器
-					document.webkitExitFullscreen();
-				} else if (document.msExitFullscreen) {
-					// 兼容性处理，针对IE浏览器
-					document.msExitFullscreen();
-				}
-			}
-		}
 		init();
 
 	</script>