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

maps update

Browse Source
This commit is contained in:
Ivan 2023-08-22 18:29:23 +03:00
parent 119bc39c9a
commit f6557a5950
Signed by untrusted user who does not match committer: ppechenkoo
GPG Key ID: 0C191B86D9582583
4 changed files with 84 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/styles/main.css
View File

@ -1610,7 +1610,7 @@ input[type="datetime-local"] {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 2 !important;
} }
.map { .map {
@ -1674,6 +1674,16 @@ input[type="datetime-local"] {
margin-left: -40%; margin-left: -40%;
margin-bottom: 3px; margin-bottom: 3px;
font-weight: bold; font-weight: bold;
font-size: 14px !important;
}
.marker {
cursor: grab !important;
}
.leaflet-marker-icon {
width: auto !important;
height: auto !important;
} }
.stream-cameras { .stream-cameras {

174
static/templates/live.html
View File

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Трансляция</title> <title>Трансляция</title>
<link rel="stylesheet" href="../styles/main.css" /> <link rel="stylesheet" href="../styles/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/ol-mapbox-style@9.4.0/dist/olms.js"></script>
</head> </head>
<body> <body>
@ -347,46 +346,15 @@
<script> <script>
var map = new ol.Map({ var map = L.map('map').setView([59.855198, 30.282995], 10);
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([30.282995, 59.855198]),
zoom: 10
})
});
// Скрыть кнопки приближения/отдаления
map.getControls().forEach(function(control) {
if (control instanceof ol.control.Zoom) {
map.removeControl(control);
}
});
// Скрыть информационную панель L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map);
map.getControls().forEach(function(control) {
if (control instanceof ol.control.Attribution) {
map.removeControl(control);
}
});
var xhr = new XMLHttpRequest(); map.zoomControl.remove();
xhr.open("GET", "../scripts/style.json", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var customStyle = JSON.parse(xhr.responseText);
map.getLayers().forEach(function(layer) { map.attributionControl.remove();
layer.setStyle(customStyle.layers[0].paint);
});
}
};
xhr.send();
const markers = []; let markers = [];
{{#if ifDBError}} {{#if ifDBError}}
{{else}} {{else}}
@ -409,41 +377,39 @@ const selectedDevices = Array.from(checkboxes)
function addMarker(device) { function addMarker(device) {
const { serial, status, longitude, latitude, direction, speed } = device; const { serial, status, longitude, latitude, direction, speed } = device;
const markerElement = document.createElement('div'); console.log(serial, status, longitude, latitude, direction, speed)
markerElement.className = 'marker'; console.log("Trying add marker")
if (serial === $("input[name=camera-serial]:checked").val()) { if (serial === $("input[name=camera-serial]:checked").val()) {
markerElement.innerHTML = ` var marker = L.divIcon({
<div class="marker-name active-${status}">${serial}</div> className: 'marker',
html: `<div class="marker-name active-${status}">${serial}</div>
<svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"> <svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
<path fill="#FF6A4B" d="M12.669 24.673c6.565 0 12-5.435 12-12 0-6.553-5.447-12-12.012-12C6.104.673.67 6.12.67 12.673c0 6.565 5.447 12 12 12Z"/> <path fill="#FF6A4B" d="M12.669 24.673c6.565 0 12-5.435 12-12 0-6.553-5.447-12-12.012-12C6.104.673.67 6.12.67 12.673c0 6.565 5.447 12 12 12Z"/>
<path fill="#fff" fill-opacity=".85" d="m7.104 17.92 4.683-11.93c.33-.823 1.423-.846 1.753-.023l4.682 11.953c.318.788-.553 1.47-1.294.73l-3.953-3.953c-.188-.2-.424-.2-.612 0L8.41 18.65c-.753.74-1.623.059-1.306-.73Z"/> <path fill="#fff" fill-opacity=".85" d="m7.104 17.92 4.683-11.93c.33-.823 1.423-.846 1.753-.023l4.682 11.953c.318.788-.553 1.47-1.294.73l-3.953-3.953c-.188-.2-.424-.2-.612 0L8.41 18.65c-.753.74-1.623.059-1.306-.73Z"/>
</svg> </svg>`
`; });
} else { } else {
markerElement.innerHTML = ` var marker = L.divIcon({
<div class="marker-name active-${status}">${serial}</div> className: 'marker',
html: `<div class="marker-name active-${status}">${serial}</div>
<svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"> <svg class="active-${status}" id="marker-${serial}" style="transform: rotate(${direction}deg)" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
<path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/> <path d="M12.9815 25.0195C19.5462 25.0336 24.9931 19.6101 25.0073 13.0454C25.0214 6.49253 19.5861 1.03375 13.0214 1.01961C6.46848 1.00549 1.02147 6.44081 1.00735 12.9937C0.993201 19.5584 6.42852 25.0054 12.9815 25.0195Z" fill="#8086F9"/>
<path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/> <path d="M7.43175 18.2547L12.1398 6.33536C12.471 5.51254 13.5652 5.49137 13.8928 6.31561L18.5493 18.2786C18.8653 19.0675 17.9932 19.748 17.2537 19.0052L13.3092 15.0438C13.1215 14.8434 12.8862 14.8429 12.6975 15.0425L8.73605 18.9868C7.98152 19.7264 7.1124 19.0422 7.43175 18.2547Z" fill="white" fill-opacity="0.85"/>
</svg> </svg>`
`; });
} }
const marker = new ol.Overlay({ var markerObj = L.marker([latitude, longitude], { icon: marker });
position: ol.proj.fromLonLat([longitude, latitude]), markerObj.addTo(map);
positioning: 'center-center', markers.push(markerObj);
element: markerElement,
stopEvent: false
});
map.addOverlay(marker);
markers.push(marker);
} }
function clearMarkers() { function clearMarkers() {
markers.forEach(marker => map.removeOverlay(marker)); markers.forEach(marker => map.removeLayer(marker));
markers.length = 0; markers = [];
} }
function fetchAndShowMarkers() { function fetchAndShowMarkers() {
console.log(selectedDevices); console.log(selectedDevices);
@ -460,6 +426,7 @@ const selectedDevices = Array.from(checkboxes)
clearMarkers(); clearMarkers();
data.devicesData.forEach(device => { data.devicesData.forEach(device => {
addMarker(device); addMarker(device);
console.log(device);
}); });
// Поиск устройства с выбранным серийным номером // Поиск устройства с выбранным серийным номером
@ -505,6 +472,7 @@ const selectedDevices = Array.from(checkboxes)
</script> </script>
<script> <script>
// Скрытие/Показ дополнительных меню аккаунта // Скрытие/Показ дополнительных меню аккаунта
@ -528,90 +496,6 @@ const selectedDevices = Array.from(checkboxes)
}); });
</script> </script>
<script>
var checkboxes = document.querySelectorAll('.organisation .checkbox-input');
checkboxes.forEach((checkbox) => {
applyFilterAndSearch();
checkbox.addEventListener('change', function() {
document.querySelector('#device-all').checked = false;
applyFilterAndSearch();
const devices = this.parentNode.querySelector('.area-devices');
if (this.checked) {
devices.style.display = 'block';
// Активируем дочерние чекбоксы
const childCheckboxes = devices.querySelectorAll('.device-filter');
childCheckboxes.forEach((childCheckbox) => {
childCheckbox.checked = true;
applyFilterAndSearch();
});
} else {
devices.style.display = 'none';
applyFilterAndSearch();
// Деактивируем дочерние чекбоксы
const childCheckboxes = devices.querySelectorAll('.device-filter');
childCheckboxes.forEach((childCheckbox) => {
childCheckbox.checked = false;
applyFilterAndSearch();
});
}
// Деактивируем дочерние чекбоксы, если родительский чекбокс не выбран
if (!this.checked) {
const childCheckboxes = devices.querySelectorAll('.device-filter');
childCheckboxes.forEach((childCheckbox) => {
childCheckbox.checked = false;
applyFilterAndSearch();
});
devices.style.display = 'none';
}
});
});
</script>
<script>
var table = document.querySelector('#deviceTable');
var tableCheckboxAll = table.querySelector('#device-all');
var tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
tableCheckboxAll.addEventListener('click', function(event) {
table = document.querySelector('#deviceTable');
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
if (tableCheckboxAll.checked) {
tableCheckboxes.forEach((tableCheckbox) => {
tableCheckbox.checked = true;
});
} else {
tableCheckboxes.forEach((tableCheckbox) => {
tableCheckbox.checked = false;
});
}
});
$('#deviceTable').click( function(event) {
table = document.querySelector('#deviceTable');
tableCheckboxes = table.querySelectorAll('tbody input[type="checkbox"]');
for (var i = 0; i < tableCheckboxes.length; i++) {
tableCheckboxes[i].addEventListener('click', function(event) {
for (var j = 0; j < tableCheckboxes.length; j++) {
if (!tableCheckboxes[j].checked || tableCheckboxes[j].disabled) {
tableCheckboxAll.checked = false;
return;
}
}
tableCheckboxAll.checked = true;
});
}
});
</script>
<script> <script>
// Получаем ссылки на элементы // Получаем ссылки на элементы
const videoContainers = document.querySelectorAll('.stream-video-container video'); const videoContainers = document.querySelectorAll('.stream-video-container video');

5
static/templates/reports/report.html
View File

@ -6,13 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отчёт {{Id}}</title> <title>Отчёт {{Id}}</title>
<link rel="stylesheet" href="../styles/main.css" /> <link rel="stylesheet" href="../styles/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script>
<script src="https://unpkg.com/ol-mapbox-style@9.4.0/dist/olms.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
</head> </head>
<body> <body>

172
static/templates/videos/see.html
View File

@ -6,9 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Записи</title> <title>Записи</title>
<link rel="stylesheet" href="../styles/main.css" /> <link rel="stylesheet" href="../styles/main.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.css" type="text/css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol.js"></script> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/ol-mapbox-style@9.4.0/dist/olms.js"></script>
</head> </head>
<body> <body>
@ -348,68 +347,32 @@ function sendPostRequest() {
}, },
}); });
routeLayer.getSource().clear();
markerLayer.getSource().clear();
const geoData = data.geo; const geoData = data.geo;
const routePoints = geoData.map((point) => { // Очищаем все слои на карте
return ol.proj.fromLonLat([point.longitude, point.latitude]); map.eachLayer(layer => {
}); if (layer !== map) {
map.removeLayer(layer);
}
});
const routeFeature = new ol.Feature({ // Добавляем слой с плитками OpenStreetMap
geometry: new ol.geom.LineString(routePoints), L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map);
});
routeFeature.setStyle(routeStyle);
routeLayer.getSource().addFeature(routeFeature); // Создаем слой для маршрута
const routeLayer = L.layerGroup().addTo(map);
const startMarker = new ol.Feature({ // Создаем слой для маркеров
geometry: new ol.geom.Point(routePoints[0]), const markerLayer = L.layerGroup().addTo(map);
});
startMarker.setStyle(markerStyle);
const endMarker = new ol.Feature({ // Преобразуем координаты точек маршрута
geometry: new ol.geom.Point(routePoints[routePoints.length - 1]), const routePoints = geoData.map(point => [point.latitude, point.longitude]);
});
endMarker.setStyle(markerStyle);
markerLayer.getSource().addFeatures([startMarker, endMarker]); // Создаем линию маршрута
const route = L.polyline(routePoints, { color: 'red',weight: 5 }).addTo(routeLayer);
const mapElement = document.getElementById("map");
const map = new ol.Map({
target: null,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
markerLayer,
routeLayer,
],
view: new ol.View({
center: ol.proj.fromLonLat([30.282995, 59.855198]),
zoom: 10
}),
});
map.getLayers().clear();
map.setTarget(mapElement);
// Скрыть кнопки приближения/отдаления
map.getControls().forEach(function (control) {
if (control instanceof ol.control.Zoom) {
map.removeControl(control);
}
});
// Скрыть информационную панель
map.getControls().forEach(function (control) {
if (control instanceof ol.control.Attribution) {
map.removeControl(control);
}
});
}) })
.catch((error) => { .catch((error) => {
@ -571,87 +534,40 @@ function playVideo(channel) {
mapArea.style.width = (mapContainer.clientWidth) + 'px'; mapArea.style.width = (mapContainer.clientWidth) + 'px';
}); });
var startPoint = ol.proj.fromLonLat([0, 0]); var startPoint = [0, 0];
var endPoint = ol.proj.fromLonLat([0, 0]); var endPoint = [0, 0];
var routeStyle = new ol.style.Style({ let map;
stroke: new ol.style.Stroke({
color: 'red',
width: 6
})
});
var markerStyle = new ol.style.Style({ // Создаем карту Leaflet
image: new ol.style.Circle({ map = L.map('map').setView([59.855198, 30.282995], 10);
radius: 7,
fill: new ol.style.Fill({
color: 'red'
}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
});
var routeSource = new ol.source.Vector({ // Добавляем базовый слой OpenStreetMap
features: [ L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}').addTo(map);
new ol.Feature({
geometry: new ol.geom.LineString([startPoint, endPoint])
})
]
});
var routeLayer = new ol.layer.Vector({ // Создаем маркеры
source: routeSource, var startMarker = L.marker(startPoint, {
style: routeStyle icon: L.divIcon({
}); className: 'custom-icon',
html: '<div style="background-color: red; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%;"></div>'
})
}).addTo(map);
var startMarker = new ol.Feature({ var endMarker = L.marker(endPoint, {
geometry: new ol.geom.Point(startPoint) icon: L.divIcon({
}); className: 'custom-icon',
startMarker.setStyle(markerStyle); html: '<div style="background-color: red; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%;"></div>'
})
}).addTo(map);
var endMarker = new ol.Feature({ // Создаем линию маршрута
geometry: new ol.geom.Point(endPoint) var route = L.polyline([startPoint, endPoint], { color: 'red', weight: 6 }).addTo(map);
});
endMarker.setStyle(markerStyle);
var markerSource = new ol.source.Vector({ // Скрыть кнопки приближения/отдаления
features: [startMarker, endMarker] map.zoomControl.remove();
});
var markerLayer = new ol.layer.Vector({ // Скрыть информационную панель
source: markerSource map.attributionControl.remove();
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
markerLayer,
routeLayer,
],
view: new ol.View({
center: ol.proj.fromLonLat([30.282995, 59.855198]),
zoom: 10
})
});
// Скрыть кнопки приближения/отдаления
map.getControls().forEach(function(control) {
if (control instanceof ol.control.Zoom) {
map.removeControl(control);
}
});
// Скрыть информационную панель
map.getControls().forEach(function(control) {
if (control instanceof ol.control.Attribution) {
map.removeControl(control);
}
});
</script> </script>
<script> <script>