2024-09-21 00:32:07 +05:00
|
|
|
|
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() {
|
2024-09-21 00:39:24 +05:00
|
|
|
|
const url = `${window.location.origin}/api/currcycles`;
|
2024-09-21 00:32:07 +05:00
|
|
|
|
fetch(url, {
|
2024-09-21 01:34:53 +05:00
|
|
|
|
method: 'POST'
|
2024-09-21 00:32:07 +05:00
|
|
|
|
})
|
|
|
|
|
.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);
|
2024-09-21 00:39:24 +05:00
|
|
|
|
const t = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1);
|
2024-09-21 00:32:07 +05:00
|
|
|
|
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;
|
|
|
|
|
};
|