168 lines
7.7 KiB
HTML
168 lines
7.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>机器位置|FSE铁路运输票务系统</title>
|
|
<link rel="icon" type="image/png" href="/FSE-ticket.png">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="/style.css?v=14" />
|
|
</head>
|
|
|
|
<body class="public-search jr-public-page">
|
|
<div class="jr-public-shell">
|
|
<header class="jr-topbar">
|
|
<div class="jr-topbar-inner">
|
|
<a href="https://ticket.fse-media.group" id="homeLink" class="jr-top-link">
|
|
<i class="fas fa-arrow-left"></i>
|
|
<span>返回首页</span>
|
|
</a>
|
|
<div class="jr-top-status is-checking" data-server-status-root>
|
|
<span class="jr-top-status-label">服务器状态</span>
|
|
<span class="jr-top-status-dot"></span>
|
|
<span class="jr-top-status-value" data-server-status-value>检测中</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="jr-brandbar">
|
|
<div class="jr-brandbar-inner">
|
|
<a href="https://ticket.fse-media.group" class="jr-brand" id="brandLink">
|
|
<img src="/FSE-ticket.png" alt="FSE Railway" class="jr-brand-logo" />
|
|
<div class="jr-brand-copy">
|
|
<strong>FarSight-T.N.E铁路运输</strong>
|
|
<span>票务查询</span>
|
|
</div>
|
|
</a>
|
|
<nav class="jr-nav" aria-label="站点导航">
|
|
<a href="https://ticket.fse-media.group/home.html" data-link="home">首页</a>
|
|
<a href="https://ticket.fse-media.group/order" data-link="order">线上预定</a>
|
|
<a href="https://ticket.fse-media.group/search" data-link="search">车票查询</a>
|
|
<a href="https://ticket.fse-media.group/ic-card/search" data-link="card-search">IC 卡查询</a>
|
|
<a href="https://ticket.fse-media.group/ic-card/order" data-link="card-order">线上购卡</a>
|
|
<a href="https://ticket.fse-media.group/machine-map.html" data-link="machine-map" class="is-active">机器位置</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="jr-public-main">
|
|
<section class="jr-page-intro">
|
|
<span class="jr-kicker">MACHINE MAP</span>
|
|
<h1>设备分布图</h1>
|
|
<p>实时查看所有售票机和检票机的位置及状态。</p>
|
|
</section>
|
|
|
|
<section class="jr-panel-card" style="margin-bottom:24px;">
|
|
<div class="jr-panel-headline">
|
|
<h2>机器位置</h2>
|
|
<span class="jr-panel-note">Live Map</span>
|
|
</div>
|
|
<div id="map-container" style="position: relative; width: 100%; height: 600px; background: #1a1a1a; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);">
|
|
<div id="map-loading" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666;">
|
|
加载中...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script src="/public-status.js"></script>
|
|
<script>
|
|
let machineLocations = {};
|
|
let selectedMachineId = null;
|
|
|
|
function getMapX(x) {
|
|
if (typeof x !== 'number') return 50;
|
|
let min = 0, max = 0;
|
|
const vals = Object.values(machineLocations).map(l => l.x).filter(v => typeof v === 'number');
|
|
if (vals.length > 0) {
|
|
min = Math.min(...vals) - 50;
|
|
max = Math.max(...vals) + 50;
|
|
} else {
|
|
return 50;
|
|
}
|
|
if (max === min) return 50;
|
|
return ((x - min) / (max - min)) * 90 + 5;
|
|
}
|
|
|
|
function getMapY(z) {
|
|
if (typeof z !== 'number') return 50;
|
|
let min = 0, max = 0;
|
|
const vals = Object.values(machineLocations).map(l => l.z).filter(v => typeof v === 'number');
|
|
if (vals.length > 0) {
|
|
min = Math.min(...vals) - 50;
|
|
max = Math.max(...vals) + 50;
|
|
} else {
|
|
return 50;
|
|
}
|
|
if (max === min) return 50;
|
|
return ((z - min) / (max - min)) * 90 + 5;
|
|
}
|
|
|
|
function renderMap() {
|
|
const container = document.getElementById('map-container');
|
|
if (Object.keys(machineLocations).length === 0) {
|
|
container.innerHTML = `<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #666;">暂无机器坐标数据</div>`;
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
for (const [id, loc] of Object.entries(machineLocations)) {
|
|
const x = getMapX(loc.x);
|
|
const y = getMapY(loc.z);
|
|
const isSelected = selectedMachineId === id;
|
|
const isGate = loc.type === 'Gate';
|
|
const color = isGate ? '#ff9800' : '#4ade80';
|
|
|
|
html += `
|
|
<div class="map-marker" style="position: absolute; left: ${x}%; top: ${y}%; transform: translate(-50%, -50%); cursor: pointer; z-index: ${isSelected ? 10 : 1};" onclick="selectMachine('${id}')">
|
|
<div style="width: 20px; height: 20px; border-radius: 50%; background: ${color}; border: 2px solid #fff; box-shadow: 0 0 10px rgba(0,0,0,0.5);"></div>
|
|
`;
|
|
|
|
if (isSelected) {
|
|
html += `
|
|
<div class="marker-popup" style="position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: #333; padding: 10px; border-radius: 6px; width: max-content; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 20; color: white; text-align: center;">
|
|
<div style="font-weight: bold; margin-bottom: 4px;">${loc.device_id || id}</div>
|
|
<div style="font-size: 0.85em; color: #aaa;">类型: ${isGate ? '检票机' : '售票机'}</div>
|
|
`;
|
|
if (isGate) {
|
|
const mode = loc.gate_mode === 'entry' ? '进站' : (loc.gate_mode === 'exit' ? '出站' : '双向');
|
|
html += `<div style="font-size: 0.85em; color: #aaa;">模式: ${mode}</div>`;
|
|
}
|
|
html += `
|
|
<div style="font-size: 0.85em; color: #aaa;">站点: ${loc.station || loc.station_code || '未知'}</div>
|
|
<div style="font-size: 0.8em; color: #888; margin-top: 4px;">坐标: ${loc.x}, ${loc.y}, ${loc.z}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
window.selectMachine = function(id) {
|
|
selectedMachineId = id;
|
|
renderMap();
|
|
};
|
|
|
|
async function fetchLocations() {
|
|
try {
|
|
const res = await fetch('/api/public/machine-locations');
|
|
const data = await res.json();
|
|
if (data && data.ok) {
|
|
machineLocations = data.data || {};
|
|
renderMap();
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
fetchLocations();
|
|
setInterval(fetchLocations, 60000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|