KRBL/ArgusSite
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

update main graphs, live properties

Browse Source
This commit is contained in:
Ivan 2023-08-14 07:11:03 +03:00
parent 1b5fa033f8
commit 4ef2fe7735
Signed by untrusted user who does not match committer: ppechenkoo
GPG Key ID: 0C191B86D9582583
5 changed files with 193 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
server.js
View File

@ -50,6 +50,10 @@ async function index(req, res) {
User: "Тестовое Имя",
ifDBError: false,
Count: "",
AlarmsLast11Days: new Array(11).fill(0),
Alarms11DaysBefore: new Array(11).fill(0),
Dates: [],
PositionsLast11Days: new Array(11).fill(0),
};
try {
const pool = new Pool({
@ -69,7 +73,67 @@ async function index(req, res) {
templateData.Count = registrars.rows[0].count;
console.log(templateData);
const last11DaysQuery = `
SELECT COUNT(DISTINCT evtuuid) AS count
FROM alarms
WHERE time >= NOW() - INTERVAL '10 days' + INTERVAL '3 hours'
AND time <= NOW() + INTERVAL '1 day' + INTERVAL '3 hours'
AND st IS NOT NULL
GROUP BY DATE_TRUNC('day', time)
ORDER BY DATE_TRUNC('day', time)
`;
const last11DaysAlarms = await client.query(last11DaysQuery);
const last11DaysCounts = last11DaysAlarms.rows.map(row => parseInt(row.count, 10));
for (let i = 0; i < last11DaysCounts.length; i++) {
if (last11DaysCounts[i] > 0) {
templateData.AlarmsLast11Days[i] = last11DaysCounts[i];
}
}
const daysBeforeQuery = `
SELECT COUNT(DISTINCT evtuuid) AS count
FROM alarms
WHERE time >= NOW() - INTERVAL '21 days' + INTERVAL '3 hours'
AND time <= NOW() - INTERVAL '10 days' + INTERVAL '3 hours'
AND st IS NOT NULL
GROUP BY DATE_TRUNC('day', time)
ORDER BY DATE_TRUNC('day', time)
`;
const daysBeforeAlarms = await client.query(daysBeforeQuery);
const daysBeforeCounts = daysBeforeAlarms.rows.map(row => parseInt(row.count, 10));
for (let i = 0; i < daysBeforeCounts.length; i++) {
if (daysBeforeCounts[i] > 0) {
templateData.Alarms11DaysBefore[i] = daysBeforeCounts[i];
}
}
// Создание массива дат в формате "dd.mm" за последние 11 дней
const currentDate = new Date();
const dates = [];
for (let i = 10; i >= 0; i--) {
const date = new Date(currentDate - i * 24 * 60 * 60 * 1000);
const formattedDate = date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' });
dates.push(formattedDate);
}
templateData.Dates = dates;
const positionsLast11DaysQuery = `
SELECT COUNT(*) AS count
FROM geo
WHERE time >= NOW() - INTERVAL '10 days' + INTERVAL '3 hours'
AND time <= NOW() + INTERVAL '1 day' + INTERVAL '3 hours'
GROUP BY DATE_TRUNC('day', time)
ORDER BY DATE_TRUNC('day', time)
`;
const positionsLast11Days = await client.query(positionsLast11DaysQuery);
const positionsLast11DaysCounts = positionsLast11Days.rows.map(row => parseInt(row.count, 10));
for (let i = 0; i < positionsLast11DaysCounts.length; i++) {
if (positionsLast11DaysCounts[i] > 0) {
templateData.PositionsLast11Days[i] = positionsLast11DaysCounts[i];
}
}
// console.log(templateData);
const source = fs.readFileSync("static/templates/index.html", "utf8");
@ -87,6 +151,7 @@ async function index(req, res) {
res.send(resultT);
}
}
function login(req, res) {
res.sendFile(path.join(__dirname, "static/templates/login.html"));
}
@ -309,7 +374,7 @@ app.post("/devices-geo", async (req, res) => {
.map((_, index) => `$${index + 1}`)
.join(",");
const subquery = `
SELECT g.serial, g.longitude, g.latitude, g.direction, g.speed, r.lastkeepalive
SELECT g.serial, g.longitude, g.latitude, g.direction, g.speed, r.lastkeepalive, r.plate, r.group
FROM geo g
INNER JOIN (
SELECT serial, MAX(time) AS time
@ -340,12 +405,17 @@ pool.query(subquery, selectedDevices, (err, result) => {
direction: row.direction,
speed: row.speed,
status: Date.now() - Date.parse(row.lastkeepalive) <= minuteInMillis,
plate: row.plate,
group: row.group,
}));
console.log(devicesData)
res.json({ devicesData });
});
});
async function reports(req, res) {
let templateData = {
Organisation: "Название организации",

68
static/scripts/graphs.js
View File

@ -2,40 +2,7 @@ Chart.defaults.color = "rgba(0, 0, 0, 0.4)";
Chart.defaults.font.size = 15;
Chart.defaults.font.weight = 400;
var warningsData = {
labels: [
"9.03",
"10.03",
"11.03",
"12.03",
"13.03",
"14.03",
"15.03",
"16.03",
"17.03",
"18.03",
"19.03",
],
datasets: [
{
label: "Актуальный период",
backgroundColor: "rgba(235, 146, 139, 1)",
borderWidth: 0,
borderRadius: 9,
hoverBackgroundColor: "rgba(235, 146, 139, 0.8)",
data: [1150, 1400, 2100, 900, 1200, 400, 950, 1400, 1250, 1150, 1650],
grouped: false,
},
{
label: "Предыдущий период",
backgroundColor: "rgba(235, 146, 139, 0.5)",
borderWidth: 0,
borderRadius: 9,
hoverBackgroundColor: "rgba(235, 146, 139, 0.3)",
data: [2700, 1850, 1100, 1550, 2300, 2200, 1650, 1200, 1500, 1850, 800],
},
],
};
var warningsOptions = {
plugins: {
@ -66,36 +33,7 @@ new Chart("chart-warnings", {
data: warningsData,
});
var positionsData = {
labels: [
"9.03",
"10.03",
"11.03",
"12.03",
"13.03",
"14.03",
"15.03",
"16.03",
"17.03",
"18.03",
"19.03",
],
datasets: [
{
label: "Позиционирование",
borderColor: "#8086F9",
fill: false,
data: [
480000, 390000, 407000, 400000, 435000, 460000, 385000, 410000, 380000,
410000, 410000,
],
pointStyle: false,
pointRadius: 25,
pointHoverRadius: 25,
tension: 0.4,
},
],
};
var positionsOptions = {
plugins: {
@ -114,7 +52,7 @@ var positionsOptions = {
color: "#D9D9D9",
},
ticks: {
stepSize: 50000,
stepSize: 10000,
},
},
x: {

35
static/styles/main.css
View File

@ -1627,6 +1627,41 @@ video {
border-radius: 29px;
}
.properties {
position: absolute;
top: 10px;
left: 50%;
z-index: 10;
background-color: white;
padding: 9px 11px;
border-radius: 10px;
display: inline-flex;
}
.properties .propert {
margin-right: 30px;
}
.properties .propert:last-child {
margin-right: 0;
}
.properties .propert h1 {
color: rgba(0, 0, 0, 0.95);
font-size: 12px;
font-style: normal;
font-weight: 500;
margin: 0 0 2px 0;
}
.properties .propert h2 {
color: rgba(0, 0, 0, 0.65);
font-size: 11px;
font-style: normal;
font-weight: 500;
margin: 0;
}
.marker-name {
width: 100%;
background: white;

51
static/templates/index.html
View File

@ -86,6 +86,57 @@
</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>

32
static/templates/live.html
View File

@ -157,6 +157,12 @@
</div>
<div class="map">
<div id="properties" class="properties" style="display: none;">
<div class="propert"><h1>Группа</h1><br><h2 id="propert-group">Автобусы</h2></div>
<div class="propert"><h1>Скорость</h1><br><h2 id="propert-speed"> км/ч</h2></div>
<div class="propert"><h1>Номерной знак</h1><br><h2 id="propert-plate"></h2></div>
<div class="propert"><h1>Геопозиция</h1><br><h2 id="propert-geo"></h2></div>
</div>
<div id="map"></div>
</div>
@ -418,9 +424,35 @@
data.devicesData.forEach(device => {
addMarker(device);
});
// Поиск устройства с выбранным серийным номером
const selectedDevice = data.devicesData.find(device => device.serial === $("input[name=camera-serial]:checked").val());
// Получение ссылок на элементы для заполнения данных
const groupElement = document.getElementById('propert-group');
const speedElement = document.getElementById('propert-speed');
const plateElement = document.getElementById('propert-plate');
const geoElement = document.getElementById('propert-geo');
const propertiesDiv = document.getElementById('properties');
if (selectedDevice) {
// Вывод нужных свойств устройства в консоль
// groupElement.textContent = selectedDevice.group;
speedElement.textContent = selectedDevice.speed + ' км/ч';
plateElement.textContent = selectedDevice.plate;
geoElement.textContent = `${selectedDevice.latitude.toFixed(6)}, ${selectedDevice.longitude.toFixed(6)}`;
propertiesDiv.style.display = 'inline-flex';
} else {
console.log('Устройство с выбранным серийным номером не найдено.');
}
})
.catch(error => {
console.error('Ошибка при получении данных:', error);
const propertiesDiv = document.getElementById('properties');
propertiesDiv.style.display = 'none';
});
}