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

playback and export video update

Browse Source
This commit is contained in:
Ivan
2023-08-28 14:25:45 +03:00
parent c995b4243e
commit 087e28dbb3
6 changed files with 545 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
package-lock.json generated
View File

@@ -9,12 +9,14 @@
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"axios": "^1.5.0",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"express": "^4.18.2", "express": "^4.18.2",
"fs": "^0.0.1-security", "fs": "^0.0.1-security",
"handlebars": "^4.7.7", "handlebars": "^4.7.7",
"http": "^0.0.1-security", "http": "^0.0.1-security",
"mapbox-gl": "^2.15.0", "mapbox-gl": "^2.15.0",
"moment": "^2.29.4",
"multer": "^1.4.5-lts.1", "multer": "^1.4.5-lts.1",
"path": "^0.12.7", "path": "^0.12.7",
"pg": "^8.11.1", "pg": "^8.11.1",
@@ -108,6 +110,21 @@
"safer-buffer": "~2.1.0" "safer-buffer": "~2.1.0"
} }
}, },
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
"integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
"dependencies": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/bcrypt-pbkdf": { "node_modules/bcrypt-pbkdf": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -169,6 +186,17 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/concat-stream": { "node_modules/concat-stream": {
"version": "1.6.2", "version": "1.6.2",
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
@@ -247,6 +275,14 @@
"ms": "2.0.0" "ms": "2.0.0"
} }
}, },
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/depd": { "node_modules/depd": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -401,6 +437,38 @@
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": { "node_modules/forwarded": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -692,6 +760,14 @@
"mkdirp": "bin/cmd.js" "mkdirp": "bin/cmd.js"
} }
}, },
"node_modules/moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
"engines": {
"node": "*"
}
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -957,6 +1033,11 @@
"node": ">= 0.10" "node": ">= 0.10"
} }
}, },
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/qs": { "node_modules/qs": {
"version": "6.11.0", "version": "6.11.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -1378,6 +1459,21 @@
"safer-buffer": "~2.1.0" "safer-buffer": "~2.1.0"
} }
}, },
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"axios": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
"integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
"requires": {
"follow-redirects": "^1.15.0",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"bcrypt-pbkdf": { "bcrypt-pbkdf": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -1424,6 +1520,14 @@
"get-intrinsic": "^1.0.2" "get-intrinsic": "^1.0.2"
} }
}, },
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"concat-stream": { "concat-stream": {
"version": "1.6.2", "version": "1.6.2",
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
@@ -1486,6 +1590,11 @@
"ms": "2.0.0" "ms": "2.0.0"
} }
}, },
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"depd": { "depd": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -1610,6 +1719,21 @@
"unpipe": "~1.0.0" "unpipe": "~1.0.0"
} }
}, },
"follow-redirects": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"forwarded": { "forwarded": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -1816,6 +1940,11 @@
"minimist": "^1.2.6" "minimist": "^1.2.6"
} }
}, },
"moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
},
"ms": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -2021,6 +2150,11 @@
"ipaddr.js": "1.9.1" "ipaddr.js": "1.9.1"
} }
}, },
"proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"qs": { "qs": {
"version": "6.11.0", "version": "6.11.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",

2
package.json
View File

@@ -10,12 +10,14 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"axios": "^1.5.0",
"dotenv": "^16.3.1", "dotenv": "^16.3.1",
"express": "^4.18.2", "express": "^4.18.2",
"fs": "^0.0.1-security", "fs": "^0.0.1-security",
"handlebars": "^4.7.7", "handlebars": "^4.7.7",
"http": "^0.0.1-security", "http": "^0.0.1-security",
"mapbox-gl": "^2.15.0", "mapbox-gl": "^2.15.0",
"moment": "^2.29.4",
"multer": "^1.4.5-lts.1", "multer": "^1.4.5-lts.1",
"path": "^0.12.7", "path": "^0.12.7",
"pg": "^8.11.1", "pg": "^8.11.1",

68
server.js
View File

@@ -8,6 +8,9 @@ require("dotenv").config();
const multer = require("multer"); const multer = require("multer");
const http = require("http"); const http = require("http");
const Client = require('ssh2').Client; const Client = require('ssh2').Client;
const axios = require('axios');
const moment = require('moment');
const storage = multer.diskStorage({ const storage = multer.diskStorage({
@@ -1647,6 +1650,71 @@ async function videoExport(req, res) {
} }
} }
app.get('/getData', async (req, res) => {
const selectedSerial = req.query.serial;
const selectedDate = req.query.selectedDate;
const selectedTime = req.query.selectedTime;
const selectedChannel = req.query.selectedChannel;
try {
const successResponse = await axios.get(`http://krbl.ru:8080/http/filelist/request?serial=${selectedSerial}&querytime=${selectedDate}&channel=${selectedChannel}`);
if (successResponse.data.SUCCESS) {
const dataResponse = await axios.get(`http://krbl.ru:8080/http/filelist/get?serial=${selectedSerial}&querytime=${selectedDate}&channel=${selectedChannel}`);
if (successResponse.data.SUCCESS) {
const dataId = dataResponse.data.DATAID;
const dateRanges = dataResponse.data.DATA;
let dataFound = false;
let selectedDataId = null;
const selectedDateTime = moment(selectedDate + selectedTime, 'YYYYMMDDHHmmss').valueOf();
if (dateRanges.length === 1) {
// Если в массиве DATA только одно значение
const [startRange, endRange] = dateRanges[0].split('-');
const startDateTime = moment(startRange, 'YYYYMMDDHHmmss').valueOf();
const endDateTime = moment(endRange, 'YYYYMMDDHHmmss').valueOf();
if (!isNaN(selectedDateTime) && !isNaN(startDateTime) && !isNaN(endDateTime)) {
if (selectedDateTime >= startDateTime && selectedDateTime <= endDateTime) {
dataFound = true;
selectedDataId = dataId[0];
}
} else {
console.error("Неверный формат данных для сравнения.");
}
} else {
// Если в массиве DATA больше одного значения
for (let i = 0; i < dateRanges.length; i++) {
const [startRange, endRange] = dateRanges[i].split('-');
const startDateTime = moment(startRange, 'YYYYMMDDHHmmss').valueOf();
const endDateTime = moment(endRange, 'YYYYMMDDHHmmss').valueOf();
if (!isNaN(selectedDateTime) && !isNaN(startDateTime) && !isNaN(endDateTime)) {
if (selectedDateTime >= startDateTime && selectedDateTime <= endDateTime) {
dataFound = true;
selectedDataId = dataId[i];
break;
}
} else {
console.error("Неверный формат данных для сравнения.");
}
}
}
if (dataFound) {
// Здесь можно отправить запрос скоростей и отрисовать график
res.json({ success: true, dataId: selectedDataId });
} else {
res.json({ success: false, message: 'Данных для выбранного периода нет' });
}
}} else {
res.json({ success: false, message: 'Ошибка при получении данных' });
}
} catch (error) {
console.error('Ошибка при отправке запроса:', error);
res.json({ success: false, message: 'Ошибка при отправке запроса' });
}
});
app.post("/getspeedarchive", async (req, res) => { app.post("/getspeedarchive", async (req, res) => {
const { serial, datetime } = req.body; const { serial, datetime } = req.body;

20
static/styles/main.css
View File

@@ -1462,6 +1462,26 @@ input[type="datetime-local"] {
padding-bottom: 0; padding-bottom: 0;
} }
.speedometr .speed-bg {
z-index: 10;
position: absolute;
top: 0;
left: -20px;
border-radius: 15px;
background-color: #FFFFFF99;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.speedometr .speed-bg h1 {
text-align: center;
margin: 0 10px;
}
.report li { .report li {
list-style-type: none; list-style-type: none;
margin-bottom: 12px; margin-bottom: 12px;

169
static/templates/videos/export.html
View File

@@ -114,69 +114,69 @@
<div class="video-container"> <div class="video-container">
<div id="camera-1" onclick="playVideo(1);"> <div id="camera-1" onclick="playVideo(1);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 1 камеру</span> <span>Экспортировать 1 камеру</span>
</div> </div>
<div id="camera-2" onclick="playVideo(2);"> <div id="camera-2" onclick="playVideo(2);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 2 камеру</span> <span>Экспортировать 2 камеру</span>
</div> </div>
<div id="camera-3" onclick="playVideo(3);"> <div id="camera-3" onclick="playVideo(3);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 3 камеру</span> <span>Экспортировать 3 камеру</span>
</div> </div>
<div id="camera-4" onclick="playVideo(4);"> <div id="camera-4" onclick="playVideo(4);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 4 камеру</span> <span>Экспортировать 4 камеру</span>
</div> </div>
<div id="camera-5" onclick="playVideo(5);"> <div id="camera-5" onclick="playVideo(5);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 5 камеру</span> <span>Экспортировать 5 камеру</span>
</div> </div>
<div id="camera-6" onclick="playVideo(6);"> <div id="camera-6" onclick="playVideo(6);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 6 камеру</span> <span>Экспортировать 6 камеру</span>
</div> </div>
<div id="camera-7" onclick="playVideo(7);"> <div id="camera-7" onclick="playVideo(7);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 7 камеру</span> <span>Экспортировать 7 камеру</span>
</div> </div>
<div id="camera-8" onclick="playVideo(8);"> <div id="camera-8" onclick="playVideo(8);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 8 камеру</span> <span>Экспортировать 8 камеру</span>
</div> </div>
<div id="camera-9" onclick="playVideo(9);"> <div id="camera-9" onclick="playVideo(9);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 9 камеру</span> <span>Экспортировать 9 камеру</span>
</div> </div>
<div id="camera-10" onclick="playVideo(10);"> <div id="camera-10" onclick="playVideo(10);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 10 камеру</span> <span>Экспортировать 10 камеру</span>
</div> </div>
<div id="camera-11" onclick="playVideo(11);"> <div id="camera-11" onclick="playVideo(11);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 11 камеру</span> <span>Экспортировать 11 камеру</span>
</div> </div>
<div id="camera-12" onclick="playVideo(12);"> <div id="camera-12" onclick="playVideo(12);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 12 камеру</span> <span>Экспортировать 12 камеру</span>
</div> </div>
</div> </div>
<div class="video-container-right"> <div class="video-container-right">
<div id="camera-13" onclick="playVideo(13);"> <div id="camera-13" onclick="playVideo(13);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 13 камеру</span> <span>Экспортировать 13 камеру</span>
</div> </div>
<div id="camera-14" onclick="playVideo(14);"> <div id="camera-14" onclick="playVideo(14);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 14 камеру</span> <span>Экспортировать 14 камеру</span>
</div> </div>
<div id="camera-15" onclick="playVideo(15);"> <div id="camera-15" onclick="playVideo(15);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 15 камеру</span> <span>Экспортировать 15 камеру</span>
</div> </div>
<div id="camera-16" onclick="playVideo(16);"> <div id="camera-16" onclick="playVideo(16);">
<img src="../../img/play-circle.svg"> <img src="../../img/play-circle.svg">
<span>Запустить 16 камеру</span> <span>Экспортировать 16 камеру</span>
</div> </div>
</div> </div>
</div> </div>
@@ -202,6 +202,9 @@
<input type="hidden" id="selectedDate" name="selectedDate" hidden> <input type="hidden" id="selectedDate" name="selectedDate" hidden>
<div class="speedometr"> <div class="speedometr">
<div style="display: none;" id="speed-bg" class="speed-bg">
<h1>Данных для выбранного периода нет.</h1>
</div>
<h1>Скорость</h1> <h1>Скорость</h1>
<span>км/ч</span> <span>км/ч</span>
<span style="float: right; font-size: 18px;">1 ч</span> <span style="float: right; font-size: 18px;">1 ч</span>
@@ -211,7 +214,10 @@
</div> </div>
<div class="video-time"> <div class="video-time">
<span style="margin-left: 15px;">с</span>
<input name="videoTime" type="time" id="video-time" step="1"> <input name="videoTime" type="time" id="video-time" step="1">
<span>до</span>
<input name="videoEndTime" type="time" id="video-end-time" step="1">
</div> </div>
@@ -267,15 +273,32 @@ function combineDateTime(dateString, timeString) {
return combinedDateTime; return combinedDateTime;
} }
function sendPostRequest() { let HasData;
let recordID;
var selectedChannel = 1;
async function sendPostRequest() {
// Получение данных из полей ввода // Получение данных из полей ввода
const selectedDate = document.getElementById("selectedDate").value; const selectedDate = document.getElementById("selectedDate").value;
const videoTime = document.getElementById("video-time").value; const videoTime = document.getElementById("video-time").value;
const videoEndTime = document.getElementById("video-end-time").value;
const selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value; const selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value;
// Объединяем дату и время и преобразуем в нужный формат // Объединяем дату и время и преобразуем в нужный формат
const combinedDateTime = combineDateTime(selectedDate, videoTime); const combinedDateTime = combineDateTime(selectedDate, videoTime);
const response = await fetch(`/getData?serial=${selectedSerial}&selectedDate=${formatDate(selectedDate)}&selectedTime=${formatTime(videoTime)}&selectedChannel=${selectedChannel}`);
const data = await response.json();
HasData = data.success;
if (data.success) {
console.log(`Данные доступны. DATAID: ${data.dataId}`)
recordID = data.dataId;
const requestData = { const requestData = {
serial: selectedSerial, serial: selectedSerial,
datetime: combinedDateTime, datetime: combinedDateTime,
@@ -351,26 +374,26 @@ function sendPostRequest() {
const geoData = data.geo; const geoData = data.geo;
// Очищаем все слои на карте // Очищаем все слои на карте
map.eachLayer(layer => { map.eachLayer(layer => {
if (layer !== map) { if (layer !== map) {
map.removeLayer(layer); map.removeLayer(layer);
} }
}); });
// Добавляем слой с плитками OpenStreetMap // Добавляем слой с плитками OpenStreetMap
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map); L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map);
// Создаем слой для маршрута // Создаем слой для маршрута
const routeLayer = L.layerGroup().addTo(map); const routeLayer = L.layerGroup().addTo(map);
// Создаем слой для маркеров // Создаем слой для маркеров
const markerLayer = L.layerGroup().addTo(map); const markerLayer = L.layerGroup().addTo(map);
// Преобразуем координаты точек маршрута // Преобразуем координаты точек маршрута
const routePoints = geoData.map(point => [point.latitude, point.longitude]); const routePoints = geoData.map(point => [point.latitude, point.longitude]);
// Создаем линию маршрута // Создаем линию маршрута
const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer); const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer);
@@ -378,6 +401,40 @@ const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLay
.catch((error) => { .catch((error) => {
console.error("Ошибка при отправке запроса:", error); console.error("Ошибка при отправке запроса:", error);
}); });
const endResponse = await fetch(`/getData?serial=${selectedSerial}&selectedDate=${formatDate(selectedDate)}&selectedTime=${formatTime(videoEndTime)}&selectedChannel=${selectedChannel}`);
const endData = await endResponse.json();
if (endData.success) {
console.log(`Конечные данные доступны. DATAID: ${endData.dataId}`)
const speedBG = document.getElementById("speed-bg");
speedBG.style.display = 'none';
HasData = true;
if (data.dataId != endData.dataId) {
HasData = false;
var h1Element = document.querySelector('.speedometr h1');
h1Element.textContent = 'Временной диапазон находится в разных видео сессиях. Измените время.';
const speedBG = document.getElementById("speed-bg");
speedBG.style.display = 'flex';
}
} else {
HasData = false;
const speedBG = document.getElementById("speed-bg");
speedBG.style.display = 'flex';
var h1Element = document.querySelector('.speedometr h1');
h1Element.textContent = 'Данных для выбранного периода нет.';
}
} else {
var h1Element = document.querySelector('.speedometr h1');
h1Element.textContent = 'Данных для выбранного периода нет.';
const speedBG = document.getElementById("speed-bg");
speedBG.style.display = 'flex';
}
} }
@@ -392,6 +449,9 @@ selectedDateInput.addEventListener("change", sendPostRequest);
const videoTimeInput = document.getElementById("video-time"); const videoTimeInput = document.getElementById("video-time");
videoTimeInput.addEventListener("change", sendPostRequest); videoTimeInput.addEventListener("change", sendPostRequest);
const endVideoTimeInput = document.getElementById("video-end-time");
endVideoTimeInput.addEventListener("change", sendPostRequest);
</script> </script>
@@ -400,6 +460,20 @@ videoTimeInput.addEventListener("change", sendPostRequest);
now.setHours(now.getHours() - 1); now.setHours(now.getHours() - 1);
var formattedTime = now.toISOString().substr(11, 8); var formattedTime = now.toISOString().substr(11, 8);
document.getElementById("video-time").value = formattedTime; document.getElementById("video-time").value = formattedTime;
const startTimeInput = document.getElementById('video-time');
const endTimeInput = document.getElementById('video-end-time');
const startTime = new Date(`1970-01-01T${startTimeInput.value}Z`);
startTime.setHours(startTime.getHours() - 3);
startTime.setSeconds(startTime.getSeconds() + 10);
const hours = startTime.getHours().toString().padStart(2, '0');
const minutes = startTime.getMinutes().toString().padStart(2, '0');
const seconds = startTime.getSeconds().toString().padStart(2, '0');
const endTimeString = `${hours}:${minutes}:${seconds}`;
endTimeInput.value = endTimeString;
</script> </script>
@@ -452,10 +526,11 @@ videoTimeInput.addEventListener("change", sendPostRequest);
selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day); selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
renderCalendar(); renderCalendar();
selectedDateInput.value = selectedDate.toISOString(); selectedDateInput.value = selectedDate.toISOString();
sendPostRequest();
}); });
datesContainer.appendChild(dateCell); datesContainer.appendChild(dateCell);
} }
sendPostRequest();
} }
// Перейти на предыдущий месяц // Перейти на предыдущий месяц
@@ -493,32 +568,44 @@ videoTimeInput.addEventListener("change", sendPostRequest);
return `${hours}${minutes}${seconds}`; return `${hours}${minutes}${seconds}`;
} }
function addOneHourToTime(videoTime) {
const parts = videoTime.split(':');
let hours = parseInt(parts[0], 10);
hours += 1;
const minutes = parts[1].toString().padStart(2, '0');
const seconds = parts[2].toString().padStart(2, '0');
return formatTime(`${hours}:${minutes}:${seconds}`);
}
function playVideo(channel) { async function playVideo(channel) {
const selectedDevice = document.querySelector('input[name="camera-serial"]:checked'); const selectedDevice = document.querySelector('input[name="camera-serial"]:checked');
if (!selectedDevice) { if (!selectedDevice) {
alert('Пожалуйста, выберите устройство из списка.'); alert('Пожалуйста, выберите устройство из списка.');
return; return;
} }
if (!HasData) {
alert('Пожалуйста, выберите другой временной период.');
return;
}
if (videoTimeInput.value > endVideoTimeInput.value) {
alert('Конечное время не может быть больше начального.');
return;
}
const startTimeInput = document.getElementById('video-time'); const startTimeInput = document.getElementById('video-time');
const endTimeInput = document.getElementById('video-end-time');
const selectedDateInput = document.getElementById('selectedDate'); const selectedDateInput = document.getElementById('selectedDate');
const startTime = formatTime(startTimeInput.value); const startTime = formatTime(startTimeInput.value);
const endTime = formatTime(endTimeInput.value);
const selectedDate = formatDate(selectedDateInput.value); const selectedDate = formatDate(selectedDateInput.value);
const endTime = addOneHourToTime(startTimeInput.value); selectedChannel = channel;
const reqDate = document.getElementById("selectedDate").value;
const reqTime = document.getElementById("video-time").value;
const reqSerial = document.querySelector('input[name="camera-serial"]:checked').value;
const finalResponse = await fetch(`/getData?serial=${reqSerial}&selectedDate=${formatDate(reqDate)}&selectedTime=${formatTime(reqTime)}&selectedChannel=${selectedChannel}`);
const resData = await finalResponse.json();
const serial = selectedDevice.value; const serial = selectedDevice.value;
const url = `http://localhost:7081/playback?url=http%3A%2F%2Fkrbl.ru%3A8080%2Fhttp%2Fplayback.flv%3Fserial%3D${serial}%26channel%3D${channel}%26quality%3D1%26queryTime%3D${selectedDate}%26startTime%3D${startTime}%26endTime%3D${endTime}`; const url = `http://localhost:8081/export?url=http%3A%2F%2Fkrbl.ru%3A8080%2Fhttp%2Fdownload.flv%3Fserial%3D${serial}%26channel%3D${channel}%26queryTime%3D${selectedDate}%26startTime%3D${startTime}%26endTime%3D${endTime}%26recordID%3D${resData.dataId}`;
window.open(url, '_blank'); window.open(url, '_blank');
} }
</script> </script>

58
static/templates/videos/playback.html
View File

@@ -68,7 +68,7 @@
</div> </div>
<nav> <nav>
<a class="selected" href="/videos">Воспроизведение</a> <a class="selected" href="/videos">Воспроизведение</a>
<a href="/videos">Экспорт</a> <a href="/videos/export">Экспорт</a>
</nav> </nav>
<section class="bg"> <section class="bg">
<section class="content"> <section class="content">
@@ -202,6 +202,9 @@
<input type="hidden" id="selectedDate" name="selectedDate" hidden> <input type="hidden" id="selectedDate" name="selectedDate" hidden>
<div class="speedometr"> <div class="speedometr">
<div style="display: none;" id="speed-bg" class="speed-bg">
<h1>Данных для выбранного периода нет.</h1>
</div>
<h1>Скорость</h1> <h1>Скорость</h1>
<span>км/ч</span> <span>км/ч</span>
<span style="float: right; font-size: 18px;">1 ч</span> <span style="float: right; font-size: 18px;">1 ч</span>
@@ -267,15 +270,26 @@ function combineDateTime(dateString, timeString) {
return combinedDateTime; return combinedDateTime;
} }
function sendPostRequest() { let HasData;
var selectedChannel = 1;
async function sendPostRequest() {
// Получение данных из полей ввода // Получение данных из полей ввода
const selectedDate = document.getElementById("selectedDate").value; const selectedDate = document.getElementById("selectedDate").value;
const videoTime = document.getElementById("video-time").value; const videoTime = document.getElementById("video-time").value;
const selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value; const selectedSerial = document.querySelector('input[name="camera-serial"]:checked').value;
// Объединяем дату и время и преобразуем в нужный формат // Объединяем дату и время и преобразуем в нужный формат
const combinedDateTime = combineDateTime(selectedDate, videoTime); const combinedDateTime = combineDateTime(selectedDate, videoTime);
const response = await fetch(`/getData?serial=${selectedSerial}&selectedDate=${formatDate(selectedDate)}&selectedTime=${formatTime(videoTime)}&selectedChannel=${selectedChannel}`);
const data = await response.json();
HasData = data.success;
if (data.success) {
console.log(`Данные доступны. DATAID: ${data.dataId}`)
const requestData = { const requestData = {
serial: selectedSerial, serial: selectedSerial,
datetime: combinedDateTime, datetime: combinedDateTime,
@@ -351,26 +365,26 @@ function sendPostRequest() {
const geoData = data.geo; const geoData = data.geo;
// Очищаем все слои на карте // Очищаем все слои на карте
map.eachLayer(layer => { map.eachLayer(layer => {
if (layer !== map) { if (layer !== map) {
map.removeLayer(layer); map.removeLayer(layer);
} }
}); });
// Добавляем слой с плитками OpenStreetMap // Добавляем слой с плитками OpenStreetMap
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map); L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map);
// Создаем слой для маршрута // Создаем слой для маршрута
const routeLayer = L.layerGroup().addTo(map); const routeLayer = L.layerGroup().addTo(map);
// Создаем слой для маркеров // Создаем слой для маркеров
const markerLayer = L.layerGroup().addTo(map); const markerLayer = L.layerGroup().addTo(map);
// Преобразуем координаты точек маршрута // Преобразуем координаты точек маршрута
const routePoints = geoData.map(point => [point.latitude, point.longitude]); const routePoints = geoData.map(point => [point.latitude, point.longitude]);
// Создаем линию маршрута // Создаем линию маршрута
const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer); const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer);
@@ -378,6 +392,12 @@ const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLay
.catch((error) => { .catch((error) => {
console.error("Ошибка при отправке запроса:", error); console.error("Ошибка при отправке запроса:", error);
}); });
} else {
const speedBG = document.getElementById("speed-bg");
speedBG.style.display = 'flex';
}
} }
@@ -452,10 +472,11 @@ videoTimeInput.addEventListener("change", sendPostRequest);
selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day); selectedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
renderCalendar(); renderCalendar();
selectedDateInput.value = selectedDate.toISOString(); selectedDateInput.value = selectedDate.toISOString();
sendPostRequest();
}); });
datesContainer.appendChild(dateCell); datesContainer.appendChild(dateCell);
} }
sendPostRequest();
} }
// Перейти на предыдущий месяц // Перейти на предыдущий месяц
@@ -508,6 +529,11 @@ videoTimeInput.addEventListener("change", sendPostRequest);
alert('Пожалуйста, выберите устройство из списка.'); alert('Пожалуйста, выберите устройство из списка.');
return; return;
} }
if (!HasData) {
alert('Пожалуйста, выберите другой временной период.');
return;
}
const startTimeInput = document.getElementById('video-time'); const startTimeInput = document.getElementById('video-time');
const selectedDateInput = document.getElementById('selectedDate'); const selectedDateInput = document.getElementById('selectedDate');
@@ -518,6 +544,8 @@ videoTimeInput.addEventListener("change", sendPostRequest);
const serial = selectedDevice.value; const serial = selectedDevice.value;
selectedChannel = channel;
const url = `http://localhost:8081/playback?url=http%3A%2F%2Fkrbl.ru%3A8080%2Fhttp%2Fplayback.flv%3Fserial%3D${serial}%26channel%3D${channel}%26quality%3D1%26queryTime%3D${selectedDate}%26startTime%3D${startTime}%26endTime%3D${endTime}`; const url = `http://localhost:8081/playback?url=http%3A%2F%2Fkrbl.ru%3A8080%2Fhttp%2Fplayback.flv%3Fserial%3D${serial}%26channel%3D${channel}%26quality%3D1%26queryTime%3D${selectedDate}%26startTime%3D${startTime}%26endTime%3D${endTime}`;
window.open(url, '_blank'); window.open(url, '_blank');
} }