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

<!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>生产简报</title>
	<link rel="stylesheet" href="${ctxStatic}/screen/exec-screen.css?v=202609303">
</head>
<body>
<div class="exec-page">
	<header class="exec-header">
		<div class="header-side">
			<span class="meta-chip" id="statDay">统计日 --</span>
			<span class="meta-chip" id="shiftChip">当前班次 --</span>
		</div>
		<h1 id="screenTitle">生产简报</h1>
		<div class="header-side is-right">
			<span class="screen-time" id="screenTime"></span>
		</div>
	</header>

	<section class="hero-grid">
		<article class="hero-card">
			<div class="hero-label">今日完工</div>
			<div class="hero-num" id="actualNum">0</div>
			<div class="hero-sub" id="planText">计划 0</div>
		</article>
		<article class="hero-card">
			<div class="hero-label" id="gapLabel">还差</div>
			<div class="hero-num" id="gapNum">0</div>
			<div class="hero-foot">
				<em class="tag" id="achieveTag">--</em>
				<span id="achieveText">达成 --</span>
			</div>
			<div class="meter"><i id="achieveBar"></i></div>
		</article>
		<article class="hero-card">
			<div class="hero-label">一次合格</div>
			<div class="hero-num" id="fpyNum">--</div>
			<div class="hero-sub" id="qualityText">返修 0 · 不良 0</div>
		</article>
		<article class="hero-card">
			<div class="hero-label">近七日完工</div>
			<div class="hero-num" id="weekActual">0</div>
			<div class="hero-sub" id="weekText">计划 0 · 平均达成 --</div>
		</article>
	</section>

	<section class="main-grid">
		<div class="panel chart-panel">
			<div class="panel-title">近七日产量</div>
			<div class="chart-box" id="outputChart"></div>
		</div>
		<div class="panel">
			<div class="panel-title">需要过问</div>
			<ul class="attention-list" id="attentionList"></ul>
		</div>
	</section>

	<section class="bottom-grid">
		<div class="panel">
			<div class="panel-title">产品完成情况</div>
			<div class="bar-list" id="productBars"></div>
		</div>
		<div class="panel">
			<div class="panel-title">班次完成情况</div>
			<div class="bar-list" id="shiftBars"></div>
		</div>
	</section>
</div>
<script src="${ctxStatic}/jquery-1.11.3.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
	window.execScreenConfig = {
		title: "生产简报",
		refreshInterval: 60000,
		apiUrl: "${ctx}/mes/mesProduct/screenKpiData"
	};
</script>
<script src="${ctxStatic}/screen/exec-screen.js?v=202609303"></script>
<script src="${ctxStatic}/screen/screen-fullscreen.js?v=20261010"></script>
</body>
</html>