Fix index page
This commit is contained in:
parent
e10cb6795e
commit
791aa1e85b
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() {
|
||||
const url = `${window.location.origin}/api/currcycles`;
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
method: 'POST'
|
||||
})
|
||||
.then(response => {
|
||||
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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user