From 4ef2fe7735c386eef8a0b16973abee819a243208 Mon Sep 17 00:00:00 2001 From: Ivan Date: Mon, 14 Aug 2023 07:11:03 +0300 Subject: [PATCH] update main graphs, live properties --- server.js | 74 ++++++++++++++++++++++++++++++++++++- static/scripts/graphs.js | 68 ++-------------------------------- static/styles/main.css | 35 ++++++++++++++++++ static/templates/index.html | 51 +++++++++++++++++++++++++ static/templates/live.html | 32 ++++++++++++++++ 5 files changed, 193 insertions(+), 67 deletions(-) diff --git a/server.js b/server.js index 7e3f48f..d761aee 100644 --- a/server.js +++ b/server.js @@ -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: "Название организации", diff --git a/static/scripts/graphs.js b/static/scripts/graphs.js index 96da1d3..5b57736 100644 --- a/static/scripts/graphs.js +++ b/static/scripts/graphs.js @@ -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: { diff --git a/static/styles/main.css b/static/styles/main.css index 2c35f61..e8dd9ed 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -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; diff --git a/static/templates/index.html b/static/templates/index.html index 19ff391..b145335 100644 --- a/static/templates/index.html +++ b/static/templates/index.html @@ -86,6 +86,57 @@ + +