| | |
| | | padding: 4px 8px; border-radius: 4px; background: #161b22; |
| | | font-size: 12px; |
| | | } |
| | | .detail-panel .field .fid { color: #58a6ff; font-weight: 600; min-width: 18px; } |
| | | .detail-panel .field .fname { color: #8b949e; flex: 1; margin: 0 8px; } |
| | | .detail-panel .field .fval { color: #f0f6fc; font-family: 'Consolas', monospace; } |
| | | .detail-panel .field .funit { color: #484f58; margin-left: 4px; font-size: 11px; } |
| | | .detail-panel .raw-frame { |
| | | grid-column: 1 / -1; margin-top: 8px; padding: 8px 12px; |
| | | background: #0d1117; border: 1px solid #30363d; border-radius: 4px; |
| | | font-family: 'Consolas', monospace; font-size: 13px; color: #d2a8ff; |
| | | word-break: break-all; max-height: 100px; overflow-y: auto; |
| | | } |
| | | |
| | | .clickable { cursor: pointer; user-select: none; } |
| | | .clickable td:first-child { color: #58a6ff; } |
| | |
| | | <div class="header"> |
| | | <div> |
| | | <h1>JMS GC-110N 联机服务监控</h1> |
| | | <div class="info">协议 Ver.3.0 · K 格式状态轮询</div> |
| | | <div class="info">TCP 长连接 · 定时轮询</div> |
| | | </div> |
| | | <div class="info"> |
| | | <span class="dot live"></span> |
| | |
| | | <div class="detail-panel"> |
| | | ${fields.length === 0 ? '<div style="color:#484f58;grid-column:1/-1;">暂无解析数据</div>' : |
| | | fields.map(f => `<div class="field"> |
| | | <span class="fid">${f.id}</span> |
| | | <span class="fname">${f.name||''}</span> |
| | | <span class="fval">${f.displayValue||f.value||'(空)'}</span> |
| | | <span class="funit">${f.unit||''}</span> |
| | | </div>`).join('')} |
| | | ${dev.rawFrame ? `<div class="raw-frame">${dev.rawFrame}</div>` : ''} |
| | | </div> |
| | | </div> |
| | | </td> |
| | | </tr>`; |
| | | } |