shaoy
/
pipe-ner-server


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Cockpit Equipment Archive Demo</title>
  <style>
    body { margin:0; min-height:100vh; background:#08131f; color:#e8f1f8; font:15px/1.5 "Microsoft YaHei",sans-serif; }
    main { width:min(1180px,calc(100vw - 32px)); margin:28px auto; display:grid; gap:16px; }
    header, section { background:#0e1e2d; border:1px solid #21465f; padding:20px; }
    h1,h2 { margin:0 0 10px; } h1 { font-size:22px; } h2 { font-size:17px; }
    .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) 340px; gap:18px; align-items:start; }
    table { width:100%; border-collapse:collapse; }
    th,td { border:1px solid #275b74; padding:8px; text-align:left; vertical-align:top; }
    th { background:#123247; width:180px; }
    td.mono { font-family:Consolas,monospace; }
    .image-panel, .missing { background:#0b1922; border:1px solid #275b74; padding:12px; }
    img { display:block; width:100%; height:180px; object-fit:cover; border:1px solid #2f7098; background:#071019; }
    .image-meta { margin:10px 0 0; color:#8fb3c7; font-size:13px; overflow-wrap:anywhere; }
    .missing { display:grid; place-items:center; min-height:180px; color:#a9b7c0; text-align:center; }
    .note { color:#8fb3c7; font-size:13px; }
    pre { max-height:300px; overflow:auto; background:#071019; border:1px solid #275b74; padding:12px; }
  </style>
</head>
<body>
<main>
  <header>
    <h1>驾驶舱设备基础档案演示</h1>
    <p class="endpoint">GET /api/cockpit/v1/equipments/{deviceCode}/archive</p>
  </header>
  <section>
    <div class="toolbar">
      <button type="button" data-mode="full" class="active">完整档案</button>
      <button type="button" data-mode="partial">部分档案</button>
      <button type="button" data-mode="noImage">无图片</button>
      <button type="button" data-mode="loadFailure">加载失败</button>
    </div>
    <div id="detail">
      <div class="layout">
        <div><h2>基础档案</h2><table><tbody id="archive"></tbody></table></div>
        <div><h2>最新图片</h2><div id="image"></div></div>
      </div>
    </div>
    <div id="error" hidden>
      <h2 id="error-title"></h2>
      <pre id="error-payload"></pre>
    </div>
  </section>
  <section>
    <h2>响应契约</h2>
    <p class="note">坐标字段以 WGS84 发布；缺失档案字段显示“未提供”，无图片返回 latestImage 空值，加载失败使用 typed error。</p>
    <pre id="payload"></pre>
  </section>
</main>
<script>
  var fields = [
    ['deviceCode','设备编码'],['deviceName','设备名称'],['deviceModel','设备型号'],['deviceSpec','设备规格参数'],
    ['manufacturer','设备制造商'],['productionDate','设备生产日期'],['deviceType','设备类别'],['deviceTypeName','类别名称'],
    ['assetValue','设备资产价值（元）'],['expectedServiceYears','预计使用年限（年）'],
    ['longitude','经度'],['latitude','纬度'],['coordinateSystem','坐标系'],
    ['equipmentLocation','设备位置描述'],['installTime','安装时间'],
    ['maintainer','设备维护人员'],['maintainerPhone','联系方式'],
    ['ownershipUnit','权属单位'],['remark','备注信息']
  ];
  var image = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180"><rect width="100%" height="100%" fill="#123247"/><text x="50%" y="50%" fill="#dff2ff" text-anchor="middle" font-family="sans-serif">设备现场图</text></svg>';
  var responses = {
    full: response('TC-PS-YS-202609020012', {
      deviceName:'污水管网环境监测设备', deviceModel:'WS-PRO-2000',
      deviceSpec:'悬浮物/COD/氨氮/电导率/PH', manufacturer:'沅陵专用仪表厂',
      productionDate:'2025-12-01', deviceType:'ws_sewage_environment', deviceTypeName:'污水环境监测设备',
      assetValue:128000, expectedServiceYears:10, longitude:110.141, latitude:28.452, coordinateSystem:'WGS84',
      equipmentLocation:'沅陵县太常片区污水干管检查井', installTime:'2026-01-10 09:30:00',
      maintainer:'张维护', maintainerPhone:'13800000000', ownershipUnit:'沅陵县排水管理所',
      remark:'监测点首选查看设备',
      latestImage:{ url:image, capturedAt:'2026-08-30T10:20:00+08:00' }
    }),
    partial: response('TC-GS-202609020015', {
      deviceName:'燃气压力监测设备', deviceModel:null, deviceSpec:'压力',
      manufacturer:'沅陵专用仪表厂', productionDate:'2025-11-10', deviceType:'gs_pressure', deviceTypeName:'燃气压力设备',
      assetValue:null, expectedServiceYears:8, longitude:110.151, latitude:28.462, coordinateSystem:'WGS84',
      equipmentLocation:'沅陵县太常片区燃气中压管线', installTime:'2026-02-01 14:00:00',
      maintainer:null, maintainerPhone:null, ownershipUnit:'沅陵县燃气公司', remark:null,
      latestImage:{ url:image, capturedAt:'2026-08-29T16:40:00+08:00' }
    }),
    noImage: response('TC-PS-WS-202609020016', {
      deviceName:'泵站液位监测设备', deviceModel:'LEVEL-300', deviceSpec:'液位/温度',
      manufacturer:'沅陵专用仪表厂', productionDate:'2025-10-01', deviceType:'ps_level', deviceTypeName:'泵站液位设备',
      assetValue:66000, expectedServiceYears:10, longitude:110.161, latitude:28.472, coordinateSystem:'WGS84',
      equipmentLocation:'沅陵县太常片区泵站', installTime:'2026-03-01 08:00:00',
      maintainer:'李巡检', maintainerPhone:'13900000000', ownershipUnit:'沅陵县排水管理所', remark:'演示无图片状态',
      latestImage:null
    }),
    loadFailure: {
      code:500, msg:'驾驶舱设备档案数据暂不可用',
      data:{ category:'SERVER_ERROR', message:'驾驶舱设备档案数据暂不可用', requestId:'equipment-archive-demo-500', serverTime:'2026-09-02T10:00:00+08:00' }
    }
  };
  function response(code, archive) {
    return { code:200, msg:'操作成功', data:Object.assign({
      requestId:'equipment-archive-demo-' + code, apiVersion:'v1', readOnly:true
    }, archive) };
  }
  function render(mode) {
    document.querySelectorAll('button[data-mode]').forEach(function(button) {
      button.classList.toggle('active', button.dataset.mode === mode);
    });
    var payload = responses[mode];
    var success = payload.code === 200;
    document.getElementById('detail').hidden = !success;
    document.getElementById('error').hidden = success;
    if (success) {
      var data = payload.data;
      document.getElementById('archive').innerHTML = fields.map(function(field) {
        var value = data[field[0]];
        return '<tr><th>' + field[1] + '</th><td class="mono">' + (value === null || value === undefined ? '<span class="note">未提供</span>' : value) + '</td></tr>';
      }).join('');
      var latest = data.latestImage;
      document.getElementById('image').innerHTML = latest
        ? '<div class="image-panel"><img alt="设备最新图片" src="' + latest.url + '" /><p class="image-meta">' + latest.capturedAt + '<br />' + latest.url + '</p></div>'
        : '<div class="missing">无设备图片</div>';
    } else {
      document.getElementById('error-title').textContent = 'HTTP ' + payload.code + '：' + payload.msg;
      document.getElementById('error-payload').textContent = JSON.stringify(payload, null, 2);
    }
    document.getElementById('payload').textContent = JSON.stringify(payload, null, 2);
  }
  document.querySelectorAll('button[data-mode]').forEach(function(button) {
    button.addEventListener('click', function() { render(button.dataset.mode); });
  });
  render('full');
</script>
</body>
</html>