171 lines
9.9 KiB
HTML
171 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>PoleMap — расстановка опор</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;background:#f1f5f9;color:#0f172a}
|
||
#map{height:100%;width:100%;border-radius:12px;min-height:500px}
|
||
.pole-badge{display:inline-block;padding:2px 10px;border-radius:20px;color:#fff;font-size:12px;font-weight:600}
|
||
.pole-type-btn{padding:8px 14px;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;background:#fff}
|
||
.pole-type-btn:hover{border-color:#94a3b8}
|
||
.pole-type-btn.active{border-color:#0f172a;background:#0f172a;color:#fff}
|
||
.pole-type-btn .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
|
||
#searchResults{position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid #e2e8f0;border-radius:8px;max-height:240px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.1)}
|
||
#searchResults li{font-size:14px;padding:8px 14px}
|
||
#searchResults li:hover{background:#f0f9ff}
|
||
.btn-primary{background:#0f172a;color:#fff;padding:10px 24px;border-radius:8px;font-weight:600;border:none;cursor:pointer;transition:all .15s;font-size:14px}
|
||
.btn-primary:hover{background:#1e293b}
|
||
.btn-secondary{background:transparent;color:#0f172a;padding:9px 22px;border-radius:8px;font-weight:500;border:2px solid #cbd5e1;cursor:pointer;transition:all .15s;font-size:14px}
|
||
.btn-secondary:hover{border-color:#94a3b8}
|
||
.btn-icon{background:transparent;color:#0f172a;padding:9px 12px;border-radius:8px;font-weight:500;border:2px solid #cbd5e1;cursor:pointer;transition:all .15s;font-size:16px;line-height:1}
|
||
.btn-icon:hover{border-color:#94a3b8;background:#f8fafc}
|
||
.map-mode-btn{padding:6px 14px;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s;background:#fff}
|
||
.map-mode-btn:hover{border-color:#94a3b8}
|
||
.map-mode-btn.active{border-color:#0f172a;background:#0f172a;color:#fff}
|
||
input,select{width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;background:#fff;outline:none}
|
||
input:focus,select:focus{border-color:#0f172a}
|
||
table{width:100%;border-collapse:collapse;font-size:14px}
|
||
table th{text-align:left;padding:10px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#64748b;border-bottom:2px solid #e2e8f0}
|
||
table td{padding:10px 16px;border-bottom:1px solid #f1f5f9}
|
||
.scrollbar-thin::-webkit-scrollbar{width:6px}
|
||
.scrollbar-thin::-webkit-scrollbar-track{background:transparent}
|
||
.scrollbar-thin::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
|
||
.leaflet-popup-content{font-size:13px;line-height:1.5}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="flex h-screen overflow-hidden">
|
||
<!-- Sidebar -->
|
||
<div class="w-[420px] min-w-[420px] bg-white border-r border-gray-200 flex flex-col overflow-hidden">
|
||
<div class="px-5 py-4 border-b border-gray-200 flex items-center justify-between">
|
||
<div>
|
||
<h1 class="text-xl font-bold">PoleMap</h1>
|
||
<p class="text-sm text-gray-500 mt-1">Расстановка опор связи</p>
|
||
</div>
|
||
<div class="flex gap-1">
|
||
<button id="undoBtn" class="btn-icon" onclick="undo()" title="Откатить">↩</button>
|
||
<button id="redoBtn" class="btn-icon" onclick="redo()" title="Вернуть">↪</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex-1 overflow-y-auto scrollbar-thin px-5 py-4 space-y-4">
|
||
<!-- Map mode -->
|
||
<div>
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1.5 block">Вид карты</label>
|
||
<div class="flex gap-2">
|
||
<button class="map-mode-btn active" data-mode="street">🗺 Схема</button>
|
||
<button class="map-mode-btn" data-mode="satellite">🛰 Спутник</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Search -->
|
||
<div class="relative">
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1.5 block">Поиск села</label>
|
||
<input id="searchInput" type="text" placeholder="Начните вводить название..." autocomplete="off">
|
||
<ul id="searchResults"></ul>
|
||
</div>
|
||
|
||
<!-- Selectors -->
|
||
<div class="space-y-2">
|
||
<div>
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1 block">Область</label>
|
||
<select id="oblast"><option value="">— Выберите область —</option></select>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1 block">Район</label>
|
||
<select id="rayon"><option value="">— Выберите район —</option></select>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1 block">Село</label>
|
||
<select id="village"><option value="">— Выберите село —</option></select>
|
||
</div>
|
||
<div>
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1 block">Или введите название</label>
|
||
<input id="manualVillage" type="text" placeholder="Например: Косшы, Жетыген..." autocomplete="off">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pole status -->
|
||
<div>
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2 block">Статус опоры</label>
|
||
<div class="flex gap-2">
|
||
<button class="pole-status-btn active" data-status="projected" style="padding:7px 16px;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:13px;font-weight:500;background:#fff;flex:1">🆕 Проектируемая</button>
|
||
<button class="pole-status-btn" data-status="existing" style="padding:7px 16px;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:13px;font-weight:500;background:#fff;flex:1">🏗 Существующая</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Existing type (shown when existing selected) -->
|
||
<div id="existingTypeGroup" style="display:none">
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2 block">Тип существующей опоры</label>
|
||
<div class="flex gap-1">
|
||
<button class="existing-type-btn active" data-existing="communication" style="padding:6px 10px;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:500;background:#fff;flex:1">📡 Связи</button>
|
||
<button class="existing-type-btn" data-existing="power" style="padding:6px 10px;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:500;background:#fff;flex:1">⚡ ЛЭП</button>
|
||
<button class="existing-type-btn" data-existing="lighting" style="padding:6px 10px;border-radius:8px;border:2px solid #e2e8f0;cursor:pointer;font-size:12px;font-weight:500;background:#fff;flex:1">💡 Освещения</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pole types -->
|
||
<div>
|
||
<label class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-2 block">Тип опоры (конструкция)</label>
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<button class="pole-type-btn" data-type="1"><span class="dot" style="background:#2563eb"></span>Промежуточная</button>
|
||
<button class="pole-type-btn" data-type="2"><span class="dot" style="background:#dc2626"></span>Угловая</button>
|
||
<button class="pole-type-btn" data-type="3"><span class="dot" style="background:#ca8a04"></span>С муфтой</button>
|
||
<button class="pole-type-btn" data-type="4"><span class="dot" style="background:#16a34a"></span>С ОРКсп</button>
|
||
<button class="pole-type-btn col-span-2" data-type="5"><span class="dot" style="background:#7c3aed"></span>С муфтой и ОРКсп</button>
|
||
</div>
|
||
<p class="text-xs text-gray-400 mt-2">Кликните на карту, чтобы поставить опору</p>
|
||
</div>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex gap-2 pt-2">
|
||
<button class="btn-primary flex-1" onclick="exportSVG()">📥 SVG</button>
|
||
<button class="btn-secondary flex-1" onclick="exportVSD()">📥 VSD</button>
|
||
<button class="btn-secondary px-3" onclick="clearAll()" title="Очистить всё">🗑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Map + Table -->
|
||
<div class="flex-1 flex flex-col overflow-hidden">
|
||
<div class="flex-1 p-3">
|
||
<div id="map"></div>
|
||
</div>
|
||
|
||
<div class="h-64 bg-white border-t border-gray-200 overflow-y-auto scrollbar-thin">
|
||
<div class="px-5 py-3 flex items-center justify-between border-b border-gray-100">
|
||
<span class="font-semibold text-sm">Опоры (<span id="poleCount">0</span>)</span>
|
||
<span class="text-xs text-gray-400">Нумерация по порядку установки</span>
|
||
</div>
|
||
<table id="poleTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="w-14">№</th>
|
||
<th>Тип</th>
|
||
<th>Статус</th>
|
||
<th>Широта</th>
|
||
<th>Долгота</th>
|
||
<th class="text-right">Дист. до пред.</th>
|
||
<th class="w-10"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td colspan="7" class="text-center text-gray-500 py-4">Кликните на карту, чтобы добавить опору</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="js/kz-data.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|