pipe-ner-server/docs/cockpit/overview-warning-settings-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:#0c1a2c; --line:#22486a; --cyan:#45d6ff; --green:#49d17c; --red:#ff5f6d; --yellow:#ffd166; --muted:#8ba7bd; }
    * { box-sizing:border-box; }
    body { margin:0; font-family:"Microsoft YaHei",Arial,sans-serif; background:#071322; color:#eaf5ff; }
    header { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line); }
    h1 { margin:0; font-size:22px; letter-spacing:2px; }
    h1 small { margin-left:10px; font-size:12px; color:var(--muted); }
    main { display:grid; grid-template-columns:minmax(320px,440px) 1fr; gap:18px; padding:20px; }
    .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; }
    .seg { display:flex; gap:8px; margin-bottom:14px; }
    button { cursor:pointer; padding:8px 14px; border:1px solid var(--line); background:#102c44; color:#eaf5ff; border-radius:4px; }
    button.active { border-color:var(--cyan); background:#1a5f83; }
    .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .card { background:#08182b; border:1px solid var(--line); border-radius:6px; padding:12px; }
    .card b { display:block; font-size:25px; color:var(--cyan); }
    .card span { color:var(--muted); font-size:12px; }
    .meta { margin:14px 0 8px; font-size:13px; color:#d3e9f8; }
    .states { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
    .states div { text-align:center; padding:8px 2px; background:#08182b; border:1px solid var(--line); border-radius:4px; }
    .states b { display:block; }
    ul { padding-left:20px; margin:8px 0; }
    .bar { height:10px; background:#12324c; border-radius:5px; overflow:hidden; margin:5px 0 12px; }
    .bar i { display:block; height:100%; background:linear-gradient(90deg,#1a8ec7,var(--cyan)); }
    .map { position:relative; min-height:470px; background:#020b16; }
    .grid { position:absolute; inset:0; opacity:.4; background-image:linear-gradient(#12324c 1px,transparent 1px),linear-gradient(90deg,#12324c 1px,transparent 1px); background-size:50px 50px; }
    .point { position:absolute; width:25px; height:25px; margin:-12px; border-radius:50%; border:2px solid #ffffff22; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .point.WARNING { background:#55431a; border-color:var(--yellow); }
    .point.ALARM { background:#57232a; border-color:var(--red); }
    .point small { font-size:10px; font-weight:700; }
    .legend { padding:10px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
    .map-title { position:absolute; top:14px; left:14px; z-index:2; padding:7px 11px; background:#08182bcc; border:1px solid var(--cyan); border-radius:4px; }
  </style>
</head>
<body>
<header>
  <h1>总体概览 / 预警设置 <small>合同固定名称 · 只读展示</small></h1>
  <div>更新时间：<span id="updatedAt">2026-09-02 09:59:50</span></div>
</header>
<main>
  <section class="panel">
    <h2>预警 / 报警处置态势</h2>
    <div class="body">
      <div class="seg">
        <button id="btn-WARNING" class="active">预警</button>
        <button id="btn-ALARM">报警</button>
      </div>
      <div class="cards">
        <div class="card"><b id="total">--</b><span>事件总数</span></div>
        <div class="card"><b id="handled">--</b><span>已处置</span></div>
        <div class="card"><b id="pending">--</b><span>未处置</span></div>
        <div class="card"><b id="efficiency">--</b><span>处置效率</span></div>
        <div class="card"><b id="unlinked">--</b><span>未关联工单</span></div>
        <div class="card"><b id="invalid">--</b><span>异常工单状态</span></div>
      </div>
      <div class="meta">近两日趋势</div>
      <div id="trend"></div>
      <div class="meta">七态工单分布</div>
      <div class="states" id="states"></div>
    </div>
  </section>
  <section class="panel">
    <h2>中央一张图联动</h2>
    <div class="map">
      <div class="grid"></div>
      <div class="map-title" id="mapTitle">筛选：预警</div>
    </div>
    <div class="legend">黄点=预警事件；红点=报警事件；切换模式只过滤当前事件族，不合并 warning / alarm 统计。</div>
  </section>
</main>

<script>
  const data = {
    updatedAt: '2026-09-02T09:59:50+08:00',
    WARNING: {
      total: 3, handled: 1, pending: 2, efficiency: '0.3333', unlinked: 0, invalid: 0,
      trend: [{ bucket:'09-01', total:2, handled:1 }, { bucket:'09-02', total:1, handled:0 }],
      states: { 1:1, 2:0, 3:0, 4:0, 5:1, 6:1, 7:0 },
      points: [
        { code:'WRN-001', x:20, y:27 }, { code:'WRN-002', x:35, y:45 }, { code:'WRN-003', x:48, y:30 }
      ]
    },
    ALARM: {
      total: 2, handled: 0, pending: 2, efficiency: '0.0000', unlinked: 0, invalid: 0,
      trend: [{ bucket:'09-01', total:1, handled:0 }, { bucket:'09-02', total:1, handled:0 }],
      states: { 1:0, 2:0, 3:0, 4:2, 5:0, 6:0, 7:0 },
      points: [
        { code:'ALM-001', x:64, y:36 }, { code:'ALM-002', x:82, y:58 }
      ]
    }
  };
  const labels = { 1:'待派单', 2:'待接单', 3:'已接单', 4:'处理中', 5:'待验收', 6:'已结案', 7:'已取消' };
  let mode = 'WARNING';

  function render() {
    const item = data[mode];
    document.getElementById('total').textContent = item.total;
    document.getElementById('handled').textContent = item.handled;
    document.getElementById('pending').textContent = item.pending;
    document.getElementById('efficiency').textContent = item.efficiency;
    document.getElementById('unlinked').textContent = item.unlinked;
    document.getElementById('invalid').textContent = item.invalid;
    document.getElementById('mapTitle').textContent = '筛选：' + (mode === 'WARNING' ? '预警' : '报警');
    document.getElementById('btn-WARNING').classList.toggle('active', mode === 'WARNING');
    document.getElementById('btn-ALARM').classList.toggle('active', mode === 'ALARM');

    const trend = document.getElementById('trend');
    trend.innerHTML = item.trend.map(point => `
      <div>
        <div style="display:flex;justify-content:space-between;font-size:12px;color:#8ba7bd;">
          <span>${point.bucket}</span><span>${point.handled}/${point.total}</span>
        </div>
        <div class="bar"><i style="width:${point.total ? point.handled / point.total * 100 : 0}%"></i></div>
      </div>
    `).join('');

    const states = document.getElementById('states');
    states.innerHTML = Object.entries(labels).map(([code, label]) => `
      <div><b>${item.states[code] || 0}</b><span>${label}</span></div>
    `).join('');

    const map = document.querySelector('.map');
    map.querySelectorAll('.point').forEach(node => node.remove());
    item.points.forEach(point => {
      const node = document.createElement('div');
      node.className = 'point ' + mode;
      node.style.left = point.x + '%';
      node.style.top = point.y + '%';
      node.title = point.code;
      node.innerHTML = '<small>' + point.code.slice(0, 3) + '</small>';
      node.onclick = () => alert(point.code + ' / ' + mode);
      map.appendChild(node);
    });
  }

  document.getElementById('btn-WARNING').onclick = () => { mode = 'WARNING'; render(); };
  document.getElementById('btn-ALARM').onclick = () => { mode = 'ALARM'; render(); };
  render();
</script>
</body>
</html>