mescloud/src/main/resources/views/modules/mes/mesQualityScreen.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>
	<style>
		* { box-sizing: border-box; }
		html, body {
			width: 100%;
			height: 100%;
			margin: 0;
			overflow: hidden;
			background: #06131f;
			color: #d8fbff;
			font-family: "Microsoft YaHei", Arial, sans-serif;
		}
		.quality-screen {
			position: relative;
			width: 100vw;
			height: 100vh;
			padding: clamp(12px, 1vw, 20px);
			background:
				linear-gradient(120deg, rgba(15, 92, 113, .18), transparent 36%),
				linear-gradient(250deg, rgba(32, 81, 150, .18), transparent 40%),
				linear-gradient(180deg, #071522 0%, #092034 52%, #06111d 100%);
		}
		.quality-screen:before {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background-image:
				linear-gradient(rgba(97, 219, 255, .045) 1px, transparent 1px),
				linear-gradient(90deg, rgba(97, 219, 255, .045) 1px, transparent 1px);
			background-size: 44px 44px;
		}
		.shell {
			position: relative;
			z-index: 1;
			display: grid;
			grid-template-rows: 72px 104px 1fr;
			gap: 14px;
			width: 100%;
			height: 100%;
			min-width: 1200px;
			min-height: 680px;
		}
		.header {
			display: grid;
			grid-template-columns: 1fr minmax(360px, 620px) 1fr;
			align-items: center;
		}
		.title {
			position: relative;
			text-align: center;
			font-size: clamp(30px, 2.25vw, 44px);
			font-weight: 700;
			color: #efffff;
			text-shadow: 0 0 18px rgba(61, 226, 255, .85);
			letter-spacing: 0;
		}
		.title:before,
		.title:after {
			content: "";
			position: absolute;
			top: 50%;
			width: 170px;
			height: 1px;
			background: linear-gradient(90deg, transparent, rgba(83, 221, 255, .95));
		}
		.title:before { right: calc(100% + 18px); }
		.title:after { left: calc(100% + 18px); transform: rotate(180deg); }
		.time {
			justify-self: end;
			color: #8bd9ee;
			font-size: 16px;
			white-space: nowrap;
		}
		.kpis {
			display: grid;
			grid-template-columns: repeat(6, minmax(0, 1fr));
			gap: 12px;
		}
		.kpi,
		.panel {
			position: relative;
			border: 1px solid rgba(72, 206, 255, .42);
			background: linear-gradient(180deg, rgba(9, 42, 68, .88), rgba(6, 24, 39, .78));
			box-shadow: inset 0 0 24px rgba(52, 194, 228, .13), 0 0 20px rgba(0, 148, 210, .08);
			overflow: hidden;
		}
		.kpi:before,
		.panel:before {
			content: "";
			position: absolute;
			inset: 0;
			border: 1px solid rgba(158, 238, 255, .08);
			pointer-events: none;
		}
		.kpi {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 14px 18px;
			min-width: 0;
		}
		.kpi-label {
			color: #9cc9d8;
			font-size: 14px;
			line-height: 20px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.kpi-value {
			margin-top: 8px;
			font-family: Impact, "Arial Narrow", sans-serif;
			font-size: clamp(30px, 2.2vw, 42px);
			line-height: 1;
			color: #45f1ff;
			text-shadow: 0 0 16px rgba(69, 241, 255, .5);
		}
		.kpi.warn .kpi-value { color: #ffce58; text-shadow: 0 0 16px rgba(255, 206, 88, .36); }
		.main {
			display: grid;
			grid-template-columns: minmax(0, 29fr) minmax(0, 42fr) minmax(0, 29fr);
			gap: 14px;
			min-height: 0;
			min-width: 0;
		}
		.column {
			display: grid;
			gap: 14px;
			min-height: 0;
			min-width: 0;
		}
		.left { grid-template-rows: 45% 55%; }
		.center { grid-template-rows: 58% 42%; }
		.right { grid-template-rows: 36% 64%; }
		.panel-title {
			height: 42px;
			display: flex;
			align-items: center;
			padding: 0 16px;
			border-bottom: 1px solid rgba(88, 211, 255, .23);
			color: #f0fdff;
			font-size: 17px;
			font-weight: 700;
		}
		.panel-title:before {
			content: "";
			width: 4px;
			height: 18px;
			margin-right: 9px;
			background: #3be7ff;
			box-shadow: 0 0 12px #3be7ff;
		}
		.chart {
			width: 100%;
			height: calc(100% - 42px);
			min-height: 0;
			min-width: 0;
		}
		.dual .chart,
		.quad .chart {
			height: 100%;
		}
		.dual {
			display: grid;
			grid-template-columns: 1fr 1fr;
			height: calc(100% - 42px);
			min-height: 0;
			min-width: 0;
		}
		.quad {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			height: calc(100% - 42px);
			min-height: 0;
			min-width: 0;
		}
		.table-wrap {
			height: calc(100% - 42px);
			padding: 10px 12px 12px;
			overflow: hidden;
		}
		.table-head,
		.table-row {
			display: grid;
			grid-template-columns: 72px 1.05fr .8fr 1.25fr 74px 82px;
			gap: 10px;
			align-items: center;
			min-width: 0;
		}
		.table-head {
			height: 30px;
			color: #7abbd0;
			font-size: 13px;
			border-bottom: 1px solid rgba(96, 202, 255, .18);
		}
		.table-body {
			height: calc(100% - 30px);
			overflow-y: auto;
			scrollbar-width: thin;
			scrollbar-color: rgba(77, 221, 255, .55) rgba(12, 52, 76, .38);
		}
		.table-body::-webkit-scrollbar {
			width: 6px;
		}
		.table-body::-webkit-scrollbar-track {
			background: rgba(12, 52, 76, .38);
		}
		.table-body::-webkit-scrollbar-thumb {
			background: rgba(77, 221, 255, .55);
			border-radius: 6px;
		}
		.table-row {
			height: 38px;
			color: #d9f8ff;
			font-size: 13px;
			border-bottom: 1px solid rgba(105, 199, 232, .08);
		}
		.cell {
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.tag {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 58px;
			height: 22px;
			padding: 0 8px;
			border: 1px solid rgba(79, 219, 255, .34);
			background: rgba(22, 118, 147, .25);
			color: #9ff4ff;
			font-size: 12px;
		}
		.empty {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #6fa9bb;
			font-size: 14px;
		}
		@media (max-aspect-ratio: 15/9) {
			.shell { min-width: 1100px; }
			.main { grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr); }
			.table-head, .table-row { grid-template-columns: 66px 1fr .75fr 1fr 68px 76px; gap: 8px; }
		}
	</style>
</head>
<body>
<div class="quality-screen">
	<div class="shell">
		<div class="header">
			<div></div>
			<div class="title">质量管理看板</div>
			<div class="time" id="timeText"></div>
		</div>

		<div class="kpis">
			<div class="kpi"><div class="kpi-label">今日过程检查</div><div class="kpi-value" id="checkCount">0</div></div>
			<div class="kpi"><div class="kpi-label">今日首件检查</div><div class="kpi-value" id="firstCheckCount">0</div></div>
			<div class="kpi warn"><div class="kpi-label">今日NG数量</div><div class="kpi-value" id="ngCount">0</div></div>
			<div class="kpi"><div class="kpi-label">今日返修数量</div><div class="kpi-value" id="repairCount">0</div></div>
			<div class="kpi warn"><div class="kpi-label">今日报废数量</div><div class="kpi-value" id="scrapCount">0</div></div>
			<div class="kpi warn"><div class="kpi-label">今日未闭环返修</div><div class="kpi-value" id="pendingRepairCount">0</div></div>
		</div>

		<div class="main">
			<div class="column left">
				<div class="panel">
					<div class="panel-title">近7日质量趋势</div>
					<div class="chart" id="trendChart"></div>
				</div>
				<div class="panel">
					<div class="panel-title">过程检查状态</div>
					<div class="chart" id="checkStatusChart"></div>
				</div>
			</div>

			<div class="column center">
				<div class="panel">
					<div class="panel-title">最新质量异常</div>
					<div class="table-wrap">
						<div class="table-head">
							<div>类型</div><div>产品码</div><div>工位</div><div>内容</div><div>状态</div><div>时间</div>
						</div>
						<div class="table-body" id="issueList"></div>
					</div>
				</div>
				<div class="panel">
					<div class="panel-title">检查类型与首件状态</div>
					<div class="dual">
						<div class="chart" id="checkTypeChart"></div>
						<div class="chart" id="firstStatusChart"></div>
					</div>
				</div>
			</div>

			<div class="column right">
				<div class="panel">
					<div class="panel-title">责任工位TOP</div>
					<div class="chart" id="stationTopChart"></div>
				</div>
				<div class="panel">
					<div class="panel-title">NG、返修与报废分析</div>
					<div class="quad">
						<div class="chart" id="ngTypeChart"></div>
						<div class="chart" id="repairStateChart"></div>
						<div class="chart" id="repairResultChart"></div>
						<div class="chart" id="scrapReasonChart"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="${ctxStatic}/jquery-1.11.3.min.js"></script>
<script src="${ctxStatic}/leaflet/js/echarts.min.js"></script>
<script>
	var charts = {};
	var colors = ['#37e4ff', '#ffcf5a', '#65ffb4', '#ff7676', '#9c8cff', '#58a6ff', '#f28bff', '#b7e75b'];
	var issueScrollTimer = null;
	var issueScrollPaused = false;

	function initCharts() {
		['trendChart', 'checkStatusChart', 'checkTypeChart', 'firstStatusChart', 'stationTopChart', 'ngTypeChart', 'repairStateChart', 'repairResultChart', 'scrapReasonChart'].forEach(function(id) {
			charts[id] = echarts.init(document.getElementById(id));
		});
	}

	function chartTextStyle(size) {
		return { color: '#a8d8e8', fontSize: size || 12 };
	}

	function setPie(id, title, data) {
		charts[id].setOption({
			color: colors,
			tooltip: { trigger: 'item' },
			title: { text: title, left: 'center', top: 'center', textStyle: { color: '#e9fbff', fontSize: 14, fontWeight: 400 } },
			series: [{
				type: 'pie',
				radius: ['50%', '72%'],
				center: ['50%', '50%'],
				avoidLabelOverlap: true,
				label: { color: '#cceff8', formatter: '{b}\n{c}' },
				labelLine: { lineStyle: { color: 'rgba(180,235,255,.45)' } },
				data: data || []
			}]
		});
	}

	function setBar(id, names, values, horizontal) {
		var option = {
			color: ['#39e7ff'],
			grid: { left: horizontal ? 88 : 42, right: 22, top: 24, bottom: 34 },
			tooltip: { trigger: 'axis' },
			xAxis: { type: horizontal ? 'value' : 'category', data: horizontal ? null : names, axisLabel: chartTextStyle(11), axisLine: { lineStyle: { color: '#286982' } }, splitLine: { lineStyle: { color: 'rgba(95,196,230,.12)' } } },
			yAxis: { type: horizontal ? 'category' : 'value', data: horizontal ? names : null, axisLabel: chartTextStyle(11), axisLine: { lineStyle: { color: '#286982' } }, splitLine: { lineStyle: { color: 'rgba(95,196,230,.12)' } } },
			series: [{ type: 'bar', data: values, barWidth: horizontal ? 12 : 16, itemStyle: { borderRadius: horizontal ? [0, 8, 8, 0] : [8, 8, 0, 0] } }]
		};
		charts[id].setOption(option);
	}

	function render(data) {
		var summary = data.summary || {};
		['checkCount', 'firstCheckCount', 'ngCount', 'repairCount', 'scrapCount', 'pendingRepairCount'].forEach(function(key) {
			$('#' + key).text(summary[key] || 0);
		});

		var trend = data.trend || {};
		charts.trendChart.setOption({
			color: ['#3de7ff', '#ffcf5a', '#66ffb4', '#ff6f6f'],
			tooltip: { trigger: 'axis' },
			legend: { top: 10, right: 14, textStyle: chartTextStyle(12), data: ['检查', 'NG', '返修', '报废'] },
			grid: { left: 42, right: 22, top: 48, bottom: 34 },
			xAxis: { type: 'category', data: data.days || [], axisLabel: chartTextStyle(12), axisLine: { lineStyle: { color: '#286982' } } },
			yAxis: { type: 'value', axisLabel: chartTextStyle(12), splitLine: { lineStyle: { color: 'rgba(95,196,230,.12)' } } },
			series: [
				{ name: '检查', type: 'line', smooth: true, data: trend.checks || [] },
				{ name: 'NG', type: 'line', smooth: true, data: trend.ng || [] },
				{ name: '返修', type: 'bar', barWidth: 12, data: trend.repair || [] },
				{ name: '报废', type: 'bar', barWidth: 12, data: trend.scrap || [] }
			]
		});

		setPie('checkStatusChart', '检查状态', data.checkStatus);
		setPie('checkTypeChart', '检查类型', data.checkType);
		setPie('firstStatusChart', '首件状态', data.firstCheckStatus);
		setPie('ngTypeChart', 'NG类型', data.ngType);
		setPie('repairStateChart', '返修状态', data.repairState);
		setPie('repairResultChart', '返修结果', data.repairResult);

		var station = splitChartData(data.stationTop);
		setBar('stationTopChart', station.names, station.values, true);
		var scrap = splitChartData(data.scrapReasonTop);
		setBar('scrapReasonChart', scrap.names, scrap.values, true);
		renderIssues(data.latestIssues || []);
	}

	function splitChartData(list) {
		var names = [], values = [];
		(list || []).forEach(function(item) {
			names.push(item.name);
			values.push(item.value);
		});
		return { names: names, values: values };
	}

	function renderIssues(list) {
		var $box = $('#issueList');
		if (!list.length) {
			$box.html('<div class="empty">最近7天暂无质量异常</div>');
			return;
		}
		var html = '';
		list.forEach(function(item) {
			html += '<div class="table-row">'
				+ '<div class="cell">' + escapeHtml(item.type) + '</div>'
				+ '<div class="cell">' + escapeHtml(item.sn) + '</div>'
				+ '<div class="cell">' + escapeHtml(item.station) + '</div>'
				+ '<div class="cell">' + escapeHtml(item.content) + '</div>'
				+ '<div class="cell"><span class="tag">' + escapeHtml(item.state) + '</span></div>'
				+ '<div class="cell">' + escapeHtml(item.time) + '</div>'
				+ '</div>';
		});
		$box.html(html);
		startIssueAutoScroll();
	}

	function startIssueAutoScroll() {
		var box = document.getElementById('issueList');
		if (issueScrollTimer) {
			clearInterval(issueScrollTimer);
			issueScrollTimer = null;
		}
		if (!box || box.scrollHeight <= box.clientHeight) {
			if (box) {
				box.scrollTop = 0;
			}
			return;
		}
		issueScrollTimer = setInterval(function() {
			if (issueScrollPaused) {
				return;
			}
			if (box.scrollTop + box.clientHeight >= box.scrollHeight - 2) {
				box.scrollTop = 0;
			} else {
				box.scrollTop += 1;
			}
		}, 80);
	}

	function escapeHtml(text) {
		return String(text == null ? '' : text).replace(/[&<>"']/g, function(ch) {
			return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch];
		});
	}

	function loadData() {
		$.post('${ctx}/mes/mesProduct/qualityScreenData', function(ret) {
			if (ret && ret.result === 'true') {
				render(ret.data || {});
			}
		});
	}

	function updateTime() {
		var d = new Date();
		var pad = function(n) { return n < 10 ? '0' + n : n; };
		$('#timeText').text(d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes()) + ':' + pad(d.getSeconds()));
	}

	$(function() {
		initCharts();
		updateTime();
		loadData();
		setInterval(updateTime, 1000);
		setInterval(loadData, 60000);
		$('#issueList').on('mouseenter', function() { issueScrollPaused = true; });
		$('#issueList').on('mouseleave', function() { issueScrollPaused = false; });
		$(window).on('resize', function() {
			Object.keys(charts).forEach(function(key) { charts[key].resize(); });
			startIssueAutoScroll();
		});
	});
</script>
</body>
</html>