playback and export video update
This commit is contained in:
Ivan
parent
c995b4243e
commit
087e28dbb3
GPG Key ID:
0C191B86D9582583
134
package-lock.json
generated
134
package-lock.json
generated
@ -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",
|
||||||
|
|||||||
@ -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
68
server.js
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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,117 +273,168 @@ 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 requestData = {
|
const response = await fetch(`/getData?serial=${selectedSerial}&selectedDate=${formatDate(selectedDate)}&selectedTime=${formatTime(videoTime)}&selectedChannel=${selectedChannel}`);
|
||||||
serial: selectedSerial,
|
|
||||||
datetime: combinedDateTime,
|
|
||||||
};
|
|
||||||
|
|
||||||
fetch("/getspeedarchive", {
|
const data = await response.json();
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(requestData),
|
|
||||||
})
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
|
||||||
|
|
||||||
const existingChart = Chart.getChart("speed");
|
HasData = data.success;
|
||||||
|
|
||||||
if (existingChart) {
|
if (data.success) {
|
||||||
existingChart.destroy();
|
console.log(`Данные доступны. DATAID: ${data.dataId}`)
|
||||||
}
|
recordID = data.dataId;
|
||||||
|
const requestData = {
|
||||||
|
serial: selectedSerial,
|
||||||
|
datetime: combinedDateTime,
|
||||||
|
};
|
||||||
|
|
||||||
const numberOfLabels = data.speeds.length;
|
fetch("/getspeedarchive", {
|
||||||
const labels = Array.from({ length: numberOfLabels }, () => "");
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(requestData),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
|
||||||
// Обновление данных графика
|
const existingChart = Chart.getChart("speed");
|
||||||
const chart = new Chart("speed", {
|
|
||||||
type: "line",
|
if (existingChart) {
|
||||||
data: {
|
existingChart.destroy();
|
||||||
labels: labels,
|
}
|
||||||
datasets: [
|
|
||||||
{
|
const numberOfLabels = data.speeds.length;
|
||||||
label: "Скорость",
|
const labels = Array.from({ length: numberOfLabels }, () => "");
|
||||||
borderColor: "#8086F9",
|
|
||||||
fill: false,
|
// Обновление данных графика
|
||||||
data: data.speeds,
|
const chart = new Chart("speed", {
|
||||||
pointStyle: false,
|
type: "line",
|
||||||
pointRadius: 25,
|
data: {
|
||||||
pointHoverRadius: 25,
|
labels: labels,
|
||||||
tension: 0.1,
|
datasets: [
|
||||||
},
|
{
|
||||||
],
|
label: "Скорость",
|
||||||
},
|
borderColor: "#8086F9",
|
||||||
options: {
|
fill: false,
|
||||||
plugins: {
|
data: data.speeds,
|
||||||
legend: {
|
pointStyle: false,
|
||||||
display: false,
|
pointRadius: 25,
|
||||||
},
|
pointHoverRadius: 25,
|
||||||
},
|
tension: 0.1,
|
||||||
labelStep: "3",
|
},
|
||||||
responsive: true,
|
],
|
||||||
maintainAspectRatio: false,
|
},
|
||||||
scales: {
|
options: {
|
||||||
y: {
|
plugins: {
|
||||||
stacked: true,
|
legend: {
|
||||||
grid: {
|
display: false,
|
||||||
display: true,
|
},
|
||||||
color: "#D9D9D9",
|
},
|
||||||
},
|
labelStep: "3",
|
||||||
ticks: {
|
responsive: true,
|
||||||
stepSize: 10,
|
maintainAspectRatio: false,
|
||||||
},
|
scales: {
|
||||||
},
|
y: {
|
||||||
x: {
|
stacked: true,
|
||||||
grid: {
|
grid: {
|
||||||
display: false,
|
display: true,
|
||||||
},
|
color: "#D9D9D9",
|
||||||
},
|
},
|
||||||
},
|
ticks: {
|
||||||
},
|
stepSize: 10,
|
||||||
});
|
},
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
grid: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
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);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
.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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Перейти на предыдущий месяц
|
// Перейти на предыдущий месяц
|
||||||
@ -477,7 +552,7 @@ videoTimeInput.addEventListener("change", sendPostRequest);
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function formatDate(selectedDate) {
|
function formatDate(selectedDate) {
|
||||||
const date = new Date(selectedDate);
|
const date = new Date(selectedDate);
|
||||||
const year = date.getFullYear();
|
const year = date.getFullYear();
|
||||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||||
@ -493,33 +568,45 @@ 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>
|
||||||
|
|
||||||
|
|||||||
@ -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,117 +270,134 @@ 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 requestData = {
|
const response = await fetch(`/getData?serial=${selectedSerial}&selectedDate=${formatDate(selectedDate)}&selectedTime=${formatTime(videoTime)}&selectedChannel=${selectedChannel}`);
|
||||||
serial: selectedSerial,
|
const data = await response.json();
|
||||||
datetime: combinedDateTime,
|
|
||||||
};
|
|
||||||
|
|
||||||
fetch("/getspeedarchive", {
|
HasData = data.success;
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify(requestData),
|
|
||||||
})
|
|
||||||
.then((response) => response.json())
|
|
||||||
.then((data) => {
|
|
||||||
|
|
||||||
const existingChart = Chart.getChart("speed");
|
if (data.success) {
|
||||||
|
console.log(`Данные доступны. DATAID: ${data.dataId}`)
|
||||||
|
const requestData = {
|
||||||
|
serial: selectedSerial,
|
||||||
|
datetime: combinedDateTime,
|
||||||
|
};
|
||||||
|
|
||||||
if (existingChart) {
|
fetch("/getspeedarchive", {
|
||||||
existingChart.destroy();
|
method: "POST",
|
||||||
}
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(requestData),
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => {
|
||||||
|
|
||||||
const numberOfLabels = data.speeds.length;
|
const existingChart = Chart.getChart("speed");
|
||||||
const labels = Array.from({ length: numberOfLabels }, () => "");
|
|
||||||
|
|
||||||
// Обновление данных графика
|
if (existingChart) {
|
||||||
const chart = new Chart("speed", {
|
existingChart.destroy();
|
||||||
type: "line",
|
}
|
||||||
data: {
|
|
||||||
labels: labels,
|
const numberOfLabels = data.speeds.length;
|
||||||
datasets: [
|
const labels = Array.from({ length: numberOfLabels }, () => "");
|
||||||
{
|
|
||||||
label: "Скорость",
|
// Обновление данных графика
|
||||||
borderColor: "#8086F9",
|
const chart = new Chart("speed", {
|
||||||
fill: false,
|
type: "line",
|
||||||
data: data.speeds,
|
data: {
|
||||||
pointStyle: false,
|
labels: labels,
|
||||||
pointRadius: 25,
|
datasets: [
|
||||||
pointHoverRadius: 25,
|
{
|
||||||
tension: 0.1,
|
label: "Скорость",
|
||||||
},
|
borderColor: "#8086F9",
|
||||||
],
|
fill: false,
|
||||||
},
|
data: data.speeds,
|
||||||
options: {
|
pointStyle: false,
|
||||||
plugins: {
|
pointRadius: 25,
|
||||||
legend: {
|
pointHoverRadius: 25,
|
||||||
display: false,
|
tension: 0.1,
|
||||||
},
|
},
|
||||||
},
|
],
|
||||||
labelStep: "3",
|
},
|
||||||
responsive: true,
|
options: {
|
||||||
maintainAspectRatio: false,
|
plugins: {
|
||||||
scales: {
|
legend: {
|
||||||
y: {
|
display: false,
|
||||||
stacked: true,
|
},
|
||||||
grid: {
|
},
|
||||||
display: true,
|
labelStep: "3",
|
||||||
color: "#D9D9D9",
|
responsive: true,
|
||||||
},
|
maintainAspectRatio: false,
|
||||||
ticks: {
|
scales: {
|
||||||
stepSize: 10,
|
y: {
|
||||||
},
|
stacked: true,
|
||||||
},
|
grid: {
|
||||||
x: {
|
display: true,
|
||||||
grid: {
|
color: "#D9D9D9",
|
||||||
display: false,
|
},
|
||||||
},
|
ticks: {
|
||||||
},
|
stepSize: 10,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
x: {
|
||||||
|
grid: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
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);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
})
|
||||||
.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');
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user