File size: 6,668 Bytes
4c9b9f7 d9e9c09 ddf3c5a d9e9c09 ddf3c5a ee39f4f 21c83f2 a5da0ae 21c83f2 0d40735 21c83f2 4c9b9f7 d9e9c09 350a56c d9e9c09 cc58ba6 2ee4c4d 89f4a55 af77883 89f4a55 af77883 350a56c 4c9b9f7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/ico" href="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.ico">
<title>Таблица данных</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
.container {
width: 100%;
max-width: 100%;
}
/* Шапка */
.header {
width: 100%;
padding: 0px 0; /* Убраны отступы справа и слева */
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f8f9fa;
border-bottom: 1px solid #ddd;
}
/* Кнопки и лейбл в шапке */
.header .buttons,
.header .label {
margin: 0; /* Полностью убраны отступы */
}
button, #filter-clear, #download-json, #take-for-yourself {
color: white;
background-color: #4CAF50;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin: 5px;
transition: background-color 0.3s ease;
}
button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover {
background-color: #388E3C;
}
</style>
</head>
<body>
<!-- Навигационная панель -->
<nav class="navbar navbar-light bg-light w-100">
<div class="container">
<a class="navbar-brand" href="/online">
<img src="https://huggingface.co/spaces/igs-img/stor/resolve/main/list.png" width="30" height="30" class="d-inline-block align-top" alt="">
MackorLab
</a>
<form class="form-inline">
<button id="st_onl" class="btn btn-outline-success" type="button">Онлайн</button>
<button id="st_set" class="btn btn-outline-success" type="button">Настройки</button>
<button id="st_plot" class="btn btn-outline-success" type="button">Графики</button>
<button id="st_table" class="btn btn-success" type="button">Таблица</button>
</form>
</div>
</nav>
<button id="download-xlsx">Download XLSX</button>
<div id="data-table"></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
fetch("/get_all_data")
.then(response => response.json())
.then(data => {
const table = new Tabulator("#data-table", {
layout: "fitColumns",
pagination: "local", // Включаем локальную пагинацию
paginationSize: 50, // Количество строк на странице
paginationSizeSelector: [50, 100, 200], // Выбор количества строк
columns: [
{ title: "ID", field: "id", sorter: "number" },
{ title: "Неделя", field: "wek", sorter: "number" },
{ title: "День", field: "dey", sorter: "number" },
{ title: "Время системы", field: "time_system", sorter: "string" },
{ title: "Уровень pH", field: "ph", sorter: "number" },
{ title: "Уровень EC", field: "ec", sorter: "number" },
{ title: "Темп. раствора", field: "tS", sorter: "number" },
{ title: "Темп. воздуха", field: "tA", sorter: "number" },
{ title: "Влажность воздуха", field: "hDm", sorter: "number" },
{ title: "Об. вентилятора", field: "sVen", sorter: "number" },
{ title: "pH (нас)", field: "nPh", sorter: "number" },
{ title: "EC (нас)", field: "nEC", sorter: "number" },
{ title: "Свет ВКЛ (нас)", field: "nLon", sorter: "string" },
{ title: "Свет ОТКЛ (нас)", field: "nLoff", sorter: "string" },
{ title: "Темп. воздуха (нас)", field: "nTa", sorter: "number" },
{ title: "Насос A (нас)", field: "onA", sorter: "number" },
{ title: "Насос B (нас)", field: "onB", sorter: "number" },
{ title: "Насос C (нас)", field: "onC", sorter: "number" },
{ title: "Дата записи", field: "date_time", sorter: "datetime" }
],
data: data.map(item => ({
...item,
time_system: `${item.v_hid}:${item.v_min}` // Объединяем v_hid и v_min через двоеточие
}))
});
// Добавляем обработчик для кнопки скачивания XLSX
document.getElementById("download-xlsx").addEventListener("click", function () {
table.download("xlsx", "table_data.xlsx", { sheetName: "Данные" });
});
})
.catch(error => console.error("Ошибка загрузки данных:", error));
});
</script>
<script>
document.getElementById("st_onl").addEventListener("click", function() {
var baseUrl = window.location.origin;
var targetUrl = baseUrl + "/online";
window.location.href = targetUrl;
});
</script>
<script>
document.getElementById("st_set").addEventListener("click", function() {
var baseUrl = window.location.origin;
var targetUrl = baseUrl + "/settings";
window.location.href = targetUrl;
});
</script>
<script>
document.getElementById("st_plot").addEventListener("click", function() {
var baseUrl = window.location.origin;
var targetUrl = baseUrl + "/plot_week";
window.location.href = targetUrl;
});
</script>
<script>
document.getElementById("st_table").addEventListener("click", function() {
var baseUrl = window.location.origin;
var targetUrl = baseUrl + "/table";
window.location.href = targetUrl;
});
</script>
</body>
</html>
|