mes-199-0Y7A
/
mescloud


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
							<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>MES工位加工记录统计大屏</title>
	<link rel="stylesheet" href="${ctxStatic}/screen/oprno-record-screen.css?v=202506244">
	<style>
		.screen-header .header-left-tools {
			justify-self: start;
			display: flex;
			align-items: center;
		}

		.scope-tab-group {
			display: inline-flex;
			padding: 4px;
			border: 1px solid rgba(0, 143, 253, 0.34);
			border-radius: 6px;
			background: rgba(4, 20, 45, 0.78);
			box-shadow: inset 0 0 24px rgba(0, 143, 253, 0.1);
		}

		.scope-tab {
			min-width: 112px;
			height: 40px;
			padding: 0 16px;
			border: none;
			border-radius: 4px;
			background: transparent;
			color: #9ad8ff;
			font-size: 18px;
			font-family: inherit;
			cursor: pointer;
			transition: color 0.2s, background 0.2s, box-shadow 0.2s;
		}

		.scope-tab.is-active {
			color: #fff;
			background: linear-gradient(180deg, rgba(64, 222, 120, 0.32), rgba(0, 143, 253, 0.24));
			box-shadow: 0 0 14px rgba(64, 222, 120, 0.22);
		}

		.scope-tab:not(.is-active):hover {
			color: #d8f4ff;
			background: rgba(0, 143, 253, 0.16);
		}

		.main-grid-wrap {
			position: relative;
			display: flex;
			align-items: stretch;
			height: 770px;
			margin-top: 22px;
		}

		.main-grid-wrap .side-config-panel {
			width: 470px;
			flex-shrink: 0;
			overflow: hidden;
			transition: width 0.28s ease, opacity 0.28s ease, margin 0.28s ease;
		}

		.main-grid-wrap.is-folded .side-config-panel {
			width: 0;
			opacity: 0;
			margin-right: 0;
			pointer-events: none;
		}

		.config-fold-trigger {
			position: relative;
			z-index: 6;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 24px;
			margin: 0 10px 0 0;
			align-self: center;
			height: 136px;
			padding: 0;
			border: 1px solid rgba(0, 246, 255, 0.38);
			border-radius: 0 6px 6px 0;
			background: linear-gradient(180deg, rgba(5, 37, 78, 0.96), rgba(5, 25, 54, 0.92));
			box-shadow: inset 0 0 20px rgba(0, 143, 253, 0.14), 0 0 16px rgba(0, 143, 253, 0.18);
			cursor: pointer;
			color: #00f6ff;
			font-size: 22px;
			font-family: inherit;
			line-height: 1;
		}

		.config-fold-trigger:hover {
			border-color: rgba(64, 222, 120, 0.55);
			color: #40de78;
			box-shadow: inset 0 0 24px rgba(64, 222, 120, 0.12), 0 0 18px rgba(64, 222, 120, 0.2);
		}

		.config-fold-trigger .fold-icon {
			display: block;
			font-size: 28px;
			font-weight: 700;
			line-height: 1;
			transition: transform 0.28s ease;
		}

		.config-fold-trigger .fold-label {
			margin-top: 10px;
			font-size: 14px;
			writing-mode: vertical-rl;
			text-orientation: mixed;
			letter-spacing: 3px;
		}

		.main-grid-wrap.is-folded .config-fold-trigger .fold-icon {
			transform: rotate(180deg);
		}

		.main-grid-wrap .data-panel-main {
			flex: 1;
			min-width: 0;
		}
	</style>
</head>
<body>
<div class="screen-page">
	<img class="bg" src="${ctxStatic}/screen/imgs/bg3.png" alt="">
	<div class="screen-content">
		<div class="screen-header">
			<div class="header-left-tools">
				<div class="scope-tab-group" id="scopeSwitch">
					<button type="button" class="scope-tab is-active" data-scope="all">全部产量</button>
					<button type="button" class="scope-tab" data-scope="today">今日产量</button>
				</div>
			</div>
			<div class="screen-title-new" id="screenTitle"></div>
			<div class="screen-time" id="screenTime"></div>
		</div>
		<div class="summary-row">
			<div class="summary-item"><div class="summary-label">工位数量</div><div class="summary-value" id="oprnoTotal">0</div></div>
			<div class="summary-item"><div class="summary-label" id="recordTotalLabel">全部生产数量</div><div class="summary-value" id="recordTotal">0</div></div>
			<div class="summary-item"><div class="summary-label">最高工位</div><div class="summary-value" id="maxOprno">--</div></div>
		</div>
		<div class="main-grid-wrap" id="mainGrid">
			<div class="side-config-panel" id="sideConfigPanel">
				<div class="panel control-panel">
					<div class="panel-title">工位号</div>
					<textarea class="oprno-input" id="oprnoInput"></textarea>
					<div class="input-row">
						<input class="add-input" id="addOprno" type="text" placeholder="新增工位号">
						<button type="button" class="screen-btn primary" id="addBtn">添加</button>
					</div>
					<div class="action-row">
						<button type="button" class="screen-btn primary" id="queryBtn">查询</button>
						<button type="button" class="screen-btn" id="clearBtn">清空</button>
					</div>
					<div class="tag-list" id="tagList"></div>
					<div class="hint">支持逗号、空格、换行分隔工位号。</div>
				</div>
			</div>
			<button type="button" class="config-fold-trigger" id="panelCollapseBtn" aria-expanded="true" title="收起工位配置">
				<span class="fold-icon">‹</span>
				<span class="fold-label">收起</span>
			</button>
			<div class="panel data-panel data-panel-main">
				<div class="panel-title" id="dataPanelTitle">各工位全部生产数量</div>
				<div class="chart-box" id="recordChart"></div>
				<div class="table-wrap">
					<table class="record-table">
						<thead><tr><th>序号</th><th>工位</th><th id="recordCountHeader">全部生产数量</th></tr></thead>
						<tbody id="recordBody"></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="${ctxStatic}/jquery-1.11.3.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
	window.screenOprnoConfig = {
		title: "华为项目加工记录统计大屏",
		defaultOprnos: ["OP200A", "OP210A", "OP220A", "OP230A", "OP240A", "OP240B", "OP250A", "OP260A", "OP270A", "OP270B", "OP280A", "OP290A", "OP300A", "OP310A", "OP320A", "OP330A", "OP340A", "OP350A", "OP360A"]
	};
</script>
<script src="${ctxStatic}/screen/oprno-record-screen.js?v=202506244"></script>
</body>
</html>