<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, introductory scale=1"> <title>Панель управления</title> <link rel="stylesheet" href="../styles/main.css" /> </head> <body> <style> .main .name { margin-bottom: 100px !important; } .main { margin-top: 92px !important; } .main .bg { min-height: calc(100vh - 162px - 92px); } </style> <div class="page-transition"></div> <header> <img src="../img/argus.png"> <h1>Аргус</h1> <h2><span>/</span> {{Organisation}}</h2> </header> <section class="account-info"> <div id="account-main"> <img id="person" src="../img/person.svg"> <span>{{User}}</span> <img id="down" src="../img/down.svg"> <img id="up" src="../img/up.svg"> </div> <a href="/logout"><div id="account-additional" class="additional">Выйти</div></a> </section> <section class="navigation"> <a href="/"> <div class="selected"><img src="../img/chart.svg">Главная</div> </a> <a href="/devices"> <div><img src="../img/cloud.svg">Устройства</div> </a> <a href="/reports"> <div><img src="../img/bubble.svg">Отчёты</div> </a> <a href="/live"> <div><img src="../img/waves.svg">Трансляция</div> </a> <a href="/videos"> <div><img src="../img/play.svg">Записи</div> </a> <a href="https://forms.yandex.ru/cloud/6515ecda3e9d08f17262c332/" target="_blank"> <div><img src="../img/bug.svg">Собщить об ошибке</div> </a> {{#if isAdmin}} <a class="admin-panel" href="/admin"> <div><img src="../img/keyboard.svg">Админка</div> </a> {{/if}} <a class="settings" href="/settings"> <div><img src="../img/gear.svg">Настройки</div> </a> </section> <section class="main"> {{#if ifDBError}} <section class="dberror"> <div class="erorr-container"> <img src="../img/warning.svg"> <br> <h1>Ошибка </h1> <br> <span>Не удалось получить данные из БД</span> <button type="button" onclick="location.reload();">Повторить попытку</button> </div> </section> {{/if}} <div class="name"> <img src="../img/cars.svg"><span>Сводка по {{Count}} ТС</span> </div> <section class="bg"> <section class="content"> <div class="graph left"> <h1>Предупреждения</h1> <span>10 д</span> <div class="chart"> <canvas id="chart-warnings"></canvas> </div> </div> <div class="graph right"> <h1>Позиционирование</h1> <span>10 д</span> <div class="chart"> <canvas id="chart-positions"></canvas> </div> </div> </section> </section> </section> <script> var warningsData = { labels: [ {{#each Dates}} '{{this}}', {{/each}} ], datasets: [ { label: "Актуальный период", backgroundColor: "rgba(235, 146, 139, 1)", borderWidth: 0, borderRadius: 9, hoverBackgroundColor: "rgba(235, 146, 139, 0.8)", data: [{{AlarmsLast11Days}}], grouped: false, }, { label: "Предыдущий период", backgroundColor: "rgba(235, 146, 139, 0.5)", borderWidth: 0, borderRadius: 9, hoverBackgroundColor: "rgba(235, 146, 139, 0.3)", data: [{{Alarms11DaysBefore}}], }, ], }; var positionsData = { labels: [ {{#each Dates}} '{{this}}', {{/each}} ], datasets: [ { label: "Позиционирование", borderColor: "#8086F9", fill: false, data: [ {{PositionsLast11Days}} ], pointStyle: false, pointRadius: 25, pointHoverRadius: 25, tension: 0.4, }, ], }; </script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="../scripts/graphs.js"></script> <script> // Скрытие/Показ дополнительных меню аккаунта const accountMain = document.getElementById('account-main'); const accountAdditional = document.getElementById('account-additional'); const accountUp = document.getElementById('up'); const accountDown = document.getElementById('down'); accountAdditional.style.display = 'none'; accountUp.style.display = 'none'; accountMain.addEventListener('click', () => { if (accountAdditional.style.display === 'none') { accountAdditional.style.display = 'flex'; accountUp.style.display = 'unset'; accountDown.style.display = 'none'; } else { accountAdditional.style.display = 'none'; accountUp.style.display = 'none'; accountDown.style.display = 'unset'; } }); </script> </body> </html>