{% extends 'base.html' %} {% block css%}
<style type="text/css">
    .title1 {
    font-size: 14px;
    /* font-weight: bold; */
    }
    .val1{
        font-size: 16px;
    }

    .base_info {
        font-size: 14px;
        font-weight: bolder;
        color: black;
    }

    .val1_temp_hum {
        font-size: 20px;
        font-weight: bolder;
        color: red;
    }

    .val1_temp_hum_null {
        font-size: 22px;
        font-weight: bolder;
        color: #999;
    }

    .val1_control_temp_hum {
        font-size: 14px;
        font-weight: bold;
        background-color: #e6ff00;
        padding: 3px;
        border-radius: 6px;
        color: blue;
    }


    .tag_a {
        font-size: 12px;
        background-color:#0de828;
        border-color: blue;
        padding: 3px;
        border-radius: 5px;
        color:white;
    }

    .tag_b {
        font-size: 12px;
        background-color:darkorange;
        /* border-color: blue; */
        padding: 3px;
        border-radius: 5px;
        color:#fff;
    }

    .tag_c {
        font-size: 12px;
        background-color:cornflowerblue;
        /* border-color: blue; */
        padding: 3px;
        border-radius: 5px;
        color:#fff;
    }

    .unit1{
        font-size: 10px;
        background-color:#eee;
        border-radius: 5px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .val1_run {
        font-size: 16px;
        background-color: red;
        color:white;
        border-radius: 3px;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .val1_not_run {
        font-size: 16px;
        background-color: #000;
        color:white;
        border-radius: 5px;
        padding: 5px;
    }
    .val1_state {
        font-size: 14px;
        /* color: #0de828; */
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 5px;
        padding-bottom: 5px;
        background: #0de828;
        border-radius: 5px;
    }
</style>
{% endblock %} {% block body%}
<div class="row">
    <div class="col-md-4">
            <!-- <img width="24%" alt="logo" src="{{url_for('static',filename='assets/logo.jpg')}}"> -->
        <table class="table">
            <tr>
                <td>
                    <span class="title1">系统时间</span>
                </td>
                <td colspan=4>
                    <span class="base_info" id="system_time">---</span>
                </td>
            </tr>

            <tr>
                <td>
                    <span class="title1">设备编号</span>
                </td>
                <td>
                    <span class="base_info" id="device_id">---</span>
                </td>
                <td>
                    <span class="title1">记录间隔</span>
                </td>
                <td>
                    <span class="base_info" id="record_interval">---</span>
                    <span class="unit1" class="pull-right">次/小时</span>
                </td>
                
            </tr>
            <tr>
                <td>
                    <span class="title1">运行时间</span>
                </td>
                <td>
                    <span class="base_info" id="run_time">---</span>
                    <span class="unit1" class="pull-right">天</span>
                </td>
                <td>
                    <span class="title1">当前状态</span>
                </td>
                <td>
                    <span class="base_info" id="run_status">----</span>
                </td>
            </tr>  
         
            <tr >
       
                <td colspan="4" >
                    <span class="pull-right">
                    <button class="btn btn-primary" id="btn1_inst_pause">
                        <i class='glyphicon glyphicon-step-forward'></i> &nbsp;
                        开始/停止
                    </button>

                    <button class="btn btn-danger" id="btn1_inst_reboot">
                        <i class='glyphicon glyphicon-repeat'></i> &nbsp;
                        重启仪表
                    </button>

                    <button class="btn btn-primary" id="btn1_inst_reboot1">
                        开/关测试
                    </button>

                    <button class="btn btn-primary" id="btn1_inst_reboot1_stop">
                        停止测试
                    </button>
                </span>
                </td>
            </tr>           

        </table>

        <!-- <div id="ch_1_temp" style="width: 350px;height:200px;"></div>
        <div id="ch_1_hum" style="width: 350px;height:200px;"></div> -->
        <div id="ch_1_temp_hum" style="width:100%; height:200px; object-fit:fill"></div>
        <div id="ch_2_temp_hum" style="width:100%; height:200px; object-fit:fill"></div>
        <a href="/history_chart" class="pull-right">更多...</a>
    </div>

    <div class="col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                CH1
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td width="25%">
                            <span class="title1">温度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="temp_1">---</span>
        
                            <span class="pull-right">
                                <span class="tag_b" id="temp_status_info_1">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td width="10%">
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">湿度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="hum_1">---</span>
                            <span class="pull-right">
                                <span class="tag_c" id="humi_status_info_1">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定温度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_temp_1">20.0</span>
                                ± 
                                <span id="control_temp_1">1.0</span>
                            </span>
                            &nbsp;
                            <span class="pull-right">
                                <span class="tag_a" id="control_mode_1">
                                    ----
                                </span>
                                <!-- &nbsp; -->
                                <span class="tag_a" id="control_method_1">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定湿度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_hum_1">20.0</span>
                                ± 
                                <span id="control_hum_1">1.0</span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                CH2
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td width="25%">
                            <span class="title1">温度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="temp_2">---</span>
                            <span class="pull-right">
                                <span class="tag_b" id="temp_status_info_2">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td width="10%">
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">湿度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="hum_2">---</span>
                            <span class="pull-right">
                                <span class="tag_c" id="humi_status_info_2">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定温度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_temp_2">----</span>
                                ± 
                                <span id="control_temp_2">----</span>
                            </span>
                            &nbsp;
                            <span class="pull-right">
                                <span class="tag_a" id="control_mode_2">
                                    ----
                                </span>
                                <!-- &nbsp; -->
                                <span class="tag_a" id="control_method_2">
                                    ----
                                </span>
                            </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定湿度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_hum_2">----</span>
                                ± 
                                <span id="control_hum_2">----</span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>


    </div>

    <div class="col-md-4">

        <div class="panel panel-default">
            <div class="panel-heading">
                CH3
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td width="25%">
                            <span class="title1">温度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="temp_3">---</span>
                            
                            <span class="pull-right">
                                <span class="tag_b" id="temp_status_info_3">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td width="10%">
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">湿度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="hum_3">---</span>
                            <span class="pull-right">
                                <span class="tag_c" id="humi_status_info_3">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定温度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_temp_3">----</span>
                                ± 
                                <span id="control_temp_3">----</span>
                            </span>
                            &nbsp;
                            <span class="pull-right">
                                <span class="tag_a" id="control_mode_3">
                                    ----
                                </span>
                                <!-- &nbsp; -->
                                <span class="tag_a" id="control_method_3">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定湿度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_hum_3">----</span>
                                ± 
                                <span id="control_hum_3">----</span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                CH4
            </div>
            <div class="panel-body">
                <table class="table">
                    <tr>
                        <td width="25%">
                            <span class="title1">温度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="temp_4">---</span>
                            <span class="pull-right">
                                <span class="tag_b" id="temp_status_info_4">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td width="10%">
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">湿度</span>
                        </td>
                        <td>
                            <span class="val1_temp_hum" id="hum_4">---</span>
                            <span class="pull-right">
                                <span class="tag_c" id="humi_status_info_4">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定温度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_temp_4">----</span>
                                ± 
                                <span id="control_temp_4">----</span>
                            </span>
                            &nbsp;
                            <span class="pull-right">
                                <span class="tag_a" id="control_mode_4">
                                    ----
                                </span>
                                <!-- &nbsp; -->
                                <span class="tag_a" id="control_method_4">
                                    ----
                                </span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">ºC</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="title1">设定湿度</span>
                        </td>
                        <td>
                            <span class="val1_control_temp_hum">
                                <span id="target_hum_4">----</span>
                                ± 
                                <span id="control_hum_4">----</span>
                            </span>
                        </td>
                        <td>
                            <span class="unit1">%&nbsp;</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <span class="pull-right">
            <i style="color:#ccc; font-size:12px" class="glyphicon glyphicon-exclamation-sign" title="数据30S秒更新一次, 如未更新，请手动刷新."></i>
            &nbsp;
            <span id="update_time" style="color:#ccc; font-size:12px">更新于：0000-00-00 00:00:00</span>

        </span>
    </div>


</div>

{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">

var REFRESSH_INTERVALS = 30;
var t;
var t1;

// var myChart_ch1_temp = echarts.init(document.getElementById('ch_1_temp'));
// var myChart_ch1_hum = echarts.init(document.getElementById('ch_1_hum'));
var myChart_ch1_temp_hum = echarts.init(document.getElementById('ch_1_temp_hum'));
var myChart_ch2_temp_hum = echarts.init(document.getElementById('ch_2_temp_hum'));
// var myChart_ch3_temp_hum = echarts.init(document.getElementById('ch_3_temp_hum'));
// var myChart_ch4_temp_hum = echarts.init(document.getElementById('ch_4_temp_hum'));

function get_temp_hum_chart_data()
{
    var colors = ['#5793f3', '#d14a61', '#675bba'];
    $.post(
            "api/get_temp_hum_chart_data_by_ch", {
                //ch:ch
            },
            function(data, status) {
                d = JSON.parse(data);
                // console.log("d: " + d);
                // console.log("d0: " + d[0]);
                // console.log("d1: " + d[1]);
                var option1 = {
                    color: colors,
                    title: {
                        text: 'CH1 温/湿度历史数据'
                    },
                    tooltip: {},
                    legend: {
                        data:['温度°C', '湿度%']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: d[0]
                        }
                    ],

                    yAxis: [
                        {
                            type: 'value',
                            name: '温度',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            // axisLabel: {
                            //     formatter: '{value} °C'
                            // }
                        },
                        {
                            type: 'value',
                            name: '湿度',
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                            // axisLabel: {
                            //     formatter: '{value} %'
                            // }
                        }
                    ],
                    series: [
                            {
                                name: '温度',
                                type: 'bar',
                                data: d[1]
                            },
                            {
                                name: '湿度',
                                type: 'bar',
                                data: d[2]
                            }
                        ]
                    };
                myChart_ch1_temp_hum.setOption(option1);

                // the following are demos
                var option2 = {
                    color: colors,
                    title: {
                        text: 'CH2 温/湿度历史数据'
                    },
                    tooltip: {},
                    legend: {
                        data:['温度°C', '湿度%']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: d[0]
                        }
                    ],

                    yAxis: [
                        {
                            type: 'value',
                            name: '温度',
                            axisLine: {
                                lineStyle: {
                                    color: colors[0]
                                }
                            },
                            // axisLabel: {
                            //     formatter: '{value} °C'
                            // }
                        },
                        {
                            type: 'value',
                            name: '湿度',
                            axisLine: {
                                lineStyle: {
                                    color: colors[1]
                                }
                            },
                            // axisLabel: {
                            //     formatter: '{value} %'
                            // }
                        }
                    ],
                    series: [
                            {
                                name: '温度',
                                type: 'bar',
                                data: d[3]
                            },
                            {
                                name: '湿度',
                                type: 'bar',
                                data: d[4]
                            }
                        ]
                    };
                myChart_ch2_temp_hum.setOption(option2);


            }
        );

}

function dashboard_get_info1()
{
    $.post(
            "api/dashboard_get_info1", {
            },
            function(data, status) {
                console.log("data: " + data);
                // toastr["success"]("数据已刷新.");
                d = JSON.parse(data);
                $.each(d,function(index,value){
                        if (value == "" || value == "hide")
                            $("#"+ index).hide();	
                        else
                            $("#"+ index).html(value);	

                        if (index == "run_status")
                        {
                            if (value == "运行")
                            {
                                $("#run_status").attr("class", "val1_run");

                            }
                            else
                            {
                                $("#run_status").attr("class", "val1_not_run");
                            }
                        }	
                });

                t = setTimeout(dashboard_get_info1, REFRESSH_INTERVALS * 1000);
            }
        );
}


function inst_reboot()
{
    $.post(
        "api/inst_reboot", {
        },
        function(data, status) {
            toastr["success"]("命令已下发, 成功.");
            console.log("data: " + data);
        }
    );
}

function inst_reboot1()
{
    $.post(
        "api/inst_pause", {
        },
        function(data, status) {
            dashboard_get_info1();

            $.post(
                "api/my_sleep", {
                    sleep_t:5
                },
                function(data, status) {
                    //after sleep 5s ....
                    $.post(
                        "api/inst_pause", {
                        },
                        function(data, status) {
                            dashboard_get_info1();
                        }
                    );                 
                }
            );
        }
    );

    t1 = setTimeout(inst_reboot1, 120*1000);
}
             



$(document).ready(function() {

    dashboard_get_info1();
    get_temp_hum_chart_data();



    $("#btn1_inst_pause").click(function() {
    
        $.post(
            "api/inst_pause", {
            },
            function(data, status) {
                toastr["success"]("命令已下发, 成功.");
                console.log("data: " + data);
                dashboard_get_info1();
            }
        );
    
    });


    $("#btn1_inst_reboot").click(function() {
        a = confirm("重启设备, 确定？");
        if(a)
        {
            inst_reboot();
        }
    });

    $("#btn1_inst_reboot1").click(function() {
        inst_reboot1();
    });

    $("#btn1_inst_reboot1_stop").click(function() {
        clearTimeout(t1);
        toastr["success"]("测试已停止.");
    });


});
</script>
{% endblock %}