H100PowerManger/bin/templates/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电源管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="/static/style.css">
</head>

<body>
    <div class="db-status-panel">
        <div class="status-columns">
            <div class="status-column">
                <h3>MOOSDB</h3>
                <div class="db-status" id="moos-db-status">
                    <i class="fas fa-database"></i>
                    <span>正在连接MOOSDB...</span>
                </div>
                <div class="moos-notify-panel">
                    <div class="input-group">
                        <label for="moos-var">Var:</label>
                        <input type="text" id="moos-var" placeholder="输入Var值">
                    </div>
                    <div class="input-group">
                        <label for="moos-key">Key:</label>
                        <input type="text" id="moos-key" placeholder="输入Key值">
                    </div>
                    <button id="moos-send-btn">发送</button>
                </div>
            </div>
            <div class="status-column">
                <h3>本地数据库</h3>
                <div class="db-status" id="db-status">
                    <i class="fas fa-database"></i>
                    <span>正在连接数据库：</span>
                </div>
                <div class="db-size" id="db-size">
                    <i class="fas fa-database"></i>
                    <span>本地数据库大小：</span>
                    <span class="size-value">0.00 MB</span>
                </div>
                <div class="db-download">
                    <button id="download-db">
                        <i class="fas fa-download"></i>
                        下载数据库
                    </button>
                    <progress id="download-progress" value="0" max="100" style="display: none;"></progress>
                </div>
            </div>
        </div>
    </div>

    <div class="control-panel">
        <button id="mode-switch">
            <i class="fas fa-exchange-alt"></i>
            系统模式切换
        </button>
        <button id="condition-switch">
            <i class="fas fa-cogs"></i>
            系统工况切换
        </button>
        <button id="system-reset">
            <i class="fas fa-redo"></i>
            系统复位操作
        </button>
    </div>

    <div class="panel log-panel">
        <h2>进程消息 <span class="badge" id="process-count">0</span></h2>
        <div id="process-list" class="process-container"></div>
        <pre id="log-data" class="process-log">
            <template id="process-template">
                <div class="process-entry">
                    <div class="process-name"></div>
                    <div class="message-list">
                        <div class="message-type">订阅的消息</div>
                        <ul class="subscribed-list"></ul>
                        <div class="message-type">发布的消息</div>
                        <ul class="published-list"></ul>
                    </div>
                </div>
            </template>
        </pre>
    </div>

    <div class="panel state-machine-panel">
        <h2>状态机状态</h2>
        <div class="state-info">
            <div class="state-row">
                <span class="state-label"><i class="fas fa-clock"></i> 更新时间：</span>
                <span class="state-value" id="state-time">正在加载...</span>
            </div>
            <div class="state-row">
                <span class="state-label"><i class="fas fa-hashtag"></i> 状态ID:</span>
                <span class="state-value" id="state-id">正在加载...</span>
            </div>
            <div class="state-row">
                <span class="state-label"><i class="fas fa-tag"></i> 状态名称：</span>
                <span class="state-value" id="state-name">正在加载...</span>
            </div>
            <div class="state-row">
                <span class="state-label"><i class="fas fa-bolt"></i> 事件：</span>
                <span class="state-value" id="state-event">正在加载...</span>
            </div>
            <div class="state-row">
                <span class="state-label"><i class="fas fa-barcode"></i> 事件ID:</span>
                <span class="state-value" id="state-event-id">正在加载...</span>
            </div>
            <div class="state-row">
                <span class="state-label"><i class="fas fa-exclamation-triangle"></i> 故障代码：</span>
                <span class="state-value" id="state-fault-code">正在加载...</span>
            </div>
            <div class="state-row">
                <span class="state-label"><i class="fas fa-sticky-note"></i> 备注：</span>
                <span class="state-value" id="state-note">正在加载...</span>
            </div>
        </div>
    </div>
    
    <div class="panel dis-sys-panel">
        <h2>DIS系统状态</h2>
        <pre id="dis-sys-state">正在加载...</pre>
    </div>

    <div class="panel ccu-state-panel">
        <h2>CCU状态</h2>
        <pre id="ccu-state">正在加载...</pre>
    </div>

    <!-- 消息详情弹窗 -->
    <div class="message-detail-overlay" id="message-detail-overlay" style="display: none;"></div>
    <div class="message-detail-modal" id="message-detail-modal" style="display: none;">
        <div class="message-detail-header">
            <div class="message-detail-title">消息详情</div>
            <div class="message-detail-close" id="message-detail-close">&times;</div>
        </div>
        <div class="message-detail-content">
            <div class="message-detail-item">
                <div class="message-detail-label">消息名称</div>
                <div class="message-detail-value" id="message-name"></div>
            </div>
            <div class="message-detail-item">
                <div class="message-detail-label">消息类型</div>
                <div class="message-detail-value" id="message-type"></div>
            </div>
            <div class="message-detail-item">
                <div class="message-detail-label">消息内容</div>
                <div class="message-detail-value" id="message-content"></div>
            </div>
            <div class="message-detail-item">
                <div class="message-detail-label">时间戳</div>
                <div class="message-detail-value" id="message-timestamp"></div>
            </div>
            <div class="message-detail-item">
                <div class="message-detail-label">来源</div>
                <div class="message-detail-value" id="message-source"></div>
            </div>
        </div>
    </div>

    <script src="/static/script.js"></script>
</body>

</html>