|
|
@@ -1,14 +1,25 @@
|
|
|
(function () {
|
|
|
var config = window.screenOprnoConfig || {};
|
|
|
+ var tableAutoScroll = {
|
|
|
+ timer: null,
|
|
|
+ pauseTimer: null,
|
|
|
+ paused: false,
|
|
|
+ resizeTimer: null,
|
|
|
+ loopHeight: 0
|
|
|
+ };
|
|
|
var state = {
|
|
|
oprnos: normalizeOprnos(config.defaultOprnos || []),
|
|
|
data: [],
|
|
|
- chart: null
|
|
|
+ chart: null,
|
|
|
+ scope: config.defaultScope === "today" ? "today" : "all",
|
|
|
+ panelCollapsed: false,
|
|
|
+ seriesName: "全部生产数量"
|
|
|
};
|
|
|
|
|
|
$(function () {
|
|
|
changeZoom();
|
|
|
initPage();
|
|
|
+ bindDelegatedEvents();
|
|
|
refreshData();
|
|
|
setInterval(updateTime, 1000);
|
|
|
setInterval(refreshData, 1000 * 60);
|
|
|
@@ -17,14 +28,19 @@
|
|
|
if (state.chart) {
|
|
|
state.chart.resize();
|
|
|
}
|
|
|
+ scheduleTableAutoScrollRestart();
|
|
|
});
|
|
|
});
|
|
|
|
|
|
function initPage() {
|
|
|
$("#screenTitle").text(config.title || "工位加工记录统计大屏");
|
|
|
+ initTableLayout();
|
|
|
updateTime();
|
|
|
+ updateScopeLabels();
|
|
|
+ syncScopeTabs();
|
|
|
renderInput();
|
|
|
renderTags();
|
|
|
+ applyPanelCollapsed();
|
|
|
|
|
|
$("#addBtn").on("click", addOprno);
|
|
|
$("#addOprno").on("keydown", function (e) {
|
|
|
@@ -47,6 +63,80 @@
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ function bindDelegatedEvents() {
|
|
|
+ $(document).on("click", "#panelCollapseBtn", function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ state.panelCollapsed = !state.panelCollapsed;
|
|
|
+ applyPanelCollapsed();
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).on("click", ".scope-tab", function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ var scope = $(this).attr("data-scope");
|
|
|
+ if (!scope || scope === state.scope) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setScope(scope);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function setScope(scope) {
|
|
|
+ if (scope !== "all" && scope !== "today") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ state.scope = scope;
|
|
|
+ syncScopeTabs();
|
|
|
+ updateScopeLabels();
|
|
|
+ refreshData();
|
|
|
+ }
|
|
|
+
|
|
|
+ function syncScopeTabs() {
|
|
|
+ if (!$(".scope-tab").length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $(".scope-tab").removeClass("is-active");
|
|
|
+ $('.scope-tab[data-scope="' + state.scope + '"]').addClass("is-active");
|
|
|
+ }
|
|
|
+
|
|
|
+ function applyPanelCollapsed() {
|
|
|
+ var $grid = $("#mainGrid");
|
|
|
+ if (!$grid.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $grid.toggleClass("is-folded", state.panelCollapsed);
|
|
|
+ $("#panelCollapseBtn").attr("aria-expanded", state.panelCollapsed ? "false" : "true");
|
|
|
+ $("#panelCollapseBtn").attr("title", state.panelCollapsed ? "展开工位配置" : "收起工位配置");
|
|
|
+ var label = state.panelCollapsed ? "展开" : "收起";
|
|
|
+ $("#panelCollapseBtn .fold-label").text(label);
|
|
|
+ resizeChartLater();
|
|
|
+ scheduleTableAutoScrollRestart();
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateScopeLabels() {
|
|
|
+ var isToday = state.scope === "today";
|
|
|
+ var totalLabel = isToday ? "今日生产数量" : "全部生产数量";
|
|
|
+ var panelTitle = isToday ? "各工位今日生产数量" : "各工位全部生产数量";
|
|
|
+ state.seriesName = totalLabel;
|
|
|
+ if ($("#recordTotalLabel").length) {
|
|
|
+ $("#recordTotalLabel").text(totalLabel);
|
|
|
+ }
|
|
|
+ if ($("#dataPanelTitle").length) {
|
|
|
+ $("#dataPanelTitle").text(panelTitle);
|
|
|
+ }
|
|
|
+ if ($("#recordCountHeader").length) {
|
|
|
+ $("#recordCountHeader").text(totalLabel);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function resizeChartLater() {
|
|
|
+ if (!state.chart) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setTimeout(function () {
|
|
|
+ state.chart.resize();
|
|
|
+ }, 300);
|
|
|
+ }
|
|
|
+
|
|
|
function changeZoom() {
|
|
|
var wb = $(window).width() / 1920;
|
|
|
var hb = $(window).height() / 1080;
|
|
|
@@ -104,7 +194,7 @@
|
|
|
});
|
|
|
$("#tagList").html(html);
|
|
|
$(".tag-remove").on("click", function () {
|
|
|
- removeOprno($(this).data("oprno"));
|
|
|
+ removeOprno($(this).attr("data-oprno"));
|
|
|
});
|
|
|
$("#oprnoTotal").text(state.oprnos.length);
|
|
|
}
|
|
|
@@ -115,15 +205,26 @@
|
|
|
renderData();
|
|
|
return;
|
|
|
}
|
|
|
- $.post("/js/a/mes/mesProduct/screenOprnoRecordCount", {
|
|
|
- oprnos: state.oprnos.join(",")
|
|
|
- }, function (ret) {
|
|
|
- if (ret && ret.result === "true") {
|
|
|
- state.data = ret.data || [];
|
|
|
- } else {
|
|
|
+ $.ajax({
|
|
|
+ type: "POST",
|
|
|
+ url: "/js/a/mes/mesProduct/screenOprnoRecordCount",
|
|
|
+ data: {
|
|
|
+ oprnos: state.oprnos.join(","),
|
|
|
+ dateScope: state.scope
|
|
|
+ },
|
|
|
+ dataType: "json",
|
|
|
+ success: function (ret) {
|
|
|
+ if (ret && ret.result === "true") {
|
|
|
+ state.data = ret.data || [];
|
|
|
+ } else {
|
|
|
+ state.data = [];
|
|
|
+ }
|
|
|
+ renderData();
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
state.data = [];
|
|
|
+ renderData();
|
|
|
}
|
|
|
- renderData();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -142,11 +243,26 @@
|
|
|
renderChart(rows);
|
|
|
}
|
|
|
|
|
|
- function renderTable(rows) {
|
|
|
- if (!rows.length) {
|
|
|
- $("#recordBody").html('<tr><td colspan="3"><div class="empty-row">暂无工位数据</div></td></tr>');
|
|
|
+ function initTableLayout() {
|
|
|
+ var $wrap = $(".table-wrap");
|
|
|
+ if (!$wrap.length || $wrap.data("layout-ready")) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var $table = $wrap.children(".record-table").first();
|
|
|
+ if (!$table.length) {
|
|
|
return;
|
|
|
}
|
|
|
+ var $thead = $table.find("thead").detach();
|
|
|
+ var $shell = $('<div class="table-panel"></div>');
|
|
|
+ var $header = $('<div class="record-table-header"></div>');
|
|
|
+ $header.append($('<table class="record-table"></table>').append($thead));
|
|
|
+ $wrap.before($shell);
|
|
|
+ $shell.append($header);
|
|
|
+ $shell.append($wrap);
|
|
|
+ $wrap.data("layout-ready", true);
|
|
|
+ }
|
|
|
+
|
|
|
+ function buildTableRowsHtml(rows) {
|
|
|
var html = "";
|
|
|
rows.forEach(function (item, index) {
|
|
|
html += "<tr>";
|
|
|
@@ -155,11 +271,100 @@
|
|
|
html += '<td class="count-cell">' + Number(item.recordCount || 0) + "</td>";
|
|
|
html += "</tr>";
|
|
|
});
|
|
|
- $("#recordBody").html(html);
|
|
|
+ return html;
|
|
|
+ }
|
|
|
+
|
|
|
+ function measureLoopHeight() {
|
|
|
+ var $rows = $("#recordBody").children("tr");
|
|
|
+ var half = $rows.length / 2;
|
|
|
+ if (half < 1) {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ return $rows.eq(half)[0].offsetTop - $rows.eq(0)[0].offsetTop;
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderTable(rows) {
|
|
|
+ stopTableAutoScroll();
|
|
|
+ initTableLayout();
|
|
|
+ if (!rows.length) {
|
|
|
+ $("#recordBody").html('<tr><td colspan="3"><div class="empty-row">暂无工位数据</div></td></tr>');
|
|
|
+ tableAutoScroll.loopHeight = 0;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var rowHtml = buildTableRowsHtml(rows);
|
|
|
+ $("#recordBody").html(rowHtml + rowHtml);
|
|
|
+ setTimeout(function () {
|
|
|
+ tableAutoScroll.loopHeight = measureLoopHeight();
|
|
|
+ startTableAutoScroll();
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ function stopTableAutoScroll() {
|
|
|
+ if (tableAutoScroll.timer) {
|
|
|
+ clearInterval(tableAutoScroll.timer);
|
|
|
+ tableAutoScroll.timer = null;
|
|
|
+ }
|
|
|
+ if (tableAutoScroll.pauseTimer) {
|
|
|
+ clearTimeout(tableAutoScroll.pauseTimer);
|
|
|
+ tableAutoScroll.pauseTimer = null;
|
|
|
+ }
|
|
|
+ $(".table-wrap").removeClass("is-auto-scroll");
|
|
|
+ }
|
|
|
+
|
|
|
+ function scheduleTableAutoScrollRestart() {
|
|
|
+ if (tableAutoScroll.resizeTimer) {
|
|
|
+ clearTimeout(tableAutoScroll.resizeTimer);
|
|
|
+ }
|
|
|
+ tableAutoScroll.resizeTimer = setTimeout(function () {
|
|
|
+ tableAutoScroll.loopHeight = measureLoopHeight();
|
|
|
+ startTableAutoScroll();
|
|
|
+ }, 320);
|
|
|
+ }
|
|
|
+
|
|
|
+ function startTableAutoScroll() {
|
|
|
+ if (config.tableAutoScroll === false) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ stopTableAutoScroll();
|
|
|
+ var $wrap = $(".table-wrap");
|
|
|
+ if (!$wrap.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var el = $wrap[0];
|
|
|
+ el.scrollTop = 0;
|
|
|
+ if (!tableAutoScroll.loopHeight || el.scrollHeight <= el.clientHeight + 2) {
|
|
|
+ tableAutoScroll.loopHeight = 0;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var step = Number(config.tableScrollStep) > 0 ? Number(config.tableScrollStep) : 1;
|
|
|
+ var speed = Number(config.tableScrollSpeed) > 0 ? Number(config.tableScrollSpeed) : 35;
|
|
|
+
|
|
|
+ $wrap.addClass("is-auto-scroll");
|
|
|
+ $wrap.off("mouseenter.tableScroll mouseleave.tableScroll");
|
|
|
+ $wrap.on("mouseenter.tableScroll", function () {
|
|
|
+ tableAutoScroll.paused = true;
|
|
|
+ });
|
|
|
+ $wrap.on("mouseleave.tableScroll", function () {
|
|
|
+ tableAutoScroll.paused = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ tableAutoScroll.timer = setInterval(function () {
|
|
|
+ if (tableAutoScroll.paused) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ el.scrollTop += step;
|
|
|
+ while (el.scrollTop >= tableAutoScroll.loopHeight) {
|
|
|
+ el.scrollTop -= tableAutoScroll.loopHeight;
|
|
|
+ }
|
|
|
+ }, speed);
|
|
|
}
|
|
|
|
|
|
function renderChart(rows) {
|
|
|
var chartDom = document.getElementById("recordChart");
|
|
|
+ if (!chartDom) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (!state.chart) {
|
|
|
state.chart = echarts.init(chartDom);
|
|
|
}
|
|
|
@@ -195,7 +400,7 @@
|
|
|
splitLine: { lineStyle: { color: "rgba(255,255,255,0.08)" } }
|
|
|
},
|
|
|
series: [{
|
|
|
- name: "加工记录数",
|
|
|
+ name: state.seriesName,
|
|
|
type: "bar",
|
|
|
barMaxWidth: 46,
|
|
|
data: values,
|
|
|
@@ -253,4 +458,19 @@
|
|
|
.replace(/"/g, """)
|
|
|
.replace(/'/g, "'");
|
|
|
}
|
|
|
+
|
|
|
+ window.MesOprnoScreen = {
|
|
|
+ setScope: setScope,
|
|
|
+ togglePanel: function () {
|
|
|
+ state.panelCollapsed = !state.panelCollapsed;
|
|
|
+ applyPanelCollapsed();
|
|
|
+ },
|
|
|
+ getScope: function () {
|
|
|
+ return state.scope;
|
|
|
+ },
|
|
|
+ isPanelCollapsed: function () {
|
|
|
+ return state.panelCollapsed;
|
|
|
+ },
|
|
|
+ refresh: refreshData
|
|
|
+ };
|
|
|
})();
|