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

live update

Browse Source
This commit is contained in:
Ivan 2023-09-21 12:28:36 +03:00
parent fde77bfb47
commit 1355d54e39
Signed by untrusted user who does not match committer: ppechenkoo
GPG Key ID: 0C191B86D9582583
2 changed files with 70 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
static/styles/main.css
View File

@ -1833,7 +1833,7 @@ input[type="datetime-local"] {
}
.signals-list {
width: 345px;
/* width: 345px; */
height: 100%;
background-color: #f7f7fa;
border-right: #f5f5fa 2px solid;
@ -1843,17 +1843,14 @@ input[type="datetime-local"] {
z-index: 3;
}
.signals-list.hide {
.signals-list {
width: 40px;
overflow: hidden;
transition: width 0.3s ease-in-out;
}
.signals-list.hide h1,
.signals-list.hide ul,
.signals-list.hide input {
transition: 1s;
/* width: 10; */
margin-left: 50px;
display: none;
.signals-list.active {
width: 345px;
}
.signals-list h1 {
@ -1891,6 +1888,30 @@ input[type="datetime-local"] {
padding-bottom: 50px;
}
.signals-list.active li,
.signals-list.active h1 {
opacity: 1;
transform: translateX(0);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.signals-list.active #left-slider {
transform: rotate(0);
transition: transform 0.3s ease-in-out;
}
.signals-list #left-slider {
transform: rotate(180deg);
transition: transform 0.3s ease-in-out;
}
.signals-list li,
.signals-list h1 {
opacity: 0;
transform: translateX(-20px);
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.signals-list li {
box-sizing: border-box;
-moz-box-sizing: border-box;
@ -2075,6 +2096,7 @@ input[type="datetime-local"] {
right: 0;
width: calc(100% - 345px - 2px);
z-index: 3;
transition: all 0.3s ease-in-out
}
.stream-cameras button {

60
static/templates/live.html
View File

@ -124,37 +124,24 @@
<section class="table" style="position: relative;">
<div id="signals-list" class="signals-list">
<h1>Сигналы ТС</h1>
<div id="signals-list" class="signals-list active">
<h1 id="signalsListName">Сигналы ТС</h1>
<!-- <input class="search" type="text" placeholder="Поиск"> -->
<svg id="left-slider" class="left-slider" xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none" viewBox="0 0 11 19">
<path fill="#000" fill-opacity=".75" d="M0 9.495c0 .273.101.514.315.722l8.92 8.477a.981.981 0 0 0 .73.295c.585 0 1.035-.427 1.035-.995 0-.285-.124-.525-.304-.711L2.508 9.495l8.188-7.789c.18-.186.304-.437.304-.71C11 .425 10.55 0 9.965 0c-.292 0-.54.098-.73.284L.314 8.773A.955.955 0 0 0 0 9.495Z"/>
</svg>
<ul id="list">
{{#each Alarms}}
<li>
<!-- <input type="radio" name="signal" id="signal-{{this.id}}" hidden> -->
<a style="color:rgba(0, 0, 0, 0.7);" href="/reports/{{this.id}}" target="_blank">
<label for="signal-{{this.id}}">
<!-- <h2>{{this.type}}</h2> -->
<!-- <span>ID {{this.id}}</span> -->
<!-- <p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
<path fill="#000" fill-opacity=".75" d="M3.41 7.737h3.583c.268 0 .48-.205.48-.48V2.634a.472.472 0 0 0-.48-.473.466.466 0 0 0-.473.473v4.15H3.41a.467.467 0 0 0-.48.473c0 .275.206.48.48.48ZM7 13.993c3.83 0 7-3.176 7-6.996C14 3.169 10.822 0 6.993 0 3.171 0 0 3.169 0 6.997c0 3.82 3.177 6.996 7 6.996Zm0-1.166a5.804 5.804 0 0 1-5.826-5.83c0-3.238 2.58-5.83 5.82-5.83a5.815 5.815 0 0 1 5.84 5.83A5.81 5.81 0 0 1 7 12.827Z"/>
</svg>{{this.time}}</p>
<p><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 5 14">
<path fill="#000" fill-opacity=".75" d="M0 2.402c0 1.122.792 2.059 1.877 2.32v5.913c0 1.88.353 2.906.62 2.906.273 0 .619-1.02.619-2.906V4.722C4.2 4.467 5 3.524 5 2.402 5 1.083 3.888 0 2.497 0 1.112 0 0 1.083 0 2.402Zm1.784.134c-.46 0-.859-.382-.859-.828 0-.44.4-.816.86-.816.465 0 .851.376.851.816 0 .446-.386.828-.852.828Z"/>
</svg>{{this.latitude}},{{this.longitude}}</p> -->
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 19">
<path fill="#000" fill-opacity=".75" d="M4.58 6.143c-.078.341.068.478.44.459 1.562-.108 3.418-.196 6.533-.196 3.125 0 4.98.088 6.543.196.361.02.508-.118.43-.46-.235-1.035-.684-2.382-.997-2.92-.254-.439-.537-.634-1.045-.702-.703-.098-2.304-.166-4.931-.166-2.617 0-4.219.068-4.932.166-.508.068-.79.263-1.045.703-.312.537-.752 1.884-.996 2.92Zm-.068 6.65c.888 0 1.572-.684 1.572-1.572 0-.899-.684-1.573-1.572-1.573-.889 0-1.573.674-1.573 1.573 0 .888.684 1.572 1.573 1.572Zm4.463-.39h5.166c.664 0 1.123-.46 1.123-1.133 0-.665-.46-1.123-1.123-1.123H8.975c-.674 0-1.133.458-1.133 1.123 0 .673.459 1.132 1.133 1.132Zm9.619.39c.898 0 1.572-.684 1.572-1.572 0-.899-.674-1.573-1.572-1.573-.889 0-1.563.674-1.563 1.573 0 .888.674 1.572 1.563 1.572Zm-7.041 2.637c3.281 0 7.646-.166 9.492-.381 1.328-.147 2.06-.88 2.06-2.13v-1.718c0-1.65-.332-2.568-1.23-3.74l-.83-1.065c-.352-1.757-1.006-3.603-1.338-4.326C19.18.967 18.174.313 16.875.137 16.221.049 14.082 0 11.553 0 9.033 0 6.895.059 6.24.137 4.941.293 3.926.967 3.408 2.07c-.342.723-.986 2.569-1.347 4.326l-.82 1.065C.331 8.633 0 9.55 0 11.2v1.719c0 1.25.742 1.982 2.06 2.129 1.856.215 6.211.38 9.493.38Zm0-1.28c-3.32 0-7.578-.156-9.15-.351-.83-.098-1.124-.527-1.124-1.27v-1.328c0-1.338.215-1.963.977-2.959l.996-1.308c.264-1.416.898-3.39 1.318-4.288.313-.673.928-1.093 1.817-1.2.625-.079 2.607-.167 5.166-.167 2.568 0 4.58.088 5.146.166.918.117 1.524.537 1.846 1.201.42.899 1.055 2.872 1.308 4.288l1.006 1.308c.752.996.967 1.621.967 2.96v1.327c0 .742-.293 1.172-1.123 1.27-1.562.195-5.83.351-9.15.351Zm-9.756 3.965h1.142c.733 0 1.3-.566 1.3-1.289v-2.324l-3.741-.537v2.861c0 .723.566 1.29 1.299 1.29Zm18.369 0h1.152a1.27 1.27 0 0 0 1.29-1.289v-2.861l-3.731.537v2.324a1.27 1.27 0 0 0 1.289 1.29Z"/>
</svg>{{this.serial}}</p>
<p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" fill="none" viewBox="0 0 13 14">
<path fill="rgba(255, 106, 75, 0.8)" fill-opacity=".85" d="M0 10.722c0 .494.386.82 1.04.82h2.908c.055 1.307 1.095 2.451 2.549 2.451 1.46 0 2.5-1.138 2.555-2.452h2.908c.647 0 1.04-.325 1.04-.82 0-.677-.703-1.286-1.295-1.889-.455-.467-.579-1.429-.634-2.208-.048-2.668-.75-4.389-2.583-5.04C8.253.699 7.516 0 6.497 0 5.484 0 4.74.698 4.512 1.585c-1.832.65-2.535 2.37-2.583 5.04-.055.778-.18 1.74-.634 2.207C.695 9.435 0 10.044 0 10.722Zm1.337-.203v-.082c.124-.196.537-.596.895-.989.496-.541.73-1.415.792-2.736.055-2.96.951-3.901 2.13-4.22.171-.04.268-.121.275-.298.02-.704.434-1.198 1.068-1.198.64 0 1.047.494 1.074 1.198.007.177.097.258.269.299 1.185.318 2.08 1.26 2.136 4.22.062 1.32.296 2.194.785 2.735.365.393.772.793.896.99v.08H1.337Zm3.685 1.022h2.956c-.055.922-.648 1.497-1.481 1.497-.827 0-1.427-.575-1.475-1.497Z"/>
</svg>{{this.type}}</p>
<!-- <p class="name"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 14">
<path fill="#000" fill-opacity=".75" d="M1.82 14h9.335c1.233 0 1.82-.371 1.82-1.188 0-1.946-2.458-4.761-6.484-4.761C2.458 8.05 0 10.866 0 12.81 0 13.63.587 14 1.82 14Zm-.35-1.121c-.193 0-.274-.053-.274-.208 0-1.218 1.886-3.499 5.295-3.499 3.402 0 5.288 2.28 5.288 3.499 0 .155-.074.208-.267.208H1.47ZM6.492 7.13C8.26 7.13 9.7 5.555 9.7 3.64 9.7 1.737 8.266.244 6.49.244c-1.76 0-3.208 1.523-3.208 3.41C3.29 5.562 4.723 7.13 6.49 7.13Zm0-1.121c-1.084 0-2.012-1.04-2.012-2.355 0-1.292.913-2.287 2.012-2.287 1.107 0 2.013.98 2.013 2.272 0 1.315-.921 2.37-2.013 2.37Z"/>
</svg></p>
<p class="phone"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 14 14">
<path fill="#000" fill-opacity=".75" d="M10.38 14c1.25 0 2.07-.336 2.792-1.15.057-.056.114-.12.164-.178.428-.478.628-.95.628-1.4 0-.513-.3-.992-.935-1.434l-2.077-1.442c-.643-.443-1.393-.493-1.992.1l-.55.55c-.164.164-.307.17-.464.07-.386-.242-1.164-.92-1.692-1.448-.557-.55-1.092-1.164-1.378-1.614-.093-.164-.086-.3.079-.464l.542-.55c.6-.6.55-1.356.107-1.992L4.162.971C3.72.336 3.242.043 2.727.036c-.45-.007-.92.2-1.4.628-.063.057-.12.107-.178.157C.336 1.549 0 2.371 0 3.605c0 2.042 1.256 4.527 3.562 6.832C5.854 12.73 8.346 14 10.38 14Zm.008-1.1c-1.82.036-4.155-1.363-6.005-3.205-1.863-1.856-3.326-4.27-3.29-6.09.014-.785.292-1.463.849-1.949.05-.043.086-.078.136-.114.214-.186.442-.285.65-.285.206 0 .392.078.527.292L4.64 3.627c.15.221.165.47-.057.692l-.628.628c-.492.493-.457 1.093-.1 1.571.407.55 1.114 1.35 1.664 1.892.542.55 1.406 1.32 1.963 1.735.478.357 1.078.393 1.57-.1l.629-.628c.221-.222.464-.207.692-.065l2.078 1.385a.6.6 0 0 1 .292.536c0 .207-.1.435-.285.65l-.114.135c-.486.557-1.164.828-1.956.843Z"/>
</svg></p> -->
</label>
</a>
</li>
@ -180,6 +167,7 @@
<video id="camera-2"></video>
<video id="camera-3"></video>
<video id="camera-4"></video>
<video style="display: none;" id="camera-5"></video>
</div>
<button onclick="switchCameras(-1)">Назад</button>
<button onclick="switchCameras(1)">Вперед</button>
@ -197,6 +185,36 @@
<script src="../scripts/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const leftSlider = document.getElementById("left-slider");
const signalsList = document.getElementById("signals-list");
leftSlider.addEventListener("click", function () {
signalsList.classList.toggle("active");
const listItems = signalsList.querySelectorAll("li");
if (signalsList.classList.contains("active")) {
listItems.forEach(function (item, index) {
setTimeout(function () {
item.classList.add("active");
}, index * 50);
});
$(".stream-cameras").css("width", "calc(100% - 345px - 2px)");
setTimeout(() => $("#signalsListName").show(), 200);
} else {
listItems.forEach(function (item) {
item.classList.remove("active");
});
$(".stream-cameras").css("width", "calc(100% - 40px - 2px)");
$("#signalsListName").hide();
}
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const areaNames = document.querySelectorAll('.area-name');
@ -289,7 +307,7 @@
<script>
let flvPlayers = [];
let currentCameraGroup = 1;
const camerasPerGroup = 4;
const camerasPerGroup = 5;
var totalCameras = 12 - 1;
const baseURL = "http://45.9.42.252:8080/http/live.flv";
@ -304,7 +322,7 @@
}
async function playNextCamerasInGroup() {
const startCamera = (currentCameraGroup - 1) * camerasPerGroup + 2;
const startCamera = currentCameraGroup === 1 ? 2 : (currentCameraGroup - 1) * camerasPerGroup + 1;
const endCamera = startCamera + camerasPerGroup - 1;
if (startCamera > totalCameras) {
@ -362,7 +380,7 @@
videoElementIndex++;
await new Promise(resolve => setTimeout(resolve, 4000));
await new Promise(resolve => setTimeout(resolve, 2000));
}
}