shuochen
/
apacsys-vaporrecoverymonitor


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
							<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>油气回收在线监控系统云平台</title>
    <style>
        .center {
            margin: auto;
            width: 60%;
            border: 3px solid #73AD21;
            padding: 10px;
        }
    </style>


    <style>
        p {
            margin: auto;
            width: 60%;
            border: 3px solid #73AD21;
            padding: 10px;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="./mystyle.css" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }


        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: rgb(15, 112, 150);
        }

        li a {
            display: block;
            color: white;
            padding: 8px 16px;
            text-decoration: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: rgb(26, 150, 167);
            color: white;
        }


        .button {
            background-color: rgb(63, 162, 201);
            /* Green */
            border: none;
            color: white;
            padding: 8px 14px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 12px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .button1 {
            border-radius: 2px;
        }

        .button2 {
            border-radius: 4px;
        }

        .button3 {
            border-radius: 8px;
        }
    </style>

    <style>
        #tb {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            width: 100%;
            border-collapse: collapse;
        }

        #tb td,
        #tb th {
            font-size: 1em;
            border: 1px solid #98bf21;
            padding: 3px 7px 2px 7px;
        }

        #tb th {
            font-size: 1.1em;
            text-align: left;
            padding-top: 5px;
            padding-bottom: 4px;
            background-color: #A7C942;
            color: #ffffff;
        }

        #tb tr.alt td {
            color: #000000;
            background-color: #EAF2D3;
        }

        #tb tr.undefined td {
            color: #000000;
            background-color: rgb(187, 187, 187);
        }

        #tb tr.exceed td {
            color: #000000;
            background-color: rgb(255, 226, 209);
        }
    </style>

</head>

<body onload="init()">

    <table>
        <tr>

            <td style="background-color:#ffffff;height:200px;width:3000px;" valign="top">

                <form method="POST">
                    油站标识:
                    <input type="text" name="userid" id="userid">
                    起始时间:
                    <input type="datetime-local" name="begdate1" id="begdate">
                    结束时间:
                    <input type="datetime-local" name="enddate" id="enddate">
                    <input type="button" class="button button2" value="查询" onclick="loadXMLDoc()">
                </form>
                <br>

                <table class="table" id="tb" border="1">
                    <thead>
                        <tr>
                            <th>index</th>
                            <th>用户标识</th>
                            <th>名称</th>
                            <th>气液比</th>
                            <th>P/V阀状态</th>
                            <th>时间</th>
                            <th>ip</th>
                        </tr>
                    </thead>

                    <tbody id="tbMain"></tbody>
                </table>

            </td>
        </tr>

    </table>


    <div id='waiting'>
        <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
        </div>
    </div>


    <script>
        function loadXMLDoc() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = JSON.parse(xmlhttp.responseText);
                    var s = '';

                    var m = new Map();
                    m.set('1101080059', '北京北沙滩');
                    m.set('3301030001', '杭州石祥路');
                    m.set('1101070013', '北京永定林');
                    m.set('1101080031', '北京西三旗');
                    m.set('8301030001', '测试');

                    for (var i = 0; i < data.length; i++) {
                        var trstr = '<tr>';
                        if (i % 2 == 1) {
                            trstr = '<tr class = "alt">'
                        }
                        // if(data[i]['al'] < 1 || data[i]['al'] >1.2)
                        // {
                        //     trstr = '<tr class = "exceed">'
                        // }
                        if (!m.get(data[i]['userid'])) {
                            trstr = '<tr class = "undefined">'
                        }
                        s += trstr
                            + '<td>' + (i + 1) + '</td>'
                            + '<td>' + data[i]['userid'] + '</td>'
                            + '<td>' + m.get(data[i]['userid']) + '</td>'
                            + '<td>' + data[i]['al'] + '</td>'
                            + '<td>' + data[i]['pv'] + '</td>'
                            + '<td>' + data[i]['monitorTime'] + '</td>'
                            + '<td>' + data[i]['ip'] + '</td>'
                            + '</tr>'
                    }

                    var t = document.getElementById("tbMain");
                    t.innerHTML = s;


                    var w = document.getElementById('waiting');
                    w.style.display = "none";
                }
            }
            xmlhttp.open("POST", "/dataquery", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");


            var Control = document.querySelector("#userid");
            var userid = Control.value;


            var sendstr = "type=warning";//warning

            sendstr += "&&userid=" + userid;

            var dateControl = document.querySelector("#begdate");
            sendstr += "&&begdate=" + dateControl.value

            dateControl = document.querySelector("#enddate");
            sendstr += "&&enddate=" + dateControl.value

            xmlhttp.send(sendstr);

            var t = document.getElementById("tbMain");
            t.innerHTML = '';

            var w = document.getElementById('waiting');
            w.style.display = "block";
        }
    </script>

    <script>
        function init() {
            getbegtime();
            loadXMLDoc();
        }

        function getbegtime() {
            var today = new Date();
            var yyyy = today.getFullYear();
            var MM = today.getMonth() + 1;
            var dd = today.getDate();
            var hh = today.getHours();
            var mm = today.getMinutes();
            MM = checkTime(MM);
            dd = checkTime(dd);
            mm = checkTime(mm);
            var time = yyyy + "-" + MM + "-" + dd + "T" + hh + ":" + mm;
            var begtime = yyyy + "-" + MM + "-" + dd + "T00:00"
            var endtime = yyyy + "-" + MM + "-" + dd + "T23:59"

            var dateControl = document.querySelector("#begdate");
            dateControl.value = begtime;

            dateControl = document.querySelector("#enddate");
            dateControl.value = endtime;

            function checkTime(i) {
                if (i < 10) {
                    i = "0" + i;
                }
                return i;
            }
        }

    </script>


</body>

</html>