Fix index page
This commit is contained in:
65
index.html
Normal file
65
index.html
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Текущий статус печей</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles/index.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div id="First_Head" class="row m-0 pl-1 pr-1 pt-1 pb-0">
|
||||||
|
<div id="Main" class="col-12 text-center">
|
||||||
|
Диаграмма статуса печей
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="Second_Head" class="row m-0 pl-1 pr-1 pt-0 pb-1 align-items-center">
|
||||||
|
<div class="col-12 col-lg-4 text-center">
|
||||||
|
Время клиента: <span id="DateClient"></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-lg-4 text-center">
|
||||||
|
Время сервера: <span id="DateServer"></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-lg-4 text-center">
|
||||||
|
Время синхр.: <span id="DateSynch"></span>
|
||||||
|
</div>
|
||||||
|
<div id="Error_Border" class="col-12 text-center m-0 alert alert-danger alert-dismissible fade show" role="alert">
|
||||||
|
<strong>Ошибка: </strong> <span id="Error_Message">Здесь будет текст ошибки</span>
|
||||||
|
<button id="Update_Button" type="button" class="close" aria-label="Close">↻</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="Canvas_Body">
|
||||||
|
<canvas id="canvas"> </canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="Third_Head" class="row m-0 pl-1 pr-1 pt-0 pb-0 align-items-center">
|
||||||
|
<div class="col-12 text-left">
|
||||||
|
<span class="status-indicator" style="background-color: #0ff;"></span>Выгрузка-загрузка,
|
||||||
|
<span class="status-indicator" style="background-color: #00f;"></span>Вакуумирование,
|
||||||
|
<span class="status-indicator" style="background-color: #f00;"></span>Токовая операция,
|
||||||
|
<span class="status-indicator" style="background-color: #0f0;"></span>Охлаждение,
|
||||||
|
<span class="status-indicator" style="background-color: #8500b6;"></span>Разведение,
|
||||||
|
<span class="status-indicator" style="background-color: #f0f;"></span>ВУР
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-left">
|
||||||
|
<span class="status-indicator-small" style="background-color: #00f;"></span>Приварка,
|
||||||
|
<span class="status-indicator-small" style="background-color: #0f0;"></span>Плавка,
|
||||||
|
<span class="status-indicator-small" style="background-color: #f00;"></span>Оплав
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-right fixed-button">
|
||||||
|
<a href="test.html" class="btn btn-primary">Тест</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script src="CanvasCycleVDP/Diagram.min.js"></script>
|
||||||
|
<script src="scripts/index.js"></script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
152
scripts/index.js
Normal file
152
scripts/index.js
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
// Global Params
|
||||||
|
const htmlDateClient = document.getElementById("DateClient");
|
||||||
|
const htmlDateServer = document.getElementById("DateServer");
|
||||||
|
const htmlDateSynch = document.getElementById("DateSynch");
|
||||||
|
const htmlErrMSG = document.getElementById("Error_Message");
|
||||||
|
const canvas = document.getElementById("canvas");
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
const update_button = document.getElementById("Update_Button");
|
||||||
|
|
||||||
|
const diagram = new Diagram(0.5, 0.5, canvas.width - 1, canvas.height - 1);
|
||||||
|
diagram.BuildDefault();
|
||||||
|
diagram.Cycle(true);
|
||||||
|
|
||||||
|
// Date formatting functions
|
||||||
|
const FNL = (a, b) => String(a).padStart(b, '0');
|
||||||
|
const DateToString = (date) => `${date.getFullYear()}.${FNL(date.getMonth() + 1, 2)}.${FNL(date.getDate(), 2)} ${FNL(date.getHours(), 2)}:${FNL(date.getMinutes(), 2)}:${FNL(date.getSeconds(), 2)}`;
|
||||||
|
|
||||||
|
let dateClient = null;
|
||||||
|
let dateServer = null;
|
||||||
|
let dateSynch = null;
|
||||||
|
|
||||||
|
function PrintDateNow() {
|
||||||
|
const dn = new Date();
|
||||||
|
if (dateServer && dateClient) {
|
||||||
|
dateServer.setMilliseconds(dateServer.getMilliseconds() + (dn - dateClient));
|
||||||
|
}
|
||||||
|
dateClient = dn;
|
||||||
|
htmlDateClient.innerHTML = DateToString(dateClient);
|
||||||
|
if (dateServer) {
|
||||||
|
htmlDateServer.innerHTML = DateToString(dateServer);
|
||||||
|
}
|
||||||
|
if (dateSynch) {
|
||||||
|
htmlDateSynch.innerHTML = DateToString(dateSynch);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(PrintDateNow, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateDate(type, date) {
|
||||||
|
if (date instanceof Date) {
|
||||||
|
if (type === 'server') {
|
||||||
|
dateClient = null;
|
||||||
|
dateServer = date;
|
||||||
|
} else if (type === 'sync') {
|
||||||
|
dateSynch = date;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (type === 'server') dateServer = null;
|
||||||
|
else if (type === 'synch') dateSynch = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function updateDateSynch(date) {
|
||||||
|
if (typeof date.getMonth === 'function') {
|
||||||
|
dateSynch = date;
|
||||||
|
} else
|
||||||
|
dateSynch = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Resize canvas
|
||||||
|
function Resize() {
|
||||||
|
const isWide = window.innerWidth > window.innerHeight;
|
||||||
|
canvas.height = isWide
|
||||||
|
? window.innerHeight - 20
|
||||||
|
- document.getElementById("First_Head").offsetHeight
|
||||||
|
- document.getElementById("Second_Head").offsetHeight
|
||||||
|
- document.getElementById("Third_Head").offsetHeight
|
||||||
|
: diagram.ProcCount() * 25;
|
||||||
|
canvas.width = document.getElementById("Canvas_Body").offsetWidth;
|
||||||
|
diagram.Rotate(!isWide);
|
||||||
|
diagram.RectParam(0.5, 0.5, canvas.width - 1, canvas.height - 1);
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
diagram.Print(ctx);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("load", Resize, false);
|
||||||
|
window.addEventListener("resize", Resize, false);
|
||||||
|
|
||||||
|
// Autoprint diagram
|
||||||
|
function PrintCycle() {
|
||||||
|
diagram.Print(ctx);
|
||||||
|
setTimeout(PrintCycle, 1000);
|
||||||
|
};
|
||||||
|
PrintCycle();
|
||||||
|
|
||||||
|
function handleError(message) {
|
||||||
|
htmlErrMSG.innerHTML = message;
|
||||||
|
$("#Error_Border").show();
|
||||||
|
$("#Update_Button").show();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update Status
|
||||||
|
async function UpdateStatus() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('api/currcycles', {
|
||||||
|
method: 'POST'
|
||||||
|
});
|
||||||
|
|
||||||
|
if(!response.ok) {
|
||||||
|
throw new Error("Не удается установить соединение");
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if(!data.currTime) {
|
||||||
|
throw new Error("Ошибка в полученных данных: отсутствует время сервера");
|
||||||
|
}
|
||||||
|
|
||||||
|
updateDate('synch', new Date());
|
||||||
|
updateDate('server', new Date(data.currTime));
|
||||||
|
|
||||||
|
if (!Array.isArray(data.data)) {
|
||||||
|
throw new Error("Ошибка в полученных данных: отсутствует массив данных");
|
||||||
|
}
|
||||||
|
|
||||||
|
const cycleMapping = {
|
||||||
|
0: [0, -1], 1: [0, 1], 2: [1, 0], 5: [2, 0], 6: [3, 0],
|
||||||
|
7: [4, 0], 8: [5, 3], 9: [6, 3], 10: [7, 3], 11: [8, 3],
|
||||||
|
12: [9, 3], 14: [1, 1], 15: [2, 1], 16: [3, 1]
|
||||||
|
};
|
||||||
|
|
||||||
|
data.data.forEach(item => {
|
||||||
|
const idx = item.vdp - 1;
|
||||||
|
const [s, b] = cycleMapping[item.cycle] || [-1, -1];
|
||||||
|
diagram.ChangeStatProc(idx, s, 0);
|
||||||
|
diagram.ChangeStatBlink(idx, b);
|
||||||
|
diagram.StartDate(idx, new Date(item.factStart));
|
||||||
|
diagram.EndDate(idx, new Date(item.thinkEnd));
|
||||||
|
});
|
||||||
|
|
||||||
|
diagram.Cycle(true);
|
||||||
|
diagram.Print(ctx);
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error.message);
|
||||||
|
} finally {
|
||||||
|
setTimeout(UpdateStatus, 60 * 1000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
UpdateStatus();
|
||||||
|
|
||||||
|
function ConvDate(a) {
|
||||||
|
const [datePart, timePart] = a.split("T");
|
||||||
|
const [year, month, day] = datePart.split("-");
|
||||||
|
const [hours, minutes, seconds] = timePart.split(":");
|
||||||
|
return new Date(year, month - 1, day, hours, minutes, seconds);
|
||||||
|
};
|
||||||
|
|
||||||
|
update_button.onclick = UpdateStatus;
|
||||||
|
|
||||||
|
PrintDateNow();
|
||||||
@@ -266,7 +266,7 @@ but6.onclick = function () {
|
|||||||
function sendCycleData() {
|
function sendCycleData() {
|
||||||
const url = `${window.location.origin}/api/currcycles`;
|
const url = `${window.location.origin}/api/currcycles`;
|
||||||
fetch(url, {
|
fetch(url, {
|
||||||
method: 'POST',
|
method: 'POST'
|
||||||
})
|
})
|
||||||
.then(response => {
|
.then(response => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
|
|||||||
28
styles/index.css
Normal file
28
styles/index.css
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
@media (min-width: 768px){
|
||||||
|
#Main {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fixed-button {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0px 5px 0px 0px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator-small {
|
||||||
|
display: inline-block;
|
||||||
|
height: 9px;
|
||||||
|
margin: 10px 5px 0px 0px;
|
||||||
|
padding: 0px 19px 0px 0px;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user