pipe-ner-server/docs/cockpit/work-order-nine-states-demo.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cockpit Work Order Nine States Demo</title>
  <style>
    body { margin:0; min-height:100vh; background:#08131f; color:#e8f1f8; font:15px/1.5 "Microsoft YaHei",sans-serif; }
    main { width:min(1280px,calc(100vw - 32px)); margin:28px auto; display:grid; gap:16px; }
    header, section { background:#0e1e2d; border:1px solid #21465f; padding:20px; }
    h1,h2,h3 { margin:0 0 10px; } h1 { font-size:22px; } h2 { font-size:17px; } h3 { font-size:15px; }
    .endpoint { color:#78a2b8; font-family:Consolas,monospace; margin:0; }
    .toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
    button { border:1px solid #2f7098; background:#123247; color:#dff2ff; padding:8px 14px; cursor:pointer; }
    button.active { outline:2px solid #61c2ff; }
    .layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
    .orders { display:grid; gap:12px; }
    .order { border:1px solid #275b74; background:#0b1922; padding:12px; }
    .order.alarm { border-color:#ff7a7a; } .order.warning { border-color:#f2c94c; }
    .title { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
    .code { color:#78a2b8; font-family:Consolas,monospace; font-size:12px; overflow-wrap:anywhere; }
    .badge { font-size:12px; padding:3px 8px; border:1px solid; white-space:nowrap; }
    .active { color:#68d095; border-color:#68d095; } .legacy { color:#ff7a7a; border-color:#ff7a7a; } .finished { color:#a9b7c0; border-color:#a9b7c0; }
    .timeline { margin-top:10px; display:grid; gap:8px; }
    .entry { border-left:3px solid #61c2ff; background:#0e1e2d; padding:8px 10px; }
    .entry.legacy { border-left-color:#ff7a7a; } .entry.finished { border-left-color:#a9b7c0; }
    .meta { color:#8fb3c7; font-size:13px; margin:6px 0 0; overflow-wrap:anywhere; }
    .dictionary { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
    .state { border:1px solid #275b74; background:#0b1922; padding:8px; } .state.legacy { border-color:#ff7a7a; }
    .mono { font-family:Consolas,monospace; overflow-wrap:anywhere; } pre { max-height:340px; overflow:auto; background:#071019; border:1px solid #275b74; padding:12px; }
    .note { color:#8fb3c7; font-size:13px; }
  </style>
</head>
<body>
<main>
  <header>
    <h1>驾驶舱事件关联工单九态演示</h1>
    <p class="endpoint">GET /api/cockpit/v1/equipments/{deviceCode}/work-orders</p>
    <p class="endpoint">GET /api/cockpit/v1/events/{eventSource}/{eventCode}/work-orders</p>
    <p class="endpoint">GET /api/cockpit/v1/work-orders/{workOrderCode}/timeline</p>
  </header>
  <section>
    <div class="toolbar">
      <button type="button" data-mode="all" class="active">九态总览</button>
      <button type="button" data-mode="multi">同设备多类型报警</button>
    </div>
    <div class="layout">
      <div>
        <h2>工单列表</h2>
        <div id="orders" class="orders"></div>
      </div>
      <div>
        <h2>状态字典</h2>
        <div id="dictionary" class="dictionary"></div>
      </div>
    </div>
  </section>
  <section>
    <h2>响应契约</h2>
    <p class="note">legacyState / legacyName 保留现网九态兼容编码；authoritativeState 是 ADR-0008 七态权威映射，旧 8/9 标记 deprecated，避免新功能依赖已废止状态。</p>
    <pre id="payload" class="mono"></pre>
  </section>
</main>
<script>
  const stateNames = ['待派单','待接单','已接单','处理中','待验收','已结案','已驳回','延期审核','已延期'];
  const authoritative = [
    {code:1,name:'待派单'}, {code:2,name:'待接单'}, {code:3,name:'已接单'}, {code:4,name:'处理中'},
    {code:5,name:'待验收'}, {code:6,name:'已结案'}, {code:7,name:'已取消'}, null, null
  ];
  const stateDictionary = stateNames.map((name, index) => ({
    legacyCode:index + 1, legacyName:name,
    authoritativeCode:authoritative[index]?.code ?? null, authoritativeName:authoritative[index]?.name ?? null,
    deprecated:index >= 6
  }));
  const summary = (code, state, source, eventCode, desc) => ({
    workOrderCode:code, deviceCode:'TC-PS-WS-202609020012', orderType:1, orderTypeName:'故障维修',
    orderLevel:2, orderDesc:desc,
    legacyState:state, legacyStateName:stateNames[state - 1],
    authoritativeState:authoritative[state - 1]?.code ?? null, authoritativeStateName:authoritative[state - 1]?.name ?? null,
    deprecatedState:state >= 7,
    createTime:'2026-09-02T09:00:00+08:00', updateTime:'2026-09-02T10:00:00+08:00',
    planFinishTime:'2026-09-03T09:00:00+08:00', realFinishTime:state === 6 ? '2026-09-02T10:00:00+08:00' : null,
    eventAssociation:{ eventSource:source, eventCode, associatedAt:'2026-09-02T10:00:00+08:00' }
  });
  const allOrders = stateNames.map((name, index) => summary('WO-202609020000' + (index + 1), index + 1, 'ALARM', 'ALM-20260902-00' + (index + 1), '演示第 ' + (index + 1) + ' 态'));
  const multiOrders = [
    summary('WO-2026090200101', 4, 'ALARM', 'ALM-WS_ENV_HIGH-001', '污水COD超标维修'),
    summary('WO-2026090200102', 5, 'ALARM', 'ALM-WS_ENV_PH-002', '污水pH越界维修')
  ];
  const timelines = {
    'WO-2026090200101': ['创建：待派单','派单：待接单','开始处置：处理中'],
    'WO-2026090200102': ['创建：待派单','派单：待接单','提交验收：待验收']
  };
  function renderOrder(order) {
    const timeline = timelines[order.workOrderCode] || ['创建：' + order.legacyStateName];
    return `<article class="order ${order.eventAssociation.eventSource === 'ALARM' ? 'alarm' : 'warning'}">
      <div class="title">
        <div><h3>${order.orderDesc}</h3><div class="code">${order.workOrderCode}</div></div>
        <span class="badge ${order.deprecatedState ? 'legacy' : order.legacyState === 6 ? 'finished' : 'active'}">${order.legacyState} ${order.legacyStateName}</span>
      </div>
      <p class="meta">权威状态：${order.authoritativeState ?? '已废止'} ${order.authoritativeStateName ?? ''}<br />事件：${order.eventAssociation.eventSource} ${order.eventAssociation.eventCode}</p>
      <div class="timeline">${timeline.map(item => `<div class="entry ${order.deprecatedState ? 'legacy' : order.legacyState === 6 ? 'finished' : ''}">${item}</div>`).join('')}</div>
    </article>`;
  }
  function render(mode) {
    document.querySelectorAll('button[data-mode]').forEach(button => button.classList.toggle('active', button.dataset.mode === mode));
    const orders = mode === 'all' ? allOrders : multiOrders;
    document.getElementById('orders').innerHTML = orders.map(renderOrder).join('');
    document.getElementById('dictionary').innerHTML = stateDictionary.map(state => `
      <div class="state ${state.deprecated ? 'legacy' : ''}"><strong>${state.legacyCode} ${state.legacyName}</strong>
        <p class="meta">${state.authoritativeCode ? '权威：' + state.authoritativeCode + ' ' + state.authoritativeName : '已废止'}</p>
      </div>`).join('');
    document.getElementById('payload').textContent = JSON.stringify({
      code:200, msg:'操作成功', data:{
        requestId:'work-order-demo', apiVersion:'v1', readOnly:true,
        deviceCode:'TC-PS-WS-202609020012', eventSource:mode === 'all' ? null : 'ALARM',
        eventCode:mode === 'all' ? null : 'WS_ENV_MULTI', state:'READY', stateReason:'READY',
        stateDictionary, workOrders:orders
      }
    }, null, 2);
  }
  document.querySelectorAll('button[data-mode]').forEach(button => button.addEventListener('click', () => render(button.dataset.mode)));
  render('all');
</script>
</body>
</html>