let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); //Функция изменения размера полотна let menu = document.getElementById('menu'); let resizeTimeout; function Resize() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { canvas.width = window.innerWidth - 20; canvas.height = window.innerHeight - 30 - menu.clientHeight; }, 100); } window.addEventListener("load", Resize, false); window.addEventListener("resize", Resize, false); //Флаги для теста let chkText = document.getElementById('PText'); let chkData = document.getElementById('DefData'); let chkRotate = document.getElementById('Rotate'); let chkloop = document.getElementById('ChkLoop'); //Глобальные параметры для теста const columnHeightBase = 200; const columnWidthBase = 40; const rectHeightBase = 40; const rectWidthBase = 70; const elementSpacing = 5; //Функция проверки столбцов процесса let but1 = document.getElementById('TestPercent'); but1.onclick = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); let height = columnHeightBase; let width = columnWidthBase; if (chkRotate.checked){ [height, width] = [width, height]; } const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing)) const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing)) for (let i = 0; i < maxColumnsX; i++) { for (let j = 0; j < maxColumnsY; j++) { const x = (i * (width + elementSpacing)) + 0.5; const y = (j * (height + elementSpacing)) + 0.5; const t = new PercentColumn(x, y, width, height); if (!chkData.checked){ t.Color(getRColor()); } t.Percent(Math.random() * 101); t.Rotate(chkRotate.checked); t.Print(ctx); if (chkText.checked){ t.PrintText(ctx); } } } }; //Функция проверки столбцов статусов let but2 = document.getElementById('TestProcess'); but2.onclick = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); let height = columnHeightBase; let width = columnWidthBase; if (chkData.checked){ height *= 2; } if (chkRotate.checked){ [height, width] = [width, height]; } const count = Math.floor(Math.random() * 6 + 2); const arrPoint = Array.from({ length: count }, () => Math.random() * 5 + 1); const arrColor = Array.from({ length: count }, () => getRColor()); const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing)) const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing)) for (let i = 0; i < maxColumnsX; i++) { for (let j = 0; j < maxColumnsY; j++) { const x = (i * (width + elementSpacing)) + 0.5; const y = (j * (height + elementSpacing)) + 0.5; const t = new ProcessColumn(x, y, width, height); t.Rotate(chkRotate.checked); if (chkData.checked){ t.BuildDefault(); } else { for (let k = 0; k < count; k++) { t.AddRStat(k, arrPoint[k], arrColor[k]); } } t.Status(Math.floor(Math.random() * (t.StatCount() + 1) - 1)); t.Percent(Math.random() * 101); t.Print(ctx); if (chkText.checked) { t.PrintText(ctx); } } } }; //Функция проверки мигалки let but3 = document.getElementById('TestBlinkStatus'); but3.onclick = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); let height = rectHeightBase; let width = rectWidthBase; if (chkRotate.checked){ [height, width] = [width, height]; } const count = Math.floor(Math.random() * 5 + 1); const arrColor = Array.from({ length: count }, () => getRColor()); const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing)); const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing)); for (let i = 0; i < maxColumnsX; i++) { for (let j = 0; j < maxColumnsY; j++) { const x = (i * (width + elementSpacing)) + 0.5; const y = (j * (height + elementSpacing)) + 0.5; const t = new BlinkStatus( x, y, width, height); t.Rotate(chkRotate.checked); if (chkData.checked) { t.BuildDefault(); } else { for (let k = 0; k < count; k++) { t.AddStatus(k, arrColor[k]); } } t.Status(Math.floor(Math.random() * (t.StatCount() + 1) - 1)); t.Print(ctx); if (chkText.checked) { t.PrintText(ctx); } } } }; //Функция проверки номера let but4 = document.getElementById('TestNumberColumn'); but4.onclick = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); let height = rectHeightBase; let width = rectWidthBase; if (chkRotate.checked){ [height, width] = [width, height]; } const maxColumnsX = Math.floor((canvas.width - 1) / (width + elementSpacing)); const maxColumnsY = Math.floor((canvas.height - 1) / (height + elementSpacing)); let num = 0; for (var i = 0; i < maxColumnsX; i++) { for (var j = 0; j < maxColumnsY; j++) { const x = (i * (width + elementSpacing)) + 0.5; const y = (j * (height + elementSpacing)) + 0.5; const t = new NumberColumn(x, y, width, height, num++); t.Rotate(chkRotate.checked); t.Prostoy(Math.random() < 0.5); t.Print(ctx); } } }; //Переменные для диаграммы let cycle; let diagTest; //Функция цикла function cycle_print() { diagTest.RectParam(0.5, 0.5, canvas.width - 1, canvas.height - 1) diagTest.Print(ctx); if (chkText.checked) { diagTest.PrintText(ctx); } if (diagTest.Cycle()) { cycle = setTimeout(cycle_print, 1000); } } let but5 = document.getElementById('TestDiagramStove'); but5.onclick = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); diagTest = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1); if (chkData.checked) { diagTest.BuildDefault(); for (let i = 0; i < diagTest.ProcCount(); i++) { diagTest.ChangeStatProc(i, Math.floor(Math.random() * 11), Math.floor(Math.random() * 101)); diagTest.ChangeStatBlink(i, Math.floor(Math.random() * 5 - 1)); diagTest.ChangeStatNumb(i, Math.random() < 0.5); } } else { const countStove = Math.floor(Math.random() * 20 + 30); const countProc = Math.floor(Math.random() * 9 + 1); const countBlink = Math.floor(Math.random() * 4 + 1); const colorProc = Array.from({ length: countProc }, () => getRColor()); const pointProc = Array.from({ length: countProc }, () => Math.random() * 10); const colorBlink = Array.from({ length: countBlink }, () => getRColor()); for (let i = 0; i < countStove; i++) { const tP = new ProcessColumn(0, 0, 0, 0); for (let k = 0; k < countProc; k++) { tP.AddRStat(k, pointProc[k], colorProc[k]); } tP.Status(Math.floor(Math.random() * countProc)); tP.Percent(Math.floor(Math.random() * 101)); const tB = new BlinkStatus(0, 0, 0, 0); for (let k = 0; k < countBlink; k++) { tB.AddStatus(k, colorBlink[k]); } tB.Status(Math.floor(Math.random() * (countBlink + 1) -1)); const tN = new NumberColumn(0, 0, 0, 0, i + 1); tN.Prostoy(Math.random() < 0.5); diagTest.AddProc(i, tP, tB, tN); } } diagTest.Rotate(chkRotate.checked); if (chkloop.checked) { for (let i = 0; i < diagTest.ProcCount(); i++) { const dStart = new Date(); const dEnd = new Date(); dStart.setSeconds(dStart.getSeconds() + Math.floor(Math.random() * 61 - 50)); dEnd.setSeconds(dEnd.getSeconds() + Math.floor(Math.random() * 61 - 10)); diagTest.StartDate(i, dStart); diagTest.EndDate(i, dEnd); } diagTest.Cycle(true); cycle_print(); } else { diagTest.Print(ctx); if (chkText.checked) { diagTest.PrintText(ctx); } } }; let but6 = document.getElementById('TestPost'); let btn6CycleSend; but6.onclick = function () { sendCycleData(); } function sendCycleData() { const url = `${window.location.origin}/api/currcycles`; fetch(url, { method: 'POST' }) .then(response => { if (!response.ok) { throw new Error(`${response.status}: ${response.statusText}`); } return response.text(); }) .then(data => { PrintDiagram(data); handleLoop(); }) .catch(error => { alert(error.message); }); }; function handleLoop() { but6.disabled = chkloop.checked; if (but6.disabled) { btn6CycleSend = setTimeout(sendCycleData, 60000); } }; function PrintDiagram(pechstatus) { const Pech = JSON.parse(pechstatus); ctx.clearRect(0, 0, canvas.width, canvas.height); const t = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1); t.BuildDefault(); t.Rotate(chkRotate.checked); const cycleMapping = { 0: { s: 0, b: -1 }, 1: { s: 0, b: 1 }, 2: { s: 1, b: 0 }, 5: { s: 2, b: 0 }, 6: { s: 3, b: 0 }, 7: { s: 4, b: 0 }, 8: { s: 5, b: 3 }, 9: { s: 6, b: 3 }, 10: { s: 7, b: 3 }, 11: { s: 8, b: 3 }, 12: { s: 9, b: 3 }, 14: { s: 1, b: 1 }, 15: { s: 2, b: 1 }, 16: { s: 3, b: 1 }, }; for(const key in Pech.data) { const idx = Pech.data[key].vdp - 1; const cycleInfo = cycleMapping[Pech.data[key].cycle] || { s: 0, b: -1 }; t.ChangeStatProc(idx, cycleInfo.s, 0); t.ChangeStatBlink(idx, cycleInfo.b); t.StartDate(idx, new Date(Pech.data[key].factStart)); t.EndDate(idx, new Date(Pech.data[key].thinkEnd)); } t.Print(ctx); if (chkText.checked) { t.PrintText(ctx); } }; function getRColor() { const letters = '0123456789ABCDEF'; const color = '#' + Array.from({ length: 6 }, () => letters[Math.floor(Math.random() * 16)]).join(''); return color; };