SmartPDCode/f407/tools/web/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SmartPDU</title>
    <link rel="stylesheet" href="CSS/index.css">
    <script src="JS/index.js"></script>
    <script src="JS/data.js"></script>
    <script src="JS/ws.js"></script>
    <script src="JS/display_data.js"></script>
    <script src="JS/operation.js"></script>
    <script src="JS/channel_display.js"></script>
    <script src="JS/pagination.js"></script>
    <script src="JS/Threshold_Adjust.js"></script>
    <script src="JS/system_alarm.js"></script>
    <script src="JS/data_process.js"></script>
</head>
<body>
    <div class="container">
        <div class="labels">
            <button class="label-button" onclick="showPage('page1')",id="button1">首页</button>
            <button class="label-button" onclick="showPage('page2')",id="button2">总体状态监控</button>
            <button class="label-button" onclick="showPage('page3')",id="button3">通道状态监控</button>
            <button class="label-button" onclick="showPage('page4')",id="button4">系统报警</button>
            <button class="label-button" onclick="showPage('page5')",id="button5">阈值管理</button>
        </div>
        <div class="content">
            <div id="page1" class="page active">
                <h1 style="text-align: center;">首页</h1>
            </div>
            <div id="page2" class="page active">
                <h2 id="Total">总体状态监控</h2>
                <div id="total_Voltage">
                    <div id="Voltage_label">
                        总电压
                    </div>
                    <div id="Voltage">
                        <div id="L1">
                            <nav>L1：</nav>
                            <nav id="L1_voltage"  style="margin-top: 2%;"></nav>
                            <nav style="margin-top: 2%;">&nbsp;V</nav>
                        </div>
                        <div id="L2">
                            <nav>L2：</nav>
                            <nav id="L2_voltage"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;V</nav>
                        </div>
                        <div id="L3">
                            <nav>L3：</nav>
                            <nav id="L3_voltage"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;V</nav>
                        </div>
                    </div>
                </div>
                <div id="total_Current">
                    <div id="Voltage_label">
                        总电流
                    </div>
                    <div id="Current">
                        <div id="L1">
                            <nav>L1：</nav>
                            <nav id="L1_current"  style="margin-top: 2%;"></nav>
                            <nav style="margin-top: 2%;">&nbsp;A</nav>
                        </div>
                        <div id="L2">
                            <nav>L2：</nav>
                            <nav id="L2_current"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;A</nav>
                        </div>
                        <div id="L3">
                            <nav>L3：</nav>
                            <nav id="L3_current"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;A</nav>
                        </div>
                    </div>
                </div>
                <div id="total_Power">
                    <div id="Voltage_label">
                        总功率
                    </div>
                    <div id="Power">
                        <div id="L1">
                            <nav>L1：</nav>
                            <nav id="L1_power"  style="margin-top: 2%;"></nav>
                            <nav style="margin-top: 2%;">&nbsp;KW</nav>
                        </div>
                        <div id="L2">
                            <nav>L2：</nav>
                            <nav id="L2_power"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;KW</nav>
                        </div>
                        <div id="L3">
                            <nav>L3：</nav>
                            <nav id="L3_power"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;KW</nav>
                        </div>
                    </div>
                </div>
                <div id="total_power_consumption">
                    <div id="Voltage_label">
                        总耗电量
                    </div>
                    <div id="power_consumption">
                        <div id="L1">
                            <nav>L1：</nav>
                            <nav id="L1_power_consumption"  style="margin-top: 2%;"></nav>
                            <nav style="margin-top: 2%;">&nbsp;KWh</nav>
                        </div>
                        <div id="L2">
                            <nav>L2：</nav>
                            <nav id="L2_power_consumption"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;KWh</nav>
                        </div>
                        <div id="L3">
                            <nav>L3：</nav>
                            <nav id="L3_power_consumption"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;KWh</nav>
                        </div>
                    </div>
                </div>
                <div id="total_freq">
                    <div id="Voltage_label">
                        频率
                    </div>
                    <div id="power_consumption">
                        <div id="L1">
                            <nav>L1：</nav>
                            <nav id="L1_freq"  style="margin-top: 2%;"></nav>
                            <nav style="margin-top: 2%;">&nbsp;HZ</nav>
                        </div>
                        <div id="L2">
                            <nav>L2：</nav>
                            <nav id="L2_freq"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;HZ</nav>
                        </div>
                        <div id="L3">
                            <nav>L3：</nav>
                            <nav id="L3_freq"  style="margin-top: 2%;"></nav>
                            <nav  style="margin-top: 2%;">&nbsp;HZ</nav>
                        </div>
                    </div>
                </div>
                <div id="Operation">
                    <button id="all_open" onclick="all_open()">总开</button>
                    <button id="all_close" onclick="all_close()">总关</button>
                </div>
            </div>
            <div id="page3" class="page">
                <div id="page2_header">
                    <div id="page2_title">
                        <h1 style="text-align: center;">通道状态监控</h1>
                    </div>
                    <div id="page2_button">
                        <button id="all_open" onclick="all_open()">总开</button>
                        <button id="all_close" onclick="all_close()">总关</button>
                    </div>
                </div>
                <div id="page2_table">
                    <table id="page2_table">
                        <thead>
                            <tr>
                                <th>设备名称</th>
                                <th>通道名称</th>
                                <th>通道号</th>
                                <th>相序</th>
                                <th>电压(V)</th>
                                <th>电流(A)</th>
                                <th>功率(W)</th>
                                <th>频率(HZ)</th>
                                <th>耗电量(kWh)</th>
                                <th>功率因数</th>
                                <th>开启延时(s)</th>
                                <th>关闭延时(s)</th>
                                <th>状态</th>
                                <th>操作</th>
                                <th>输出类型</th>             
                            </tr>
                        </thead>
                        <tbody id="tbody">
                            
                        </tbody>
                    </table>
                </div>
                <div id="page2_pagination">

                </div>
            </div>

            <div id="page4" class="page">
                <h2>系统告警</h2>
                <div id="page2_table" style="float:left;margin-left: 10%;">
                    <table>
                        <thead id="thead">
                            <tr>
                                <th>序号</th>
                                <th>告警通道</th>
                                <th>时间</th>
                                <th>告警内容</th>         
                            </tr>
                        </thead>
                        <tbody id="system_alarm">
                        </tbody>
                    </table>
                </div>
                <div id="page3_pagination">

                </div>
            </div>
            <div id="page5" class="page">
                <h2>阈值管理</h2>
                <div id="page2_table">
                    <table>
                        <thead>
                            <tr>
                                <th>电源类型</th>
                                <th>名称</th>
                                <th>编号</th>
                                <th>电流上限值(A)</th>
                                <th>电压上限值(V)</th> 
                                <th>电压下限值(V)</th>  
                                <th>功率上限值(P)</th>
                                <th>耗电量上限值(kWh)</th>   
                                <th style="width: 5%;">管理</th>       
                            </tr>
                        </thead>
                        <tbody id="threshold_mannage">

                        </tbody>
                    </table>
                </div>
                <div id="page2_pagination">

                </div>
                <div id="editModal" class="modal">
                    <div class="modal-content">
                      <h2>阈值修改</h2>
                      <form id="editForm">
                        <label for="editId">电流上限值(A)</label>
                        <input type="text" id="current_upper">
                        <br>
                        <label for="editName">电压上限值(V)</label>
                        <input type="text" id="voltage_upper">
                        <br>
                        <label for="editId">电压下限值(V)</label>
                        <input type="text" id="voltage_lower">
                        <br>
                        <label for="editName">功率上限值(P)</label>
                        <input type="text" id="p_upper">
                        <br>
                        <label for="editName">耗电量上限值(kWh)</label>
                        <input type="text" id="c_upper">
                        <br>
                        <label for="mySelect">请选择阈值使能:</label>
                        <select id="mySelect" onchange="handleSelectChange()">
                            <option value="option1">仅报警</option>
                            <option value="option2">待选1</option>
                            <option value="option3">待选2</option>
                        </select>
                        <br>
                        <button type="button" id="updateRow">确定</button>
                        <button type="button" id="closeModal">取消</button>
                      </form>
                    </div>
                  </div>
            </div>
        </div>
    </div>
</body>
</html>