mescloud/src/main/resources/views/modules/mes/mesMaterialScreen.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: #061521;
			color: #ddfbff;
			font-family: "Microsoft YaHei", Arial, sans-serif;
		}
		.screen {
			position: relative;
			width: 1920px;
			height: 1080px;
			padding: 16px;
			transform-origin: left top;
			overflow: hidden;
			background:
				linear-gradient(130deg, rgba(11, 107, 114, .2), transparent 38%),
				linear-gradient(235deg, rgba(48, 96, 147, .18), transparent 42%),
				linear-gradient(180deg, #071623 0%, #092235 52%, #06121e 100%);
		}
		.screen:before {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background-image:
				linear-gradient(rgba(94, 222, 255, .045) 1px, transparent 1px),
				linear-gradient(90deg, rgba(94, 222, 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%;
		}
		.header {
			display: grid;
			grid-template-columns: 1fr 600px 1fr;
			align-items: center;
		}
		.title {
			position: relative;
			text-align: center;
			font-size: 36px;
			font-weight: 700;
			color: #f1ffff;
			text-shadow: 0 0 18px rgba(61, 226, 255, .85);
		}
		.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: #8edbef;
			font-size: 16px;
			white-space: nowrap;
		}
		.kpis {
			display: grid;
			grid-template-columns: repeat(8, minmax(0, 1fr));
			gap: 12px;
		}
		.kpi,
		.panel {
			position: relative;
			border: 1px solid rgba(72, 206, 255, .42);
			background: linear-gradient(180deg, rgba(9, 43, 68, .9), 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: 12px 14px;
			min-width: 0;
		}
		.kpi-label {
			color: #a1cfdb;
			font-size: 13px;
			line-height: 18px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.kpi-value {
			margin-top: 8px;
			font-family: Impact, "Arial Narrow", sans-serif;
			font-size: 32px;
			line-height: 1;
			color: #45f1ff;
			text-shadow: 0 0 16px rgba(69, 241, 255, .5);
		}
		.kpi.warn .kpi-value { color: #ffcf5b; text-shadow: 0 0 16px rgba(255, 207, 91, .38); }
		.main {
			display: grid;
			grid-template-columns: minmax(0, 30fr) minmax(0, 40fr) minmax(0, 30fr);
			gap: 14px;
			min-width: 0;
			min-height: 0;
		}
		.column {
			display: grid;
			gap: 14px;
			min-width: 0;
			min-height: 0;
		}
		.left { grid-template-rows: 44% 28% 28%; }
		.center { grid-template-rows: 58% 42%; }
		.right { grid-template-rows: 35% 32% 33%; }
		.panel-title {
			height: 42px;
			display: flex;
			align-items: center;
			padding: 0 16px;
			border-bottom: 1px solid rgba(88, 211, 255, .23);
			color: #f1fdff;
			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-width: 0;
			min-height: 0;
		}
		.dual, .quad {
			display: grid;
			height: calc(100% - 42px);
			min-width: 0;
			min-height: 0;
		}
		.dual { grid-template-columns: 1fr 1fr; }
		.quad { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
		.dual .chart, .quad .chart { height: 100%; }
		.table-wrap {
			height: calc(100% - 42px);
			padding: 10px 12px 12px;
			overflow: hidden;
		}
		.scroll-body {
			height: calc(100% - 30px);
			overflow-y: auto;
			scrollbar-width: thin;
			scrollbar-color: rgba(77, 221, 255, .55) rgba(12, 52, 76, .38);
		}
		.scroll-body::-webkit-scrollbar { width: 6px; }
		.scroll-body::-webkit-scrollbar-track { background: rgba(12, 52, 76, .38); }
		.scroll-body::-webkit-scrollbar-thumb { background: rgba(77, 221, 255, .55); border-radius: 6px; }
		.table-head,
		.table-row {
			display: grid;
			gap: 10px;
			align-items: center;
			min-width: 0;
		}
		.stock-table .table-head,
		.stock-table .table-row {
			grid-template-columns: 1.15fr .75fr .9fr .8fr 70px .9fr;
		}
		.action-table .table-head,
		.action-table .table-row {
			grid-template-columns: 70px 1.15fr .9fr .75fr 62px 78px;
		}
		.expire-table .table-head,
		.expire-table .table-row {
			grid-template-columns: 1fr .85fr .75fr 62px .85fr;
		}
		.table-head {
			height: 30px;
			color: #7dbdd0;
			font-size: 13px;
			border-bottom: 1px solid rgba(96, 202, 255, .18);
		}
		.table-row {
			height: 36px;
			color: #dff8ff;
			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: 54px;
			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;
		}
	</style>
</head>
<body>
<div class="screen" id="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="materialCount">0</div></div>
			<div class="kpi"><div class="kpi-label">库存批次数</div><div class="kpi-value" id="stockBatchCount">0</div></div>
			<div class="kpi"><div class="kpi-label">当前库存总量</div><div class="kpi-value" id="stockTotal">0</div></div>
			<div class="kpi"><div class="kpi-label">今日领料入库</div><div class="kpi-value" id="todayInbound">0</div></div>
			<div class="kpi"><div class="kpi-label">今日领料单</div><div class="kpi-value" id="todayPickBill">0</div></div>
			<div class="kpi"><div class="kpi-label">关联生产订单</div><div class="kpi-value" id="moCount">0</div></div>
			<div class="kpi warn"><div class="kpi-label">未关联订单</div><div class="kpi-value" id="unlinkedBatch">0</div></div>
			<div class="kpi warn"><div class="kpi-label">领料下推失败</div><div class="kpi-value" id="pickFailCount">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="quad">
						<div class="chart" id="pickResultChart"></div>
						<div class="chart" id="pickChannelChart"></div>
						<div class="chart" id="stockMoStatusChart"></div>
						<div class="chart" id="pickMaterialMixChart"></div>
					</div>
				</div>
				<div class="panel">
					<div class="panel-title">线边物料TOP</div>
					<div class="chart" id="pickMaterialTopChart"></div>
				</div>
			</div>

			<div class="column center">
				<div class="panel">
					<div class="panel-title">线边库存明细</div>
					<div class="table-wrap stock-table">
						<div class="table-head"><div>物料</div><div>ERP</div><div>批次</div><div>生产订单</div><div>数量</div><div>领料单号</div></div>
						<div class="scroll-body" id="stockList"></div>
					</div>
				</div>
				<div class="panel">
					<div class="panel-title">最新领料动态</div>
					<div class="table-wrap action-table">
						<div class="table-head"><div>类型</div><div>物料</div><div>批次</div><div>状态</div><div>数量</div><div>时间</div></div>
						<div class="scroll-body" id="actionList"></div>
					</div>
				</div>
			</div>

			<div class="column right">
				<div class="panel">
					<div class="panel-title">生产订单库存TOP</div>
					<div class="chart" id="moTopChart"></div>
				</div>
				<div class="panel">
					<div class="panel-title">物料库存TOP</div>
					<div class="chart" id="materialTopChart"></div>
				</div>
				<div class="panel">
					<div class="panel-title">未关联订单库存</div>
					<div class="table-wrap expire-table">
						<div class="table-head"><div>物料</div><div>批次</div><div>领料单</div><div>数量</div><div>入库时间</div></div>
						<div class="scroll-body" id="unlinkedList"></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 scrollTimers = {};
	var scrollPaused = {};

	function initCharts() {
		['trendChart', 'pickResultChart', 'pickChannelChart', 'stockMoStatusChart', 'pickMaterialMixChart',
			'pickMaterialTopChart', 'moTopChart', 'materialTopChart'].forEach(function(id) {
			charts[id] = echarts.init(document.getElementById(id));
		});
	}

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

	function render(data) {
		var summary = data.summary || {};
		['materialCount', 'stockBatchCount', 'stockTotal', 'todayInbound', 'todayPickBill', 'moCount', 'unlinkedBatch', 'pickFailCount'].forEach(function(key) {
			$('#' + key).text(summary[key] || 0);
		});
		renderTrend(data.days || [], data.trend || {});
		setPie('pickResultChart', '下推结果', data.pickResult);
		setPie('pickChannelChart', '领料渠道', data.pickChannel);
		setPie('stockMoStatusChart', '订单关联', data.stockMoStatus);
		setPie('pickMaterialMixChart', '物料占比', data.pickMaterialMix);
		var materialTop = splitData(data.stockByMaterial);
		setBar('pickMaterialTopChart', materialTop.names, materialTop.values);
		var moTop = splitData(data.stockByMo);
		setBar('moTopChart', moTop.names, moTop.values);
		setBar('materialTopChart', materialTop.names, materialTop.values);
		renderStock(data.stockList || []);
		renderActions(data.latestActions || []);
		renderUnlinked(data.unlinkedList || []);
	}

	function renderTrend(days, trend) {
		charts.trendChart.setOption({
			color: ['#3de7ff', '#ffcf5a', '#66ffb4', '#ff6f6f'],
			tooltip: { trigger: 'axis' },
			legend: { top: 10, right: 14, textStyle: textStyle(12), data: ['领料入库', '线边出库', '领料单', '生产订单'] },
			grid: { left: 48, right: 22, top: 48, bottom: 34 },
			xAxis: { type: 'category', data: days, axisLabel: textStyle(12), axisLine: { lineStyle: { color: '#286982' } } },
			yAxis: { type: 'value', axisLabel: textStyle(12), splitLine: { lineStyle: { color: 'rgba(95,196,230,.12)' } } },
			series: [
				{ name: '领料入库', type: 'bar', barWidth: 12, data: trend.inbound || [] },
				{ name: '线边出库', type: 'bar', barWidth: 12, data: trend.outbound || [] },
				{ name: '领料单', type: 'line', smooth: true, data: trend.pickBill || [] },
				{ name: '生产订单', type: 'line', smooth: true, data: trend.moBill || [] }
			]
		});
	}

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

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

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

	function renderStock(list) {
		renderRows('stockList', list, function(item) {
			return '<div class="table-row">'
				+ cell(item.material) + cell(item.erpSn) + cell(item.batchSn) + cell(item.moBillNo) + cell(item.nums) + cell(item.pickBillNo)
				+ '</div>';
		}, '暂无ERP领料线边库存');
	}

	function renderActions(list) {
		renderRows('actionList', list, function(item) {
			return '<div class="table-row">'
				+ cell(item.type) + cell(item.material) + cell(item.batch) + '<div class="cell"><span class="tag">' + escapeHtml(item.state) + '</span></div>' + cell(item.nums) + cell(item.time)
				+ '</div>';
		}, '最近7天暂无领料动态');
	}

	function renderUnlinked(list) {
		renderRows('unlinkedList', list, function(item) {
			return '<div class="table-row">'
				+ cell(item.material) + cell(item.batchSn) + cell(item.pickBillNo) + cell(item.nums) + cell(item.inboundTime)
				+ '</div>';
		}, '暂无未关联订单库存');
	}

	function renderRows(id, list, renderer, emptyText) {
		var html = '';
		(list || []).forEach(function(item) { html += renderer(item); });
		$('#' + id).html(html || '<div class="empty">' + emptyText + '</div>');
		startAutoScroll(id, 80);
	}

	function cell(value) {
		return '<div class="cell" title="' + escapeHtml(value) + '">' + escapeHtml(value) + '</div>';
	}

	function startAutoScroll(id, speed) {
		var box = document.getElementById(id);
		if (scrollTimers[id]) {
			clearInterval(scrollTimers[id]);
			scrollTimers[id] = null;
		}
		if (!box || box.scrollHeight <= box.clientHeight) {
			if (box) { box.scrollTop = 0; }
			return;
		}
		scrollTimers[id] = setInterval(function() {
			if (scrollPaused[id]) { return; }
			if (box.scrollTop + box.clientHeight >= box.scrollHeight - 2) {
				box.scrollTop = 0;
			} else {
				box.scrollTop += 1;
			}
		}, speed);
	}

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

	function loadData() {
		$.post('${ctx}/mes/mesMaterial/materialScreenData', 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() {
		fitScreen();
		initCharts();
		updateTime();
		loadData();
		setInterval(updateTime, 1000);
		setInterval(loadData, 60000);
		$('#stockList, #actionList, #unlinkedList').on('mouseenter', function() { scrollPaused[this.id] = true; });
		$('#stockList, #actionList, #unlinkedList').on('mouseleave', function() { scrollPaused[this.id] = false; });
		$(window).on('resize', function() {
			fitScreen();
			Object.keys(charts).forEach(function(key) { charts[key].resize(); });
			['stockList', 'actionList', 'unlinkedList'].forEach(function(id) { startAutoScroll(id, 80); });
		});
	});

	function fitScreen() {
		var scaleX = window.innerWidth / 1920;
		var scaleY = window.innerHeight / 1080;
		$('#screen').css({
			transform: 'scale(' + scaleX + ',' + scaleY + ')',
			transformOrigin: 'left top'
		});
	}
</script>
</body>
</html>