shaoy
/
pipe-ner-server


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cockpit Device Boundary Demo</title>
  <style>
    body { margin:0; min-height:100vh; background:#0b1622; color:#e8f1f8; font:15px/1.5 "Microsoft YaHei",sans-serif; }
    main { width:min(1180px,calc(100vw - 32px)); margin:32px auto; background:#102030; border:1px solid #21465f; padding:24px; }
    h1 { margin:0 0 6px; font-size:22px; } .endpoint { color:#78a2b8; font-family:Consolas,monospace; margin:0 0 18px; }
    .summary { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:18px; }
    .card { padding:12px; border:1px solid #2a5a75; background:#0d1922; }
    .card strong { display:block; font-size:22px; } .card span { color:#8fb3c7; }
    table { width:100%; border-collapse:collapse; margin-top:16px; } th,td { border:1px solid #2a5a75; padding:8px; text-align:left; }
    th { background:#123247; } .facility td:first-child { color:#61d095; } .device td:first-child { color:#78a2b8; }
    .unknown { color:#f0ad4e; } code { color:#c9e7f7; }
  </style>
</head>
<body>
<main>
  <h1>驾驶舱设备身份与领域边界演示</h1>
  <p class="endpoint">GET /api/cockpit/v1/device-boundary</p>
  <section class="summary">
    <div class="card"><strong id="facility-count"></strong><span>设施</span></div>
    <div class="card"><strong id="device-count"></strong><span>智能设备</span></div>
    <div class="card"><strong id="formal-device-count"></strong><span>正式范围设备</span></div>
    <div class="card"><strong id="unknown-count"></strong><span>未知类型</span></div>
    <div class="card"><strong id="mismatch-count"></strong><span>类型边界冲突</span></div>
  </section>
  <table>
    <thead><tr><th>编码</th><th>名称</th><th>类型</th><th>行业</th><th>排水范围</th><th>对象</th><th>正式范围</th></tr></thead>
    <tbody id="objects"></tbody>
  </table>
</main>
<script>
const payload = {
  requestId:'demo-device-boundary',apiVersion:'v1',readOnly:true,
  typeScope:{formalIndustries:['GAS','WATER_SUPPLY','DRAINAGE'],drainageScopes:['RAINWATER','SEWAGE'],objectKinds:['FACILITY','SMART_DEVICE']},
  facilities:[
    {facilityCode:'F-WATER-001',facilityName:'第一水厂',facilityType:{code:'WATER_PLANT',name:'水厂'},industry:'WATER_SUPPLY',objectKind:'FACILITY',formalScope:true},
    {facilityCode:'F-PUMP-001',facilityName:'城北泵站',facilityType:{code:'PUMP_STATION',name:'泵站'},industry:'WATER_SUPPLY',objectKind:'FACILITY',formalScope:true},
    {facilityCode:'F-PIPE-001',facilityName:'供水主线',facilityType:{code:'PIPELINE',name:'供水管线'},industry:'WATER_SUPPLY',objectKind:'FACILITY',formalScope:true}
  ],
  devices:[
    {deviceCode:'EQ-GAS-001',deviceName:'燃气浓度计-001',deviceType:{code:'GAS_SENSOR',name:'燃气浓度计'},industry:'GAS',objectKind:'SMART_DEVICE',formalScope:true,typeResolution:'RESOLVED'},
    {deviceCode:'EQ-WS-001',deviceName:'供水压力计-001',deviceType:{code:'WATER_SUPPLY_SENSOR',name:'供水压力计'},industry:'WATER_SUPPLY',objectKind:'SMART_DEVICE',formalScope:true,typeResolution:'RESOLVED'},
    {deviceCode:'EQ-RAIN-001',deviceName:'雨水流量计-001',deviceType:{code:'RAINWATER_SENSOR',name:'雨水流量计'},industry:'DRAINAGE',drainageScope:'RAINWATER',objectKind:'SMART_DEVICE',formalScope:true,typeResolution:'RESOLVED'},
    {deviceCode:'EQ-SEW-001',deviceName:'污水环境监测仪-001',deviceType:{code:'SEWAGE_ENVIRONMENT_SENSOR',name:'污水环境监测仪'},industry:'DRAINAGE',drainageScope:'SEWAGE',objectKind:'SMART_DEVICE',formalScope:true,typeResolution:'RESOLVED'},
    {deviceCode:'EQ-MH-001',deviceName:'智能井盖-001',deviceType:{code:'SMART_MANHOLE',name:'智能井盖'},objectKind:'SMART_DEVICE',formalScope:false,typeResolution:'RESOLVED'},
    {deviceCode:'EQ-UNKNOWN-001',deviceName:'未知类型设备-001',deviceType:{code:'LEGACY_UNKNOWN_TYPE'},objectKind:'SMART_DEVICE',formalScope:false,typeResolution:'UNKNOWN_TYPE'}
  ],
  statistics:{facilityCount:3,smartDeviceCount:6,formalSmartDeviceCount:4,unknownTypeCount:1,typeKindMismatchCount:0}
};
function row(item,isFacility){
  return `<tr class="${isFacility?'facility':'device'} ${item.typeResolution==='UNKNOWN_TYPE'?'unknown':''}"><td><code>${item.facilityCode||item.deviceCode}</code></td><td>${item.facilityName||item.deviceName}</td><td>${(item.facilityType||item.deviceType||{}).name||'未知类型'}</td><td>${item.industry||'—'}</td><td>${item.drainageScope||'—'}</td><td>${item.objectKind}</td><td>${item.formalScope?'是':'否'}</td></tr>`;
}
document.getElementById('objects').innerHTML = payload.facilities.map(x=>row(x,true)).concat(payload.devices.map(x=>row(x,false))).join('');
const stats=payload.statistics;
facilityCount.textContent=stats.facilityCount;deviceCount.textContent=stats.smartDeviceCount;formalDeviceCount.textContent=stats.formalSmartDeviceCount;unknownCount.textContent=stats.unknownTypeCount;mismatchCount.textContent=stats.typeKindMismatchCount;
</script>
</body>
</html>