浏览代码

添加万鸿的web

guohui 1 年之前
父节点
当前提交
e5a55ca40e

+ 384 - 0
f407/tools/web/CSS/index.css

@@ -0,0 +1,384 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+}
+
+.labels {
+    width: 17%;
+    border-right: 1px solid #ccc;
+    padding: 20px;
+}
+
+.label-button {
+    display: block;
+    width: 50%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font-size: 20px;
+    margin-top: 5%;
+    background:none;
+}
+
+.label-button:hover {
+    background-color: #ddd;
+}
+
+.content {
+    width: 80%;
+    padding: 20px;
+}
+
+.page {
+    display: none;
+    width: 100%;
+    height: 95%;
+}
+#page1
+{
+    background-color:bisque;
+    overflow-y: auto;
+}
+#page2
+{
+    background-color:bisque;
+    overflow-y: auto;
+}
+#page2_header
+{
+    height: 8%;
+}
+#page2_title
+{
+    width: 30%;
+    height: 100%;
+    float: left;
+    margin-left: 30%;
+}
+#page2_button
+{
+    width: 30%;
+    height: 100%;
+    float: left;
+    margin-left: 10%;
+}
+#page2_button button
+{
+    width: 40%;
+    height: 80%;
+    font-size: 40px;
+    margin-top: 2%;
+}
+
+#page2_pagination
+{
+    width: 40%;
+    height: 5%;
+    float: left;
+    margin-left: 40%;
+}
+#page3_pagination
+{
+    width: 40%;
+    height: 5%;
+    float: left;
+    margin-left: 40%;
+}
+#page3
+{
+    background-color:bisque;
+}
+#page4
+{
+    background-color:bisque;
+}
+.page.active {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #ccc;
+    background-color:bisque;
+}
+.page.active h2
+{
+    font-size: 30px;
+    margin-left: 45%;
+}
+#total_Voltage 
+{
+    width: 30%;
+    height: 25%;
+    float: left;
+    margin-left: 15%;
+    margin-top: 2%;
+    border: 1px solid #ccc;
+}
+#total_Voltage td
+{
+    width: 100px;
+    height: 50px;
+    margin-left: 10%;
+}
+#total_Current
+{
+    width: 30%;
+    height: 25%;
+    float: left;
+    margin-left: 15%;
+    margin-top: 2%;
+    border: 1px solid #ccc;
+}
+#total_Power
+{
+    width: 30%;
+    height: 25%;
+    float: left;
+    margin-left: 15%;
+    margin-top: 2%;
+    border: 1px solid #ccc;
+}
+#total_power_consumption
+{
+    width: 30%;
+    height: 25%;
+    float: left;
+    margin-left: 15%;
+    margin-top: 2%;
+    border: 1px solid #ccc;
+}
+#total_freq
+{
+    width: 30%;
+    height: 25%;
+    float: left;
+    margin-left: 15%;
+    margin-top: 2%;
+    border: 1px solid #ccc;
+}
+#Operation
+{
+    width: 30%;
+    height: 15%;
+    float: left;
+    margin-left: 15%;
+    margin-top: 2%;
+    border: 1px solid #ccc;
+}
+#Operation button
+{
+    width: 30%;
+    height: 50%;
+    font-size: 40px;
+    margin-top: 2%;
+    float: left;
+    margin-left: 10%;
+    margin-top: 10%;
+}
+#Voltage_label
+{
+    font-size: 30px;
+    margin-left: 30%;
+    margin-top: 5%;
+}
+td
+{
+    width: 200px;
+    font-size: 30px;
+    text-align: center;
+    border: 1px solid #ccc;
+}
+th
+{
+    width: 200px;
+    font-size: 30px;
+    text-align: center;
+    border: 1px solid #ccc;
+}
+#Voltage
+{
+    font-size: 30px;
+    text-align: center;
+    float: left;
+    margin-left: 20%;
+    margin-top: 1%;
+}
+#Voltage nav
+{
+    float: left;
+    font-size: 30px;
+}
+#L1
+{
+    width: 300px;
+    height: 50px;
+    float: left;
+}
+#L2
+{
+    width: 300px;
+    height: 50px;
+    float: left;
+}
+#L3
+{
+    width: 300px;
+    height: 50px;
+    float: left;
+    margin-top: 1%;
+}
+#V
+{
+    font-size: 40px;
+    text-align: center;
+    float: left;
+    margin-top: 8%;
+    margin-left: 1%;
+}
+#Current
+{
+    font-size: 30px;
+    text-align: center;
+    float: left;
+    margin-left: 28%;
+    margin-top: 1%;
+}
+#Current nav
+{
+    float: left;
+    font-size: 30px;
+}
+#Power
+{
+    font-size: 30px;
+    text-align: center;
+    float: left;
+    margin-left: 20%;
+    margin-top: 1%;
+}
+#Power nav
+{
+    float: left;
+    font-size: 30px;
+}
+#power_consumption
+{
+    font-size: 30px;
+    text-align: center;
+    float: left;
+    margin-left: 25%;
+    margin-top: 1%;
+}
+#power_consumption nav
+{
+    float: left;
+    font-size: 30px;
+}
+#freq
+{
+    font-size: 30px;
+    text-align: center;
+    float: left;
+    margin-left: 20%;
+    margin-top: 1%;
+}
+#freq nav
+{
+    float: left;
+    font-size: 30px;
+}
+td
+{
+    font-size: 20px;
+}
+td button
+{
+    width: 80px;
+    height: 50px;
+    font-size: 20px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+}
+th
+{
+    font-size: 20px;
+}
+#page3 table
+{
+    margin-left: 2%;
+}
+#page3 tbody
+{
+ width: 100%;
+ height: 100%;   
+}
+#page3 td
+{
+    width: 300px;
+    height:50px;
+}
+#page4 table
+{
+    margin-left: 1%;
+}
+#tbody button
+{
+    width: 100%;
+    height: 120%;
+}
+#tbody button
+{
+    width: 100%;
+    height: 120%;
+}
+.modal {
+    display: none;
+    position: fixed; 
+    z-index: 1; 
+    left: 0;
+    top: 0;
+    width: 100%; 
+    height: 100%; 
+    overflow: auto; 
+    background-color: rgb(0,0,0); 
+    background-color: rgba(0,0,0,0.4); 
+    padding-top: 60px;
+  }
+  
+  .modal-content {
+    background-color: #fefefe;
+    margin: 5% auto; 
+    margin-left: 40%;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 30%; 
+  }
+  
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }

+ 49 - 0
f407/tools/web/JS/Threshold_Adjust.js

@@ -0,0 +1,49 @@
+function editRow(orgin_data,threshold,index,channel_power_infro) {
+    const current_upper = document.getElementById('current_upper');
+    const voltage_upper = document.getElementById('voltage_upper');
+    const voltage_lower = document.getElementById('voltage_lower');
+    const p_upper = document.getElementById('p_upper');
+    const c_upper = document.getElementById('c_upper');
+    const updateRow = document.getElementById('updateRow')
+    const closeModal = document.getElementById('closeModal')
+ 
+    current_upper.value = threshold.c_upper.act_para[index];
+    voltage_upper.value = threshold.v_upper.act_para[index];
+    voltage_lower.value = threshold.v_lower.act_para[index];
+    if(voltage_upper.value < voltage_lower.value){
+        alert("电压上限值不能小于电压下限值")
+        voltage_lower.value = 0
+    }
+    p_upper.value = threshold.p_upper.act_para[index];
+    c_upper.value = threshold.w_upper.act_para[index];
+    
+    document.getElementById('editModal').style.display = 'block';
+    updateRow.addEventListener('click',function(){
+        const current_uppers = document.getElementById('current_upper').value;
+        const voltage_uppers = document.getElementById('voltage_upper').value;
+        const voltage_lowers = document.getElementById('voltage_lower').value;
+        const p_uppers = document.getElementById('p_upper').value;
+        const c_uppers = document.getElementById('c_upper').value;
+        if(voltage_uppers >= voltage_lowers)
+        {
+            threshold.c_upper.act_para[index] = Number(current_uppers);
+            threshold.v_upper.act_para[index] = Number(voltage_uppers);
+            threshold.v_lower.act_para[index] = Number(voltage_lowers);
+            threshold.p_upper.act_para[index] = Number(p_uppers);
+            threshold.w_upper.act_para[index] = Number(c_uppers);
+            channel_power_infro.thr = threshold
+            orgin_data.powerc = channel_power_infro      
+            threshold_update(orgin_data)
+        }else
+        {
+            alert("电压上限值不能小于下限值")
+            voltage_upper.value = 0
+            voltage_lower.value = 0
+        }
+
+    });
+    closeModal.addEventListener('click',function(){
+        document.getElementById('editModal').style.display = 'none';
+        currentRowIndex = null;
+    });
+}

+ 121 - 0
f407/tools/web/JS/channel_display.js

@@ -0,0 +1,121 @@
+function channel_display(j_data,channel_power_infro)
+{
+        length = channel_power_infro.length
+        const dataList = document.getElementById('tbody');
+
+        dataList.innerHTML = '';
+        for(let j = 1 ; j< length;j++)
+        {
+            num = channel_power_infro[j].info.type
+            // 创建一个新的列表项元素
+            const listItem = document.createElement('tr');
+            dataList.appendChild(listItem);
+
+            //自动生成设备名称列
+            const Device_name_td = document.createElement('td');
+            Device_name_td.textContent = "Smart PDU"
+            dataList.appendChild(Device_name_td);
+
+            //自动生成通道名称列
+            const Chananl_name_td = document.createElement('td');
+            Chananl_name_td.textContent = "CH"+j
+            dataList.appendChild(Chananl_name_td);
+
+            //自动生成通道名称列
+            const Chananl_num_td = document.createElement('td');
+            Chananl_num_td.textContent = j
+            dataList.appendChild(Chananl_num_td);
+
+            //自动生成相序列
+            const xiangxu_td = document.createElement('td');
+            xiangxu_td.textContent = "L"+j
+            dataList.appendChild(xiangxu_td);
+
+        // 自动生成电压列
+            const voltage_td = document.createElement('td');
+            voltage_td.textContent = channel_power_infro[j].power[0].voltage.toFixed(2);
+            dataList.appendChild(voltage_td);
+
+            // 自动生成电流列
+            const current_td = document.createElement('td');
+            current_td.textContent = channel_power_infro[j].power[0].current.toFixed(2);
+            dataList.appendChild(current_td);
+
+            // 自动生成功率列
+            const power_td = document.createElement('td');
+            power_td.textContent = channel_power_infro[j].power[0].power.toFixed(2);
+            dataList.appendChild(power_td);
+
+                // 自动生成频率列
+            const freq_td = document.createElement('td');
+            freq_td.textContent = channel_power_infro[j].power[0].freq.toFixed(2);
+            dataList.appendChild(freq_td);
+
+            // 自动生成耗电量列
+            const consump_td = document.createElement('td');
+            consump_td.textContent = channel_power_infro[j].power[0].consump.toFixed(2);
+            dataList.appendChild(consump_td);
+
+            // 自动生成功率因数列
+            const factor_td = document.createElement('td');
+            factor_td.textContent = channel_power_infro[j].power[0].factor.toFixed(2);
+            dataList.appendChild(factor_td);   
+
+            // 自动生成状态列
+            const open_time_td = document.createElement('td');
+            times = channel_power_infro[j].info.start_delay 
+            times = times / 1000
+            open_time_td.textContent = times
+            dataList.appendChild(open_time_td);
+
+            // 自动生成状态列
+            const close_time_td = document.createElement('td');
+            close_times = channel_power_infro[j].info.stop_delay  
+            close_times = close_times / 1000
+            close_time_td.textContent = close_times
+            dataList.appendChild(close_time_td);
+
+            // 自动生成状态列
+            const status_td = document.createElement('td');
+            channel_status = channel_power_infro[j].power[0].status
+            dataList.appendChild(status_td);
+
+            if(channel_status == 1)
+                {
+                    status_td.textContent = '接通';
+                    // 自动生成关闭按钮列
+                    const close_button_td = document.createElement('button');
+                    close_button_td.textContent = '关闭';
+                    close_button_td.id = `Button_close_ ${j}`;
+                    close_button_td.addEventListener('click', function() {
+                        const userConfirmed = confirm('是否确定关闭该通道');
+                        if (userConfirmed) {
+                            single_close(j_data,channel_power_infro,j)
+                        } else {
+                            alert('已取消关闭通道');
+                        }
+                    });
+                    dataList.appendChild(close_button_td);
+                }else{
+                    status_td.textContent = '断开';
+                    // 自动生成开启按钮列
+                    const open_button_td = document.createElement('button');
+                    open_button_td.id = `Button_open_ ${j}`;
+                    open_button_td.textContent = '开启';
+                    open_button_td.addEventListener('click', function() {
+                        const userConfirmed = confirm('是否确定开启该通道');
+                        if (userConfirmed) {
+                            single_open(j_data,channel_power_infro,j)
+                        } else {
+                            alert('已取消开启通道');
+                        }
+                    });
+                    dataList.appendChild(open_button_td);
+                }
+                // 自动生成输出类型列
+                const input_type_td = document.createElement('td');
+                input_type_td.textContent = '直流';
+
+                dataList.appendChild(input_type_td);
+            }
+}

+ 970 - 0
f407/tools/web/JS/data.js

@@ -0,0 +1,970 @@
+const MAGIC=0xdead;
+const PKT_TYPE=function(){
+    var len = 0;
+    return {
+        PKT_TYPE_ACK:len++,             
+        PKT_TYPE_PARAS:len++,             
+        PKT_TYPE_POWER_CH:len++,          //power_ch_t
+        PKT_TYPE_POWER_TOTAL:len++,       //power_total_t
+        PKT_TYPE_POWER_RESET:len++,
+        PKT_TYPE_CH_ALL:len++,
+        PKT_TYPE_SCAN:len++,
+        PKT_TYPE_FACTORY:len++,
+        PKT_TYPE_ALARM:len++,
+        PKT_TYPE_SENSOR:len++,
+        PKT_TYPE_BREAKER:len++,
+        PKT_TYPE_STAT:len++,
+        PKT_TYPE_MESG:len++,
+        PKT_TYPE_FILE:len++,
+    }
+}();
+const SUB_TYPE=function(){
+    var len = 0;
+    return {
+        SUB_TYPE_POWER_SWITCH:len++,             
+        SUB_TYPE_POWER_ALARM:len++,             
+        SUB_TYPE_POWER_THRESHOLD:len++,          //power_ch_t
+        SUB_TYPE_POWER_START_DELAY:len++,       //power_total_t
+        SUB_TYPE_POWER_STOP_DELAY:len++,
+    }
+}();
+
+const PDU_TYPE=function(){
+    var len = 0;
+    return {
+    PDU_AC_I1O1:len++,
+    PDU_DC_I1O1:len+=2,
+    PDU_AC_I3O3:len++,
+    PDU_AC_I3O1:len++,
+    PDU_AC_I3O1_H:len++,
+    }
+}();
+///////////////////////////////////////////////////////
+function array_to_string(data){
+    const decoder = new TextDecoder();
+    return decoder.decode(new Uint8Array(data));
+}
+
+function string_to_array(data,len){
+    const encoder = new TextEncoder(); // ĬÈÏ'utf-8'±àÂë
+    const buffer = encoder.encode(data);
+    const fixedArray = new Uint8Array(len);
+    fixedArray.set(buffer);
+    fixedArray.fill(0, buffer.length);
+    return fixedArray.buffer;
+}
+function array_cat(a1,a2){
+    var tlen=a1.byteLength+a2.byteLength;
+    var buffer = new ArrayBuffer(tlen);
+    var vw = new Uint8Array(buffer);
+    
+    var vw1 = new Uint8Array(a1);
+    for(var i=0; i<a1.byteLength; i++) {
+        vw[i] = vw1[i];
+    }
+    
+    var vw2 = new Uint8Array(a2);
+    for(var i=0; i<a2.byteLength; i++) {
+        vw[i+a1.byteLength] = vw2[i];
+    }
+    return buffer;
+}
+function mk_hdr(type,flag)
+{
+    var tmp,length=0;
+    var buffer = new ArrayBuffer(13);
+
+    tmp = new DataView(buffer, length);
+    var t = MAGIC;
+    tmp.setUint16(0,t,true);//magic
+    length += 2;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,type,true);  //type
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,0,true);     //subtype
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,0,true);     //nack
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,flag,true);     //flag
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,0,true);    //dlen
+    length += 4;
+    
+    return buffer;
+}
+function pkt_to_bin(type,subtype,js)
+{
+    var tmp,tmp2,length=0;
+    var buffer = new ArrayBuffer(13);
+
+    tmp = new DataView(buffer, length);
+    var t = MAGIC;
+    tmp.setUint16(0,t,true);//magic
+    length += 2;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,type,true);  //type
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,subtype,true);     //subtype
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,0,true);     //nack
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,0,true);     //flag
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,js.len,true);    //dlen
+    length += 4;
+    
+    switch(type){
+        case PKT_TYPE.PKT_TYPE_POWER_CH:
+            tmp2 = new powerc_to_bin(js);
+            break;
+
+        case PKT_TYPE.PKT_TYPE_POWER_TOTAL:
+            tmp2 = BIN.powert.j2b(js);
+            break;
+           
+       case PKT_TYPE.PKT_TYPE_ALARM:
+            tmp2 = BIN.alarm.j2b(js);
+            break;
+            
+       default:
+       return tmp2;
+    }
+    return array_cat(buffer,tmp2);
+}
+function bin_to_pkt(bin)
+{
+    var hdr = new bin_to_hdr(bin);
+    
+    var data = bin.slice(hdr.len);
+    if(data.byteLength>0 && hdr.dlen==data.byteLength) {
+        switch(hdr.type) {
+            case PKT_TYPE.PKT_TYPE_POWER_CH:
+                hdr.powerc = new bin_to_powerc(data);
+                break;
+
+            case PKT_TYPE.PKT_TYPE_POWER_TOTAL:
+                hdr.powert = BIN.powert.b2j(data);
+                break;
+               
+           case PKT_TYPE.PKT_TYPE_ALARM:
+                hdr.alarmd = BIN.alarmd.b2j(data);
+                break;
+            
+            default :
+                console.log("wrong hdr type: "+hdr.type);
+        }
+    }
+    return hdr;
+}
+
+///////////////////////////////////////////////////
+function bin_to_hdr(bin) {
+    var tmp, length=0;
+
+    tmp = new DataView(bin, length);
+    this.magic = tmp.getUint16(0,true);
+    length += 2;
+
+    tmp = new DataView(bin, length);
+    this.type = tmp.getUint8(0,true);
+    length += 1;
+    
+    tmp = new DataView(bin, length);
+    this.subtype = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.nack = tmp.getUint8(0,true);
+    length += 1;
+    
+    tmp = new DataView(bin, length);
+    this.flag = tmp.getUint8(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.dlen = tmp.getUint32(0,true);
+    length += 4;
+
+    this.len = length;
+}
+function bin_to_info(bin) {
+    var tmp, length=0;
+
+    this.name = array_to_string(bin.slice(0,32));
+    length += 32;
+
+    tmp = new DataView(bin, length);
+    this.type = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.addr = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.ch = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.sch = tmp.getUint8(0,true);
+    length += 1;
+    
+    tmp = new DataView(bin, length);
+    this.ph_id = tmp.getUint8(0,true);
+    length += 1;
+    
+    tmp = new DataView(bin, length);
+    this.ph_val = tmp.getUint8(0,true);
+    length += 1;
+    
+    tmp = new DataView(bin, length);
+    this.start_delay = tmp.getUint32(0,true);
+    length += 4;
+    
+    tmp = new DataView(bin, length);
+    this.stop_delay = tmp.getUint32(0,true);
+    length += 4;
+
+    this.len = length;
+}
+function bin_to_power(bin) {
+    var tmp, length=0;
+
+    tmp = new DataView(bin, length);
+    this.voltage = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.current = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.power = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.freq = tmp.getFloat32(0,true);
+    length += 4;
+    
+    tmp = new DataView(bin, length);
+    this.factor = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.consump = tmp.getFloat32(0,true);
+    length += 4;
+    
+    tmp = new DataView(bin, length);
+    this.active = tmp.getFloat32(0,true);
+    length += 4;
+    
+    tmp = new DataView(bin, length);
+    this.reactive = tmp.getFloat32(0,true);
+    length += 4;
+    
+    tmp = new DataView(bin, length);
+    this.ph_out = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.status = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.nwire = tmp.getUint8(0,true);
+    length += 1;
+
+    this.len = length;
+}
+function bin_to_alarm(bin) {
+    var tmp, length=0;
+
+    tmp = new DataView(bin, length);
+    this.v_upper = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.v_lower = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.c_upper = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.p_upper = tmp.getUint8(0,true);
+    length += 1;
+    
+    tmp = new DataView(bin, length);
+    this.w_upper = tmp.getUint8(0,true);
+    length += 1;
+    
+    tmp = new DataView(bin, length);
+    this.ph_loss = tmp.getUint8(0,true);
+    length += 1;
+
+    this.len = length;
+}
+function bin_to_thrval(bin) {
+    var tmp, length=0;
+    
+    tmp = new DataView(bin, length);
+    this.en = tmp.getUint8(0,true);
+    length += 1;
+
+    tmp = new DataView(bin, length);
+    this.val = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.act = tmp.getUint8(0,true);
+    length += 1;
+
+    this.act_para = [];
+    tmp = new DataView(bin, length);
+    for(var i=0; i<14; i++) {
+        this.act_para[i] = tmp.getUint8(i,true);
+    }
+    length += 14;
+
+    this.len = length;
+}
+function bin_to_thr(bin) {
+    var tmp, length=0;
+    
+    this.v_upper = new bin_to_thrval(bin.slice(length));
+    length += this.v_upper.len;
+    
+    this.v_lower = new bin_to_thrval(bin.slice(length));
+    length += this.v_lower.len;
+    
+    this.c_upper = new bin_to_thrval(bin.slice(length));
+    length += this.c_upper.len;
+    
+    this.p_upper = new bin_to_thrval(bin.slice(length));
+    length += this.p_upper.len;
+    
+    this.w_upper = new bin_to_thrval(bin.slice(length));
+    length += this.w_upper.len;
+
+    this.len = length;
+}
+function bin_to_powerc(bin) {
+    var tmp, bin2, length=0;
+
+    this.info = new bin_to_info(bin);
+    length += this.info.len;
+    
+    this.power = [];
+    for(var i=0; i<3; i++) {
+        this.power[i] = new bin_to_power(bin.slice(length));
+        length += this.power[i].len;
+    }
+    
+    this.thr = new bin_to_thr(bin.slice(length));
+    length += this.thr.len;
+    
+    this.alarm = new bin_to_alarm(bin.slice(length));
+    length += this.alarm.len;
+    
+    tmp = new DataView(bin, length);
+    this.time = tmp.getUint32(0,true);
+    length += 4;
+    
+    tmp = new DataView(bin, length);
+    this.pbrd = tmp.getUint32(0,true);
+    length += 4;
+
+    this.len = length;
+}
+function bin_to_total(bin) {
+    var tmp, length=0;
+
+    tmp = new DataView(bin, length);
+    this.voltage = tmp.getFloat32 (0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.current = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.power = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.freq = tmp.getFloat32(0,true);
+    length += 4;
+    
+    tmp = new DataView(bin, length);
+    this.consump = tmp.getFloat32 (0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.active = tmp.getFloat32(0,true);
+    length += 4;
+
+    tmp = new DataView(bin, length);
+    this.reactive = tmp.getFloat32(0,true);
+    length += 4;
+    
+    this.len = length;
+}
+function bin_to_powert(bin) {
+    var tmp, length=0;
+
+    tmp = new DataView(bin, length);
+    this.type = tmp.getUint8(0,true);
+    length += 1;
+
+    this.total = [];
+    for(var i=0; i<3; i++) {
+        this.total[i] = new bin_to_total(bin.slice(length));
+        length += this.total[i].len;
+    }
+    
+    this.len = length;
+}
+function bin_to_alarmd(bin) {
+    var tmp, length=0;
+    
+    tmp = new DataView(bin, length);
+    this.ch = tmp.getUint8(0,true);
+    length += 1;
+    
+    this.alarm = new bin_to_alarm(bin.slice(length));
+    length += this.alarm.len;
+    
+    tmp = new DataView(bin, length);
+    this.time = tmp.getUint32(0,true);
+    length += 1;
+
+    this.len = length;
+}
+///////////////////////////////////////////////////
+function hdr_to_bin(js) {
+    var tmp, length=0;
+    var buffer = new ArrayBuffer(js.len);
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint16(0,js.magic,true);
+    length += 2;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.type,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.subtype,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.nack,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,js.flag,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,js.dlen,true);
+    length += 4;
+
+    return buffer;
+}
+function info_to_bin(js) {
+    var tmp, length=0;
+    var buffer = new ArrayBuffer(js.len);
+
+    var name = string_to_array(js.name);
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.type,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.addr,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.ch,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.sch,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.ph_id,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.ph_val,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,js.start_delay,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,js.stop_delay,true);
+    length += 4;
+
+    return array_cat(name,buffer);
+}
+function power_to_bin(js) {
+    var tmp, length=0;
+    var buffer = new ArrayBuffer(js.len);
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.voltage,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.current,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.power,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.freq,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.factor,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.consump,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.active,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.reactive,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.ph_put,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.status,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.nwire,true);
+    length += 1;
+
+    return buffer;
+}
+function alarm_to_bin(js) {
+    var tmp, length=0;
+    var buffer = new ArrayBuffer(js.len);
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.v_upper,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.v_lower,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.c_upper,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.p_upper,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.w_upper,true);
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.ph_loss,true);
+    length += 1;
+
+    return buffer;
+}
+function thrval_to_js(js) {
+    var tmp, length=0;
+    var buffer = new ArrayBuffer(js.len);
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,js.en,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.val,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.getUint8(0,js.act,true);
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    for(var i=0; i<14; i++) {
+        tmp.setUint8(i,js.act_para[i],true);
+    }
+    length += 14;
+
+    return buffer;
+}
+function thr_to_bin(js) {
+    var bin,tmp, length=0;
+    
+    bin = thrval_to_js(js.v_upper);
+    tmp = thrval_to_js(js.v_lower);
+    
+    bin = array_cat(bin, tmp);
+    tmp = thrval_to_js(js.c_upper);
+    bin = array_cat(bin, tmp);
+    
+    tmp = thrval_to_js(js.p_upper);
+    bin = array_cat(bin, tmp);
+    
+    tmp = thrval_to_js(js.w_upper);
+    bin = array_cat(bin, tmp);
+
+    return bin;
+}
+function powerc_to_bin(js) {
+    var bin,tmp, length=0;
+    
+    bin = info_to_bin(js.info);
+    
+    for(var i=0; i<3; i++) {
+        tmp = power_to_bin(js.power[i]);
+        bin = array_cat(bin, tmp);
+    }
+    
+    tmp = thr_to_bin(js.thr);
+    bin = array_cat(bin, tmp);
+
+    tmp = alarm_to_bin(js.alarm);
+    bin = array_cat(bin, tmp);
+    
+    var buf = new ArrayBuffer(8);
+    tmp = new DataView(buf, 0);
+    tmp.setUint32(0,js.time,true);
+    tmp.setUint32(4,js.pbrd,true);
+    
+    bin = array_cat(bin, buf);
+
+    return bin;
+}
+function total_to_bin(js) {
+    var tmp, length=0;
+    var buffer = new ArrayBuffer(js.len);
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.voltage,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.current,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.power,true);
+    length += 4;
+
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.freq,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.consump,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.factor,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.active,true);
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setFloat32(0,js.reactive,true);
+    length += 4;
+
+    return buffer;
+}
+function powert_to_bin(js) {
+    var tmp,bin2,length=0;
+    var bin = new ArrayBuffer(1);
+
+    tmp = new DataView(bin, length);
+    tmp.setUint8(0,js.type,true);
+    length += 4;
+
+    for(var i=0; i<3; i++) {
+        bin2 = total_to_bin(js.total[i]);
+        bin = array_cat(bin, bin2);
+    }
+
+    return bin;
+}
+function alarmd_to_bin(js) {
+    var tmp, length=0;
+    var bin,buffer = new ArrayBuffer(1);
+
+    tmp = new DataView(buffer, 0);
+    tmp.setUint8(0,js.ch,true);
+    
+    var alarm = alarm_to_bin(js.alarm);
+    bin = array_cat(buffer, alarm);
+
+    buffer = new ArrayBuffer(4);
+    tmp = new DataView(buffer, 0);
+    tmp.setUint32(0,js.time,true);
+
+    return array_cat(bin, buffer);
+}
+//////////////////////////////////////////////////////////////
+
+var XXX ={};
+XXX.hdr = function() {
+    this.j2b = function (js) {
+        var tmp;
+
+        switch(js.type){
+            case PKT_TYPE.PKT_TYPE_POWER_CH:
+                tmp = BIN.powerc.j2b(js.powerc);
+                break;
+
+            case PKT_TYPE.PKT_TYPE_POWER_TOTAL:
+                tmp = BIN.powert.j2b(js.powert);
+                break;
+               
+           case PKT_TYPE.PKT_TYPE_ALARM:
+                tmp = BIN.alarm.j2b(js.alarmd);
+                break;
+                
+           default:
+           return tmp;
+        }
+        js.dlen = tmp.byteLength;
+        var hdr = new hdr_to_bin(js);
+        return array_cat(hdr,tmp);
+    };
+
+    this.b2j = function (bin) {
+        var tmp;
+        var hdr = new bin_to_hdr(bin);
+        
+        if(hdr.nack == 1){
+            //tmp = myBinary.ack.bin2js(bin,this.hdr.len,true);
+            //myLog('log',tmp);
+            //var data = tmp.data;
+        }
+        
+        var data = bin.slice(hdr.len);
+        if(data.byteLength>0 && hdr.dlen==data.byteLength) {
+            switch(hdr.type) {
+                case PKT_TYPE.PKT_TYPE_POWER_CH:
+                    hdr.powerc = BIN.powerc.b2j(data);
+                    break;
+
+                case PKT_TYPE.PKT_TYPE_POWER_TOTAL:
+                    hdr.powert = BIN.powert.b2j(data);
+                    break;
+                   
+               case PKT_TYPE.PKT_TYPE_ALARM:
+                    hdr.alarmd = BIN.alarmd.b2j(data);
+                    break;
+                
+                default :
+                    console.log("wrong hdr type: "+hdr.type);
+            }
+        }
+        return hdr;
+    }
+};
+XXX.paras=function() {
+    this.j2b = function (js) {
+        
+    }
+    
+    this.b2j = function (bin) {
+        
+    }
+};
+XXX.powerc=function() {
+    this.j2b = function (js) {
+        return new powerc_to_bin(js);
+    }
+
+    this.b2j = function (bin) {
+        var tmp=[],length=0;
+        for(var i=0;; i++) {
+            tmp[i] =  new bin_to_powerc(bin.slice(length));
+            length += tmp[i].len;
+            if(length >= bin.byteLength) {
+                break;
+            }
+        }
+        return tmp;
+    }
+};
+XXX.powert=function() {
+    this.j2b = function (js) {
+        return new powert_to_bin(js);
+    }
+
+    this.b2j = function (bin) {
+        return new bin_to_powert(bin);
+    }
+};
+XXX.alarmd=function() {
+    this.j2b = function (js) {
+        return new alarmd_to_bin(js);
+    }
+
+    this.b2j = function (bin) {
+        return new bin_to_alarmd(bin);
+    }
+};
+
+
+var BIN=new function() {
+    this.hdr = new XXX.hdr();
+    this.paras = new XXX.paras();
+    this.powerc = new XXX.powerc();
+    this.powert = new XXX.powert();
+    this.alarmd = new XXX.alarmd();
+}();
+
+
+//////////////////////////////////////////
+function LOG(){
+    var data = [];
+    for(var i= 1,len=arguments.length;i<len;i++){
+        data.push(arguments[i])
+    }
+    console.log(data);
+
+}
+
+
+function WS(url,fn) {
+    this.url = url;
+    this.name = 'myWebs';
+    this.open = _open;
+    this.reopen = _reopen;
+    this.close = _close;
+    this.send = _send;
+    this.state = _state;
+    this.setcb = _setcb;
+    this.closeCount = 0;
+    this.maxConnect = 100;
+    var his = this;
+    this.open();
+    function _open() {
+        console.log("____url: ", his.url);
+        his.ws = new WebSocket(his.url);
+        his.ws.binaryType = 'arraybuffer';
+        his.ws.onopen = _onopen;
+        his.ws.onclose = _onclose;
+        his.ws.onmessage = _onmsg;
+        his.ws.onerror = _onerror;
+    }
+
+    function _reopen() {
+        _close();
+        _open(his.url);
+    }
+
+    function _close() {
+        his.ws.close();
+    }
+
+    function _send(msg) {
+        if (his.ws.readyState != WebSocket.OPEN)
+            return;
+        his.ws.send(msg);
+    }
+
+    function _state() {
+        return his.ws.readyState;
+    }
+
+    function _setcb(tp, f) {
+        switch (tp) {
+            case "open":
+                his.ws.onopen = f;
+                break;
+
+            case "close":
+                his.ws.onclose = f;
+                break;
+
+            case "msg":
+                his.ws.onmessage = f;
+                break;
+
+            case "err":
+                his.ws.onerror = f;
+                break;
+        }
+    }
+
+    function loop_send() {
+        console.log("PKT_TYPE_POWER_CH request");
+        _send(mk_hdr(PKT_TYPE.PKT_TYPE_POWER_CH));
+        setTimeout(loop_send, 2000);
+    }
+
+
+    function _onopen(evt) {
+        his.closeCount = 0;
+        console.log("___ ws.onopen");
+        setTimeout(loop_send, 2000);
+    }
+
+    function _onclose(evt) {
+        LOG("ws.onclose");
+        setTimeout(_reopen, 3000);
+        his.closeCount += 1;
+    }
+
+    function _onmsg(evt) {
+        console.log("___ ws.onmsg");
+        if (evt.data instanceof ArrayBuffer) {
+            fn(evt.data);
+        }
+    }
+
+    function _onerror(evt) {
+        console.log("___ ws.onerror");
+        //write_scr('<span style="color: red;">ERROR:</span> '+ evt.data);
+    }
+
+}
+
+

+ 126 - 0
f407/tools/web/JS/display_data.js

@@ -0,0 +1,126 @@
+function total_Infor(j,total_data){
+    len = total_data.length
+    //显示总信息
+    for(let i = 0;i<=len-1;i++)
+    {
+        num = i + 1
+        voltage = total_data[i].voltage.toFixed(2)
+        current = total_data[i].current.toFixed(2)
+        power = total_data[i].power
+        power = power / 1000
+        power = power.toFixed(3)
+        consump  = total_data[i].consump
+        if(consump <= 0)
+        {
+            consump = 0
+        }
+        consump = consump / 1000
+        consump = consump.toFixed(3)
+        freq = total_data[i].freq.toFixed(2)
+
+        Voltage = document.getElementById("L"+num+"_voltage")
+        Current = document.getElementById("L"+num+"_current")
+        Power = document.getElementById("L"+num+"_power")
+        Consump = document.getElementById("L"+num+"_power_consumption")
+        Freq = document.getElementById("L"+num+"_freq")
+
+        Voltage.textContent  = voltage
+        Current.textContent  = current
+        Power.textContent = power
+        Consump.textContent = consump
+        Freq.textContent = freq
+    }
+    
+}
+function Channel_Info(j_data,channel_power_infro)
+{
+    channel_length = channel_power_infro.length
+    channel_display(j_data,channel_power_infro,channel_infro)
+}
+
+function threshold_mannage(orgin_data,channel_power_infro,threshold)
+{
+    // 获取要插入新行的DOM元素
+    const dataList = document.getElementById('threshold_mannage');
+
+    // 清空现有的列表项
+    dataList.innerHTML = '';
+    channel_length = threshold.c_upper.act_para.length
+    current_upper =  threshold.c_upper.act_para
+    voltage_upper =  threshold.v_upper.act_para
+    voltage_lower =  threshold.v_lower.act_para
+    power_upper =  threshold.p_upper.act_para
+    consump_upper = threshold.w_upper.act_para
+    //遍历数据数组
+    for(let i = 0;i<=channel_length-1;i++)
+    {
+        j = i + 1
+        // 创建一个新的列表项元素
+        const listItem = document.createElement('tr');
+        dataList.appendChild(listItem);
+        //自动生成电源类型列
+        const power_type_td = document.createElement('td');
+        power_type_td.textContent = "通道"
+        dataList.appendChild(power_type_td);
+
+        //自动生成名称列
+        const Chananl_name_td = document.createElement('td');
+        Chananl_name_td.textContent = "CH"+j
+        dataList.appendChild(Chananl_name_td);
+
+        //自动生成编号列
+        const Chananl_num_td = document.createElement('td');
+        Chananl_num_td.textContent = j
+        dataList.appendChild(Chananl_num_td);
+
+        //自动生成电流上限列
+        const current_max_td = document.createElement('td');
+        current_max_td.textContent = current_upper[i] 
+        dataList.appendChild(current_max_td);
+
+        // 自动生成电压上限列
+        const voltage_max_td = document.createElement('td');
+        voltage_max_td.textContent = voltage_upper[i];
+        dataList.appendChild(voltage_max_td);
+
+        // 自动生成电压下限列
+        const voltage_min_td = document.createElement('td');
+        voltage_min_td.textContent = voltage_lower[i];
+        dataList.appendChild(voltage_min_td);
+
+        // 自动生成功率上限列
+        const power_max_td = document.createElement('td');
+        power_max_td.textContent = power_upper[i];
+        dataList.appendChild(power_max_td);
+
+        // 自动生成耗电量上限列
+        const consump_td = document.createElement('td');
+        consump_td.textContent = consump_upper[i];
+        dataList.appendChild(consump_td);
+
+        // 自动生成配置按钮列
+        const operation_td = document.createElement('button');
+        operation_td.textContent = '配置';
+        operation_td.id = "edite"+{i}
+        operation_td.addEventListener('click', function() {
+            editRow(orgin_data,threshold,i,channel_power_infro)
+        });
+
+        dataList.appendChild(operation_td);
+    }
+}
+function now_time()
+{
+    const now = new Date();
+ 
+    // 获取年、月、日、小时、分钟和秒
+    const year = now.getFullYear();
+    const month = now.getMonth() + 1;
+    const day = now.getDate();
+    const hours = now.getHours();
+    const minutes = now.getMinutes();
+    const seconds = now.getSeconds();
+    
+    formattedTime = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+    return formattedTime
+}

+ 81 - 0
f407/tools/web/JS/index.js

@@ -0,0 +1,81 @@
+let activePageIntervalId = null;
+function showPage(pageId) {
+    const pages = document.querySelectorAll('.page');
+    number = 0
+    pages.forEach(page => {
+        page.classList.remove('active');
+        button_id = pageId
+        if(pageId == "page2")
+        {
+            setActivePage(function1, 1000)
+        }
+        if(pageId == "page3" || pageId == "page5")
+        {
+            setActivePage(function2, 1000)
+        }
+        if(pageId == "page4")
+        {
+            setActivePage(function3, 1000)
+        }
+    });
+    const selectedPage = document.getElementById(pageId);
+    selectedPage.classList.add('active');
+}
+
+function function1() 
+{
+    ws.send(mk_hdr(PKT_TYPE.PKT_TYPE_POWER_TOTAL,0));
+}
+   
+function function2() 
+{
+    ws.send(mk_hdr(PKT_TYPE.PKT_TYPE_POWER_CH,0));
+}
+
+function function3()
+{
+    console.log(1)
+}
+function setActivePage(pageFunction, intervalTime) 
+{
+
+   // 停止之前活动的页面定时函数
+   if (activePageIntervalId !== null) 
+    {
+        clearInterval(activePageIntervalId);
+    }
+activePageIntervalId = setInterval(pageFunction, intervalTime);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    showPage('page1');
+});
+
+function mk_hdr(type)
+{
+    var tmp,length=0;
+    var buffer = new ArrayBuffer(9);
+
+    tmp = new DataView(buffer, length);
+    var t = 0xdead;
+    tmp.setUint16(0,t,true);//magic
+    length += 2;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,type,true);  //type
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,0,true);     //subtype
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,0,true);     //nack
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,0,true);    //dlen
+    length += 4;
+    
+    return buffer;
+}

+ 41 - 0
f407/tools/web/JS/operation.js

@@ -0,0 +1,41 @@
+function all_open()
+{
+    ws.send(mk_hdr(PKT_TYPE.PKT_TYPE_CH_ALL,1));
+}
+
+function all_close()
+{
+    ws.send(mk_hdr(PKT_TYPE.PKT_TYPE_CH_ALL,0));
+}
+
+function single_open(j_data,channel_power_infro)
+{
+    j_c_data  = j_data
+    data = channel_power_infro
+    j_status = data[j].power[0].status
+    if(j_status = 1)
+    {
+        data[j].power[0].status = 0
+    }
+    ws.send(mk_pkt(PKT_TYPE.PKT_TYPE_POWER_CH,SUB_TYPE.SUB_TYPE_POWER_SWITCH,data[j]))
+}
+
+function single_close(j_data,channel_power_infro,j)
+{
+    j_c_data  = j_data
+    data = channel_power_infro
+    j_status = data[j].power[0].status
+    if(j_status = 1)
+    {
+        data[j].power[0].status = 0
+    }
+    a = pkt_to_bin(PKT_TYPE.PKT_TYPE_POWER_CH,SUB_TYPE.SUB_TYPE_POWER_SWITCH,data[j])
+    var b = bin_to_pkt(a)
+    ws.send(a)
+}
+
+function threshold_update(orgin_data)
+{
+    translate_data = orgin_data
+    send_data(translate_data)
+}

+ 184 - 0
f407/tools/web/JS/pagination.js

@@ -0,0 +1,184 @@
+const rowsPerPage = 15;
+let currentPage = 1;
+function populateTable(j_data,channel_power) {
+    i = 0
+    channel_data_length = channel_power.length
+    const tableBody = document.getElementById('tbody');
+    tableBody.innerHTML = ''; // 清空表格体
+    const startIndex = (currentPage - 1) * rowsPerPage;
+    const endIndex = startIndex + rowsPerPage;
+    const pageData = channel_power.slice(startIndex, endIndex);
+ 
+    // 创建一个新的列表项元素
+    const listItem = document.createElement('tr');
+
+    //自动生成设备名称列
+    const Device_name_td = document.createElement('td');
+    Device_name_td.textContent = "Smart PDU"
+    Device_name_td.rowSpan = 3
+    listItem.appendChild(Device_name_td);
+
+
+    // pageData.forEach(item => {
+    //   i++
+    //   j = channel_data_length / 3
+    //   // 创建一个新的列表项元素
+    //   const listItem = document.createElement('tr');
+
+    //   //自动生成设备名称列
+    //   const Device_name_td = document.createElement('td');
+    //   Device_name_td.textContent = "Smart PDU"
+    //   listItem.appendChild(Device_name_td);
+
+    //   //自动生成通道名称列
+    //   const Chananl_name_td = document.createElement('td');
+    //   Chananl_name_td.textContent = "CH"+j+"-"+"L"+i
+    //   listItem.appendChild(Chananl_name_td);
+
+    //   //自动生成通道名称列
+    //   const Chananl_num_td = document.createElement('td');
+    //   Chananl_num_td.textContent = j
+    //   listItem.appendChild(Chananl_num_td);
+
+    //   //自动生成相序列
+    //   const xiangxu_td = document.createElement('td');
+    //   xiangxu_td.textContent = "L"+i
+    //   listItem.appendChild(xiangxu_td);
+
+    //   // 自动生成电压列
+    //   const voltage_td = document.createElement('td');
+    //   voltage_data = item.voltage.toFixed(2);
+    //   if(voltage_data <= 0)
+    //   {
+    //     voltage_data = 0
+    //   }
+    //   voltage_td.textContent = voltage_data
+    //   listItem.appendChild(voltage_td);
+
+    //   // 自动生成电流列
+    //   const current_td = document.createElement('td');
+    //   current_data = item.current.toFixed(2);
+    //   if(current_data <= 0)
+    //   {
+    //     current_data = 0
+    //   }
+    //   current_td.textContent = current_data;
+    //   listItem.appendChild(current_td);
+
+    //   // 自动生成功率列
+    //   const power_td = document.createElement('td');
+    //   power_data = item.power.toFixed(2);
+    //   if(power_data <= 0)
+    //   {
+    //     power_data = 0
+    //   }
+    //   power_td.textContent = power_data
+    //   listItem.appendChild(power_td);
+
+    //   // 自动生成频率列
+    //   const freq_td = document.createElement('td');
+    //   freq_data = item.power.toFixed(2);
+    //   if(freq_data <= 0)
+    //   {
+    //     freq_data = 0
+    //   }
+    //   freq_td.textContent = freq_data
+    //   listItem.appendChild(freq_td);
+
+    //   // 自动生成耗电量列
+    //   const consump_td = document.createElement('td');
+    //   consump_data = item.consump.toFixed(2);
+    //   if(consump_data <= 0)
+    //   {
+    //     consump_data = 0
+    //   }
+    //   consump_td.textContent = consump_data
+    //   listItem.appendChild(consump_td);
+
+    //   // 自动生成功率因数列
+    //   const factor_td = document.createElement('td');
+    //   factor_data = item.factor.toFixed(2);
+    //   if(factor_data <= 0)
+    //   {
+    //     factor_data = 0
+    //   }
+    //   factor_td.textContent = factor_data
+    //   listItem.appendChild(factor_td);
+
+    //   // 自动生成开启延时列
+    //   const open_td = document.createElement('td');
+    //   open_td.textContent = 0;
+    //   listItem.appendChild(open_td);
+
+    //   // 自动生成关闭延时列
+    //   const close_td = document.createElement('td');
+    //   close_td.textContent = 0;
+    //   listItem.appendChild(close_td);       
+
+    //   // 自动生成状态列
+    //   const status_td = document.createElement('td');
+    //   channel_status = item.status
+    //   listItem.appendChild(status_td);
+
+    //   if(channel_status == 1)
+    //   {
+    //       status_td.textContent = '接通';
+    //       // 自动生成关闭按钮列
+    //       const close_button_td = document.createElement('button');
+    //       close_button_td.textContent = '关闭';
+    //       close_button_td.id = `Button_close_ ${i}`;
+    //       close_button_td.addEventListener('click', function() {
+    //           const userConfirmed = confirm('是否确定关闭该通道');
+    //           if (userConfirmed) {
+    //               single_close(j_data,channel_power_infro,channel_infro)
+    //           } else {
+    //               alert('已取消关闭通道');
+    //           }
+    //       });
+    //       listItem.appendChild(close_button_td);
+    //   }else{
+    //       status_td.textContent = '断开';
+    //       // 自动生成开启按钮列
+    //       const open_button_td = document.createElement('button');
+    //       open_button_td.id = `Button_open_ ${i}`;
+    //       open_button_td.textContent = '开启';
+    //       open_button_td.addEventListener('click', function() {
+    //           const userConfirmed = confirm('是否确定开启该通道');
+    //           if (userConfirmed) {
+    //             single_open(j_data,channel_power_infro,channel_infro)
+    //           } else {
+    //               alert('已取消开启通道');
+    //           }
+    //       });
+    //       listItem.appendChild(open_button_td);
+    //   }
+    //   // 自动生成输出类型列
+    //   const input_type_td = document.createElement('td');
+    //   input_type_td.textContent = '三相';
+
+    //   listItem.appendChild(input_type_td);
+    //   tableBody.appendChild(listItem);
+    // });
+    // updatePagination(channel_data_length)
+}
+
+function updatePagination(totalRows) {
+    totalRows = channel_data_length
+    const pagination = document.getElementById('page2_pagination');
+    pagination.innerHTML = ''; // 清空表格体
+    const totalPages = Math.ceil(totalRows / rowsPerPage);
+ 
+    for (let i = 1; i <= totalPages; i++) {
+      const button = document.createElement('button');
+      button.style.width = "5%";
+      button.style.height = "100%";
+      button.textContent = i;
+      button.disabled = i === currentPage; // 禁用当前页按钮(可选)
+      button.onclick = () => {
+        currentPage = i;
+        populateTable(channel_power);
+        updatePagination(totalRows, rowsPerPage); // 重新渲染分页按钮以反映当前页码(可选,但推荐)
+      };
+      pagination.appendChild(button);
+    }
+  }

+ 132 - 0
f407/tools/web/JS/system_alarm.js

@@ -0,0 +1,132 @@
+const system_alarm_data = []
+const arr_alarm = []
+const pageSize = 12
+alarm_number = 0
+last_time = 0
+let addedAlarmdsMap = new Map();
+function systemAlarm(alarmd_data)
+{
+    data_alarm = alarmd_data
+    const key = `${data_alarm.ch+1}-${data_alarm.time}`
+    if(!addedAlarmdsMap.has(key))
+    {
+        system_alarm_data.push(data_alarm.alarm)
+        addedAlarmdsMap.set(key,true)
+    }
+    arr = system_alarm_data
+    alarm_ch_num = data_alarm.ch
+    alarm_time = translate_time(data_alarm.time)
+    alarm_data = data_alarm.alarm
+    data_length = system_alarm_data.length
+    const totalPage = Math.ceil(data_length / pageSize)
+    renderPage(totalPage)
+    last_time = alarm_time
+}
+function translate_time(time)
+{
+    const timestamp = time;
+    const date = new Date(timestamp);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); 
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    const readableDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    return readableDate
+}
+function renderPage(totalPage) {
+    const dataList = document.getElementById('system_alarm');
+    const pageNumber = 1
+    dataList.innerHTML = '';
+    const startIndex = (pageNumber - 1) * pageSize;
+    const endIndex = Math.min(startIndex + pageSize, system_alarm_data.length);
+    for (let i = startIndex; i < endIndex; i++) {
+        data_number = system_alarm_data.length
+        const listItem = document.createElement('tr');
+        dataList.appendChild(listItem);
+        //自动生成告警通道
+        const alarm_numbers = document.createElement('td');
+        alarm_numbers.textContent = i+1
+        dataList.appendChild(alarm_numbers);
+
+        //自动生成告警通道
+        const alarm_number_td = document.createElement('td');
+        ch_number = alarm_ch_num+1
+        alarm_number_td.textContent = "CH"+ch_number
+        dataList.appendChild(alarm_number_td);
+
+        //自动生成告警时间
+        const alarm_time_td = document.createElement('td');
+        alarm_time_td.textContent = alarm_time
+        dataList.appendChild(alarm_time_td);
+        
+        //电流上限
+        const alarm_current_td = document.createElement('td');
+        if(system_alarm_data[i][0] == 0)
+        {
+           alarm_current_td.textContent = "电流已超上限"
+        }
+        else
+        {
+            alarm_current_td.textContent = "未报警"
+        }
+        dataList.appendChild(alarm_current_td);
+
+        //电压上限
+        const alarm_voltage_max_td = document.createElement('td');
+        if(system_alarm_data[i][1] == 0)
+        {
+            alarm_voltage_max_td.textContent = "电压已超上限"
+        }
+        else
+        {
+            alarm_voltage_max_td.textContent = "未报警"
+        }
+        dataList.appendChild(alarm_voltage_max_td);
+        //电压下限
+        const alarm_voltage_min_td = document.createElement('td');
+        if(system_alarm_data[i][2] == 0)
+        {
+            alarm_voltage_min_td.textContent = "电压已超下限"
+        }
+        else
+        {
+            alarm_voltage_min_td.textContent = "未报警"
+        }
+        dataList.appendChild(alarm_voltage_min_td);
+        //功率上限
+        const alarm_power_td = document.createElement('td');
+        if(system_alarm_data[i][3] == 0)
+        {
+            alarm_power_td.textContent = "功率已超上限"
+        }
+        else
+        {
+            alarm_power_td.textContent = "未报警"
+        }
+        dataList.appendChild(alarm_power_td);
+        //耗电量上限
+        const alarm_consump_td = document.createElement('td');
+        if(system_alarm_data[i][4] == 0)
+        {
+            alarm_consump_td.textContent = "耗电量已超上限"
+        }
+        else
+        {
+            alarm_consump_td.textContent = "未报警"
+        }
+        dataList.appendChild(alarm_consump_td);
+    }
+    renderPagination(totalPage);
+}
+function renderPagination(totalPage) {
+    const page3_pagination = document.getElementById('page3_pagination')
+    page3_pagination.innerHTML = '';
+    for (let i = 1; i <= totalPage; i++) {
+        const button = document.createElement('button');
+        button.textContent = i;
+        button.addEventListener('click', () => renderPage(i));
+        page3_pagination.appendChild(button);
+    }
+}

+ 45 - 0
f407/tools/web/JS/ws.js

@@ -0,0 +1,45 @@
+function on_ws_msg(bin){
+    ip_data()
+    var j = BIN.hdr.b2j(bin);
+    console.log(j)
+    //总电源数据显示
+    if (j.powert != undefined){
+        total_data = j.powert.total
+        total_Infor(j,total_data)
+    }
+    //通道电源数据显示
+    if(j.powerc != undefined){
+        channel_power_infro = j.powerc
+        channel_infro = channel_power_infro.power
+        threshold = j.powerc.thr
+        alarm = j.powerc.alarm
+        channel_number = j.powerc.info
+        channel_power = j.powerc.power
+        j_data = j
+        Channel_Info(j_data,channel_power_infro)
+        //threshold_mannage(j,channel_power_infro,threshold)
+        //populateTable(j_data,channel_power)
+    }
+    if(j.alarmd != undefined)
+    {
+        alarmd_data = j.alarmd
+        systemAlarm(alarmd_data)
+    }
+}
+
+function ws_hdr(){
+    var proto = window.location.protocol,ws;
+    if (proto == 'https:'){
+        ws = 'wss://';
+    }else{
+        ws = 'ws://';
+    }
+    return ws;
+}
+
+function ip_data()
+{
+    ip_href = window.location.href
+}
+
+ws = new WS('ws://192.168.234.132/ws',on_ws_msg);

+ 86 - 10
f407/tools/web/data.js

@@ -30,27 +30,28 @@ const SUB_TYPE=function(){
 }();
 
 const PDU_TYPE=function(){
+    var len = 0;
     return {
-    PDU_AC_I1O1:0,
-    PDU_DC_I1O1:1,
-    PDU_AC_I3O3:3,
-    PDU_AC_I3O1:4,
-    PDU_AC_I3O1_H:5,
+    PDU_AC_I1O1:len++,
+    PDU_DC_I1O1:len+=2,
+    PDU_AC_I3O3:len++,
+    PDU_AC_I3O1:len++,
+    PDU_AC_I3O1_H:len++,
     }
 }();
 ///////////////////////////////////////////////////////
 function array_to_string(data){
     const decoder = new TextDecoder();
-    return decoder.decode(data);
+    return decoder.decode(new Uint8Array(data));
 }
 
 function string_to_array(data,len){
     const encoder = new TextEncoder(); // ĬÈÏ'utf-8'±àÂë
     const buffer = encoder.encode(data);
     const fixedArray = new Uint8Array(len);
-    fixedArray.set(encoder.subarray(0, len), 0);
-    
-    return fixedArray.buffer
+    fixedArray.set(buffer);
+    fixedArray.fill(0, buffer.length);
+    return fixedArray.buffer;
 }
 function array_cat(a1,a2){
     var tlen=a1.byteLength+a2.byteLength;
@@ -100,6 +101,80 @@ function mk_hdr(type,flag)
     
     return buffer;
 }
+function pkt_to_bin(type,subtype,js)
+{
+    var tmp,tmp2,length=0;
+    var buffer = new ArrayBuffer(13);
+
+    tmp = new DataView(buffer, length);
+    var t = MAGIC;
+    tmp.setUint16(0,t,true);//magic
+    length += 2;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,type,true);  //type
+    length += 1;
+
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,subtype,true);     //subtype
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint8(0,0,true);     //nack
+    length += 1;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,0,true);     //flag
+    length += 4;
+    
+    tmp = new DataView(buffer, length);
+    tmp.setUint32(0,js.len,true);    //dlen
+    length += 4;
+    
+    switch(type){
+        case PKT_TYPE.PKT_TYPE_POWER_CH:
+            tmp2 = new powerc_to_bin(js);
+            break;
+
+        case PKT_TYPE.PKT_TYPE_POWER_TOTAL:
+            tmp2 = BIN.powert.j2b(js);
+            break;
+           
+       case PKT_TYPE.PKT_TYPE_ALARM:
+            tmp2 = BIN.alarm.j2b(js);
+            break;
+            
+       default:
+       return tmp2;
+    }
+    return array_cat(buffer,tmp2);
+}
+function bin_to_pkt(bin)
+{
+    var hdr = new bin_to_hdr(bin);
+    
+    var data = bin.slice(hdr.len);
+    if(data.byteLength>0 && hdr.dlen==data.byteLength) {
+        switch(hdr.type) {
+            case PKT_TYPE.PKT_TYPE_POWER_CH:
+                hdr.powerc = new bin_to_powerc(data);
+                break;
+
+            case PKT_TYPE.PKT_TYPE_POWER_TOTAL:
+                hdr.powert = BIN.powert.b2j(data);
+                break;
+               
+           case PKT_TYPE.PKT_TYPE_ALARM:
+                hdr.alarmd = BIN.alarmd.b2j(data);
+                break;
+            
+            default :
+                console.log("wrong hdr type: "+hdr.type);
+        }
+    }
+    return hdr;
+}
+
 ///////////////////////////////////////////////////
 function bin_to_hdr(bin) {
     var tmp, length=0;
@@ -677,7 +752,6 @@ var XXX ={};
 XXX.hdr = function() {
     this.j2b = function (js) {
         var tmp;
-        var hdr = new hdr_to_bin(js);
 
         switch(js.type){
             case PKT_TYPE.PKT_TYPE_POWER_CH:
@@ -695,6 +769,8 @@ XXX.hdr = function() {
            default:
            return tmp;
         }
+        js.dlen = tmp.byteLength;
+        var hdr = new hdr_to_bin(js);
         return array_cat(hdr,tmp);
     };
 

+ 256 - 26
f407/tools/web/index.html

@@ -2,35 +2,265 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>ws test</title>
-    <script src="data.js"></script>
+    <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>
 </head>
-    
 <body>
-    <script>
-    
-    function on_ws_msg(bin){
-        var j = BIN.hdr.b2j(bin);
-        console.log(j);   
-    }
-    function ws_hdr(){
-        var proto = window.location.protocol,ws;
-        if (proto == 'https:'){
-            ws = 'wss://';
-        }else{
-            ws = 'ws://';
-        }
-        return ws;
-    }
+    <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: 0%;">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>序号</th>
+                                <th>告警通道</th>
+                                <th>时间</th>
+                                <th>电流是否超上限告警</th>
+                                <th>电压是否超上限告警</th>  
+                                <th>电压是否超下限告警</th>  
+                                <th>功率是否超上限告警</th>  
+                                <th>耗电量是否超限告警</th>           
+                            </tr>
+                        </thead>
+                        <tbody id="system_alarm">
+                        </tbody>
+                    </table>
+                </div>
+                <div id="page3_pagination">
 
-    var ws = new WS("ws://192.168.234.132/ws",on_ws_msg);
-    
-    
-    
-    
-    </script>
-</body>
+                </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">
 
-</html>
+                </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>
+                        <button type="button" id="updateRow">确定</button>
+                        <button type="button" id="closeModal">取消</button>
+                      </form>
+                    </div>
+                  </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>