mescloud/src/main/resources/static/screen/repair-screen.js

(function ($, window) {
	"use strict";

	var config = window.repairScreenConfig || {};
	var state = {
		items: [],
		currentPage: 0,
		totalPages: 0,
		carouselTimer: null,
		refreshTimer: null
	};

	function pad(num) {
		return num < 10 ? "0" + num : String(num);
	}

	function updateClock() {
		var now = new Date();
		var text = now.getFullYear() + "-" + pad(now.getMonth() + 1) + "-" + pad(now.getDate()) +
			" " + pad(now.getHours()) + ":" + pad(now.getMinutes()) + ":" + pad(now.getSeconds());
		$("#screenTime").text(text);
	}

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

	function stateClass(stateCode) {
		if (stateCode === "1") {
			return "is-pending";
		}
		if (stateCode === "2") {
			return "is-repairing";
		}
		if (stateCode === "3") {
			return "is-done";
		}
		if (stateCode === "4") {
			return "is-fail";
		}
		return "is-other";
	}

	function renderSummary(summary) {
		summary = summary || {};
		$("#pendingCount").text(summary.pending || 0);
		$("#repairingCount").text(summary.repairing || 0);
		$("#todayDoneCount").text(summary.todayDone || 0);
		$("#todayFailCount").text(summary.todayFail || 0);
	}

	function renderPage(pageIndex, animate) {
		var pageSize = config.pageSize || 7;
		var start = pageIndex * pageSize;
		var pageData = state.items.slice(start, start + pageSize);
		var html = "";

		if (!pageData.length) {
			html = '<tr class="empty-row"><td colspan="9">暂无待处理返修数据</td></tr>';
		} else {
			pageData.forEach(function (item, index) {
				var seq = start + index + 1;
				html += "<tr>" +
					'<td class="col-seq">' + seq + "</td>" +
					'<td class="col-sn">' + escapeHtml(item.sn) + "</td>" +
					'<td class="col-oprno">' + escapeHtml(item.oprno || "--") + "</td>" +
					'<td class="col-item">' + escapeHtml(item.itemTitle || "--") + "</td>" +
					'<td class="col-type">' + escapeHtml(item.typeText || "--") + "</td>" +
					'<td class="col-remark">' + escapeHtml(item.remark || "--") + "</td>" +
					'<td class="col-state"><span class="state-tag ' + stateClass(item.state) + '">' +
					escapeHtml(item.stateText || "--") + "</span></td>" +
					'<td class="col-user">' + escapeHtml(item.createBy || "--") + "</td>" +
					'<td class="col-time">' + escapeHtml(item.createDate || "--") + "</td>" +
					"</tr>";
			});
		}

		var $body = $("#repairBody");
		if (!animate) {
			$body.removeClass("is-fading").addClass("is-visible").html(html);
			return;
		}

		$body.removeClass("is-visible").addClass("is-fading");
		setTimeout(function () {
			$body.html(html);
			$body.removeClass("is-fading").addClass("is-visible");
		}, 450);
	}

	function updatePageIndicator() {
		state.totalPages = Math.max(1, Math.ceil(state.items.length / (config.pageSize || 7)));
		$("#pageIndicator").text("第 " + (state.currentPage + 1) + " / " + state.totalPages + " 页");
	}

	function startCarousel() {
		stopCarousel();
		if (state.totalPages <= 1) {
			return;
		}
		state.carouselTimer = setInterval(function () {
			state.currentPage++;
			if (state.currentPage >= state.totalPages) {
				state.currentPage = 0;
			}
			updatePageIndicator();
			renderPage(state.currentPage, true);
		}, config.carouselInterval || 8000);
	}

	function stopCarousel() {
		if (state.carouselTimer) {
			clearInterval(state.carouselTimer);
			state.carouselTimer = null;
		}
	}

	function applyData(payload) {
		payload = payload || {};
		renderSummary(payload.summary);
		state.items = $.isArray(payload.list) ? payload.list : [];
		state.currentPage = 0;
		updatePageIndicator();
		renderPage(0, false);
		startCarousel();
	}

	function showLoadError(message) {
		renderSummary({});
		state.items = [];
		state.currentPage = 0;
		updatePageIndicator();
		$("#repairBody").removeClass("is-fading").addClass("is-visible").html(
			'<tr class="empty-row"><td colspan="9">' + escapeHtml(message || "数据加载失败") + "</td></tr>"
		);
		stopCarousel();
	}

	function loadData() {
		var apiUrl = config.apiUrl;
		if (!apiUrl) {
			showLoadError("未配置数据接口");
			return;
		}

		$.ajax({
			url: apiUrl,
			type: "GET",
			dataType: "json",
			timeout: 20000
		}).done(function (res) {
			if (res && (res.result === "true" || res.result === true) && res.data) {
				applyData(res.data);
				scheduleRefresh(config.refreshInterval || 60000);
			} else {
				showLoadError((res && res.message) ? res.message : "接口返回异常");
				scheduleRefresh(5000);
			}
		}).fail(function (xhr) {
			var msg = "数据加载失败";
			if (xhr && xhr.status === 401) {
				msg = "接口未授权，请检查匿名访问配置";
			} else if (xhr && xhr.status === 404) {
				msg = "接口不存在，请确认服务已重启";
			} else if (xhr && (xhr.status === 0 || xhr.status >= 500)) {
				msg = "服务连接中，稍后自动重试…";
			} else if (xhr && xhr.status) {
				msg = "数据加载失败（HTTP " + xhr.status + "）";
			}
			// 保留上次成功数据，避免发版重启时大屏被清空
			if (!state.items.length) {
				showLoadError(msg);
			}
			scheduleRefresh(5000);
		});
	}

	function scheduleRefresh(delay) {
		if (state.refreshTimer) {
			clearTimeout(state.refreshTimer);
		}
		state.refreshTimer = setTimeout(loadData, delay || 60000);
	}

	function fitScreen() {
		var width = $(window).width();
		var height = $(window).height();
		var designWidth = 1920;
		var designHeight = 1080;
		var scale = Math.min(width / designWidth, height / designHeight);
		var marginLeft = (width - designWidth * scale) / 2;
		var marginTop = (height - designHeight * scale) / 2;

		$("body").css({
			transform: "scale(" + scale + ")",
			transformOrigin: "0 0",
			width: designWidth + "px",
			height: designHeight + "px",
			overflow: "hidden",
			marginLeft: marginLeft + "px",
			marginTop: marginTop + "px"
		});
	}

	function init() {
		$("#screenTitle").text(config.title || "返修区看板");
		updateClock();
		setInterval(updateClock, 1000);
		loadData();
		fitScreen();
		$(window).on("resize", fitScreen);
	}

	$(function () {
		init();
	});
})(jQuery, window);