mescloud/src/main/resources/views/modules/mes/mesHeatProcessBoard.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>热加工数据实时看板</title>
	<script src="${ctxStatic}/jquery-1.11.3.min.js"></script>
	<style>
		* { margin: 0; padding: 0; box-sizing: border-box; }
		html, body { width: 100%; height: 100%; }
		body {
			font-family: "Microsoft YaHei", sans-serif;
			background: #04122b;
			background-image: radial-gradient(circle at 50% 0%, #0a2350 0%, #04122b 60%);
			color: #d6e6ff;
			overflow: auto;
			padding-bottom: 24px;
		}
		.bd-header {
			height: 64px; display: flex; align-items: center; justify-content: center;
			position: relative; border-bottom: 1px solid rgba(0,160,255,0.25);
		}
		.bd-title { font-size: 24px; letter-spacing: 4px; color: #5ad8ff; font-weight: bold; text-shadow: 0 0 12px rgba(0,180,255,0.6); }
		.bd-time { position: absolute; right: 24px; font-size: 14px; color: #8fb6e6; }
		.bd-status { position: absolute; left: 24px; font-size: 14px; }
		.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
		.dot-on { background: #25e29a; box-shadow: 0 0 8px #25e29a; }
		.dot-off { background: #ff5a6a; box-shadow: 0 0 8px #ff5a6a; }
		.section { margin: 18px 24px 0; }
		.section-title { font-size: 16px; color: #7fd6ff; letter-spacing: 2px; margin-bottom: 12px; border-left: 4px solid #2fa8ff; padding-left: 10px; }
		.cards { display: flex; flex-wrap: wrap; gap: 14px; }
		.card {
			flex: 1 1 200px; min-width: 180px; height: 130px; border-radius: 12px;
			background: linear-gradient(160deg, rgba(13,45,95,0.9), rgba(8,26,56,0.9));
			border: 1px solid rgba(0,160,255,0.35);
			display: flex; flex-direction: column; align-items: center; justify-content: center;
			position: relative; overflow: hidden;
		}
		.card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, transparent, #2fa8ff, transparent); }
		.card-label { font-size: 14px; color: #9cc4f0; margin-bottom: 12px; letter-spacing: 1px; }
		.card-value { font-size: 36px; font-weight: bold; color: #41e6c3; line-height: 1; text-shadow: 0 0 14px rgba(65,230,195,0.5); }
		.card-unit { font-size: 16px; color: #7fd6ff; margin-left: 4px; }
		.tc-pv .card-value { color: #ffb454; text-shadow: 0 0 14px rgba(255,180,84,0.5); }
		.tc-sp .card-value { color: #41e6c3; }
		.mon-pv .card-value { color: #5ab8ff; }
		.mon-sp .card-value { color: #ff7a9c; text-shadow: 0 0 14px rgba(255,122,156,0.5); }
		.bd-foot { text-align: center; color: #6f93c4; font-size: 13px; margin-top: 18px; }
	</style>
</head>
<body>
	<div class="bd-header">
		<span class="bd-status"><i id="connDot" class="dot dot-off"></i><span id="connText">未连接</span></span>
		<span class="bd-title">热加工数据实时监控看板</span>
		<span class="bd-time" id="nowTime"></span>
	</div>

	<div class="section">
		<div class="section-title">一区温度</div>
		<div class="cards">
			<div class="card tc-pv"><div class="card-label">一区温控 PV</div><div><span class="card-value" id="z1TcPv">--</span><span class="card-unit">℃</span></div></div>
			<div class="card tc-sp"><div class="card-label">一区温控 SP</div><div><span class="card-value" id="z1TcSp">--</span><span class="card-unit">℃</span></div></div>
			<div class="card mon-pv"><div class="card-label">一区监控 PV</div><div><span class="card-value" id="z1MonPv">--</span><span class="card-unit">℃</span></div></div>
			<div class="card mon-sp"><div class="card-label">一区监控 SP</div><div><span class="card-value" id="z1MonSp">--</span><span class="card-unit">℃</span></div></div>
		</div>
	</div>

	<div class="section">
		<div class="section-title">二区温度</div>
		<div class="cards">
			<div class="card tc-pv"><div class="card-label">二区温控 PV</div><div><span class="card-value" id="z2TcPv">--</span><span class="card-unit">℃</span></div></div>
			<div class="card tc-sp"><div class="card-label">二区温控 SP</div><div><span class="card-value" id="z2TcSp">--</span><span class="card-unit">℃</span></div></div>
			<div class="card mon-pv"><div class="card-label">二区监控 PV</div><div><span class="card-value" id="z2MonPv">--</span><span class="card-unit">℃</span></div></div>
			<div class="card mon-sp"><div class="card-label">二区监控 SP</div><div><span class="card-value" id="z2MonSp">--</span><span class="card-unit">℃</span></div></div>
		</div>
	</div>

	<div class="section">
		<div class="section-title">主驱动 / 产量 / 风机</div>
		<div class="cards">
			<div class="card tc-pv"><div class="card-label">主驱动运行频率</div><div><span class="card-value" id="runFreq">--</span><span class="card-unit">Hz</span></div></div>
			<div class="card tc-sp"><div class="card-label">主驱动设定频率</div><div><span class="card-value" id="setFreq">--</span><span class="card-unit">Hz</span></div></div>
			<div class="card mon-pv"><div class="card-label">入炉数</div><div><span class="card-value" id="furnaceCount">--</span></div></div>
			<div class="card mon-sp"><div class="card-label">风机转速-一区</div><div><span class="card-value" id="fan1">--</span></div></div>
			<div class="card mon-sp"><div class="card-label">风机转速-二区</div><div><span class="card-value" id="fan2">--</span></div></div>
		</div>
	</div>

	<div class="bd-foot">最近更新时间：<span id="dataTime">--</span> ｜ 每 5 秒自动刷新</div>

<script>
	var CTX = "${ctx}";
	function pad(n){ return n < 10 ? '0'+n : ''+n; }
	function updateClock(){
		var d = new Date();
		document.getElementById('nowTime').textContent =
			d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+' '+pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());
	}
	function setConn(ok){
		var dot = document.getElementById('connDot'), txt = document.getElementById('connText');
		if(ok){ dot.className='dot dot-on'; txt.textContent='采集正常'; }
		else { dot.className='dot dot-off'; txt.textContent='采集异常 / 无数据'; }
	}
	function setVal(id, val){
		var el = document.getElementById(id);
		if(el) el.textContent = (val===null||val===undefined||val==='') ? '--' : val;
	}
	var MAP = {
		z1TcPv: 'zone1TcPv', z1TcSp: 'zone1TcSp', z1MonPv: 'zone1MonPv', z1MonSp: 'zone1MonSp',
		z2TcPv: 'zone2TcPv', z2TcSp: 'zone2TcSp', z2MonPv: 'zone2MonPv', z2MonSp: 'zone2MonSp',
		runFreq: 'mainDriveRunFreq', setFreq: 'mainDriveSetFreq',
		furnaceCount: 'furnaceCount', fan1: 'fanSpeedZone1', fan2: 'fanSpeedZone2'
	};
	function loadData(){
		$.ajax({
			url: CTX + '/mes/mesHeatProcess/latestData',
			type: 'POST',
			dataType: 'json',
			success: function(data){
				if(!data || !data.id){ setConn(false); return; }
				for(var k in MAP){ setVal(k, data[MAP[k]]); }
				setVal('dataTime', data.createDate || '--');
				setConn(true);
			},
			error: function(){ setConn(false); }
		});
	}
	$(function(){
		updateClock();
		setInterval(updateClock, 1000);
		loadData();
		setInterval(loadData, 5000);
	});
</script>
</body>
</html>