x13-大屏优化

src/main/java/com/jeesite/modules/mes/web/MesProductController.java

@@ -4,6 +4,7 @@ import java.text.DateFormat;
 import java.text.DecimalFormat;
 import java.text.SimpleDateFormat;
 import java.time.LocalDate;
+import java.time.LocalDateTime;
 import java.time.format.DateTimeFormatter;
 import java.util.*;
 import javax.servlet.http.HttpServletRequest;
@@ -83,6 +84,8 @@ public class MesProductController extends BaseController {
     private MesToolReplaceRecordService mesToolReplaceRecordService;
     @Autowired
     private MesProcessProductService mesProcessProductService;
+	@Autowired
+	private MesProductRepairService mesProductRepairService;
 
 	/**
 	 * 获取数据
@@ -427,24 +430,27 @@ public class MesProductController extends BaseController {
 		String sdate1 = formattedToday + " 08:00:00";
 		String edate1 = formattedTomorrow + " 08:00:00";
 
-		MesShiftDataResp mesShiftDataResp = mesShiftService.getCurShift();
-
-		EmpUser empUser = new EmpUser();
-		List<EmpUser> userList = empUserService.findUserList(empUser);
-		data.put("workers", userList.size());
-
-		MesDevice mesDevice = new MesDevice();
-		Long deviceNum = mesDeviceService.findCount(mesDevice);
-		data.put("devices", 15);
-
 		MesProduct mesProduct1 = new MesProduct();
 		mesProduct1.setState("1");
 		Long actualCount = mesProductService.findCount(mesProduct1);
 		data.put("actual", actualCount);
 
-		data.put("plan", 660);
-		data.put("repair", 10);
-		data.put("scrap", 12);
+		String now = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
+		MesScreenPlan screenPlan = mesScreenPlanService.getPlan(now);
+		if (!ObjectUtils.isEmpty(screenPlan)) {
+			int planCount = 0;
+			if (screenPlan.getP1xx() != null) {
+				planCount += screenPlan.getP1xx();
+			}
+			if (screenPlan.getP2xx() != null) {
+				planCount += screenPlan.getP2xx();
+			}
+			data.put("plan", planCount);
+		}
+
+		MesProductRepair mesProductRepair = new MesProductRepair();
+		Long repairCount = mesProductRepairService.findCount(mesProductRepair);
+		data.put("repair", repairCount);
 
 		List<Map<String, Object>> alarms = new ArrayList<>();
 		MesProcessProduct processProductQuery = new MesProcessProduct();
@@ -479,8 +485,6 @@ public class MesProductController extends BaseController {
 
 		data.put("faulty1", faulty1);
 		data.put("faultx", faultx);
-		data.put("faulty2", ListUtils.newArrayList(0, 0, 0, 0, 0, 0, 0));
-		data.put("faulty3", ListUtils.newArrayList(0, 0, 0, 0, 0, 0, 0));
 
 		List<String> dateList = new ArrayList<>();
 		List<Long> outputList = new ArrayList<>();
@@ -520,18 +524,6 @@ public class MesProductController extends BaseController {
 		data.put("hourTimes", hourTimes);
 		data.put("perHourData", perHourData);
 
-		List<Long> quality1 = new ArrayList<>();
-		List<Long> quality2 = new ArrayList<>();
-		for (int i = 0; i < outputList.size(); i++) {
-			Long dayOutput = outputList.get(i);
-			Long goodCount = dayOutput - (long)(dayOutput * 0.05);
-			Long badCount = dayOutput - goodCount;
-			quality1.add(goodCount);
-			quality2.add(badCount);
-		}
-		data.put("quality1", quality1);
-		data.put("quality2", quality2);
-
 		List<Map<String, Object>> oprnoData = new ArrayList<>();
 		MesLineProcess mesLineProcess = new MesLineProcess();
 		mesLineProcess.setStatus("0");

src/main/resources/views/modules/mes/mesScreen4.html

@@ -147,7 +147,7 @@
 
 			/* Grid 布局 */
 			display: grid;
-			grid-template-columns: repeat(5, 1fr);
+			grid-template-columns: repeat(2, 1fr);
 			align-items: center;
 			padding: 0 10px;
 		}
@@ -321,7 +321,7 @@
 			/*background-color: #0000FF;*/
 
 			left: 60px;
-			right: 1267px;
+			right: 990px;
 
 			background-image: url("${ctxStatic}/screen/imgs/srcrow3.png");
 			background-size: 100% 100%;
@@ -367,8 +367,8 @@
 			bottom: 90px;
 			/*background-color: #0000FF;*/
 
-			left: 663px;
-			right: 663px;
+			left: 940px;
+			right: 60px;
 
 			background-image: url("${ctxStatic}/screen/imgs/srcrow3.png");
 			background-size: 100% 100%;
@@ -477,29 +477,7 @@
 	<div class="screenmain">
 		<div class="screen-title-new">X13产线MES系统综合数据大屏</div>
 		<div class="row1">
-			<div class="grid-item">
-				<img class="main-icon" src="${ctxStatic}/screen/imgs/srcrow11.png" alt="icon">
-				<div class="text-box">
-					<div class="label">生产人数</div>
-					<div class="value-row">
-						<span class="num" id="workers"></span>
-						<span class="unit">人</span>
-					</div>
-				</div>
-			</div>
-
-			<div class="grid-item">
-				<img class="main-icon" src="${ctxStatic}/screen/imgs/srcrow12.png" alt="icon">
-				<div class="text-box">
-					<div class="label">设备数量</div>
-					<div class="value-row">
-						<span class="num" id="devices"></span>
-						<span class="unit">个</span>
-					</div>
-				</div>
-			</div>
-
-			<div class="grid-item">
+			<div class="grid-item" id="planItem" style="display:none;">
 				<img class="main-icon" src="${ctxStatic}/screen/imgs/srcrow13.png" alt="icon">
 				<div class="text-box">
 					<div class="label">计划产量</div>
@@ -531,17 +509,6 @@
 					</div>
 				</div>
 			</div>
-
-<!--			<div class="grid-item">-->
-<!--				<img class="main-icon" src="${ctxStatic}/screen/imgs/srcrow16.png" alt="icon">-->
-<!--				<div class="text-box">-->
-<!--					<div class="label">报废数量</div>-->
-<!--					<div class="value-row">-->
-<!--						<span class="num" id="scrap"></span>-->
-<!--						<span class="unit">个</span>-->
-<!--					</div>-->
-<!--				</div>-->
-<!--			</div>-->
 		</div>
 
 		<!--第二行-->
@@ -587,10 +554,6 @@
 				</table>
 			</div>
 		</div>
-		<div class="row3-three">
-			<div class="row3-item1">近7日产品质检信息</div>
-			<div class="row3-item2" id="qualityChart"></div>
-		</div>
 	</div>
 </div>
 
@@ -684,20 +647,32 @@
 	}
 
 	function formatData(){
-		$("#workers").html(tjdata.workers);
-		$("#devices").html(tjdata.devices);
-		$("#plan").html(tjdata.plan);
-		$("#actual").html(tjdata.actual);
-		$("#repair").html(tjdata.repair);
-		$("#scrap").html(tjdata.scrap);
-
-
-		initAlarmList(tjdata.alarms);
-		initDeviceFaultTop(tjdata.faulty1,tjdata.faultx);
-		initDeviceFaultBottom(tjdata.faultx,tjdata.faulty1);
-		initProductionChart(tjdata.date,tjdata.output);    //近七日产量折线图
-		initPerHourChart(tjdata.hourTimes,tjdata.perHourData);
-		initQualityChart(tjdata.date,tjdata.quality1,tjdata.quality2);
+		if (!tjdata) return;
+		if (tjdata.plan != null) {
+			$("#plan").html(tjdata.plan);
+			$("#planItem").show();
+			$(".row1").css("grid-template-columns", "repeat(3, 1fr)");
+		} else {
+			$("#planItem").hide();
+			$(".row1").css("grid-template-columns", "repeat(2, 1fr)");
+		}
+		$("#actual").html(tjdata.actual != null ? tjdata.actual : '');
+		$("#repair").html(tjdata.repair != null ? tjdata.repair : '');
+
+		initAlarmList(tjdata.alarms || []);
+		if (tjdata.faultx && tjdata.faultx.length) {
+			$('.row2-three').show();
+			initDeviceFaultTop(tjdata.faulty1, tjdata.faultx);
+			initDeviceFaultBottom(tjdata.faultx, tjdata.faulty1);
+		} else {
+			$('.row2-three').hide();
+		}
+		if (tjdata.date && tjdata.output) {
+			initProductionChart(tjdata.date, tjdata.output);
+		}
+		if (tjdata.hourTimes && tjdata.perHourData) {
+			initPerHourChart(tjdata.hourTimes, tjdata.perHourData);
+		}
 		initOprnoList(tjdata.oprnoData);
 	}
 	//
@@ -1019,143 +994,12 @@
 	}
 
 
-	function initQualityChart(xData,quality1,quality2) {
-		let chartDom = document.getElementById('qualityChart');
-		let myChart = echarts.init(chartDom);
-
-		// 模拟图片中的数据
-		let option = {
-			// 图例组件
-			legend: {
-				data: ['良品', '不良'],
-				top: 10,
-				textStyle: {
-					color: '#ffffff'
-				},
-				icon: 'roundRect', // 图例形状
-				itemGap: 40,
-				itemWidth: 15,
-				itemHeight: 10
-			},
-			tooltip: {
-				trigger: 'axis', // 多柱对比通常用 axis 触发
-				axisPointer: {
-					type: 'shadow'
-				},
-				backgroundColor: 'rgba(20, 55, 120, 0.8)',
-				borderColor: '#008FFD',
-				textStyle: { color: '#fff' }
-			},
-			grid: {
-				top: '20%',    // 留出空间给图例和数值标签
-				left: '3%',
-				right: '4%',
-				bottom: '5%',
-				containLabel: true
-			},
-			xAxis: {
-				type: 'category',
-				data: xData,
-				axisLine: {
-					show: true,
-					lineStyle: { color: '#2A4E77' }
-				},
-				axisTick: { show: false },
-				axisLabel: {
-					color: '#FFFFFF',
-					fontSize: 12,
-					margin: 15
-				}
-			},
-			yAxis: {
-				type: 'value',
-				// max: 500, // 根据图片刻度
-				// splitNumber: 5,
-				axisLine: {
-					show: true,
-					lineStyle: { color: '#2A4E77' }
-				},
-				axisTick: { show: false },
-				axisLabel: {
-					color: '#FFFFFF',
-					fontSize: 12
-				},
-				splitLine: {
-					show: true,
-					lineStyle: {
-						color: 'rgba(255, 255, 255, 0.05)',
-						type: 'solid'
-					}
-				}
-			},
-			series: [
-				{
-					name: '良品',
-					type: 'bar',
-					data: quality1,
-					barWidth: 12, // 柱子稍微细一点，因为有三根
-					itemStyle: {
-						color: '#1E90FF', // 亮蓝色
-						barBorderRadius: [5, 5, 0, 0] // 圆角
-					},
-					label: {
-						show: true,
-						position: 'top',
-						color: '#FFFFFF',
-						fontSize: 10,
-						distance: 2
-					}
-				},
-				{
-					name: '不良',
-					type: 'bar',
-					data: quality2,
-					barWidth: 12,
-					itemStyle: {
-						color: '#FFD700', // 金黄色
-						barBorderRadius: [5, 5, 0, 0]
-					},
-					label: {
-						show: true,
-						position: 'top',
-						color: '#FFFFFF',
-						fontSize: 10,
-						distance: 2
-					}
-				},
-				// {
-				// 	name: '报废',
-				// 	type: 'bar',
-				// 	data: dataScrap,
-				// 	barWidth: 12,
-				// 	itemStyle: {
-				// 		color: '#FF0000', // 红色
-				// 		barBorderRadius: [5, 5, 0, 0]
-				// 	},
-				// 	label: {
-				// 		show: true,
-				// 		position: 'top',
-				// 		color: '#FFFFFF',
-				// 		fontSize: 10,
-				// 		distance: 2
-				// 	}
-				// }
-			]
-		};
-
-		myChart.setOption(option);
-
-		window.addEventListener("resize", function () {
-			myChart.resize();
-		});
-	}
-
-
-
-	// 2. 新增初始化函数
 	function initAlarmList(tableData) {
-		// 虚拟数据
 		let html = '';
+		if (!tableData || !tableData.length) {
+			$('#alarmList').html('');
+			return;
+		}
 
 		// 遍历数据拼接 HTML
 		for (let i = 0; i < tableData.length; i++) {
@@ -1342,8 +1186,6 @@
 					type: 'value',
 					name: '',
 					min: 0,
-					max: 1200,
-					interval: 200,
 					axisLabel: { color: '#fff' },
 					axisLine: { show: true, lineStyle: { color: '#2A4E77' } },
 					splitLine: { show: false }