Bladeren bron

大屏初始化

liuwei 2 maanden geleden
bovenliggende
commit
fc9a270b58
2 gewijzigde bestanden met toevoegingen van 207 en 188 verwijderingen
  1. 183 170
      src/main/resources/views/modules/mes/mesScreen3.html
  2. 24 18
      src/main/resources/views/modules/mes/mesScreen5.html

+ 183 - 170
src/main/resources/views/modules/mes/mesScreen3.html

@@ -101,20 +101,25 @@
 			bottom: 0;
 		}
 
-		/* ===== 左侧三列面板 ===== */
+		/* ===== 左侧三列面板(容器铺满主体,便于按名称重排到与 screen3/4/5 对齐) ===== */
 		.mes3-left {
 			position: absolute;
-			left: 30px;
-			top: 58px;
-			width: 440px;
-			bottom: 15px;
+			left: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			width: auto;
+			pointer-events: none;
+		}
+		.mes3-left .mes3-panel {
+			pointer-events: auto;
 		}
 
 		/* 通用面板样式 */
 		.mes3-panel {
 			position: absolute;
 			left: 0;
-			right: 0;
+			right: auto;
 			background-image: url("${ctxStatic}/screen/imgs/ljrZ1.png");
 			background-size: 100% 100%;
 			background-repeat: no-repeat;
@@ -138,58 +143,55 @@
 			overflow: hidden;
 		}
 
-		/* 左侧面板 - 工位状态 */
+		/* 近七日产量折线图 → 右上(对齐前屏「总览」高度区) */
 		.mes3-panel-left1 {
-			top: 0;
-			height: 301px;
+			left: 1450px;
+			top: 58px;
+			width: 440px;
+			height: 290px;
+			background-image: url("${ctxStatic}/screen/imgs/ljrY1.png");
 		}
 		.mes3-panel-left1 .panel-body {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-wrap: wrap;
-			gap: 5px;
-			padding: 5px;
+			display: block;
+			padding: 8px 10px;
 		}
 		.mes3-panel-left1 .panel-body img {
 			width: 70px;
 			height: auto;
 		}
 
-		/* 左侧面板 - 设备状态 */
+		/* 近七日产品抽检/质检 → 左下(对齐前屏质检区) */
 		.mes3-panel-left2 {
-			top: 322px;
-			height: 300px;
+			left: 30px;
+			top: 508px;
+			width: 440px;
+			height: 460px;
 		}
 		.mes3-panel-left2 .panel-body {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-wrap: wrap;
-			gap: 5px;
-			padding: 5px;
+			display: block;
+			padding: 8px 10px;
 		}
 		.mes3-panel-left2 .panel-body img {
 			width: 70px;
 			height: auto;
 		}
 
-		/* 左侧面板 - 实时曲线 */
+		/* 不良类型柱状图:隐藏(左边第三个) */
 		.mes3-panel-left3 {
-			top: 643px;
-			height: 300px;
+			display: none;
 		}
 		.mes3-panel-left3 .panel-body {
 			padding: 5px;
 		}
 
-		/* ===== 中间区域 ===== */
+		/* ===== 中间区域(中下表隐藏后加高) ===== */
 		.mes3-center {
 			position: absolute;
 			left: 490px;
 			top: 58px;
 			width: 940px;
-			height: 620px;
+			bottom: 15px;
+			height: auto;
 		}
 
 		/* 中间Logo区域 */
@@ -261,16 +263,9 @@
 			display: none;
 		}
 
-		/* ===== 中间下方大面板 - 设备故障统计分析 ===== */
+		/* ===== 中间下方大面板 - 设备故障统计分析:隐藏(中间第二个) ===== */
 		.mes3-panel-center-bottom {
-			position: absolute;
-			left: 490px;
-			top: 697px;
-			width: 940px;
-			height: 301px;
-			background-image: url("${ctxStatic}/screen/imgs/ljrY2.png");
-			background-size: 100% 100%;
-			background-repeat: no-repeat;
+			display: none;
 		}
 		.mes3-panel-center-bottom .panel-header {
 			height: 45px;
@@ -291,16 +286,9 @@
 		}
 
 		/* ===== 右侧面板区域 ===== */
-		/* 右侧面板1 - 达成率数据分析(右上角小面板)*/
+		/* 达成率数据分析:隐藏(右边第一个) */
 		.mes3-panel-right1 {
-			position: absolute;
-			left: 1450px;
-			top: 58px;
-			width: 440px;
-			height: 369px;
-			background-image: url("${ctxStatic}/screen/imgs/ljrY1.png");
-			background-size: 100% 100%;
-			background-repeat: no-repeat;
+			display: none;
 		}
 		.mes3-panel-right1 .panel-header {
 			height: 45px;
@@ -361,13 +349,13 @@
 			margin-left: 5px;
 		}
 
-		/* 右侧面板2 - 每小时上下线数据分析 */
+		/* 每小时上下线 → 右下(对齐前屏同名表) */
 		.mes3-panel-right2 {
 			position: absolute;
 			left: 1450px;
-			top: 446px;
+			top: 508px;
 			width: 440px;
-			height: 301px;
+			height: 460px;
 			background-image: url("${ctxStatic}/screen/imgs/ljrY2.png");
 			background-size: 100% 100%;
 			background-repeat: no-repeat;
@@ -390,14 +378,14 @@
 			padding: 10px;
 		}
 
-		/* 右侧面板3 - 报警信息 */
+		/* 设备报警 → 左上(对齐前屏报警信息区) */
 		.mes3-panel-right3 {
 			position: absolute;
-			left: 1450px;
-			top: 767px;
+			left: 30px;
+			top: 58px;
 			width: 440px;
-			height: 231px;
-			background-image: url("${ctxStatic}/screen/imgs/ljrY3.png");
+			height: 430px;
+			background-image: url("${ctxStatic}/screen/imgs/ljrZ1.png");
 			background-size: 100% 100%;
 			background-repeat: no-repeat;
 		}
@@ -564,6 +552,33 @@
 		/* ===== 报警信息 ===== */
 		.mes3-alert-list {
 			padding-top: 5px;
+			padding-right: 4px;
+			height: 100%;
+			overflow-y: auto;
+			scrollbar-width: thin;
+			scrollbar-color: rgba(0, 200, 255, 0.45) rgba(0, 40, 80, 0.25);
+		}
+		.mes3-alert-list::-webkit-scrollbar {
+			width: 6px;
+		}
+		.mes3-alert-list::-webkit-scrollbar-track {
+			background: rgba(0, 40, 80, 0.25);
+			border-radius: 3px;
+		}
+		.mes3-alert-list::-webkit-scrollbar-thumb {
+			background: linear-gradient(180deg, rgba(0, 200, 255, 0.55), rgba(77, 201, 245, 0.35));
+			border-radius: 3px;
+		}
+		.mes3-alert-list::-webkit-scrollbar-thumb:hover {
+			background: rgba(0, 230, 255, 0.7);
+		}
+		.mes3-alert-list::-webkit-scrollbar-button {
+			display: none;
+			width: 0;
+			height: 0;
+		}
+		.mes3-alert-list::-webkit-scrollbar-corner {
+			background: transparent;
 		}
 		.mes3-alert-item {
 			display: flex;
@@ -630,14 +645,14 @@
 		<div class="mes3-left">
 			<!-- 面板1: 近七日产量折线图 -->
 			<div class="mes3-panel mes3-panel-left1">
-				<div class="panel-header">近七日产量折线图</div>
+				<div class="panel-header">近七日产量分析</div>
 				<div class="panel-body">
 					<canvas id="chartLeft1" class="mes3-chart"></canvas>
 				</div>
 			</div>
-			<!-- 面板2: 近七日产品检验盘点 -->
+			<!-- 面板2: 近七日产品质检(对齐前屏同名逻辑) -->
 			<div class="mes3-panel mes3-panel-left2">
-				<div class="panel-header">近七日产品抽检盘点</div>
+				<div class="panel-header">近七日产品质检数据分析</div>
 				<div class="panel-body">
 					<canvas id="chartLeft2" class="mes3-chart"></canvas>
 				</div>
@@ -755,7 +770,7 @@
 
 		<!-- 右侧面板3: 报警信息 -->
 		<div class="mes3-panel-right3">
-			<div class="panel-header">设备报警(类型)</div>
+			<div class="panel-header">产线阶段报警信息</div>
 			<div class="panel-body" style="padding: 0 15px;">
 				<div id="alertList" class="mes3-alert-list"></div>
 			</div>
@@ -786,13 +801,12 @@
 	var mockData = {};
 
 	/**
-	 * 总览页:汇总 mesScreen4 / 5 / 6 三条产线每小时上下线 OK 数(与各分屏工位、lineSn 一致)
+	 * 总览页:全产线汇总,上线 OP060 / 下线 OP400(lineSn 空=不过滤产线)
 	 */
-	var HOURLY_API_CFG_LIST = [
-		{ lineSn: 'MP', onlineOprno: 'OP120', offlineOprno: 'OP190' },
-		{ lineSn: 'XT', onlineOprno: 'OP010',  offlineOprno: 'OP180' },
-		{ lineSn: 'ZP', onlineOprno: 'OP190', offlineOprno: 'OP250' }
-	];
+	var HOURLY_API_CFG = { lineSn: '', onlineOprno: 'OP060', offlineOprno: 'OP400' };
+	var OP_ONLINE = 'OP060';
+	var OP_OFFLINE = 'OP400';
+	var QUALITY_LINE_LIST = ['MP', 'XT', 'ZP'];
 
 	function buildHourLabels24() {
 		var hourLabels = [];
@@ -803,68 +817,31 @@
 	}
 
 	function updateHourlyUpDownByApi() {
-		var upSum = [], downSum = [], h;
-		for (h = 0; h < 24; h++) {
-			upSum[h] = 0;
-			downSum[h] = 0;
-		}
-		var total = HOURLY_API_CFG_LIST.length;
-		var finished = 0;
-
-		function applyAggregatedChart() {
-			var maxVal = 10;
-			for (h = 0; h < 24; h++) {
-				maxVal = Math.max(maxVal, upSum[h], downSum[h]);
-			}
-			mockData.hourlyData = {
-				labels: buildHourLabels24(),
-				up: upSum,
-				down: downSum,
-				max: maxVal
-			};
-			drawAllCharts();
-		}
-
-		function onOneRequestDone() {
-			finished++;
-			if (finished >= total) {
-				applyAggregatedChart();
-			}
-		}
-
-		function mergeHourlyResp(d) {
-			if (!d || !d.up || !d.down || d.up.length < 24 || d.down.length < 24) {
-				return;
-			}
-			for (h = 0; h < 24; h++) {
-				upSum[h] += Number(d.up[h]) || 0;
-				downSum[h] += Number(d.down[h]) || 0;
-			}
-		}
-
-		for (var i = 0; i < HOURLY_API_CFG_LIST.length; i++) {
-			(function(cfg) {
-				$.ajax({
-					url: '${ctx}/mes/mesProduct/hourlyUpDownOkData',
-					type: 'POST',
-					dataType: 'json',
-					data: {
-						lineSn: cfg.lineSn,
-						onlineOprno: cfg.onlineOprno,
-						offlineOprno: cfg.offlineOprno
-					},
-					success: function(resp) {
-						if (resp && resp.result === 'true' && resp.data) {
-							mergeHourlyResp(resp.data);
-						}
-						onOneRequestDone();
-					},
-					error: function() {
-						onOneRequestDone();
+		$.ajax({
+			url: '${ctx}/mes/mesProduct/hourlyUpDownOkData',
+			type: 'POST',
+			dataType: 'json',
+			data: {
+				lineSn: HOURLY_API_CFG.lineSn,
+				onlineOprno: HOURLY_API_CFG.onlineOprno,
+				offlineOprno: HOURLY_API_CFG.offlineOprno
+			},
+			success: function(resp) {
+				if (resp && resp.result === 'true' && resp.data) {
+					var d = resp.data;
+					if (!d.up || !d.down || d.up.length < 24 || d.down.length < 24) {
+						return;
 					}
-				});
-			})(HOURLY_API_CFG_LIST[i]);
-		}
+					mockData.hourlyData = {
+						labels: buildHourLabels24(),
+						up: d.up,
+						down: d.down,
+						max: typeof d.max === 'number' ? d.max : 100
+					};
+					drawAllCharts();
+				}
+			}
+		});
 	}
 
 	function generateMockData() {
@@ -1600,11 +1577,12 @@
 		});
 	}
 
-	function isOpr240Family(oprno) {
+	function isOprOfflineFamily(oprno) {
 		var op = (oprno || '').replace(/\s/g, '').toUpperCase();
-		if (op.length < 5 || op.indexOf('OP240') !== 0) return false;
-		if (op.length === 5) return op === 'OP240';
-		return /^OP240[A-Z0-9_-]+$/.test(op);
+		var prefix = OP_OFFLINE;
+		if (op.length < prefix.length || op.indexOf(prefix) !== 0) return false;
+		if (op.length === prefix.length) return op === prefix;
+		return new RegExp('^' + prefix + '[A-Z0-9_-]+$').test(op);
 	}
 
 	function isRecordContentOk(content) {
@@ -1675,24 +1653,74 @@
 		});
 	}
 
-	// 近七日产品抽检盘点:按天统计 mes_quality 的 OK(合格) / NG(不良) 次数
+	// 近七日产品质检:产出=OP400 OK,不良=返工 OP070–OP400,按产线汇总
 	function updateQualityInspectByApi() {
-		$.ajax({
-			url: '${ctx}/mes/mesProduct/qualityInspectData',
-			type: 'POST',
-			dataType: 'json',
-			success: function(resp) {
-				if (!resp || resp.result !== 'true' || !resp.data) return;
-				var d = resp.data;
-				mockData.qualityInspect = {
-					labels: d.labels || [],
-					produced: d.qualified || [], // 沿用原 produced 字段渲染(柱状图代码不动)
-					defect: d.defect || [],
-					max: Number(d.max) || 10
-				};
-				drawAllCharts();
+		var labels = null;
+		var producedSum = null;
+		var defectSum = null;
+		var total = QUALITY_LINE_LIST.length;
+		var finished = 0;
+
+		function finishOne() {
+			finished++;
+			if (finished < total) return;
+			if (!producedSum || !defectSum) return;
+			var maxV = 10;
+			var i;
+			for (i = 0; i < producedSum.length; i++) {
+				if (Number(producedSum[i]) > maxV) maxV = Number(producedSum[i]);
 			}
-		});
+			for (i = 0; i < defectSum.length; i++) {
+				if (Number(defectSum[i]) > maxV) maxV = Number(defectSum[i]);
+			}
+			mockData.qualityInspect = {
+				labels: labels || [],
+				produced: producedSum,
+				defect: defectSum,
+				max: Math.ceil(maxV * 1.15) || 10
+			};
+			drawAllCharts();
+		}
+
+		for (var li = 0; li < QUALITY_LINE_LIST.length; li++) {
+			(function(lineSn) {
+				$.ajax({
+					url: '${ctx}/mes/mesProductRecord/weekQualityData',
+					type: 'POST',
+					dataType: 'json',
+					data: {
+						lineSn: lineSn,
+						producedOprno: OP_OFFLINE,
+						defectOprnoFrom: 'OP070',
+						defectOprnoTo: OP_OFFLINE
+					},
+					success: function(resp) {
+						if (resp && resp.result === 'true' && resp.data) {
+							var d = resp.data;
+							if (!labels) labels = d.labels || [];
+							var p = d.produced || [];
+							var df = d.defect || [];
+							if (!producedSum) {
+								producedSum = [];
+								defectSum = [];
+								for (var i = 0; i < 7; i++) {
+									producedSum[i] = 0;
+									defectSum[i] = 0;
+								}
+							}
+							for (var j = 0; j < 7; j++) {
+								producedSum[j] += Number(p[j]) || 0;
+								defectSum[j] += Number(df[j]) || 0;
+							}
+						}
+						finishOne();
+					},
+					error: function() {
+						finishOne();
+					}
+				});
+			})(QUALITY_LINE_LIST[li]);
+		}
 	}
 
 	function updateActualProductionByApi() {
@@ -1716,9 +1744,8 @@
 				data: {
 					pageNo: pageNo,
 					pageSize: pageSize,
-					oprno: 'OP240',
+					oprno: OP_OFFLINE,
 					content: 'OK',
-					lineSn: 'XT',
 					updateDate_gte: dayRange.gte,
 					updateDate_lte: dayRange.lte
 				},
@@ -1726,7 +1753,7 @@
 					var list = extractList(resp);
 					for (var i = 0; i < list.length; i++) {
 						var r = list[i] || {};
-						if (isOpr240Family(r.oprno) && isRecordContentOk(r.content) && isRecordWithinToday(r, dayRange) && String(r.lineSn || r.line_sn || '').toUpperCase() === 'XT') {
+						if (isOprOfflineFamily(r.oprno) && isRecordContentOk(r.content) && isRecordWithinToday(r, dayRange)) {
 							totalOk++;
 						}
 					}
@@ -1745,11 +1772,10 @@
 		fetchPage();
 	}
 
-	function matchesXtOp240OkRecord(r) {
+	function matchesOfflineOkRecord(r) {
 		var t = parseRecordDateMs(r.updateDate || r.update_date);
 		if (isNaN(t)) return false;
-		if (!isOpr240Family(r.oprno) || !isRecordContentOk(r.content)) return false;
-		if (String(r.lineSn || r.line_sn || '').toUpperCase() !== 'XT') return false;
+		if (!isOprOfflineFamily(r.oprno) || !isRecordContentOk(r.content)) return false;
 		return true;
 	}
 
@@ -1790,9 +1816,8 @@
 				data: {
 					pageNo: pageNo,
 					pageSize: pageSize,
-					oprno: 'OP240',
+					oprno: OP_OFFLINE,
 					content: 'OK',
-					lineSn: 'XT',
 					updateDate_gte: gte,
 					updateDate_lte: lte
 				},
@@ -1801,7 +1826,7 @@
 					var j;
 					for (j = 0; j < list.length; j++) {
 						var r = list[j] || {};
-						if (!matchesXtOp240OkRecord(r)) continue;
+						if (!matchesOfflineOkRecord(r)) continue;
 						var t = parseRecordDateMs(r.updateDate || r.update_date);
 						var key = dateKeyFromMs(t, padFn);
 						if (Object.prototype.hasOwnProperty.call(counts, key)) {
@@ -1861,27 +1886,15 @@
 	}
 
 	function drawAllCharts() {
-		// 左1:近七日产量折线图
+		// 近七日产量(右上)
 		var d1 = mockData.productTrend;
 		if (d1) drawLineChart('chartLeft1', d1.data, d1.labels, d1.max, d1.min, '#00C8FF');
 
-		// 左2:近七日产品检验盘点
+		// 近七日产品质检(左下)
 		var d2 = mockData.qualityInspect;
 		if (d2) drawDoubleBarChart('chartLeft2', d2.produced, d2.defect, d2.labels, d2.max);
 
-		// 左3:不良类型柱状图
-		var d3 = mockData.defectType;
-		if (d3) drawBarChart('chartLeft3', d3.data, d3.labels, d3.max);
-
-		// 中下:设备故障统计分析 - 近七日设备故障分析
-		var d4 = mockData.faultAnalysis;
-		if (d4) drawBarLineChart('chartCenterBottom', d4.faultTime, d4.faultRate, d4.labels, d4.maxTime, d4.maxRate);
-
-		// 右1:达成率双线图
-		var d5 = mockData.achieveRate;
-		if (d5) drawDualLineChart('chartRight1', d5.target, d5.actual, d5.labels, d5.max, d5.min);
-
-		// 右2:每小时上下线数据
+		// 每小时上下线(右下)
 		var d6 = mockData.hourlyData;
 		if (d6) drawAreaLineChart('chartRight2', d6.up, d6.down, d6.labels, d6.max);
 	}

+ 24 - 18
src/main/resources/views/modules/mes/mesScreen5.html

@@ -152,27 +152,33 @@
 		.alert-row > div:nth-child(1) { width: 70px; color: #4DC9F5; font-weight: bold; }
 		.alert-row > div:nth-child(2) { flex: 1; }
 
-		/* ===== OP 表格 ===== */
+		/* ===== OP 表格(6 工位铺满,字号加大) ===== */
 		.op-table {
 			width: 100%;
+			height: calc(100% - 28px);
 			border-collapse: collapse;
 			color: #ffffff;
-			font-size: 16px;
+			font-size: 20px;
 			table-layout: fixed;
 		}
 		.op-table thead th {
-			height: 46px;
+			height: 56px;
 			color: #4DC9F5;
-			font-weight: normal;
-			font-size: 16px;
-			background: rgba(0, 100, 180, 0.25);
-			border-bottom: 1px solid rgba(77, 201, 245, 0.35);
+			font-weight: bold;
+			font-size: 20px;
+			letter-spacing: 1px;
+			background: rgba(0, 100, 180, 0.28);
+			border-bottom: 2px solid rgba(77, 201, 245, 0.5);
 			text-align: center;
 		}
 		.op-table tbody td {
-			height: 46px;
+			height: 76px;
 			text-align: center;
-			border-bottom: 1px dashed rgba(77, 201, 245, 0.18);
+			border-bottom: 1px solid rgba(77, 201, 245, 0.22);
+			vertical-align: middle;
+		}
+		.op-table tbody tr:last-child td {
+			border-bottom: 2px solid rgba(77, 201, 245, 0.35);
 		}
 		.op-table tbody tr:hover td { background: rgba(0, 200, 255, 0.06); }
 		.op-table tbody tr.op-row-alt td {
@@ -180,24 +186,24 @@
 		}
 		.op-table tbody tr.op-row-alt:hover td { background: rgba(0, 200, 255, 0.08); }
 		.op-table tbody tr.op-row-empty td {
-			height: 46px;
+			height: 76px;
 			color: transparent;
-			border-bottom: 1px dashed rgba(77, 201, 245, 0.1);
+			border-bottom: 1px solid rgba(77, 201, 245, 0.12);
 			user-select: none;
 		}
 		.op-table-page-hint {
 			text-align: right;
-			height: 24px;
-			line-height: 24px;
-			font-size: 14px;
+			height: 26px;
+			line-height: 26px;
+			font-size: 15px;
 			color: #4DC9F5;
 			padding-right: 4px;
 			margin-bottom: 2px;
 			letter-spacing: 1px;
 		}
-		.op-table td.op-col  { color: #00C8FF; font-weight: bold; font-size: 22px; }
-		.op-table td.op-name { color: #ffffff; text-align: center; font-size: 18px; }
-		.op-table td.op-val  { color: #00F7FF; font-weight: bold; font-size: 22px; }
+		.op-table td.op-col  { color: #00C8FF; font-weight: bold; font-size: 26px; }
+		.op-table td.op-name { color: #ffffff; text-align: center; font-size: 22px; }
+		.op-table td.op-val  { color: #00F7FF; font-weight: bold; font-size: 28px; }
 
 		/* ===== 产线阶段数据总览 (按模板排布) ===== */
 		.overview-wrap {
@@ -382,7 +388,7 @@
 	function pad(n) { return n < 10 ? '0' + n : '' + n; }
 
 	/** 工位表:每页条数与自动翻页间隔(毫秒) */
-	var OP_TABLE_PAGE_SIZE = 10;
+	var OP_TABLE_PAGE_SIZE = 6;
 	var OP_TABLE_PAGE_ROTATE_MS = 8000;
 	var opTablePageIndex = 0;
 	var opTableRotateTimer = null;