|
|
@@ -0,0 +1,256 @@
|
|
|
+(function () {
|
|
|
+ var config = window.screenOprnoConfig || {};
|
|
|
+ var state = {
|
|
|
+ oprnos: normalizeOprnos(config.defaultOprnos || []),
|
|
|
+ data: [],
|
|
|
+ chart: null
|
|
|
+ };
|
|
|
+
|
|
|
+ $(function () {
|
|
|
+ changeZoom();
|
|
|
+ initPage();
|
|
|
+ refreshData();
|
|
|
+ setInterval(updateTime, 1000);
|
|
|
+ setInterval(refreshData, 1000 * 60);
|
|
|
+ $(window).resize(function () {
|
|
|
+ changeZoom();
|
|
|
+ if (state.chart) {
|
|
|
+ state.chart.resize();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ function initPage() {
|
|
|
+ $("#screenTitle").text(config.title || "工位加工记录统计大屏");
|
|
|
+ updateTime();
|
|
|
+ renderInput();
|
|
|
+ renderTags();
|
|
|
+
|
|
|
+ $("#addBtn").on("click", addOprno);
|
|
|
+ $("#addOprno").on("keydown", function (e) {
|
|
|
+ if (e.keyCode === 13) {
|
|
|
+ addOprno();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $("#queryBtn").on("click", function () {
|
|
|
+ state.oprnos = normalizeOprnos($("#oprnoInput").val());
|
|
|
+ renderInput();
|
|
|
+ renderTags();
|
|
|
+ refreshData();
|
|
|
+ });
|
|
|
+ $("#clearBtn").on("click", function () {
|
|
|
+ state.oprnos = [];
|
|
|
+ state.data = [];
|
|
|
+ renderInput();
|
|
|
+ renderTags();
|
|
|
+ renderData();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function changeZoom() {
|
|
|
+ var wb = $(window).width() / 1920;
|
|
|
+ var hb = $(window).height() / 1080;
|
|
|
+ var scale = wb >= hb ? hb : wb;
|
|
|
+ $(".screen-page").css({
|
|
|
+ transform: "scale(" + scale + ")",
|
|
|
+ transformOrigin: "top left",
|
|
|
+ marginLeft: Math.max(0, ($(window).width() - 1920 * scale) / 2) + "px",
|
|
|
+ marginTop: Math.max(0, ($(window).height() - 1080 * scale) / 2) + "px"
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateTime() {
|
|
|
+ var now = new Date();
|
|
|
+ var text = pad(now.getFullYear()) + "-" + pad(now.getMonth() + 1) + "-" + pad(now.getDate()) +
|
|
|
+ " " + pad(now.getHours()) + ":" + pad(now.getMinutes()) + ":" + pad(now.getSeconds());
|
|
|
+ $("#screenTime").text(text);
|
|
|
+ }
|
|
|
+
|
|
|
+ function pad(num) {
|
|
|
+ return num < 10 ? "0" + num : "" + num;
|
|
|
+ }
|
|
|
+
|
|
|
+ function addOprno() {
|
|
|
+ var value = $("#addOprno").val();
|
|
|
+ var addList = normalizeOprnos(value);
|
|
|
+ if (!addList.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ state.oprnos = normalizeOprnos(state.oprnos.concat(addList));
|
|
|
+ $("#addOprno").val("");
|
|
|
+ renderInput();
|
|
|
+ renderTags();
|
|
|
+ refreshData();
|
|
|
+ }
|
|
|
+
|
|
|
+ function removeOprno(oprno) {
|
|
|
+ state.oprnos = state.oprnos.filter(function (item) {
|
|
|
+ return item !== oprno;
|
|
|
+ });
|
|
|
+ renderInput();
|
|
|
+ renderTags();
|
|
|
+ refreshData();
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderInput() {
|
|
|
+ $("#oprnoInput").val(state.oprnos.join("\n"));
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderTags() {
|
|
|
+ var html = "";
|
|
|
+ state.oprnos.forEach(function (oprno) {
|
|
|
+ html += '<span class="tag-item">' + escapeHtml(oprno) +
|
|
|
+ '<span class="tag-remove" data-oprno="' + escapeHtml(oprno) + '">×</span></span>';
|
|
|
+ });
|
|
|
+ $("#tagList").html(html);
|
|
|
+ $(".tag-remove").on("click", function () {
|
|
|
+ removeOprno($(this).data("oprno"));
|
|
|
+ });
|
|
|
+ $("#oprnoTotal").text(state.oprnos.length);
|
|
|
+ }
|
|
|
+
|
|
|
+ function refreshData() {
|
|
|
+ if (!state.oprnos.length) {
|
|
|
+ state.data = [];
|
|
|
+ renderData();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $.post("/js/a/mes/mesProduct/screenOprnoRecordCount", {
|
|
|
+ oprnos: state.oprnos.join(",")
|
|
|
+ }, function (ret) {
|
|
|
+ if (ret && ret.result === "true") {
|
|
|
+ state.data = ret.data || [];
|
|
|
+ } else {
|
|
|
+ state.data = [];
|
|
|
+ }
|
|
|
+ renderData();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderData() {
|
|
|
+ var rows = state.data.filter(function (item) {
|
|
|
+ return item.oprno !== "合计";
|
|
|
+ });
|
|
|
+ var total = 0;
|
|
|
+ rows.forEach(function (item) {
|
|
|
+ total += Number(item.recordCount || 0);
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#recordTotal").text(total);
|
|
|
+ $("#maxOprno").text(getMaxText(rows));
|
|
|
+ renderTable(rows);
|
|
|
+ renderChart(rows);
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderTable(rows) {
|
|
|
+ if (!rows.length) {
|
|
|
+ $("#recordBody").html('<tr><td colspan="3"><div class="empty-row">暂无工位数据</div></td></tr>');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var html = "";
|
|
|
+ rows.forEach(function (item, index) {
|
|
|
+ html += "<tr>";
|
|
|
+ html += "<td>" + (index + 1) + "</td>";
|
|
|
+ html += '<td class="oprno-cell">' + escapeHtml(item.oprno) + "</td>";
|
|
|
+ html += '<td class="count-cell">' + Number(item.recordCount || 0) + "</td>";
|
|
|
+ html += "</tr>";
|
|
|
+ });
|
|
|
+ $("#recordBody").html(html);
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderChart(rows) {
|
|
|
+ var chartDom = document.getElementById("recordChart");
|
|
|
+ if (!state.chart) {
|
|
|
+ state.chart = echarts.init(chartDom);
|
|
|
+ }
|
|
|
+ var names = rows.map(function (item) { return item.oprno; });
|
|
|
+ var values = rows.map(function (item) { return Number(item.recordCount || 0); });
|
|
|
+ state.chart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: { type: "shadow" },
|
|
|
+ backgroundColor: "rgba(20, 55, 120, 0.9)",
|
|
|
+ borderColor: "#008ffd",
|
|
|
+ textStyle: { color: "#fff" }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "4%",
|
|
|
+ right: "4%",
|
|
|
+ top: "12%",
|
|
|
+ bottom: "10%",
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: names,
|
|
|
+ axisLine: { lineStyle: { color: "#2a7db8" } },
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLabel: { color: "#fff", fontSize: 16, interval: 0 }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLine: { lineStyle: { color: "#2a7db8" } },
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLabel: { color: "#fff", fontSize: 14 },
|
|
|
+ splitLine: { lineStyle: { color: "rgba(255,255,255,0.08)" } }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: "加工记录数",
|
|
|
+ type: "bar",
|
|
|
+ barMaxWidth: 46,
|
|
|
+ data: values,
|
|
|
+ itemStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: "#40de78" },
|
|
|
+ { offset: 1, color: "#008ffd" }
|
|
|
+ ]),
|
|
|
+ barBorderRadius: [4, 4, 0, 0]
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }, true);
|
|
|
+ }
|
|
|
+
|
|
|
+ function getMaxText(rows) {
|
|
|
+ if (!rows.length) {
|
|
|
+ return "--";
|
|
|
+ }
|
|
|
+ var max = rows[0];
|
|
|
+ rows.forEach(function (item) {
|
|
|
+ if (Number(item.recordCount || 0) > Number(max.recordCount || 0)) {
|
|
|
+ max = item;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return max.oprno + " / " + Number(max.recordCount || 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ function normalizeOprnos(input) {
|
|
|
+ var source = Array.isArray(input) ? input.join(",") : String(input || "");
|
|
|
+ var items = source.split(/[,,;;\s]+/);
|
|
|
+ var map = {};
|
|
|
+ var ret = [];
|
|
|
+ items.forEach(function (item) {
|
|
|
+ var oprno = $.trim(item || "").toUpperCase();
|
|
|
+ if (!oprno || map[oprno]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ map[oprno] = true;
|
|
|
+ ret.push(oprno);
|
|
|
+ });
|
|
|
+ return ret;
|
|
|
+ }
|
|
|
+
|
|
|
+ function escapeHtml(value) {
|
|
|
+ return String(value == null ? "" : value)
|
|
|
+ .replace(/&/g, "&")
|
|
|
+ .replace(/</g, "<")
|
|
|
+ .replace(/>/g, ">")
|
|
|
+ .replace(/"/g, """)
|
|
|
+ .replace(/'/g, "'");
|
|
|
+ }
|
|
|
+})();
|