pipe-ner-server/docs/cockpit/overview-monitoring-demo.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>驾驶舱总体概览：运行监测 Demo</title>
  <style>
    :root { color-scheme: dark; --panel:#0d1c30; --line:#234969; --cyan:#4dd5ff; --green:#49d17c; --yellow:#ffd166; --red:#ff5f6d; --muted:#8ba7bd; }
    * { box-sizing:border-box; }
    body { margin:0; font-family:"Microsoft YaHei",Arial,sans-serif; background:#071322; color:#eaf5ff; }
    header { padding:18px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
    h1 { font-size:22px; margin:0; letter-spacing:2px; }
    main { padding:20px; display:grid; grid-template-columns:minmax(310px,430px) 1fr; gap:18px; }
    .panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
    .panel > h2 { margin:0; padding:12px 14px; font-size:15px; border-bottom:1px solid var(--line); }
    .body { padding:14px; }
    .kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .kpi { background:#08182b; border:1px solid var(--line); border-radius:6px; padding:12px; }
    .kpi b { display:block; font-size:24px; color:var(--cyan); }
    .kpi span { color:var(--muted); font-size:12px; }
    .filter { display:flex; gap:8px; margin:14px 0; }
    .filter-label { align-self:center; color:var(--muted); font-size:12px; }
    button { cursor:pointer; background:#102c44; color:#eaf5ff; border:1px solid var(--line); padding:7px 12px; border-radius:4px; }
    button.active { background:#1a5f83; border-color:var(--cyan); }
    .status { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
    .status div { text-align:center; padding:8px; border-radius:4px; background:#08182b; border:1px solid var(--line); }
    .online b { color:var(--green); } .offline b { color:var(--red); } .stale b { color:var(--yellow); }
    ul { padding-left:18px; margin:0; color:#d3e9f8; }
    li { margin:5px 0; }
    .map { position:relative; min-height:470px; background:#020b16; }
    .map-grid { position:absolute; inset:0; background-image:linear-gradient(#12324c 1px,transparent 1px),linear-gradient(90deg,#12324c 1px,transparent 1px); background-size:50px 50px; opacity:.45; }
    .point { position:absolute; width:26px; height:26px; margin:-13px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid transparent; cursor:pointer; }
    .point.ONLINE { background:#0e4b29; border-color:var(--green); }
    .point.OFFLINE { background:#57232a; border-color:var(--red); }
    .point.STALE { background:#55431a; border-color:var(--yellow); }
    .point.UNKNOWN { background:#283642; border-color:#7e95a8; }
    .point small { font-size:10px; font-weight:700; }
    .legend, .events { padding:10px 14px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
    .events button { margin-left:8px; }
    .toast { position:absolute; right:14px; bottom:14px; padding:9px 13px; border-radius:4px; background:#12324c; border:1px solid var(--cyan); min-width:220px; }
    .hidden { display:none; }
    code { color:var(--cyan); }
  </style>
</head>
<body>
  <header>
  <h1>总体概览 / 运行监测</h1>
  <div><span id="restState">REST：连接中</span> · <span id="updated">更新时间：--</span></div>
</header>
<main>
  <section class="panel">
    <h2>监管能力 KPI</h2>
    <div class="body">
      <div class="kpis">
        <div class="kpi"><b id="deviceCount">--</b><span>监测设备</span></div>
        <div class="kpi"><b id="pointCount">--</b><span>监测点</span></div>
        <div class="kpi"><b id="facilityCount">--</b><span>监测设施</span></div>
        <div class="kpi"><b id="onlineRate">--</b><span>设备在线率</span></div>
        <div class="kpi"><b id="staleCount">--</b><span>STALE 设备</span></div>
        <div class="kpi"><b id="freshness">--</b><span>汇总新鲜度</span></div>
      </div>
      <div class="filter" id="industries">
        <span class="filter-label">行业：</span>
        <button data-industry="" class="active">全部</button>
        <button data-industry="GAS">燃气</button>
        <button data-industry="WATER_SUPPLY">供水</button>
        <button data-industry="DRAINAGE">排水</button>
      </div>
      <div class="filter" id="metrics">
        <span class="filter-label">指标：</span>
        <button data-metric="" class="active">全部</button>
        <button data-metric="ONLINE">在线</button>
        <button data-metric="OFFLINE">离线</button>
        <button data-metric="STALE">过期</button>
        <button data-metric="UNKNOWN">未知</button>
      </div>
      <div class="status">
        <div class="online"><b id="online">--</b><span>在线</span></div>
        <div class="offline"><b id="offline">--</b><span>离线</span></div>
        <div class="stale"><b id="stale">--</b><span>过期</span></div>
        <div><b id="unknown">--</b><span>未知</span></div>
      </div>
      <h3 style="font-size:14px;margin:14px 0 8px;">类型分布</h3>
      <ul id="distribution"></ul>
    </div>
  </section>

  <section class="panel">
    <h2>中央一张图联动</h2>
    <div class="map" id="map">
      <div class="map-grid"></div>
    </div>
    <div class="legend">模拟点位：绿=ONLINE，红=OFFLINE，黄=STALE，灰=UNKNOWN；行业或指标筛选会过滤地图点位。</div>
    <div class="events">
      <span>模拟 WebSocket 设备增量：</span>
      <button onclick="pushDelta('GAS-002','OFFLINE','2026-09-02T10:05:00+08:00')">GAS-002 离线</button>
      <button onclick="pushDelta('GAS-002','ONLINE','2026-09-02T10:06:00+08:00')">GAS-002 在线</button>
      <button onclick="pushDelta('WS-001','ONLINE','2026-09-02T10:07:00+08:00')">WS-001 恢复</button>
      <button onclick="pushOldDelta()">发送旧消息</button>
    </div>
    <div class="toast hidden" id="toast"></div>
  </section>
</main>

<script>
  const devices = [
    { code:'GAS-001', industry:'GAS', type:'GAS_SENSOR', state:'ONLINE', x:20, y:25 },
    { code:'GAS-002', industry:'GAS', type:'GAS_SENSOR', state:'OFFLINE', x:33, y:41 },
    { code:'WS-001', industry:'WATER_SUPPLY', type:'WATER_SUPPLY_SENSOR', state:'STALE', x:52, y:28 },
    { code:'WS-002', industry:'WATER_SUPPLY', type:'WATER_SUPPLY_SENSOR', state:'UNKNOWN', x:63, y:47 },
    { code:'RAIN-001', industry:'DRAINAGE', type:'RAINWATER_SENSOR', state:'ONLINE', x:76, y:31 },
    { code:'SEW-001', industry:'DRAINAGE', type:'SEWAGE_ENVIRONMENT_SENSOR', state:'ONLINE', x:85, y:56 }
  ];
  const baseCounts = { monitoringPointCount:6, monitoringFacilityCount:9, infrastructureFacilityCount:99 };
  let selectedIndustry = '';
  let selectedMetric = '';
  let latestServerUpdatedAt = '2026-09-02T09:59:50+08:00';

  function filteredDevices() {
    return devices.filter(device =>
      (!selectedIndustry || device.industry === selectedIndustry)
      && (!selectedMetric || device.state === selectedMetric));
  }

  function fmtRate(numerator, denominator) {
    return denominator === 0 ? '0.0000' : (numerator / denominator).toFixed(4);
  }

  function render() {
    const visible = filteredDevices();
    const online = visible.filter(d => d.state === 'ONLINE').length;
    const offline = visible.filter(d => d.state === 'OFFLINE').length;
    const stale = visible.filter(d => d.state === 'STALE').length;
    const unknown = visible.filter(d => d.state === 'UNKNOWN').length;
    const denominator = online + offline + stale;
    const freshness = visible.length === 0 ? 'EMPTY' : stale === 0 ? 'CURRENT' : 'STALE';

    document.getElementById('deviceCount').textContent = visible.length;
    document.getElementById('pointCount').textContent = selectedIndustry ? Math.round(baseCounts.monitoringPointCount / 2) : baseCounts.monitoringPointCount;
    document.getElementById('facilityCount').textContent = selectedIndustry ? 3 : baseCounts.monitoringFacilityCount;
    document.getElementById('onlineRate').textContent = fmtRate(online, denominator);
    document.getElementById('staleCount').textContent = stale;
    document.getElementById('freshness').textContent = freshness;
    document.getElementById('online').textContent = online;
    document.getElementById('offline').textContent = offline;
    document.getElementById('stale').textContent = stale;
    document.getElementById('unknown').textContent = unknown;
    document.getElementById('updated').textContent = '更新时间：' + latestServerUpdatedAt;

    const counts = new Map();
    visible.forEach(d => counts.set(d.type, (counts.get(d.type) || 0) + 1));
    document.getElementById('distribution').innerHTML = [...counts.entries()]
      .map(([type, count]) => `<li><code>${type}</code>：${count} 台设备</li>`).join('');

    const map = document.getElementById('map');
    map.querySelectorAll('.point').forEach(node => node.remove());
    visible.forEach(d => {
      const point = document.createElement('div');
      point.className = 'point ' + d.state;
      point.style.left = d.x + '%';
      point.style.top = d.y + '%';
      point.title = `${d.code}\n${d.industry}\n${d.type}\n${d.state}`;
      point.innerHTML = '<small>' + d.code.slice(0, 3) + '</small>';
      point.onclick = () => show(d.code + ' / ' + d.state);
      map.appendChild(point);
    });
  }

  function show(message) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.classList.remove('hidden');
    setTimeout(() => toast.classList.add('hidden'), 2200);
  }

  function pushDelta(deviceCode, state, serverUpdatedAt) {
    if (serverUpdatedAt <= latestServerUpdatedAt) {
      show('旧消息已忽略：' + serverUpdatedAt);
      return;
    }
    const device = devices.find(d => d.code === deviceCode);
    if (!device) return;
    device.state = state;
    latestServerUpdatedAt = serverUpdatedAt;
    render();
    show('已应用增量：' + deviceCode + ' → ' + state);
  }

  function pushOldDelta() {
    pushDelta('GAS-002', 'ONLINE', '2026-09-02T09:00:00+08:00');
  }

  function bindFilter(containerId, apply) {
    document.getElementById(containerId).addEventListener('click', event => {
    const button = event.target.closest('button');
    if (!button) return;
      document.querySelectorAll('#' + containerId + ' button').forEach(node => node.classList.remove('active'));
    button.classList.add('active');
      apply(button.dataset);
      render();
    });
  }

  bindFilter('industries', dataset => { selectedIndustry = dataset.industry; });
  bindFilter('metrics', dataset => { selectedMetric = dataset.metric; });

  async function loadRestInitialSummary() {
    try {
      const response = await fetch('/api/cockpit/v1/overview/monitoring', {
        headers: { 'Accept': 'application/json' }
      });
      if (!response.ok) throw new Error('HTTP ' + response.status);
      const payload = await response.json();
      if (payload && payload.data && payload.data.updatedAt) {
        latestServerUpdatedAt = payload.data.updatedAt;
        document.getElementById('restState').textContent = 'REST：已加载初始汇总';
      } else {
        throw new Error('INVALID_ENVELOPE');
      }
    } catch (error) {
      document.getElementById('restState').textContent = 'REST：接口不可用，使用演示 fixture';
    }
    render();
  }

  loadRestInitialSummary();
  render();
</script>
</body>
</html>