2023-07-03 22:31:18 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Трансляция</title>
|
|
|
|
|
|
<link rel="stylesheet" href="../styles/main.css" />
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" />
|
|
|
|
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
|
|
|
|
|
|
|
2023-07-03 22:31:18 +00:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
2023-08-01 11:52:35 +00:00
|
|
|
|
|
|
|
|
|
|
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<header>
|
|
|
|
|
|
<h1>Аргус</h1>
|
2023-08-07 11:44:15 +00:00
|
|
|
|
<h2><span>/</span> {{Organisation}}</h2>
|
2023-07-03 22:31:18 +00:00
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="account-info">
|
|
|
|
|
|
<div id="account-main">
|
|
|
|
|
|
<img id="person" src="../img/person.svg">
|
2023-08-07 11:44:15 +00:00
|
|
|
|
<span>{{User}}</span>
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<img id="down" src="../img/down.svg">
|
|
|
|
|
|
<img id="up" src="../img/up.svg">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<a href="/login"><div id="account-additional" class="additional">Выйти</div></a>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="navigation">
|
|
|
|
|
|
<a href="/">
|
|
|
|
|
|
<div><img src="../img/chart.svg">Главная</div>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/devices">
|
|
|
|
|
|
<div><img src="../img/cloud.svg">Устройства</div>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/reports">
|
|
|
|
|
|
<div><img src="../img/bubble.svg">Отчёты</div>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/live">
|
|
|
|
|
|
<div class="selected"><img src="../img/waves.svg">Трансляция</div>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="/">
|
|
|
|
|
|
<div><img src="../img/play.svg">Записи</div>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a class="settings" href="/">
|
|
|
|
|
|
<div><img src="../img/gear.svg">Настройки</div>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<section class="main">
|
2023-07-18 01:32:15 +00:00
|
|
|
|
{{#if ifDBError}}
|
|
|
|
|
|
<section class="dberror">
|
|
|
|
|
|
<div class="erorr-container">
|
|
|
|
|
|
<img src="../img/warning.svg"> <br>
|
|
|
|
|
|
<h1>Ошибка </h1> <br>
|
|
|
|
|
|
<span>Не удалось получить данные из БД</span>
|
|
|
|
|
|
<button type="button" onclick="location.reload();">Повторить попытку</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
{{/if}}
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<div class="name">
|
|
|
|
|
|
<span>Прямые трансляции</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<nav>
|
|
|
|
|
|
<a class="selected" href="/live">Трансляции</a>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
<section class="bg">
|
|
|
|
|
|
<section class="content">
|
|
|
|
|
|
<section class="for-table">
|
|
|
|
|
|
|
|
|
|
|
|
<section class="organisation">
|
|
|
|
|
|
<h1>Организация</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<ul class="area">
|
|
|
|
|
|
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-1" class="checkbox-input" hidden checked><label for="name-1" class="checkbox-label">Группа 1</label>
|
|
|
|
|
|
<ul class="area-devices" id="devices-1">
|
2023-07-18 01:32:15 +00:00
|
|
|
|
{{#each Registrars}}
|
|
|
|
|
|
<li class="device">
|
|
|
|
|
|
<img>
|
2023-08-01 11:52:35 +00:00
|
|
|
|
<input type="checkbox" name="devices" id="{{this.id}}" class="checkbox-input device-filter" value="{{this.id}}" hidden checked>
|
2023-08-01 12:35:10 +00:00
|
|
|
|
<label for="{{this.id}}" class="checkbox-label active-{{this.status}}">
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<div class="checkmark"></div>
|
2023-08-01 11:52:35 +00:00
|
|
|
|
</label>
|
|
|
|
|
|
<input type="radio" name="camera-serial" id="radio-{{this.serial}}" class="radio-input" value="{{this.serial}}" hidden>
|
2023-08-01 12:35:10 +00:00
|
|
|
|
<label for="radio-{{this.serial}}" class="radio-label active-{{this.status}}">
|
2023-08-01 11:52:35 +00:00
|
|
|
|
{{this.serial}}
|
2023-07-18 01:32:15 +00:00
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
{{/each}}
|
|
|
|
|
|
<!-- <li class="device"><img><input type="checkbox" id="0001" class="checkbox-input device-filter" value="0001" hidden checked><label for="0001" class="checkbox-label"><div class="checkmark"></div>0001</label></li>
|
|
|
|
|
|
<li class="device"><img><input type="checkbox" id="0002" class="checkbox-input device-filter" value="0002" hidden checked><label for="0002" class="checkbox-label"><div class="checkmark"></div>0002</label></li> -->
|
2023-07-03 22:31:18 +00:00
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<!-- <li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-2" class="checkbox-input" hidden checked><label for="name-2" class="checkbox-label">Группа 2</label>
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<ul class="area-devices" id="devices-2">
|
|
|
|
|
|
<li class="device"><img><input type="checkbox" id="0003" class="checkbox-input device-filter" value="0003" hidden checked><label for="0003" class="checkbox-label"><div class="checkmark"></div>0003</label></li>
|
|
|
|
|
|
<li class="device"><img><input type="checkbox" id="0004" class="checkbox-input device-filter" value="0004" hidden checked><label for="0004" class="checkbox-label"><div class="checkmark"></div>0004</label></li>
|
|
|
|
|
|
<li class="device"><img><input type="checkbox" id="0005" class="checkbox-input device-filter" value="0005" hidden checked><label for="0005" class="checkbox-label"><div class="checkmark"></div>0005</label></li>
|
|
|
|
|
|
<li class="device"><img><input type="checkbox" id="0006" class="checkbox-input device-filter" value="0006" hidden checked><label for="0006" class="checkbox-label"><div class="checkmark"></div>0006</label></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="area-name"><img src="../img/ul.svg"><input type="checkbox" id="name-3" class="checkbox-input" hidden checked><label for="name-3" class="checkbox-label">Другое</label>
|
|
|
|
|
|
<ul class="area-devices" id="devices-3">
|
|
|
|
|
|
<li class="device"><img><input type="checkbox" id="0007" class="checkbox-input device-filter" value="0007" hidden checked><label for="0007" class="checkbox-label"><div class="checkmark"></div>0007</label></li>
|
|
|
|
|
|
</ul>
|
2023-07-18 01:32:15 +00:00
|
|
|
|
</li> -->
|
2023-07-03 22:31:18 +00:00
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-08-01 11:52:35 +00:00
|
|
|
|
<section class="table" style="position: relative;">
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<div id="signals-list" class="signals-list">
|
2023-08-07 01:15:36 +00:00
|
|
|
|
<h1>Сигналы ТС - {{Count}}</h1>
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<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>
|
|
|
|
|
|
<input class="search" type="text" placeholder="Поиск">
|
|
|
|
|
|
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<ul id="list">
|
2023-08-07 01:15:36 +00:00
|
|
|
|
{{#each Alarms}}
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<li>
|
2023-08-07 01:15:36 +00:00
|
|
|
|
<input type="radio" name="signal" id="signal-{{this.id}}" hidden>
|
|
|
|
|
|
<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="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>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
{{/each}}
|
|
|
|
|
|
<!-- <li>
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<input type="radio" name="signal" id="signal-1" hidden checked>
|
|
|
|
|
|
<label for="signal-1">
|
|
|
|
|
|
<h2>Водитель отвлекся</h2>
|
|
|
|
|
|
<span>ID 346</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>11-03-2023 12:44</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>59.956626,30.234408</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>+7 999 123 45 67</p>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<input type="radio" name="signal" id="signal-2" hidden>
|
|
|
|
|
|
<label for="signal-2">
|
|
|
|
|
|
<h2>Усталость</h2>
|
|
|
|
|
|
<span>ID 352</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>11-03-2023 11:07</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>59.878256,30.31962</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>+7 909 133 55 67</p>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<input type="radio" name="signal" id="signal-3" hidden>
|
|
|
|
|
|
<label for="signal-3">
|
|
|
|
|
|
<h2>Разговор по телефону</h2>
|
|
|
|
|
|
<span>ID 349</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>11-03-2023 11:17</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>59.959926,30.42224</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>+7 909 123 45 67</p>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<input type="radio" name="signal" id="signal-4" hidden>
|
|
|
|
|
|
<label for="signal-4">
|
|
|
|
|
|
<h2>Курение за рулём</h2>
|
|
|
|
|
|
<span>ID 347</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>11-03-2023 10:06</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>59.956626,30.234408</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>+7 909 133 55 67</p>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<li>
|
2023-07-03 22:31:18 +00:00
|
|
|
|
<input type="radio" name="signal" id="signal-5" hidden>
|
|
|
|
|
|
<label for="signal-5">
|
|
|
|
|
|
<h2>Водитель отвлекся</h2>
|
|
|
|
|
|
<span>ID 346</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>11-03-2023 12:44</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>59.956626,30.234408</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>+7 999 123 45 67</p>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<input type="radio" name="signal" id="signal-6" hidden>
|
|
|
|
|
|
<label for="signal-6">
|
|
|
|
|
|
<h2>Водитель отвлекся</h2>
|
|
|
|
|
|
<span>ID 346</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>11-03-2023 12:44</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>59.956626,30.234408</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>+7 999 123 45 67</p>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<input type="radio" name="signal" id="signal-7" hidden>
|
|
|
|
|
|
<label for="signal-7">
|
|
|
|
|
|
<h2>Водитель отвлекся</h2>
|
|
|
|
|
|
<span>ID 346</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>11-03-2023 12:44</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>59.956626,30.234408</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>+7 999 123 45 67</p>
|
|
|
|
|
|
</label>
|
2023-08-07 01:15:36 +00:00
|
|
|
|
</li> -->
|
2023-07-03 22:31:18 +00:00
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="map">
|
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-08-01 11:52:35 +00:00
|
|
|
|
<div class="cameras">
|
|
|
|
|
|
<div class="cameras-swipe"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="11" fill="none" viewBox="0 0 17 11">
|
|
|
|
|
|
<path fill="#000" fill-opacity=".5" d="M8.486 10.4a.88.88 0 0 0 .655-.283l7.558-7.744a.871.871 0 0 0 .264-.625.876.876 0 0 0-.889-.898.927.927 0 0 0-.635.254L7.96 8.75h1.045l-7.48-7.646A.892.892 0 0 0 .888.85.876.876 0 0 0 0 1.748a.91.91 0 0 0 .264.635l7.558 7.734c.186.186.41.283.664.283Z"/>
|
|
|
|
|
|
</svg></div>
|
|
|
|
|
|
<div class="video-container">
|
|
|
|
|
|
<!-- <video id="camera-1"></video> -->
|
|
|
|
|
|
<video id="camera-2"></video>
|
|
|
|
|
|
<video id="camera-3"></video>
|
|
|
|
|
|
<video id="camera-4"></video>
|
|
|
|
|
|
<video id="camera-5"></video>
|
|
|
|
|
|
<!-- <video id="camera-6"></video>
|
|
|
|
|
|
<video id="camera-7"></video>
|
|
|
|
|
|
<video id="camera-8"></video>
|
|
|
|
|
|
<video id="camera-9"></video>
|
|
|
|
|
|
<video id="camera-10"></video>
|
|
|
|
|
|
<video id="camera-11"></video>
|
|
|
|
|
|
<video id="camera-12"></video>
|
|
|
|
|
|
<video id="camera-13"></video>
|
|
|
|
|
|
<video id="camera-14"></video>
|
|
|
|
|
|
<video id="camera-15"></video>
|
|
|
|
|
|
<video id="camera-16"></video> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-07-03 22:31:18 +00:00
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
2023-08-01 11:52:35 +00:00
|
|
|
|
<script src="../scripts/jquery.min.js"></script>
|
|
|
|
|
|
|
2023-08-01 12:35:10 +00:00
|
|
|
|
<!-- <script>
|
2023-08-01 11:52:35 +00:00
|
|
|
|
var serial;
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
|
const radioInputs = document.querySelectorAll(".radio-input");
|
|
|
|
|
|
|
|
|
|
|
|
if (radioInputs.length > 0) {
|
|
|
|
|
|
radioInputs[0].checked = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
serial = $("input[name=camera-serial]:checked").val()
|
|
|
|
|
|
playflv();
|
|
|
|
|
|
});
|
2023-08-01 12:35:10 +00:00
|
|
|
|
</script> -->
|
2023-08-01 11:52:35 +00:00
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
let flvPlayers = [];
|
|
|
|
|
|
function stopAllCameras() {
|
|
|
|
|
|
flvPlayers.forEach(player => {
|
|
|
|
|
|
player.pause();
|
|
|
|
|
|
player.unload();
|
|
|
|
|
|
player.detachMediaElement();
|
|
|
|
|
|
player.destroy();
|
|
|
|
|
|
});
|
|
|
|
|
|
flvPlayers = [];
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function stopAllCameras() {
|
|
|
|
|
|
flvPlayers.forEach(player => {
|
|
|
|
|
|
player.pause();
|
|
|
|
|
|
player.unload();
|
|
|
|
|
|
player.detachMediaElement();
|
|
|
|
|
|
player.destroy();
|
|
|
|
|
|
});
|
|
|
|
|
|
flvPlayers = [];
|
|
|
|
|
|
}
|
|
|
|
|
|
function playflv() {
|
|
|
|
|
|
if (!flvjs.isSupported()) {
|
|
|
|
|
|
console.log("Browser does not support.");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const cameras = 5;
|
|
|
|
|
|
const baseURL = "http://45.9.42.252:8080/http/live.flv";
|
|
|
|
|
|
let currentCamera = 2;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// stopAllCameras();
|
|
|
|
|
|
|
|
|
|
|
|
function playNextCamera(i) {
|
|
|
|
|
|
console.log(flvPlayers)
|
|
|
|
|
|
// if (i > cameras) {
|
|
|
|
|
|
// return; // Stop when all cameras have been played
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
// stopAllCameras(); // Stop all previous connections before opening a new one
|
|
|
|
|
|
|
|
|
|
|
|
const videoElement = document.getElementById(`camera-${i}`);
|
|
|
|
|
|
const flvPlayer = flvjs.createPlayer({
|
|
|
|
|
|
type: 'flv',
|
|
|
|
|
|
isLive: true,
|
|
|
|
|
|
cors: true,
|
|
|
|
|
|
url: `${baseURL}?serial=${serial}&channel=${i}&quality=0`,
|
|
|
|
|
|
}, {
|
|
|
|
|
|
enableWorker: true,
|
|
|
|
|
|
enableStashBuffer: false,
|
|
|
|
|
|
autoCleanupSourceBuffer: true,
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
|
|
|
|
flvPlayer.load();
|
|
|
|
|
|
flvPlayer.play();
|
|
|
|
|
|
|
|
|
|
|
|
flvPlayers.push(flvPlayer); // Add the current player to the array
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
playNextCamera(i + 1);
|
|
|
|
|
|
}, 100);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
playNextCamera(currentCamera);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// document.addEventListener('DOMContentLoaded', playflv);
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var cameraSerials = document.querySelectorAll('.radio-input');
|
|
|
|
|
|
|
|
|
|
|
|
cameraSerials.forEach((checkbox) => {
|
|
|
|
|
|
checkbox.addEventListener('change', function() {
|
|
|
|
|
|
console.log($("input[name=camera-serial]:checked").val())
|
|
|
|
|
|
serial = $("input[name=camera-serial]:checked").val()
|
|
|
|
|
|
stopAllCameras();
|
|
|
|
|
|
playflv();
|
2023-08-01 12:35:10 +00:00
|
|
|
|
|
|
|
|
|
|
var svgId = "marker-" + serial;
|
|
|
|
|
|
var svgElement = document.getElementById(svgId);
|
|
|
|
|
|
if (svgElement) {
|
|
|
|
|
|
svgElement.innerHTML = `
|
|
|
|
|
|
<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"/>
|
|
|
|
|
|
`;
|
|
|
|
|
|
}
|
2023-08-01 11:52:35 +00:00
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<script>
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
var signalsList = document.querySelector('.signals-list');
|
|
|
|
|
|
var list = document.getElementById('list');
|
|
|
|
|
|
|
2023-07-24 04:53:11 +00:00
|
|
|
|
list.style.height = (signalsList.clientHeight - 50 - 75) + 'px';
|
|
|
|
|
|
});
|
|
|
|
|
|
window.addEventListener('resize', function() {
|
|
|
|
|
|
var signalsList = document.querySelector('.signals-list');
|
|
|
|
|
|
var list = document.getElementById('list');
|
|
|
|
|
|
|
2023-07-18 01:32:15 +00:00
|
|
|
|
list.style.height = (signalsList.clientHeight - 50 - 75) + 'px';
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
var mapContainer = document.querySelector('.map');
|
|
|
|
|
|
var mapArea = document.getElementById('map');
|
|
|
|
|
|
|
|
|
|
|
|
mapArea.style.height = (mapContainer.clientHeight) + 'px';
|
|
|
|
|
|
mapArea.style.width = (mapContainer.clientWidth) + 'px';
|
|
|
|
|
|
});
|
2023-07-24 04:53:11 +00:00
|
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", function (event) {
|
|
|
|
|
|
var mapContainer = document.querySelector('.map');
|
|
|
|
|
|
var mapArea = document.getElementById('map');
|
|
|
|
|
|
|
|
|
|
|
|
mapArea.style.height = (mapContainer.clientHeight) + 'px';
|
|
|
|
|
|
mapArea.style.width = (mapContainer.clientWidth) + 'px';
|
|
|
|
|
|
});
|
2023-07-18 01:32:15 +00:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <script src="../scripts/table-reports.js"></script> -->
|
2023-08-01 11:52:35 +00:00
|
|
|
|
|
2023-07-03 22:31:18 +00:00
|
|
|
|
|
2023-07-18 01:32:15 +00:00
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
var checkboxes = document.querySelectorAll('.checkbox-input');
|
|
|
|
|
|
const form = document.getElementById('devices-1');
|
|
|
|
|
|
|
|
|
|
|
|
form.addEventListener('change', () => {
|
|
|
|
|
|
const selectedDevices = Array.from(checkboxes)
|
|
|
|
|
|
.filter(checkbox => checkbox.checked && checkbox.value !== 'on')
|
|
|
|
|
|
.map(checkbox => checkbox.value);
|
|
|
|
|
|
|
|
|
|
|
|
console.log(selectedDevices);
|
|
|
|
|
|
|
|
|
|
|
|
fetch('/devices-geo', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({ devices: selectedDevices }),
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
console.log(data.devicesData);
|
|
|
|
|
|
updateMapMarkers(data.devicesData);
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Ошибка при отправке запроса:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
mapboxgl.accessToken = 'pk.eyJ1IjoicHBlY2hlbmtvbyIsImEiOiJjbGs3Y3dkc3AwNmN1M2dudzRtd3gwNjl4In0.oEFhSBTsaiyBx1uOqHdrZQ';
|
|
|
|
|
|
const map = new mapboxgl.Map({
|
|
|
|
|
|
container: 'map',
|
2023-08-04 10:36:32 +00:00
|
|
|
|
style: 'mapbox://styles/ppechenkoo/clkwfa6wu00ck01qgcrm93msr',
|
2023-07-18 01:32:15 +00:00
|
|
|
|
center: [30.282995, 59.855198], // Задайте начальные координаты карты
|
|
|
|
|
|
zoom: 10, // Задайте начальный уровень масштабирования карты
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Хранение текущих маркеров на карте
|
|
|
|
|
|
const markers = [];
|
|
|
|
|
|
{{#if ifDBError}}
|
|
|
|
|
|
{{else}}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const selectedDevices = Array.from(checkboxes)
|
|
|
|
|
|
.filter(checkbox => checkbox.checked && checkbox.value !== 'on')
|
|
|
|
|
|
.map(checkbox => checkbox.value);
|
|
|
|
|
|
|
|
|
|
|
|
console.log(selectedDevices);
|
|
|
|
|
|
|
|
|
|
|
|
fetch('/devices-geo', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({ devices: selectedDevices }),
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
console.log(data.devicesData);
|
|
|
|
|
|
data.devicesData.forEach(device => {
|
2023-08-01 13:05:54 +00:00
|
|
|
|
const { serial, status, longitude, latitude, direction, speed } = device;
|
2023-07-24 04:53:11 +00:00
|
|
|
|
var newDirection = direction + 90
|
|
|
|
|
|
console.log(newDirection);
|
2023-07-18 01:32:15 +00:00
|
|
|
|
|
|
|
|
|
|
// Создание HTML-элемента для маркера
|
|
|
|
|
|
const el = document.createElement('div');
|
|
|
|
|
|
el.className = 'marker';
|
|
|
|
|
|
// el.style.transform = `rotate(${direction / 100}deg)`;
|
2023-08-01 13:05:54 +00:00
|
|
|
|
el.innerHTML = `<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">
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<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"/>
|
2023-08-01 13:05:54 +00:00
|
|
|
|
</svg><br><span class="speed active-${status}">${speed} км/ч</span>`;
|
2023-07-18 01:32:15 +00:00
|
|
|
|
|
|
|
|
|
|
// Создание нового маркера на карте
|
|
|
|
|
|
const marker = new mapboxgl.Marker(el)
|
|
|
|
|
|
.setLngLat([longitude, latitude])
|
|
|
|
|
|
.addTo(map);
|
|
|
|
|
|
|
|
|
|
|
|
// Добавление маркера в массив markers
|
|
|
|
|
|
markers.push(marker);
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Ошибка при отправке запроса:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Функция для обновления маркеров на карте
|
|
|
|
|
|
function updateMapMarkers(devicesData) {
|
|
|
|
|
|
// Очистка существующих маркеров на карте
|
|
|
|
|
|
markers.forEach(marker => marker.remove());
|
|
|
|
|
|
markers.length = 0;
|
|
|
|
|
|
|
|
|
|
|
|
// Создание новых маркеров на карте на основе полученных данных
|
|
|
|
|
|
devicesData.forEach(device => {
|
2023-08-01 13:05:54 +00:00
|
|
|
|
const { serial, status, longitude, latitude, direction, speed } = device;
|
2023-07-24 04:53:11 +00:00
|
|
|
|
var newDirection = direction + 90
|
|
|
|
|
|
console.log(newDirection);
|
2023-07-18 01:32:15 +00:00
|
|
|
|
|
|
|
|
|
|
// Создание HTML-элемента для маркера
|
|
|
|
|
|
const el = document.createElement('div');
|
|
|
|
|
|
el.className = 'marker';
|
|
|
|
|
|
// el.style.transform = `rotate(${direction}deg)`;
|
2023-08-01 13:05:54 +00:00
|
|
|
|
el.innerHTML = `<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">
|
2023-07-18 01:32:15 +00:00
|
|
|
|
<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"/>
|
2023-08-01 13:05:54 +00:00
|
|
|
|
</svg><br><span class="speed active-${status}">${speed} км/ч</span>`;
|
2023-07-18 01:32:15 +00:00
|
|
|
|
|
|
|
|
|
|
// Создание нового маркера на карте
|
|
|
|
|
|
const marker = new mapboxgl.Marker(el)
|
|
|
|
|
|
.setLngLat([longitude, latitude])
|
|
|
|
|
|
.addTo(map);
|
|
|
|
|
|
|
|
|
|
|
|
// Добавление маркера в массив markers
|
|
|
|
|
|
markers.push(marker);
|
|
|
|
|
|
});
|
2023-08-01 12:35:10 +00:00
|
|
|
|
serial = $("input[name=camera-serial]:checked").val()
|
|
|
|
|
|
|
|
|
|
|
|
var svgId = "marker-" + serial;
|
|
|
|
|
|
var svgElement = document.getElementById(svgId);
|
|
|
|
|
|
if (svgElement) {
|
|
|
|
|
|
svgElement.innerHTML = `
|
|
|
|
|
|
<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"/>
|
|
|
|
|
|
`;
|
|
|
|
|
|
}
|
2023-07-18 01:32:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
|
fetch('/devices-geo', {
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({ devices: selectedDevices }),
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
console.log(data.devicesData);
|
|
|
|
|
|
updateMapMarkers(data.devicesData);
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Ошибка при отправке запроса:', error);
|
|
|
|
|
|
});
|
2023-07-24 04:53:11 +00:00
|
|
|
|
}, 12000);
|
2023-07-18 01:32:15 +00:00
|
|
|
|
{{/if}}
|
2023-07-03 22:31:18 +00:00
|
|
|
|
</script>
|
|
|
|
|
|
|
2023-08-07 01:15:36 +00:00
|
|
|
|
<!-- <script>
|
2023-07-03 22:31:18 +00:00
|
|
|
|
const panel = document.getElementById('signals-list');
|
|
|
|
|
|
const slider = document.getElementById('left-slider');
|
|
|
|
|
|
|
|
|
|
|
|
slider.addEventListener('click', () => {
|
|
|
|
|
|
panel.classList.toggle('hide');
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-08-07 01:15:36 +00:00
|
|
|
|
</script> -->
|
2023-07-03 22:31:18 +00:00
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// Скрытие/Показ дополнительных меню аккаунта
|
|
|
|
|
|
const accountMain = document.getElementById('account-main');
|
|
|
|
|
|
const accountAdditional = document.getElementById('account-additional');
|
|
|
|
|
|
const accountUp = document.getElementById('up');
|
|
|
|
|
|
const accountDown = document.getElementById('down');
|
|
|
|
|
|
accountAdditional.style.display = 'none';
|
|
|
|
|
|
accountUp.style.display = 'none';
|
|
|
|
|
|
|
|
|
|
|
|
accountMain.addEventListener('click', () => {
|
|
|
|
|
|
if (accountAdditional.style.display === 'none') {
|
|
|
|
|
|
accountAdditional.style.display = 'flex';
|
|
|
|
|
|
accountUp.style.display = 'unset';
|
|
|
|
|
|
accountDown.style.display = 'none';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
accountAdditional.style.display = 'none';
|
|
|
|
|
|
accountUp.style.display = 'none';
|
|
|
|
|
|
accountDown.style.display = 'unset';
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2023-07-18 01:32:15 +00:00
|
|
|
|
var checkboxes = document.querySelectorAll('.organisation .checkbox-input');
|
2023-07-03 22:31:18 +00:00
|
|
|
|
|
|
|
|
|
|
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>
|
2023-07-24 04:53:11 +00:00
|
|
|
|
|
2023-07-03 22:31:18 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
