wudingsheng
/
sf_bigScreen


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据大屏</title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	</head>
	<body>
	<div style="position: absolute;">
		<img src="./images/logo2.png" class="logo_ht">
		<img src="./images/logo1.png" class="logo1">
	</div>
		<header>

			切削液智健康控制系统
			<span id=localtime style=" font-size:35px; position: absolute; right: 30px; top:-20px; "></span>
		</header>
		<div id="content">
			<div class="content_left">
				<!--<div class="dtuplc">
					<div class="dtu">
						<div class="container11" id="container11" 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 class="dtuplc">
					<div class="dtu">
						<div class="container11" id="container22" 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="container33" 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="container44" 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="container55" 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">TDS值</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="dtuplc">
					<div class="dtu">
						<div class="container11" id="container66" 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="container77" 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="container88" 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 class="content_center">
				<div class="dtuplc" style="position: relative;height: 125px;width: 20%;margin: 8% 20% 0% 10%;    border-radius: 22px;">
					<span class="dtuplcSpan">良好</span>
				</div>
				<div style="float: right" class="divTable">
					<table>
						<tr>
							<td class="zhi1">设备正常运行时间：<span class="span">1.1 小时</span></td>
						</tr>
						<tr >
							<td class="zhi1">设备距离保养时间：<span class="span">1.1 天</span></td>
						</tr>
					</table>
				</div>

				<img class="phImg" style="margin: -3% 20% 0% 10%;" src="./images/图片1.png">
				<!--<div class="dtuplc" style="transform: perspective(200px) rotateX(30deg);float:right;position: relative;height: 19px;width: 20%;margin-top: 21%;margin-right: 4%;box-shadow: inset 5px 10px 30px 30px #2C58A6;">
				</div>-->
				<div class="dtuplc" style="float:right;position: relative;height: 65px;width: 20%;margin-top: 23%;margin-right: 4%;box-shadow: inset 5px 10px 30px 30px #2C58A6;">
					<span class="dtuplcSpan" style="font-size: 30px;">21.5 ℃</span>
				</div>
				<div style="float:right;margin-right: 27%;margin-top: -12%;">
					<div class="rectangle"></div>
					<div class="rectangle" style="margin-top: 1%"></div>
				</div>

				<div class="dtuplc" style="position: relative;height: 65px;width: 20%;margin: 0 20% 0% 10%;box-shadow: inset 5px 10px 30px 30px #2C58A6;">
					<span class="dtuplcSpan" style="font-size: 30px;">制冷模式</span>
				</div>
			</div>
			<div class="content_right">
				<div class="dtuplc" style="height: 220px;margin-top: 5%;">
					<span style="font-size: 33px;">设备状态</span>
					<table class="device">
						<tr>
							<td style="padding-left: 10%;"><sapn class="deviceStatus" >水流情况</sapn></td>
							<td><sapn class="tdSpan">正常</sapn></td>
						</tr>
						<tr>
							<td style="padding-left: 10%;"><sapn class="deviceStatus">排压情况</sapn></td>
							<td><sapn class="tdSpan">正常</sapn></td>
						</tr>
						<tr>
							<td style="padding-left: 10%;"><sapn class="deviceStatus">吸压情况</sapn></td>
							<td><sapn class="tdSpan">正常</sapn></td>
						</tr>
					</table>
				</div>
				<div class="dtuplc1">
					<div class="dtu">
						<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>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="dtuplc1">
					<div class="dtu">
						<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>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="dtuplc1">
					<div class="dtu">
						<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">盘管温度正常</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="dtuplc1">
					<div class="dtu">
						<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>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
		<!--遮罩层-->
		<div class="bgPop"></div>
		<!--弹出框-->
		<div class="pop">
		    <div class="pop-top">
		        报警记录
		        <span class="pop-close">Ｘ</span>
		    </div>
		    <div class="pop-content">
		        <table class="panel-table" bordercolor="#deefff" border="1">
                    <thead bgcolor="#971212" align="center" >
                        <tr height="38">
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
		    </div>
		    <div class="pop-foot">
		        <input type="button" value="确定" class="pop-cancel pop-close">
		    </div>
		</div>
		<script>
		    $(document).ready(function () {
		        $('.pop-close').click(function () {
		            $('.bgPop,.pop').hide();
		        });
		        $('.click_pop').click(function () {
		            $('.bgPop,.pop').show();
		        });
		    })
		
		</script>
		<!--遮罩层-->
		<div class="bgPop2"></div>
		<!--弹出框-->
		<div class="pop2">
		    <div class="pop-top">
		        历史记录
		        <span class="pop-close">Ｘ</span>
		    </div>
		    <div class="pop-content">
		        <table class="panel-table" bordercolor="#deefff" border="1">
                    <thead bgcolor="#10aaa5" align="center" >
                        <tr height="38">
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                            <th>字段</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    
                    <tr class="aaa" style="font-size: 16px;" align="center" >
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
		    </div>
		    <div class="pop-foot">
		        <input type="button" value="确定" class="pop-cancel pop-close">
		    </div>
		</div>
		<script>
		    $(document).ready(function () {
		        $('.pop-close').click(function () {
		            $('.bgPop2,.pop2').hide();
		        });
		        $('.click_pop2').click(function () {
		            $('.bgPop2,.pop2').show();
		        });
		    })
		
		</script>
		<!--遮罩层-->
		<div class="bgPop3"></div>
		<!--弹出框-->
		<div class="pop3">
		    <div class="pop-top">
		        组态应用
		        <span class="pop-close">Ｘ</span>
		    </div>
		    <div class="pop-content">
		        组态应用
		    </div>
		    <div class="pop-foot">
		        <input type="button" value="确定" class="pop-cancel pop-close">
		    </div>
		</div>
		<script type="text/javascript">
		// 假设设备信息的容器元素是一个 <div> 标签，并具有类名 "data_bottom"
		const content_left = document.querySelector('.content_left');
		function init(){

			callAPI();
			// 首次调用函数开始刷新
			/*setInterval(function() {
				location.reload(true);
			}, 10000); // 设置10秒钟的定时器*/
		}


		function callAPI() {

			$.ajax({
				url:"/data",
				type: "POST", // 指定请求类型为 POST
				contentType: "application/json", // 设置请求的内容类型为 JSON
				dataType: "JSON",
				success:function(resp){
					// 获取接口返回的设备信息数组
					const datas = resp;
					content_left.innerHTML=`<div class="dtuplc">
											<div class="dtu">
											<div class="container11" id="container11" style="height: 100%;">
											<img class="phImg" src="./images/icons8-ph计-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.ph}</td>
											</tr>
											<tr class="tr">
											<td class="ph">PH值</td>
											</tr>
											</table>
											</div>
											</div>
											</div>
											</div>
											<div class="dtuplc">
											<div class="dtu">
											<div class="container11" id="container22" style="height: 100%;">
											<img class="phImg" src="./images/icons8-氧-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.rjy}</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="container33" style="height: 100%;">
											<img class="phImg" src="./images/icons8-lightning-bolt-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.ddl}</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="container88" style="height: 100%;">
											<img class="phImg" src="./images/icons8-电阻-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.dzl}</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="container44" style="height: 100%;">
											<img class="phImg" src="./images/icons8-temperature-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.wdz}</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="container55" style="height: 100%;">
											<img class="phImg" src="./images/icons8-循环-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.tds}</td>
											</tr>
											<tr class="tr">
											<td class="ph">TDS值</td>
											</tr>
											</table>
											</div>
											</div>
											</div>
											</div>
											<div class="dtuplc">
											<div class="dtu">
											<div class="container11" id="container66" style="height: 100%;">
											<img class="phImg" src="./images/icons8-盐-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.ryz}</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="container77" style="height: 100%;">
											<img class="phImg" src="./images/icons8-climate-96.png">
											<div style="float: right" class="divTable">
											<table>
											<tr>
											<td class="zhi">${datas.zdz}</td>
											</tr>
											<tr class="tr">
											<td class="ph">浊度值</td>
											</tr>
											</table>
											</div>
											</div>
											</div>
											</div>
											`;


				}
			});
		}
		init();

	</script>
		<script type="text/javascript" src="js/jquery.min.js"></script>		
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/china.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/map.js"></script>
		<script type="text/javascript" src="js/times.js"></script>
		<script type="text/javascript" src="js/DTU.js"></script>
		<script type="text/javascript" src="js/PLC.js"></script>
		<script type="text/javascript" src="js/online.js"></script>
		<script type="text/javascript" src="js/industry.js"></script>
		<script type="text/javascript" src="js/data.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</body>
</html>